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

add images and varimg preview tests

Browse Source
This commit is contained in:
nflnkr 2023-11-04 20:04:24 +03:00
parent 87760f3498
commit 629e0c37c6
18 changed files with 198 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,10 +15,11 @@ describe("Quiz preview", () => {
});
describe("Variant question", () => {
beforeEach(function fillTitleAndOptions() {
beforeEach(function setupQuestion() {
cy.get("[data-cy=select-questiontype-variant]").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");
@ -49,4 +50,153 @@ 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=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=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=upload-image-input]", { withinSubject: null }).selectFile("@image3", { force: true });
cy.get("[data-cy=crop-modal-save-button]", { withinSubject: null }).click();
});
});
it("should contain title and options, and be selected properly", () => {
cy.get("[data-cy=quiz-preview-layout]").within(() => {
cy.get("[data-cy=variant-button] > img").eq(0).should("have.attr", "src").and("match", /^blob:.+/);
cy.get("[data-cy=variant-button] > img").eq(1).should("have.attr", "src").and("match", /^blob:.+/);
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();
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");
cy.get("[data-cy=variant-button]").eq(1).click();
cy.get("[data-cy=variant-button]").eq(0).should("have.attr", "data-checked", "false");
cy.get("[data-cy=variant-button]").eq(1).should("have.attr", "data-checked", "true");
cy.get("[data-cy=variant-button]").eq(2).should("have.attr", "data-checked", "false");
cy.get("[data-cy=variant-button]").eq(2).click();
cy.get("[data-cy=variant-button]").eq(0).should("have.attr", "data-checked", "false");
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", "true");
});
});
it("should work with multiple selection mode", () => {
cy.get("[data-cy=quiz-question-card]").eq(0).within(() => {
cy.get("[data-cy=multiple-answers-checkbox]").click();
});
cy.get("[data-cy=quiz-preview-layout]").within(() => {
cy.get("[data-cy=variant-button]").eq(0).click();
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");
cy.get("[data-cy=variant-button]").eq(1).click();
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", "true");
cy.get("[data-cy=variant-button]").eq(2).should("have.attr", "data-checked", "false");
cy.get("[data-cy=variant-button]").eq(2).click();
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", "true");
cy.get("[data-cy=variant-button]").eq(2).should("have.attr", "data-checked", "true");
cy.get("[data-cy=variant-button]").eq(0).click();
cy.get("[data-cy=variant-button]").eq(0).should("have.attr", "data-checked", "false");
cy.get("[data-cy=variant-button]").eq(1).should("have.attr", "data-checked", "true");
cy.get("[data-cy=variant-button]").eq(2).should("have.attr", "data-checked", "true");
});
});
});
describe.only("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=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=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=upload-image-input]", { withinSubject: null }).selectFile("@image3", { force: true });
cy.get("[data-cy=crop-modal-save-button]", { withinSubject: null }).click();
});
});
it("should contain title and options, and be selected properly", function () {
cy.get("[data-cy=quiz-preview-layout]").within(() => {
cy.get("[data-cy=variant-title]").should("have.text", "Question Title");
cy.get("[data-cy=variant-title]").should("have.text", "Question Title");
cy.get("[data-cy=variant-answer]").eq(0).should("have.text", "Answer 1");
cy.get("[data-cy=variant-answer]").eq(1).should("have.text", "Answer 2");
cy.get("[data-cy=variant-answer]").eq(2).should("have.text", "Answer 3");
cy.get("[data-cy=variant-answer]").eq(0).click();
cy.get("[data-cy=variant-radio]").eq(0).should("be.checked");
cy.get("[data-cy=variant-radio]").eq(1).should("not.be.checked");
cy.get("[data-cy=variant-radio]").eq(2).should("not.be.checked");
cy.get("[data-cy=variant-image]")
.invoke("attr", "src")
.should("match", /^blob:.+/)
.as("src1", { type: "static" });
cy.get("[data-cy=variant-answer]").eq(1).click();
cy.get("[data-cy=variant-radio]").eq(0).should("not.be.checked");
cy.get("[data-cy=variant-radio]").eq(1).should("be.checked");
cy.get("[data-cy=variant-radio]").eq(2).should("not.be.checked");
cy.get("[data-cy=variant-image]")
.invoke("attr", "src")
.should("match", /^blob:.+/)
.then(src2 => {
cy.get("@src1").should("not.equal", src2);
});
cy.get("[data-cy=variant-answer]").eq(2).click();
cy.get("[data-cy=variant-radio]").eq(0).should("not.be.checked");
cy.get("[data-cy=variant-radio]").eq(1).should("not.be.checked");
cy.get("[data-cy=variant-radio]").eq(2).should("be.checked");
cy.get("[data-cy=variant-image]")
.invoke("attr", "src")
.should("match", /^blob:.+/)
.then(src3 => {
cy.get("@src1").should("not.equal", src3);
});
});
});
});
});

BIN
cypress/fixtures/image1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 170 KiB

BIN
cypress/fixtures/image2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 83 KiB

BIN
cypress/fixtures/image3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 124 KiB

32
src/pages/Questions/AnswerDraggableList/AnswerItem.tsx
View File

@ -23,14 +23,13 @@ import type { ChangeEvent, KeyboardEvent, ReactNode } from "react";
import type { DroppableProvided } from "react-beautiful-dnd";
import type { QuizQuestionVariant } from "../../../model/questionTypes/variant";
import type { QuestionVariant } from "../../../model/questionTypes/shared";
import type { ImageQuestionVariant, QuestionVariant } from "../../../model/questionTypes/shared";
type AnswerItemProps = {
index: number;
totalIndex: number;
variants: QuestionVariant[];
variant: QuestionVariant;
variants: (QuestionVariant | ImageQuestionVariant)[];
variant: QuestionVariant | ImageQuestionVariant;
provided: DroppableProvided;
additionalContent?: ReactNode;
additionalMobile?: ReactNode;
@ -48,12 +47,12 @@ export const AnswerItem = ({
const quizId = Number(useParams().quizId);
const { listQuestions } = questionStore();
const theme = useTheme();
const question = listQuestions[quizId][totalIndex] as QuizQuestionVariant;
const question = listQuestions[quizId][totalIndex];
const isTablet = useMediaQuery(theme.breakpoints.down(790));
const debounced = useDebouncedCallback((value) => {
const answerNew = variants.slice();
answerNew[index].answer = value;
updateQuestionsList<QuizQuestionVariant>(quizId, totalIndex, {
updateQuestionsList(quizId, totalIndex, {
content: {
...question.content,
variants: answerNew,
@ -61,7 +60,6 @@ export const AnswerItem = ({
});
}, 1000);
console.log(provided)
const [isOpen, setIsOpen] = useState(false);
const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
@ -77,9 +75,14 @@ console.log(provided)
const addNewAnswer = () => {
const answerNew = variants.slice();
answerNew.push({ answer: "", extendedText: "", hints: "" });
updateQuestionsList<QuizQuestionVariant>(quizId, totalIndex, {
if (["images", "varimg"].includes(question.type)) {
answerNew.push({ answer: "", hints: "", extendedText: "", originalImageUrl: "" });
} else {
answerNew.push({ answer: "", extendedText: "", hints: "" });
}
updateQuestionsList(quizId, totalIndex, {
content: { ...question.content, variants: answerNew },
});
};
@ -88,7 +91,7 @@ console.log(provided)
const answerNew = variants.slice();
answerNew.splice(index, 1);
updateQuestionsList<QuizQuestionVariant>(quizId, totalIndex, {
updateQuestionsList(quizId, totalIndex, {
content: { ...question.content, variants: answerNew },
});
};
@ -97,11 +100,12 @@ console.log(provided)
const answerNew = variants.slice();
answerNew[index].hints = event.target.value;
updateQuestionsList<QuizQuestionVariant>(quizId, totalIndex, {
updateQuestionsList(quizId, totalIndex, {
content: { ...question.content, variants: answerNew },
});
};
const largeCheck = ("largeCheck" in question.content) ? question.content.largeCheck : false
return (
<Draggable draggableId={String(index)} index={index}>
@ -123,10 +127,10 @@ console.log(provided)
fullWidth
focused={false}
placeholder={"Добавьте ответ"}
multiline={question.content.largeCheck}
multiline={largeCheck}
onChange={({ target }) => debounced(target.value)}
onKeyDown={(event: KeyboardEvent<HTMLInputElement>) => {
if (event.code === "Enter" && !question.content.largeCheck) {
if (event.code === "Enter" && !largeCheck) {
addNewAnswer();
}
}}

2
src/pages/Questions/DraggableList/DraggableListItem.tsx
View File

@ -19,8 +19,6 @@ export default memo(
({ index, isDragging, questionData }: DraggableListItemProps) => {
const quizId = Number(useParams().quizId);
const theme = useTheme();
console.log("Мой индекс " + index);
console.log(questionData);
return (
<Draggable draggableId={String(index)} index={index}>

1
src/pages/Questions/DropDown/settingDropDown.tsx
View File

@ -78,6 +78,7 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
<CustomCheckbox
label={"Можно несколько"}
checked={question.content.multi}
dataCy="multiple-answers-checkbox"
handleChange={({ target }) =>
updateQuestionsList<QuizQuestionSelect>(quizId, totalIndex, {
content: { ...question.content, multi: target.checked },

1
src/pages/Questions/Emoji/settingEmoji.tsx
View File

@ -55,6 +55,7 @@ export default function SettingEmoji({ totalIndex }: SettingEmojiProps) {
sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
label={"Можно несколько"}
checked={question.content.multi}
dataCy="multiple-answers-checkbox"
handleChange={({ target }) => {
updateQuestionsList<QuizQuestionEmoji>(quizId, totalIndex, {
content: { ...question.content, multi: target.checked },

2
src/pages/Questions/Form/FormDraggableList/FormDraggableListItem.tsx
View File

@ -19,8 +19,6 @@ export default memo(
({ index, isDragging, questionData }: FormDraggableListItemProps) => {
const quizId = Number(useParams().quizId);
const theme = useTheme();
console.log("Мой индекс " + index);
console.log(questionData);
return (
<Draggable draggableId={String(index)} index={index}>

1
src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx
View File

@ -179,6 +179,7 @@ export default function SettingOpytionsPict({
sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
label={"Можно несколько"}
checked={question.content.multi}
dataCy="multiple-answers-checkbox"
handleChange={({ target }) =>
updateQuestionsList<QuizQuestionImages>(quizId, totalIndex, {
content: { ...question.content, multi: target.checked },

1
src/pages/Questions/UploadImage/UploadImageModal.tsx
View File

@ -84,6 +84,7 @@ export const UploadImageModal: React.FC<ModalkaProps> = ({
accept="image/*"
multiple
type="file"
data-cy="upload-image-input"
/>
<Box
onDragOver={(event: DragEvent<HTMLDivElement>) =>

1
src/pages/Questions/answerOptions/responseSettings.tsx
View File

@ -80,6 +80,7 @@ export default function ResponseSettings({ totalIndex }: Props) {
sx={{ mr: isMobile ? "0px" : "16px" }}
label={"Можно несколько"}
checked={question.content.multi}
dataCy="multiple-answers-checkbox"
handleChange={({ target }) => {
updateQuestionsList<QuizQuestionVariant>(quizId, totalIndex, {
content: { ...question.content, multi: target.checked },

1
src/ui_kit/AddOrEditImageButton.tsx
View File

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

4
src/ui_kit/CustomCheckbox.tsx
View File

@ -8,9 +8,10 @@ interface Props {
handleChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
checked?: boolean;
sx?: SxProps;
dataCy?: string;
}
export default function CustomCheckbox({ label, handleChange, checked, sx }: Props) {
export default function CustomCheckbox({ label, handleChange, checked, sx, dataCy }: Props) {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(790));
@ -24,6 +25,7 @@ export default function CustomCheckbox({ label, handleChange, checked, sx }: Pro
checkedIcon={<CheckedIcon />}
onChange={handleChange}
checked={checked}
data-cy={dataCy}
/>
}
label={label}

1
src/ui_kit/Modal/CropModal.tsx
View File

@ -244,6 +244,7 @@ export const CropModal: FC<Props> = ({ onSaveImageClick }) => {
<Button
onClick={handleSaveClick}
disableRipple
data-cy="crop-modal-save-button"
sx={{
height: "48px",
color: "#7E2AEA",

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

@ -61,6 +61,8 @@ export default function Images({ question }: Props) {
<ButtonBase
key={index}
onClick={() => handleVariantClick(index)}
data-cy="variant-button"
data-checked={selectedVariants.includes(index)}
sx={{
display: "flex",
flexDirection: "column",

3
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Variant.tsx
View File

@ -41,6 +41,7 @@ export default function Variant({ question }: Props) {
<FormControlLabel
key={index}
value={variant.answer}
data-cy="variant-answer"
control={
<Radio
inputProps={{
@ -50,7 +51,7 @@ export default function Variant({ question }: Props) {
}
label={
<Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
<Typography data-cy="variant-answer">
<Typography>
{variant.answer}
</Typography>
{variant.hints && (

17
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx
View File

@ -42,7 +42,12 @@ export default function Varimg({ question }: Props) {
}}
>
<FormControl>
<FormLabel id="quiz-question-radio-group">{question.title}</FormLabel>
<FormLabel
id="quiz-question-radio-group"
data-cy="variant-title"
>
{question.title}
</FormLabel>
<RadioGroup
aria-labelledby="quiz-question-radio-group"
value={currentVariant?.answer ?? ""}
@ -54,7 +59,14 @@ export default function Varimg({ question }: Props) {
<FormControlLabel
key={index}
value={variant.answer}
control={<Radio />}
data-cy="variant-answer"
control={
<Radio
inputProps={{
"data-cy": "variant-radio",
}}
/>
}
label={
<Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
<Typography>{variant.answer}</Typography>
@ -84,6 +96,7 @@ export default function Varimg({ question }: Props) {
{currentVariant?.extendedText ? (
<img
src={currentVariant.extendedText}
data-cy="variant-image"
alt="question variant"
style={{
width: "100%",