SQuiz/frontPanel
3
0
Fork 0
Code Issues 18 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

add remaining question preview tests

Browse Source
This commit is contained in:
nflnkr 2023-11-07 20:21:40 +03:00
parent cf887e1bbe
commit d10a018e2f
10 changed files with 128 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
cypress/e2e/quizPreview.cy.ts
View File

@ -1,5 +1,9 @@
describe("Quiz preview", () => {
beforeEach(() => {
cy.fixture("image1.png", null, {}).as("image1");
cy.fixture("image2.png", null, {}).as("image2");
cy.fixture("image3.png", null, {}).as("image3");
cy.visit("/list");
cy.get("[data-cy=create-quiz]").click();
@ -53,26 +57,22 @@ describe("Quiz preview", () => {
describe("Image question", () => {
beforeEach(function setupQuestion() {
cy.fixture("image1.png", null).as("image1");
cy.fixture("image2.png", null).as("image2");
cy.fixture("image3.png", null).as("image3");
cy.get("[data-cy=select-questiontype-images]").click();
cy.get("[data-cy=quiz-question-card]").eq(0).within(() => {
cy.get("[data-cy=quiz-question-title]").type("Question Title");
cy.get("[data-cy=quiz-variant-question-answer]").eq(0).type("Answer 1{enter}");
cy.get("[data-cy=add-variant-image-button]").eq(0).click();
cy.get("[data-cy=add-image-button]").eq(0).click();
cy.get("[data-cy=upload-image-input]", { withinSubject: null }).selectFile("@image1", { force: true });
cy.get("[data-cy=crop-modal-save-button]", { withinSubject: null }).click();
cy.get("[data-cy=quiz-variant-question-answer]").eq(1).type("Answer 2{enter}");
cy.get("[data-cy=add-variant-image-button]").eq(1).click();
cy.get("[data-cy=add-image-button]").eq(1).click();
cy.get("[data-cy=upload-image-input]", { withinSubject: null }).selectFile("@image2", { force: true });
cy.get("[data-cy=crop-modal-save-button]", { withinSubject: null }).click();
cy.get("[data-cy=quiz-variant-question-answer]").eq(2).type("Answer 3");
cy.get("[data-cy=add-variant-image-button]").eq(2).click();
cy.get("[data-cy=add-image-button]").eq(2).click();
cy.get("[data-cy=upload-image-input]", { withinSubject: null }).selectFile("@image3", { force: true });
cy.get("[data-cy=crop-modal-save-button]", { withinSubject: null }).click();
});
@ -85,6 +85,7 @@ describe("Quiz preview", () => {
cy.get("[data-cy=variant-button] > img").eq(2).should("have.attr", "src").and("match", /^blob:.+/);
cy.get("[data-cy=variant-button]").eq(0).click();
// TODO check for images
cy.get("[data-cy=variant-button]").eq(0).should("have.attr", "data-checked", "true");
cy.get("[data-cy=variant-button]").eq(1).should("have.attr", "data-checked", "false");
cy.get("[data-cy=variant-button]").eq(2).should("have.attr", "data-checked", "false");
@ -132,26 +133,22 @@ describe("Quiz preview", () => {
describe("Varimg question", () => {
beforeEach(function setupQuestion() {
cy.fixture("image1.png", null).as("image1");
cy.fixture("image2.png", null).as("image2");
cy.fixture("image3.png", null).as("image3");
cy.get("[data-cy=select-questiontype-varimg]").click();
cy.get("[data-cy=quiz-question-card]").eq(0).within(() => {
cy.get("[data-cy=quiz-question-title]").type("Question Title");
cy.get("[data-cy=quiz-variant-question-answer]").eq(0).type("Answer 1{enter}");
cy.get("[data-cy=add-variant-image-button]").eq(0).click();
cy.get("[data-cy=add-image-button]").eq(0).click();
cy.get("[data-cy=upload-image-input]", { withinSubject: null }).selectFile("@image1", { force: true });
cy.get("[data-cy=crop-modal-save-button]", { withinSubject: null }).click();
cy.get("[data-cy=quiz-variant-question-answer]").eq(1).type("Answer 2{enter}");
cy.get("[data-cy=add-variant-image-button]").eq(1).click();
cy.get("[data-cy=add-image-button]").eq(1).click();
cy.get("[data-cy=upload-image-input]", { withinSubject: null }).selectFile("@image2", { force: true });
cy.get("[data-cy=crop-modal-save-button]", { withinSubject: null }).click();
cy.get("[data-cy=quiz-variant-question-answer]").eq(2).type("Answer 3");
cy.get("[data-cy=add-variant-image-button]").eq(2).click();
cy.get("[data-cy=add-image-button]").eq(2).click();
cy.get("[data-cy=upload-image-input]", { withinSubject: null }).selectFile("@image3", { force: true });
cy.get("[data-cy=crop-modal-save-button]", { withinSubject: null }).click();
});
@ -288,14 +285,17 @@ describe("Quiz preview", () => {
describe("Select question", () => {
beforeEach(function setupQuestion() {
cy.get("[data-cy=select-questiontype-select]").click();
cy.get("[data-cy=quiz-question-card]").eq(0).within(() => {
cy.get("[data-cy=quiz-question-title]").type("Question Title");
cy.get("[data-cy=quiz-variant-question-answer]").eq(0).type("Answer 1{enter}");
cy.get("[data-cy=quiz-variant-question-answer]").eq(1).type("Answer 2{enter}");
cy.get("[data-cy=quiz-variant-question-answer]").eq(2).type("Answer 3");
});
});
it("should contain title and select, and be selected properly", () => {
cy.get("[data-cy=quiz-preview-layout]").within(() => {
cy.get("[data-cy=question-title]").should("have.text", "Question Title");
cy.get("[data-cy=select]").click();
cy.get("[data-cy=select-option]", { withinSubject: null }).eq(0).click();
cy.get("[data-cy=select] #category-select").should("have.text", "Answer 1");
@ -308,4 +308,99 @@ describe("Quiz preview", () => {
});
});
});
describe("Date question", () => {
beforeEach(function setupQuestion() {
cy.get("[data-cy=select-questiontype-date]").click();
cy.get("[data-cy=quiz-question-card]").eq(0).within(() => {
cy.get("[data-cy=quiz-question-title]").type("Question Title");
});
});
it("should contain title and datepicker", () => {
cy.get("[data-cy=quiz-preview-layout]").within(() => {
cy.get("[data-cy=question-title]").should("have.text", "Question Title");
cy.get("[data-cy=open-datepicker]").should("exist");
});
});
});
describe("Number question", () => {
beforeEach(function setupQuestion() {
cy.get("[data-cy=select-questiontype-number]").click();
cy.get("[data-cy=quiz-question-card]").eq(0).within(() => {
cy.get("[data-cy=quiz-question-title]").type("Question Title");
cy.get("[data-cy=textfield]").eq(0).type("{selectall}{backspace}10");
cy.get("[data-cy=textfield]").eq(1).type("{selectall}{backspace}90");
cy.get("[data-cy=textfield]").eq(2).type("{selectall}{backspace}50");
cy.get("[data-cy=textfield]").eq(3).type("{selectall}{backspace}5");
});
});
it("should contain title and slider", () => {
cy.get("[data-cy=quiz-preview-layout]").within(() => {
cy.get("[data-cy=question-title]").should("have.text", "Question Title");
cy.get("[data-cy=slider]").should("exist");
});
});
});
describe("File question", () => {
beforeEach(function setupQuestion() {
cy.get("[data-cy=select-questiontype-file]").click();
cy.get("[data-cy=quiz-question-card]").eq(0).within(() => {
cy.get("[data-cy=quiz-question-title]").type("Question Title");
});
});
it("should contain title and filepicker", () => {
cy.get("[data-cy=quiz-preview-layout]").within(() => {
cy.get("[data-cy=question-title]").should("have.text", "Question Title");
cy.get("[data-cy=file-upload-input]").selectFile("@image1", { force: true });
cy.get("[data-cy=chosen-file-name]").should("contain.text", "Выбран файл:");
});
});
});
describe("Page question", () => {
beforeEach(function setupQuestion() {
cy.get("[data-cy=select-questiontype-page]").click();
cy.get("[data-cy=quiz-question-card]").eq(0).within(() => {
cy.get("[data-cy=quiz-question-title]").type("Question Title");
cy.get("[data-cy=textfield]").type("Some text");
cy.get("[data-cy=add-image-button]").eq(0).click();
cy.get("[data-cy=upload-image-input]", { withinSubject: null }).selectFile("@image1", { force: true });
cy.get("[data-cy=crop-modal-save-button]", { withinSubject: null }).click();
});
});
it("should contain title and filepicker", () => {
cy.get("[data-cy=quiz-preview-layout]").within(() => {
cy.get("[data-cy=question-title]").should("have.text", "Question Title");
cy.get("[data-cy=question-text]").should("have.text", "Some text");
cy.get("img").invoke("attr", "src").should("match", /^blob:.+/);
});
});
});
describe.only("Rating question", () => {
beforeEach(function setupQuestion() {
cy.get("[data-cy=select-questiontype-rating]").click();
cy.get("[data-cy=quiz-question-card]").eq(0).within(() => {
cy.get("[data-cy=quiz-question-title]").type("Question Title");
});
});
it("should contain title and filepicker", () => {
cy.get("[data-cy=quiz-preview-layout]").within(() => {
cy.get("[data-cy=question-title]").should("have.text", "Question Title");
cy.get("[data-cy=rating-button]").should("have.length", 5);
cy.get("[data-cy=rating-button]").eq(2).click();
cy.get("[data-cy=rating]").should("have.attr", "data-rating", 3);
cy.get("[data-cy=rating-button]").eq(4).click();
cy.get("[data-cy=rating]").should("have.attr", "data-rating", 5);
});
});
});
});

2
src/ui_kit/AddOrEditImageButton.tsx
View File

@ -50,7 +50,7 @@ export default function AddOrEditImageButton({ onImageClick, onPlusClick, sx, im
</Button>
<Button
onClick={onPlusClick}
data-cy="add-variant-image-button"
data-cy="add-image-button"
sx={{
p: 0,
minWidth: "20px",

1
src/ui_kit/CustomSlider.tsx
View File

@ -33,6 +33,7 @@ export const CustomSlider = ({
step={step}
onChange={handleChange}
valueLabelDisplay="auto"
data-cy="slider"
sx={{
color: "#7E2AEA",
height: "12px",

1
src/ui_kit/LabeledDatePicker.tsx
View File

@ -45,6 +45,7 @@ export default function LabeledDatePicker({ label, value, onChange, sx }: Props)
sx: {
p: 0,
},
"data-cy": "open-datepicker",
},
}}
sx={{

2
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Date.tsx
View File

@ -16,7 +16,7 @@ export default function Date({ question }: Props) {
gap: 1,
}}
>
<Typography variant="h6">{question.title}</Typography>
<Typography variant="h6" data-cy="question-title">{question.title}</Typography>
<LabeledDatePicker />
</Box>
);

5
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/File.tsx
View File

@ -44,7 +44,7 @@ export default function File({ question }: Props) {
gap: 1,
}}
>
<Typography variant="h6">{question.title}</Typography>
<Typography variant="h6" data-cy="question-title">{question.title}</Typography>
<Button variant="contained" onClick={() => fileInputRef.current?.click()}>
Загрузить файл
<input
@ -52,12 +52,13 @@ export default function File({ question }: Props) {
onChange={handleFileChange}
type="file"
accept={acceptedType}
data-cy="file-upload-input"
style={{
display: "none",
}}
/>
</Button>
{file && <Typography>Выбран файл: {file.name}</Typography>}
{file && <Typography data-cy="chosen-file-name">Выбран файл: {file.name}</Typography>}
</Box>
);
}

2
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Number.tsx
View File

@ -32,7 +32,7 @@ export default function Number({ question }: Props) {
gap: 1,
}}
>
<Typography variant="h6">{question.title}</Typography>
<Typography variant="h6" data-cy="question-title">{question.title}</Typography>
<Box
sx={{
px: 2,

4
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Page.tsx
View File

@ -16,8 +16,8 @@ export default function Page({ question }: Props) {
gap: 1,
}}
>
<Typography variant="h6">{question.title}</Typography>
<Typography>{question.content.text}</Typography>
<Typography variant="h6" data-cy="question-title">{question.title}</Typography>
<Typography data-cy="question-text">{question.content.text}</Typography>
{question.content.picture && (
<img
src={question.content.picture}

5
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Rating.tsx
View File

@ -55,7 +55,7 @@ export default function Rating({ question }: Props) {
gap: 1,
}}
>
<Typography variant="h6">{question.title}</Typography>
<Typography variant="h6" data-cy="question-title">{question.title}</Typography>
<Box
sx={{
display: "flex",
@ -65,6 +65,8 @@ export default function Rating({ question }: Props) {
}}
>
<Box
data-cy="rating"
data-rating={selectedRating}
sx={{
display: "flex",
gap: isMobile ? "10px" : "15px",
@ -78,6 +80,7 @@ export default function Rating({ question }: Props) {
<Box
key={itemNumber}
onClick={() => setSelectedRating(itemNumber + 1)}
data-cy="rating-button"
sx={{
cursor: "pointer",
transform: "scale(1.5)",

2
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Select.tsx
View File

@ -32,7 +32,7 @@ export default function Text({ question }: Props) {
gap: 1,
}}
>
<Typography variant="h6">{question.title}</Typography>
<Typography variant="h6" data-cy="question-title">{question.title}</Typography>
<FormControl
fullWidth
size="small"