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

add emoji question preview test

Browse Source
This commit is contained in:
nflnkr 2023-11-06 16:21:41 +03:00
parent 629e0c37c6
commit 4631f6098a
3 changed files with 80 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -130,7 +130,7 @@ describe("Quiz preview", () => {
}); });
}); });
describe.only("Varimg question", () => { describe("Varimg question", () => {
beforeEach(function setupQuestion() { beforeEach(function setupQuestion() {
cy.fixture("image1.png", null).as("image1"); cy.fixture("image1.png", null).as("image1");
cy.fixture("image2.png", null).as("image2"); cy.fixture("image2.png", null).as("image2");
@ -157,10 +157,8 @@ describe("Quiz preview", () => {
}); });
}); });
it("should contain title and options, and be selected properly", function () { it("should contain title and options, and be selected properly", () => {
cy.get("[data-cy=quiz-preview-layout]").within(() => { 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-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(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(1).should("have.text", "Answer 2");
@ -199,4 +197,72 @@ describe("Quiz preview", () => {
}); });
}); });
}); });
describe("Emoji question", () => {
beforeEach(function setupQuestion() {
cy.get("[data-cy=select-questiontype-emoji]").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=choose-emoji-button]").eq(0).click();
cy.get("em-emoji-picker", { withinSubject: null }).within(() => {
cy.get(".emoji-mart-emoji", {
withinSubject: null,
includeShadowDom: true,
}).eq(0).click();
});
cy.get("[data-cy=quiz-variant-question-answer]").eq(1).type("Answer 2{enter}");
cy.get("[data-cy=choose-emoji-button]").eq(1).click();
cy.get("em-emoji-picker", { withinSubject: null }).within(() => {
cy.get(".emoji-mart-emoji", {
withinSubject: null,
includeShadowDom: true,
}).eq(1).click();
});
cy.get("[data-cy=quiz-variant-question-answer]").eq(2).type("Answer 3");
cy.get("[data-cy=choose-emoji-button]").eq(2).click();
cy.get("em-emoji-picker", { withinSubject: null }).within(() => {
cy.get(".emoji-mart-emoji", {
withinSubject: null,
includeShadowDom: true,
}).eq(2).click();
});
});
});
it("should contain title and options, and be selected properly", () => {
const emojiRegex = "(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])";
cy.get("[data-cy=quiz-preview-layout]").within(() => {
cy.get("[data-cy=variant-title]").should("have.text", "Question Title");
cy.get("[data-cy=variant-answer]").eq(0).invoke("text").should("match",
new RegExp(`${emojiRegex} Answer 1`)
);
cy.get("[data-cy=variant-answer]").eq(1).invoke("text").should("match",
new RegExp(`${emojiRegex} Answer 2`)
);
cy.get("[data-cy=variant-answer]").eq(2).invoke("text").should("match",
new RegExp(`${emojiRegex} 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-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-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");
});
});
});
}); });

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

@ -54,6 +54,7 @@ export default function Emoji({ totalIndex }: Props) {
{!isTablet && ( {!isTablet && (
<Box sx={{ cursor: "pointer" }}> <Box sx={{ cursor: "pointer" }}>
<Box <Box
data-cy="choose-emoji-button"
onClick={({ currentTarget }) => { onClick={({ currentTarget }) => {
setAnchorElement(currentTarget); setAnchorElement(currentTarget);
setCurrentIndex(index); setCurrentIndex(index);

12
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Emoji.tsx
View File

@ -27,7 +27,7 @@ export default function Emoji({ question }: Props) {
return ( return (
<FormControl fullWidth> <FormControl fullWidth>
<FormLabel id="quiz-question-radio-group">{question.title}</FormLabel> <FormLabel id="quiz-question-radio-group" data-cy="variant-title">{question.title}</FormLabel>
<RadioGroup <RadioGroup
aria-labelledby="quiz-question-radio-group" aria-labelledby="quiz-question-radio-group"
value={value} value={value}
@ -39,9 +39,15 @@ export default function Emoji({ question }: Props) {
<FormControlLabel <FormControlLabel
key={index} key={index}
value={variant.answer} value={variant.answer}
control={<Radio />} control={
<Radio
inputProps={{
"data-cy": "variant-radio",
}}
/>
}
label={ label={
<Box sx={{ display: "flex", alignItems: "center", gap: 2 }}> <Box sx={{ display: "flex", alignItems: "center", gap: 2 }} data-cy="variant-answer">
<Typography>{`${variant.extendedText} ${variant.answer}`}</Typography> <Typography>{`${variant.extendedText} ${variant.answer}`}</Typography>
{variant.hints && ( {variant.hints && (
<Tooltip title="Подсказка" placement="right"> <Tooltip title="Подсказка" placement="right">