add emoji question preview test

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

@ -130,7 +130,7 @@ describe("Quiz preview", () => {
});
});
describe.only("Varimg question", () => {
describe("Varimg question", () => {
beforeEach(function setupQuestion() {
cy.fixture("image1.png", null).as("image1");
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=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");
@ -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");
});
});
});
});

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

@ -27,7 +27,7 @@ export default function Emoji({ question }: Props) {
return (
<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
aria-labelledby="quiz-question-radio-group"
value={value}
@ -39,9 +39,15 @@ export default function Emoji({ question }: Props) {
<FormControlLabel
key={index}
value={variant.answer}
control={<Radio />}
control={
<Radio
inputProps={{
"data-cy": "variant-radio",
}}
/>
}
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>
{variant.hints && (
<Tooltip title="Подсказка" placement="right">