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

Merge branch 'dev' into tomain

Browse Source
This commit is contained in:
Nastya 2024-01-13 05:44:42 +03:00
commit a4e9788f9d
38 changed files with 1516 additions and 220 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
cypress/e2e/quizHomePageFields.cy.ts Normal file
View File

@ -0,0 +1,140 @@
import "cypress-file-upload";
describe("Тестирование полей главной страницы", () => {
beforeEach(() => {
cy.visit("http://localhost:3000");
cy.wait(1000);
cy.contains("Регистрация / Войти").click();
const login = "valid_user@exammple.com";
const password = "valid_password";
cy.get("#email").type(login);
cy.get("#password").type(password);
cy.get('button[type="submit"]').click();
});
it("Тест на создание нового квиза, заполнение полей главной странички,в превью тестовом просмотре и публикации", () => {
cy.get('[data-cy="create-quiz"]').click();
cy.wait(1000);
cy.get('button[data-cy="create-quiz-card"]').click();
cy.wait(1000);
cy.get('button[data-cy="select-quiz-layout-standard"]').click();
cy.get("#contentButton").click();
cy.get("#headingInput").type("Заголовок заголовка");
cy.get("#textInput").type("У нас тут какой-то текст");
cy.get("#buttonTextInput").type("Нажми на кнопку");
cy.get("#phoneInput").type("8-800-000-00-00");
cy.get("#companyInput").type("Наш слоган - слоган наш");
cy.get("#websiteInput").type("http://vk:3000/edit");
cy.get("#legalInformationInput").type("У наших документов есть данные");
cy.get(`button[data-cy="button-preview"]`).click();
cy.wait(2000);
// проверка введёных значений
cy.get(`[data-cy="heading"]`)
.should("exist")
.and("have.text", "Заголовок заголовка");
cy.get(`[data-cy="text"]`)
.should("exist")
.and("have.text", "У нас тут какой-то текст");
cy.get(`[data-cy="phonenumber"`)
.should("exist")
.and("have.text", "8-800-000-00-00");
cy.get(`[data-cy="startpage-button"]`)
.should("exist")
.and("have.text", "Нажми на кнопку");
cy.get(`[data-cy="company"]`)
.should("exist")
.and("have.text", "Наш слоган - слоган наш");
cy.get(`[data-cy="legalInformation"]`)
.should("exist")
.and("have.text", "У наших документов есть данные");
cy.get(`button[data-cy="button-preview"]`).click();
//создаём вопрос для тестового просмотра
cy.get('[data-cy="setup-questions"]').click();
cy.wait(500);
// cy.get('[data-cy="create-question"]').click();
cy.get(`[data-cy="select-questiontype-images"]`).click();
cy.get(
'[data-cy="checkbox-optional-question"] > .PrivateSwitchBase-input',
).click();
cy.get('[data-cy="quiz-variant-question-answer"]')
.eq(0)
.type("1")
.type("{enter}");
cy.get('button[data-cy="back-button"]').scrollIntoView().wait(500).click();
cy.wait(1000);
cy.visit("http://localhost:3000/view");
cy.wait(2000);
//проверка введёных значений
cy.get(`[data-cy="heading"]`)
.should("exist")
.and("have.text", "Заголовок заголовка");
cy.get(`[data-cy="text"]`)
.should("exist")
.and("have.text", "У нас тут какой-то текст");
cy.get(`[data-cy="phonenumber"`)
.should("exist")
.and("have.text", "8-800-000-00-00");
cy.get(`[data-cy="startpage-button"]`)
.should("exist")
.and("have.text", "Нажми на кнопку");
cy.get(`[data-cy="company"]`)
.should("exist")
.and("have.text", "Наш слоган - слоган наш");
cy.get(`[data-cy="legalInformation"]`)
.should("exist")
.and("have.text", "У наших документов есть данные");
cy.visit("http://localhost:3000/edit");
cy.wait(2000);
cy.get(`[data-cy="publish-button"]`).click();
cy.wait(500);
let linkText;
cy.get('[data-cy="link-test"]')
.invoke("text")
.then((text) => {
linkText = text;
});
cy.wait(2000).then(() => {
cy.visit(linkText);
});
cy.origin("https://hbpn.link", () => {
// <команды, направленные на https://hbpn.link, идут здесь>
cy.contains("p", "Заголовок заголовка").should("exist");
cy.wait(100);
cy.contains("p", "У нас тут какой-то текст").should("exist");
cy.wait(100);
cy.contains("p", "8-800-000-00-00").should("exist");
cy.wait(100);
cy.contains("p", "Наш слоган - слоган наш").should("exist");
cy.wait(100);
cy.contains("p", "У наших документов есть данные").should("exist");
cy.wait(100);
cy.get(`button`).should("exist").and("have.text", "Нажми на кнопку");
});
cy.visit("http://localhost:3000/list");
cy.wait(2000);
cy.get('[data-cy="quiz-card"] h5')
.should("exist")
.and("have.text", "Заголовок заголовка");
});
});

241
cypress/e2e/quizPublish.cy.ts
View File

@ -1,6 +1,6 @@
import "cypress-file-upload";
describe("Форма Входа", () => {
describe("Тестирование публикации", () => {
beforeEach(() => {
cy.visit("http://localhost:3000");
cy.wait(1000);
@ -19,27 +19,47 @@ describe("Форма Входа", () => {
cy.get('button[data-cy="create-quiz-card"]').eq(0).click();
cy.wait(1000);
cy.get('button[data-cy="select-quiz-layout-standard"]').click();
cy.get('input[type="checkbox"]').click();
cy.get('[data-cy="setup-questions"]').click();
cy.contains("button", "Варианты с картинками").click();
cy.contains("label", "Необязательный вопрос").click();
cy.wait(500);
cy.get('[data-cy="create-question"]').click();
cy.get('[data-cy="quiz-variant-question-answer"]').eq(0).type("1").type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]').eq(1).should("have.value", "").type("2").type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]').eq(2).should("have.value", "").type("3").type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]').eq(3).should("have.value", "").type("4").type("{enter}");
cy.get(`[data-cy="select-questiontype-images"]`).click();
cy.get(
'[data-cy="checkbox-optional-question"] > .PrivateSwitchBase-input',
).click();
cy.get('[data-cy="quiz-variant-question-answer"]')
.eq(0)
.type("1")
.type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]')
.eq(1)
.should("have.value", "")
.type("2")
.type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]')
.eq(2)
.should("have.value", "")
.type("3")
.type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]')
.eq(3)
.should("have.value", "")
.type("4")
.type("{enter}");
cy.visit("http://localhost:3000/view");
cy.wait(500);
cy.contains("Далее →").should("be.disabled");
cy.get("#buttonFurther").should("be.disabled");
cy.contains("div", "1").click();
cy.wait(500);
cy.contains("Далее →").should("not.be.disabled");
cy.get("#buttonFurther").should("not.be.disabled");
cy.visit("http://localhost:3000/view");
cy.visit("http://localhost:3000/edit");
@ -51,22 +71,39 @@ describe("Форма Входа", () => {
//Варианты ответов +
cy.contains("button", "Варианты ответов").click();
cy.contains("label", "Необязательный вопрос").click();
cy.get(`[data-cy="select-questiontype-variant"]`).click();
cy.get(
'[data-cy="checkbox-optional-question"] > .PrivateSwitchBase-input',
).click();
cy.get('[data-cy="quiz-variant-question-answer"]').eq(0).type("1").type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]').eq(1).should("have.value", "").type("2").type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]').eq(2).should("have.value", "").type("3").type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]').eq(3).should("have.value", "").type("4").type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]')
.eq(0)
.type("1")
.type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]')
.eq(1)
.should("have.value", "")
.type("2")
.type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]')
.eq(2)
.should("have.value", "")
.type("3")
.type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]')
.eq(3)
.should("have.value", "")
.type("4")
.type("{enter}");
cy.visit("http://localhost:3000/view");
cy.wait(500);
cy.contains("Далее →").should("be.disabled");
cy.get("#buttonFurther").should("be.disabled");
cy.contains("label", "1").click();
cy.wait(500);
cy.contains("Далее →").should("not.be.disabled");
cy.get("#buttonFurther").should("not.be.disabled");
cy.visit("http://localhost:3000/view");
cy.visit("http://localhost:3000/edit");
@ -80,22 +117,39 @@ describe("Форма Входа", () => {
// Варианты и картинка +
cy.contains("button", "Варианты и картинка").click();
cy.contains("label", "Необязательный вопрос").click();
cy.get(`[data-cy="select-questiontype-varimg"]`).click();
cy.get(
'[data-cy="checkbox-optional-question"] > .PrivateSwitchBase-input',
).click();
cy.get('[data-cy="quiz-variant-question-answer"]').eq(0).type("1").type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]').eq(1).should("have.value", "").type("2").type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]').eq(2).should("have.value", "").type("3").type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]').eq(3).should("have.value", "").type("4").type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]')
.eq(0)
.type("1")
.type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]')
.eq(1)
.should("have.value", "")
.type("2")
.type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]')
.eq(2)
.should("have.value", "")
.type("3")
.type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]')
.eq(3)
.should("have.value", "")
.type("4")
.type("{enter}");
cy.visit("http://localhost:3000/view");
cy.wait(500);
cy.contains("Далее →").should("be.disabled");
cy.get("#buttonFurther").should("be.disabled");
cy.contains("div", "1").click();
cy.wait(500);
cy.contains("Далее →").should("not.be.disabled");
cy.get("#buttonFurther").should("not.be.disabled");
cy.visit("http://localhost:3000/view");
cy.visit("http://localhost:3000/edit");
@ -108,21 +162,39 @@ describe("Форма Входа", () => {
//Эмоджи +
cy.contains("button", "Эмоджи").click();
cy.contains("label", "Необязательный вопрос").click();
cy.get('[data-cy="quiz-variant-question-answer"]').eq(0).type("1").type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]').eq(1).should("have.value", "").type("2").type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]').eq(2).should("have.value", "").type("3").type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]').eq(3).should("have.value", "").type("4").type("{enter}");
cy.get(`[data-cy="select-questiontype-emoji"]`).click();
cy.get(
'[data-cy="checkbox-optional-question"] > .PrivateSwitchBase-input',
).click();
cy.get('[data-cy="quiz-variant-question-answer"]')
.eq(0)
.type("1")
.type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]')
.eq(1)
.should("have.value", "")
.type("2")
.type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]')
.eq(2)
.should("have.value", "")
.type("3")
.type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]')
.eq(3)
.should("have.value", "")
.type("4")
.type("{enter}");
cy.visit("http://localhost:3000/view");
cy.wait(500);
cy.contains("Далее →").should("be.disabled");
cy.get("#buttonFurther").should("be.disabled");
cy.contains("div", "1").click();
cy.wait(500);
cy.contains("Далее →").should("not.be.disabled");
cy.get("#buttonFurther").should("not.be.disabled");
cy.visit("http://localhost:3000/view");
cy.visit("http://localhost:3000/edit");
@ -135,19 +207,24 @@ describe("Форма Входа", () => {
//Своё поле для ввода +
cy.contains("button", "Своё поле для ввода").click();
cy.contains("label", "Необязательный вопрос").click();
cy.get(`[data-cy="select-questiontype-text"]`).click();
cy.get(
'[data-cy="checkbox-optional-question"] > .PrivateSwitchBase-input',
).click();
cy.get('input[placeholder="Пример ответа"]').eq(0).type("1").type("{enter}");
cy.get('input[placeholder="Пример ответа"]')
.eq(0)
.type("1")
.type("{enter}");
cy.visit("http://localhost:3000/view");
cy.wait(500);
cy.contains("Далее →").should("be.disabled");
cy.get("#buttonFurther").should("be.disabled");
cy.get('input[type="text"]').type("email@invalid.com");
cy.wait(500);
cy.contains("Далее →").should("not.be.disabled");
cy.get("#buttonFurther").should("not.be.disabled");
cy.visit("http://localhost:3000/view");
cy.visit("http://localhost:3000/edit");
@ -160,23 +237,40 @@ describe("Форма Входа", () => {
//Выпадающий список +
cy.contains("button", "Выпадающий список").click();
cy.contains("label", "Необязательный вопрос").click();
cy.get(`[data-cy="select-questiontype-select"]`).click();
cy.get(
'[data-cy="checkbox-optional-question"] > .PrivateSwitchBase-input',
).click();
cy.get('[data-cy="quiz-variant-question-answer"]').eq(0).type("1").type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]').eq(1).should("have.value", "").type("2").type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]').eq(2).should("have.value", "").type("3").type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]').eq(3).should("have.value", "").type("4").type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]')
.eq(0)
.type("1")
.type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]')
.eq(1)
.should("have.value", "")
.type("2")
.type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]')
.eq(2)
.should("have.value", "")
.type("3")
.type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]')
.eq(3)
.should("have.value", "")
.type("4")
.type("{enter}");
cy.visit("http://localhost:3000/view");
cy.wait(500);
cy.contains("Далее →").should("be.disabled");
cy.get("#buttonFurther").should("be.disabled");
cy.get("#display-select").click();
cy.get("li").eq(0).click();
cy.wait(500);
cy.contains("Далее →").should("not.be.disabled");
cy.get("#buttonFurther").should("not.be.disabled");
cy.visit("http://localhost:3000/view");
cy.visit("http://localhost:3000/edit");
@ -189,13 +283,15 @@ describe("Форма Входа", () => {
//Дата +
cy.contains("button", "Дата").click();
cy.contains("label", "Необязательный вопрос").click();
cy.get(`[data-cy="select-questiontype-date"]`).click();
cy.get(
'[data-cy="checkbox-optional-question"] > .PrivateSwitchBase-input',
).click();
cy.visit("http://localhost:3000/view");
cy.wait(500);
cy.contains("Далее →").should("be.disabled");
cy.get("#buttonFurther").should("be.disabled");
cy.get('button[data-cy="open-datepicker"]').click();
cy.wait(500);
@ -203,7 +299,7 @@ describe("Форма Входа", () => {
cy.get('button[role="gridcell"]').eq(16).click();
cy.wait(500);
cy.contains("Далее →").should("not.be.disabled");
cy.get("#buttonFurther").should("not.be.disabled");
cy.visit("http://localhost:3000/view");
cy.visit("http://localhost:3000/edit");
@ -216,17 +312,22 @@ describe("Форма Входа", () => {
//Ползунок +
cy.contains("button", "Ползунок").click();
cy.contains("label", "Необязательный вопрос").click();
cy.get(`[data-cy="select-questiontype-number"]`).click();
cy.get(
'[data-cy="checkbox-optional-question"] > .PrivateSwitchBase-input',
).click();
cy.visit("http://localhost:3000/view");
cy.wait(500);
cy.contains("Далее →").should("be.disabled");
cy.get('input[aria-invalid="false"][id=":r0:"][placeholder="0"]').type("10");
cy.get("#buttonFurther").should("be.disabled");
cy.get('div[data-cy="textfield"]').as("textFieldDiv");
cy.get("@textFieldDiv").find("input").type("10");
cy.wait(500);
cy.contains("Далее →").should("not.be.disabled");
cy.get("#buttonFurther").should("not.be.disabled");
cy.visit("http://localhost:3000/view");
cy.visit("http://localhost:3000/edit");
@ -237,19 +338,23 @@ describe("Форма Входа", () => {
cy.wait(5000);
cy.get('[data-cy="create-question"]').click();
//Загрузка файла +
// Загрузка файла +
cy.contains("button", "Загрузка файла").click();
cy.contains("label", "Необязательный вопрос").click();
cy.get(`[data-cy="select-questiontype-file"]`).click();
cy.get(
'[data-cy="checkbox-optional-question"] > .PrivateSwitchBase-input',
).click();
cy.visit("http://localhost:3000/view");
cy.wait(500);
cy.contains("Далее →").should("be.disabled");
cy.get('label.MuiButtonBase-root input[type="file"]').attachFile("./image/Bunner.png");
cy.get("#buttonFurther").should("be.disabled");
cy.get('label.MuiButtonBase-root input[type="file"]').attachFile(
"../e2e/image/Bunner.png",
);
cy.wait(500);
cy.contains("Далее →").should("not.be.disabled");
cy.get("#buttonFurther").should("not.be.disabled");
cy.visit("http://localhost:3000/view");
cy.visit("http://localhost:3000/edit");
@ -262,17 +367,19 @@ describe("Форма Входа", () => {
// Рейтинг
cy.contains("button", "Рейтинг").click();
cy.contains("label", "Необязательный вопрос").click();
cy.get(`[data-cy="select-questiontype-rating"]`).click();
cy.get(
'[data-cy="checkbox-optional-question"] > .PrivateSwitchBase-input',
).click();
cy.visit("http://localhost:3000/view");
cy.wait(500);
cy.contains("Далее →").should("be.disabled");
cy.get("#buttonFurther").should("be.disabled");
cy.contains("label", "4 Stars").click();
cy.wait(500);
cy.contains("Далее →").should("not.be.disabled");
cy.get("#buttonFurther").should("not.be.disabled");
cy.visit("http://localhost:3000/view");
cy.visit("http://localhost:3000/edit");
@ -290,7 +397,7 @@ describe("Форма Входа", () => {
cy.get('[data-cy="delete-quiz"]').each(($button) => {
cy.wrap($button).click();
cy.wait(500);
cy.contains("button", "Удалить").click();
cy.get("#deleteButton").click();
});
});
});

495
cypress/e2e/quizQuestionsFields.cy.ts Normal file
View File

@ -0,0 +1,495 @@
describe("Тестирование полей вопросов", () => {
beforeEach(() => {
cy.visit("http://localhost:3000");
cy.wait(1000);
cy.contains("Регистрация / Войти").click();
const login = "valid_user@exammple.com";
const password = "valid_password";
cy.get("#email").type(login);
cy.get("#password").type(password);
cy.get('button[type="submit"]').click();
});
it("Тест на правильность отображения вопросов в превью и тестовом просмотре ", () => {
cy.get('[data-cy="create-quiz"]').click();
cy.wait(1000);
cy.get('button[data-cy="create-quiz-card"]').eq(0).click();
cy.wait(1000);
cy.get('button[data-cy="select-quiz-layout-standard"]').click();
cy.get('input[type="checkbox"]').click();
cy.get('[data-cy="setup-questions"]').click();
cy.wait(500);
// cy.get('[data-cy="create-question"]').click();
cy.get(`[data-cy="select-questiontype-images"]`).click();
cy.get(
'[data-cy="checkbox-optional-question"] > .PrivateSwitchBase-input',
).click();
cy.get("#questionTitle").type("Заголовок вопроса");
cy.get('[data-cy="quiz-variant-question-answer"]')
.eq(0)
.type("1")
.type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]')
.eq(1)
.should("have.value", "")
.type("2")
.type("{enter}");
// превью
cy.get(`button[data-cy="button-preview"]`).click();
cy.wait(2000);
cy.get(".MuiTypography-h6")
.should("exist")
.and("have.text", "Заголовок вопроса");
cy.get(":nth-child(1) > .MuiFormControlLabel-root")
.should("exist")
.and("have.text", "1");
cy.get(":nth-child(2) > .MuiFormControlLabel-root")
.should("exist")
.and("have.text", "2");
cy.get(`button[data-cy="button-preview"]`).click();
cy.visit("http://localhost:3000/view");
cy.wait(2000);
// проверка введёных значений
cy.get(".MuiTypography-h5")
.should("exist")
.and("have.text", "Заголовок вопроса");
cy.get(":nth-child(1) > .MuiFormControlLabel-root")
.should("exist")
.and("have.text", "1");
cy.get(":nth-child(2) > .MuiFormControlLabel-root")
.should("exist")
.and("have.text", "2");
cy.visit("http://localhost:3000/edit");
cy.wait(500);
cy.get('[data-cy="delete-question"]').click();
cy.wait(5000);
cy.get('[data-cy="create-question"]').click();
//Варианты ответов +
cy.get(`[data-cy="select-questiontype-variant"]`).click();
cy.get(
'[data-cy="checkbox-optional-question"] > .PrivateSwitchBase-input',
).click();
cy.get("#questionTitle").type("Заголовок вопроса");
cy.get('[data-cy="quiz-variant-question-answer"]')
.eq(0)
.type("1")
.type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]')
.eq(1)
.should("have.value", "")
.type("2")
.type("{enter}");
// превью
cy.get(`button[data-cy="button-preview"]`).click();
cy.wait(2000);
cy.get(".MuiTypography-h6")
.should("exist")
.and("have.text", "Заголовок вопроса");
cy.get(".MuiFormControlLabel-label").contains("1").should("exist");
cy.get(".MuiFormControlLabel-label").contains("2").should("exist");
cy.get(`button[data-cy="button-preview"]`).click();
cy.visit("http://localhost:3000/view");
cy.wait(2000);
// проверка введёных значений
cy.get(".MuiTypography-h5")
.should("exist")
.and("have.text", "Заголовок вопроса");
cy.get(".MuiFormControlLabel-label").contains("1").should("exist");
cy.get(".MuiFormControlLabel-label").contains("2").should("exist");
cy.visit("http://localhost:3000/edit");
cy.wait(500);
cy.get('[data-cy="delete-question"]').click();
cy.wait(5000);
cy.get('[data-cy="create-question"]').click();
// Варианты и картинка +
cy.get(`[data-cy="select-questiontype-varimg"]`).click();
cy.get(
'[data-cy="checkbox-optional-question"] > .PrivateSwitchBase-input',
).click();
cy.get("#questionTitle").type("Заголовок вопроса");
cy.get('[data-cy="quiz-variant-question-answer"]')
.eq(0)
.type("1")
.type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]')
.eq(1)
.should("have.value", "")
.type("2")
.type("{enter}");
// превью
cy.get(`button[data-cy="button-preview"]`).click();
cy.wait(2000);
cy.get(".MuiTypography-h6")
.should("exist")
.and("have.text", "Заголовок вопроса");
cy.get(".MuiFormControlLabel-label").contains("1").should("exist");
cy.get(".MuiFormControlLabel-label").contains("2").should("exist");
cy.get(`button[data-cy="button-preview"]`).click();
cy.visit("http://localhost:3000/view");
cy.wait(2000);
// проверка введёных значений
cy.get(".MuiTypography-h5")
.should("exist")
.and("have.text", "Заголовок вопроса");
cy.get(".MuiFormControlLabel-label").contains("1").should("exist");
cy.get(".MuiFormControlLabel-label").contains("2").should("exist");
cy.visit("http://localhost:3000/edit");
cy.wait(500);
cy.get('[data-cy="delete-question"]').click();
cy.wait(5000);
cy.get('[data-cy="create-question"]').click();
//Эмоджи +
cy.get(`[data-cy="select-questiontype-emoji"]`).click();
cy.get(
'[data-cy="checkbox-optional-question"] > .PrivateSwitchBase-input',
).click();
cy.get("#questionTitle").type("Заголовок вопроса");
cy.get('[data-cy="quiz-variant-question-answer"]')
.eq(0)
.type("1")
.type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]')
.eq(1)
.should("have.value", "")
.type("2")
.type("{enter}");
// превью
cy.get(`button[data-cy="button-preview"]`).click();
cy.wait(2000);
cy.get(".MuiTypography-h6")
.should("exist")
.and("have.text", "Заголовок вопроса");
cy.get(".MuiFormControlLabel-label").contains("1").should("exist");
cy.get(".MuiFormControlLabel-label").contains("2").should("exist");
cy.get(`button[data-cy="button-preview"]`).click();
cy.visit("http://localhost:3000/view");
cy.wait(2000);
// проверка введёных значений
cy.get(".MuiTypography-h5")
.should("exist")
.and("have.text", "Заголовок вопроса");
cy.get(".MuiFormControlLabel-label").contains("1").should("exist");
cy.get(".MuiFormControlLabel-label").contains("2").should("exist");
cy.visit("http://localhost:3000/edit");
cy.wait(500);
cy.get('[data-cy="delete-question"]').click();
cy.wait(5000);
cy.get('[data-cy="create-question"]').click();
//Своё поле для ввода +
cy.get(`[data-cy="select-questiontype-text"]`).click();
cy.get(
'[data-cy="checkbox-optional-question"] > .PrivateSwitchBase-input',
).click();
cy.get("#questionTitle").type("Заголовок вопроса");
cy.get('input[placeholder="Пример ответа"]')
.eq(0)
.type("1")
.type("{enter}");
// превью
cy.get(`button[data-cy="button-preview"]`).click();
cy.wait(2000);
cy.get(".MuiTypography-h6")
.should("exist")
.and("have.text", "Заголовок вопроса");
cy.get('input[placeholder="1"]').should("exist");
cy.get(`button[data-cy="button-preview"]`).click();
cy.visit("http://localhost:3000/view");
cy.wait(2000);
// проверка введёных значений
cy.get(".MuiTypography-h5")
.should("exist")
.and("have.text", "Заголовок вопроса");
cy.get('input[placeholder="1"]').should("exist");
cy.visit("http://localhost:3000/edit");
cy.wait(500);
cy.get('[data-cy="delete-question"]').click();
cy.wait(5000);
cy.get('[data-cy="create-question"]').click();
//Выпадающий список +
cy.get(`[data-cy="select-questiontype-select"]`).click();
cy.get(
'[data-cy="checkbox-optional-question"] > .PrivateSwitchBase-input',
).click();
cy.get("#questionTitle").type("Заголовок вопроса");
cy.get('[data-cy="quiz-variant-question-answer"]')
.eq(0)
.type("1")
.type("{enter}");
cy.get('[data-cy="quiz-variant-question-answer"]')
.eq(1)
.should("have.value", "")
.type("2")
.type("{enter}");
// превью
cy.get(`button[data-cy="button-preview"]`).click();
cy.wait(2000);
cy.get(".MuiTypography-h6")
.should("exist")
.and("have.text", "Заголовок вопроса");
cy.get(".MuiFormControlLabel-label").contains("1").should("exist");
cy.get(".MuiFormControlLabel-label").contains("2").should("exist");
cy.get(`button[data-cy="button-preview"]`).click();
cy.visit("http://localhost:3000/view");
cy.wait(2000);
// проверка введёных значений
cy.get(".MuiTypography-h5")
.should("exist")
.and("have.text", "Заголовок вопроса");
cy.get(".MuiFormControlLabel-label").contains("1").should("exist");
cy.get(".MuiFormControlLabel-label").contains("2").should("exist");
cy.visit("http://localhost:3000/edit");
cy.wait(500);
cy.get('[data-cy="delete-question"]').click();
cy.wait(5000);
cy.get('[data-cy="create-question"]').click();
//Дата +
cy.get(`[data-cy="select-questiontype-date"]`).click();
cy.get(
'[data-cy="checkbox-optional-question"] > .PrivateSwitchBase-input',
).click();
cy.get("#questionTitle").type("Заголовок вопроса");
// превью
cy.get(`button[data-cy="button-preview"]`).click();
cy.wait(2000);
cy.get(".MuiTypography-h6")
.should("exist")
.and("have.text", "Заголовок вопроса");
cy.get(`button[data-cy="button-preview"]`).click();
cy.visit("http://localhost:3000/view");
cy.wait(2000);
// проверка введёных значений
cy.get(".MuiTypography-h5")
.should("exist")
.and("have.text", "Заголовок вопроса");
cy.wait(500);
cy.get('[data-cy="delete-question"]').click();
cy.wait(5000);
cy.get('[data-cy="create-question"]').click();
//Ползунок +
cy.get(`[data-cy="select-questiontype-number"]`).click();
cy.get(
'[data-cy="checkbox-optional-question"] > .PrivateSwitchBase-input',
).click();
cy.get("#questionTitle").type("Заголовок вопроса");
// превью
cy.get(`button[data-cy="button-preview"]`).click();
cy.wait(2000);
cy.get(".MuiTypography-h6")
.should("exist")
.and("have.text", "Заголовок вопроса");
cy.get(".MuiTypography-p")
.should("exist")
.and("have.text", "Заголовок вопроса");
cy.get(`button[data-cy="button-preview"]`).click();
cy.visit("http://localhost:3000/view");
cy.wait(2000);
// проверка введёных значений
cy.get(".MuiTypography-h5")
.should("exist")
.and("have.text", "Заголовок вопроса");
cy.wait(500);
cy.get('[data-cy="delete-question"]').click();
cy.wait(5000);
cy.get('[data-cy="create-question"]').click();
// Загрузка файла +
cy.get(`[data-cy="select-questiontype-file"]`).click();
cy.get(
'[data-cy="checkbox-optional-question"] > .PrivateSwitchBase-input',
).click();
cy.get("#questionTitle").type("Заголовок вопроса");
// превью
cy.get(`button[data-cy="button-preview"]`).click();
cy.wait(2000);
cy.get(".MuiTypography-h6")
.should("exist")
.and("have.text", "Заголовок вопроса");
cy.get(`button[data-cy="button-preview"]`).click();
cy.visit("http://localhost:3000/view");
cy.wait(2000);
// проверка введёных значений
cy.get(".MuiTypography-h5")
.should("exist")
.and("have.text", "Заголовок вопроса");
cy.wait(500);
cy.get('[data-cy="delete-question"]').click();
cy.wait(5000);
cy.get('[data-cy="create-question"]').click();
// Страница
cy.get(`[data-cy="select-questiontype-page"]`).click();
cy.get(
'[data-cy="checkbox-optional-question"] > .PrivateSwitchBase-input',
).click();
cy.get("#questionTitle").type("Заголовок вопроса");
cy.get("#addText").type("Добавляю текст");
// превью
cy.get(`button[data-cy="button-preview"]`).click();
cy.wait(2000);
cy.get(".MuiTypography-h6")
.should("exist")
.and("have.text", "Заголовок вопроса");
cy.get(".MuiTypography-p")
.should("exist")
.and("have.text", "Добавляю текст");
cy.get(`button[data-cy="button-preview"]`).click();
cy.visit("http://localhost:3000/view");
cy.wait(2000);
// проверка введёных значений
cy.get(".MuiTypography-h5")
.should("exist")
.and("have.text", "Заголовок вопроса");
cy.get(".MuiTypography-p")
.should("exist")
.and("have.text", "Добавляю текст");
cy.wait(500);
cy.get('[data-cy="delete-question"]').click();
cy.wait(5000);
cy.get('[data-cy="create-question"]').click();
// Рейтинг
cy.get(`[data-cy="select-questiontype-rating"]`).click();
cy.get(
'[data-cy="checkbox-optional-question"] > .PrivateSwitchBase-input',
).click();
cy.get("#questionTitle").type("Заголовок вопроса");
// превью
cy.get(`button[data-cy="button-preview"]`).click();
cy.wait(2000);
cy.get(".MuiTypography-h6")
.should("exist")
.and("have.text", "Заголовок вопроса");
cy.get(`button[data-cy="button-preview"]`).click();
cy.visit("http://localhost:3000/view");
cy.wait(2000);
// проверка введёных значений
cy.get(".MuiTypography-h5")
.should("exist")
.and("have.text", "Заголовок вопроса");
cy.wait(500);
cy.get('[data-cy="delete-question"]').click();
cy.wait(5000);
cy.get('[data-cy="create-question"]').click();
});
});

26
src/assets/icons/EcommerceIcon.tsx Normal file
View File

@ -0,0 +1,26 @@
import { FC, SVGProps } from "react";
export const EcommerceIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
<svg
{...props}
height="1em"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M20.25 4.5H3.75C3.33579 4.5 3 4.83579 3 5.25V18.75C3 19.1642 3.33579 19.5 3.75 19.5H20.25C20.6642 19.5 21 19.1642 21 18.75V5.25C21 4.83579 20.6642 4.5 20.25 4.5Z"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M15.75 8.25C15.75 9.24456 15.3549 10.1984 14.6517 10.9017C13.9484 11.6049 12.9946 12 12 12C11.0054 12 10.0516 11.6049 9.34835 10.9017C8.64509 10.1984 8.25 9.24456 8.25 8.25"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);

18
src/assets/icons/PieСhartIcon.tsx Normal file
View File

@ -0,0 +1,18 @@
import { FC, SVGProps } from "react";
export const PieСhartIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
<svg
{...props}
height="1em"
viewBox="0 0 22 23"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11 1V11.8621M11 11.8621L19.5714 7.51724M11 11.8621L18.1429 19.1034M11 22C5.47715 22 1 17.4611 1 11.8621C1 6.26304 5.47715 1.72414 11 1.72414C16.5228 1.72414 21 6.26304 21 11.8621C21 17.4611 16.5228 22 11 22Z"
stroke="currentColor"
strokeWidth="1.5"
strokeLinejoin="round"
/>
</svg>
);

45
src/assets/icons/SegmentationIcon.tsx Normal file
View File

@ -0,0 +1,45 @@
import { FC, SVGProps } from "react";
export const SegmentationIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
<svg
{...props}
height="1em"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 2.5V21.5"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M19 14C20.6569 14 22 12.6569 22 11C22 9.34315 20.6569 8 19 8C17.3431 8 16 9.34315 16 11C16 12.6569 17.3431 14 19 14Z"
stroke="currentColor"
strokeWidth="1.5"
strokeMiterlimit="10"
/>
<path
d="M5 14C6.65685 14 8 12.6569 8 11C8 9.34315 6.65685 8 5 8C3.34315 8 2 9.34315 2 11C2 12.6569 3.34315 14 5 14Z"
stroke="currentColor"
strokeWidth="1.5"
strokeMiterlimit="10"
/>
<path
d="M15 16C15.4901 15.3737 16.1022 14.8701 16.7932 14.5246C17.4843 14.1791 18.2375 14 19 14C19.7625 14 20.5157 14.1791 21.2068 14.5246C21.8978 14.8701 22.5099 15.3737 23 16"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M1 16C1.4901 15.3737 2.10218 14.8701 2.79322 14.5246C3.48427 14.1791 4.23751 14 5 14C5.76249 14 6.51573 14.1791 7.20678 14.5246C7.89782 14.8701 8.5099 15.3737 9 16"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);

47
src/assets/icons/TestingIcon.tsx Normal file
View File

@ -0,0 +1,47 @@
import { FC, SVGProps } from "react";
export const TestingIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
<svg
{...props}
height="1em"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.25 14.1641H3.75C2.7835 14.1641 2 14.9849 2 15.9974V19.6641C2 20.6766 2.7835 21.4974 3.75 21.4974H7.25C8.2165 21.4974 9 20.6766 9 19.6641V15.9974C9 14.9849 8.2165 14.1641 7.25 14.1641Z"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M7.25 2.5H3.75C2.7835 2.5 2 3.32081 2 4.33333V8C2 9.01252 2.7835 9.83333 3.75 9.83333H7.25C8.2165 9.83333 9 9.01252 9 8V4.33333C9 3.32081 8.2165 2.5 7.25 2.5Z"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M13.1992 6.10156H22.1992"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M13.1992 17.8984H22.1992"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M4 6.125L5.28571 7.25L7 5"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);

89
src/pages/Landing/DesktopQuizCard.tsx Normal file
View File

@ -0,0 +1,89 @@
import { Box, Fade, Typography } from "@mui/material";
import { FC } from "react";
interface Iprops {
isOpen: boolean;
header: string;
image: string;
text: string;
}
export const DesktopQuizCard: FC<Iprops> = ({
isOpen,
header,
image,
text,
}) => {
return (
<Fade
style={{ display: isOpen ? "flex" : "none" }}
timeout={1000}
in={isOpen}
unmountOnExit
>
<Box
sx={{
width: "100%",
minHeight: "462px",
backgroundColor: "#ffffff",
display: "flex",
justifyContent: "space-between",
flexWrap: "wrap",
padding: "22px 22px 22px 50px",
borderRadius: "12px",
marginTop: "60px",
boxSizing: "border-box",
boxShadow:
"0px 6.6501px 5.32008px 0px rgba(126, 42, 234, 0.03), 0px 12.52155px 10.01724px 0px rgba(126, 42, 234, 0.04), 0px 22.33631px 17.86905px 0px rgba(126, 42, 234, 0.04)",
}}
>
<Box
sx={{
height: "70%",
display: "flex",
flexDirection: "column",
justifyContent: "space-around",
paddingTop: "26px",
}}
>
<Typography
variant="h6"
fontSize={"36px"}
lineHeight={"42.66px"}
maxWidth={"491px"}
>
{header}
</Typography>
<Box
sx={{
maxWidth: "416px",
marginTop: "19px",
}}
>
<Typography fontSize={"18px"} lineHeight={"21px"} color={"#4D4D4D"}>
{text}
</Typography>
</Box>
</Box>
<Box
sx={{
width: "100%",
maxWidth: "550px",
}}
>
<Box
component={"img"}
src={image}
sx={{
width: "100%",
height: "418px",
backgroundColor: "#c8dade",
borderRadius: "12px",
}}
/>
</Box>
</Box>
</Fade>
);
};

445
src/pages/Landing/HowToUse.tsx
View File

@ -1,11 +1,14 @@
import React from "react";
import React, { useState } from "react";
import Box from "@mui/material/Box";
import { Typography, useMediaQuery, useTheme } from "@mui/material";
import { Fade, Typography, Zoom, useMediaQuery, useTheme } from "@mui/material";
import SectionStyled from "./SectionStyled";
import Link from "@mui/material/Link";
import { styled } from "@mui/material/styles";
import Notebook from "../../assets/LandingPict/notebook";
import BigBlock from "./images/bigblock.png";
import businessTasks2 from "./images/businessTasks2.png";
import businessTasks3 from "./images/businessTasks3.png";
import businessTasks4 from "./images/businessTasks4.png";
import Button from "@mui/material/Button";
// import Note from './image/note.png'
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
@ -13,6 +16,12 @@ import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
// import CalendarW from './image/calendar-W.svg'
// import CalendarP from './image/calendar-P.svg'
import CalendarIcon from "../../assets/LandingPict/calendarIcon";
import { PieСhartIcon } from "@icons/PieСhartIcon";
import { SegmentationIcon } from "@icons/SegmentationIcon";
import { TestingIcon } from "@icons/TestingIcon";
import { EcommerceIcon } from "@icons/EcommerceIcon";
import { DesktopQuizCard } from "./DesktopQuizCard";
import { MobileQuizCard } from "./MobileQuizCard";
// const BoxUse = styled('div')(({ theme }) => ({
// [theme.breakpoints.down('md')]: {
@ -35,6 +44,32 @@ const BoxQuiz = styled("div")(({ theme }) => ({
},
}));
const businessTasks = {
research: {
header: "Исследуйте аудиторию и проверяйте гипотезы",
text: "Опросник помогает проверять гипотезы и принимать грамотные решения основанные на данных. Создавайте опросы, собирайте обратную связь и анализируйте ответы в удобной аналитике в личном кабинете. ",
image: BigBlock,
},
segmentation: {
header:
"Лучше узнайте свою аудиторию, сегментируйте и собирайте заявки с помощью квиза",
text: "Квиз легко создать самому за 10 минут: настроить логику вопросов, результаты и получить готовую ссылку.",
image: businessTasks2,
},
testing: {
header:
"Создавайте интерактивные тесты, показывайте правильные и неправильные ответы",
text: "Тест в игровой форме увеличит вовлеченность пользователей. Создать его легко: задайте вопрос и отметьте правильные варианты ответов.",
image: businessTasks3,
},
eсommerce: {
header:
"Консультируйте клиентов по ассортименту и помогите определиться с выбором",
text: "Тест в игровой форме увеличит вовлеченность пользователей. Создать его легко: задайте вопрос и отметьте правильные варианты ответов.",
image: businessTasks4,
},
};
function Quiz() {
return (
<BoxQuiz
@ -127,12 +162,19 @@ export default function Component() {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const [task, setTask] = useState<
"research" | "segmentation" | "testing" | "eсommerce"
>("research");
const [open, setOpen] = useState<boolean>(false);
return (
<SectionStyled
tag={"section"}
bg={"#f2f3f7"}
mwidth={"1160px"}
sxsect={{ minHeight: "809px", alignItems: "flex-start" }}
sxsect={{
minHeight: isMobile ? "auto" : "809px",
alignItems: "flex-start",
}}
sxcont={{
display: "flex",
flexDirection: "column",
@ -256,162 +298,263 @@ export default function Component() {
Изящное решение исследовательских и бизнес-задач
</Typography>
</Box>
{/*<Box*/}
{/* sx={{*/}
{/* display: 'flex',*/}
{/* justifyContent: 'space-between',*/}
{/* width: '100%',*/}
{/* flexWrap: 'wrap',*/}
{/* marginTop: '60px',*/}
{/* }}*/}
{/*>*/}
{/* <Button*/}
{/* sx={{*/}
{/* width: '275px',*/}
{/* height: '66px',*/}
{/* borderRadius: '12px',*/}
{/* display: 'flex',*/}
{/* alignItems: 'center',*/}
{/* justifyContent: 'space-around',*/}
{/* paddingRight: '77px',*/}
{/* textTransform: 'none',*/}
{/* backgroundColor: '#7e2aea',*/}
{/* color: '#ffffff',*/}
{/* }}*/}
{/* >*/}
{/* <CalendarIcon/>*/}
{/* <Typography>Исследования</Typography>*/}
{/* </Button>*/}
{/* <Button*/}
{/* sx={{*/}
{/* width: '275px',*/}
{/* height: '66px',*/}
{/* backgroundColor: '#ffffff',*/}
{/* borderRadius: '12px',*/}
{/* display: 'flex',*/}
{/* alignItems: 'center',*/}
{/* justifyContent: 'space-around',*/}
{/* paddingRight: '77px',*/}
{/* textTransform: 'none',*/}
{/* color: '#4D4D4D',*/}
{/* }}*/}
{/* //variant='template'*/}
{/* >*/}
{/* <CalendarIcon/>*/}
{/* <Typography>Сегментация</Typography>*/}
{/* </Button>*/}
{/* <Button*/}
{/* sx={{*/}
{/* width: '275px',*/}
{/* height: '66px',*/}
{/* backgroundColor: '#ffffff',*/}
{/* borderRadius: '12px',*/}
{/* display: 'flex',*/}
{/* alignItems: 'center',*/}
{/* justifyContent: 'space-around',*/}
{/* paddingRight: '77px',*/}
{/* textTransform: 'none',*/}
{/* color: '#4D4D4D',*/}
{/* }}*/}
{/* //variant='template'*/}
{/* >*/}
{/* <CalendarIcon/>*/}
{/* <Typography>Тестирование</Typography>*/}
{/* </Button>*/}
{/* <Button*/}
{/* //variant='template'*/}
{/* sx={{*/}
{/* width: '275px',*/}
{/* height: '66px',*/}
{/* backgroundColor: '#ffffff',*/}
{/* borderRadius: '12px',*/}
{/* display: 'flex',*/}
{/* alignItems: 'center',*/}
{/* justifyContent: 'space-around',*/}
{/* paddingRight: '77px',*/}
{/* textTransform: 'none',*/}
{/* color: '#4D4D4D',*/}
{/* }}*/}
{/* >*/}
{/* <CalendarIcon/>*/}
{/* <Typography>E-commerce</Typography>*/}
{/* </Button>*/}
{/*</Box>*/}
<Box
sx={{
width: "100%",
minHeight: "462px",
backgroundColor: "#ffffff",
display: "flex",
justifyContent: "space-between",
flexWrap: "wrap",
padding: isMobile
? "0 27px 22px 20px"
: isTablet
? "20px"
: "22px 22px 22px 50px",
borderRadius: "12px",
marginTop: isMobile ? "35px" : "60px",
boxSizing: "border-box",
boxShadow:
"0px 6.6501px 5.32008px 0px rgba(126, 42, 234, 0.03), 0px 12.52155px 10.01724px 0px rgba(126, 42, 234, 0.04), 0px 22.33631px 17.86905px 0px rgba(126, 42, 234, 0.04)",
}}
>
{!isTablet && (
<Box
sx={{
display: "flex",
justifyContent: "space-between",
width: "100%",
gap: "20px",
marginTop: "60px",
}}
>
<Button
onClick={() => setTask("research")}
sx={{
width: "275px",
height: "66px",
borderRadius: "12px",
display: "flex",
alignItems: "center",
gap: "15px",
justifyContent: "flex-start",
textTransform: "none",
backgroundColor: task !== "research" ? "white" : "#7e2aea",
color: task !== "research" ? "black" : "#ffffff",
}}
>
<Box
sx={{
borderRadius: "8px",
minWidth: "36px",
height: "36px",
background: task !== "research" ? "#7E2AEA" : "white",
display: " flex",
justifyContent: "center",
alignItems: "center",
}}
>
<PieСhartIcon
style={{
color: task !== "research" ? "white" : "#7E2AEA",
fontSize: "24px",
}}
/>
</Box>
<Typography>Исследования</Typography>
</Button>
<Button
onClick={() => setTask("segmentation")}
sx={{
width: "275px",
height: "66px",
borderRadius: "12px",
display: "flex",
gap: "15px",
alignItems: "center",
justifyContent: "flex-start",
textTransform: "none",
backgroundColor: task !== "segmentation" ? "white" : "#7e2aea",
color: task !== "segmentation" ? "black" : "#ffffff",
}}
>
<Box
sx={{
borderRadius: "8px",
minWidth: "36px",
height: "36px",
background: task !== "segmentation" ? "#7E2AEA" : "white",
display: " flex",
justifyContent: "center",
alignItems: "center",
}}
>
<SegmentationIcon
style={{
color: task !== "segmentation" ? "white" : "#7E2AEA",
fontSize: "24px",
}}
/>
</Box>
<Typography>Сегментация</Typography>
</Button>
<Button
onClick={() => setTask("testing")}
sx={{
width: "275px",
height: "66px",
borderRadius: "12px",
display: "flex",
gap: "15px",
alignItems: "center",
justifyContent: "flex-start",
textTransform: "none",
backgroundColor: task !== "testing" ? "white" : "#7e2aea",
color: task !== "testing" ? "black" : "#ffffff",
}}
>
<Box
sx={{
borderRadius: "8px",
minWidth: "36px",
height: "36px",
background: task !== "testing" ? "#7E2AEA" : "white",
display: " flex",
justifyContent: "center",
alignItems: "center",
}}
>
<TestingIcon
style={{
color: task !== "testing" ? "white" : "#7E2AEA",
fontSize: "24px",
}}
/>
</Box>
<Typography>Тестирование</Typography>
</Button>
<Button
onClick={() => setTask("eсommerce")}
sx={{
width: "275px",
height: "66px",
borderRadius: "12px",
display: "flex",
gap: "15px",
alignItems: "center",
justifyContent: "flex-start",
textTransform: "none",
backgroundColor: task !== "eсommerce" ? "white" : "#7e2aea",
color: task !== "eсommerce" ? "black" : "#ffffff",
}}
>
<Box
sx={{
borderRadius: "8px",
minWidth: "36px",
height: "36px",
background: task !== "eсommerce" ? "#7E2AEA" : "white",
display: " flex",
justifyContent: "center",
alignItems: "center",
}}
>
<EcommerceIcon
style={{
color: task !== "eсommerce" ? "white" : "#7E2AEA",
fontSize: "24px",
}}
/>
</Box>
<Typography>E-commerce</Typography>
</Button>
</Box>
)}
{isTablet ? (
<Box
sx={{
height: "70%",
display: "flex",
flexDirection: "column",
justifyContent: "space-around",
paddingTop: "26px",
paddingLeft: isMobile ? undefined : isTablet ? "30px" : undefined,
gap: "30px",
mt: isMobile ? "40px" : "50px",
}}
>
<Typography
variant="h6"
fontSize={"36px"}
lineHeight={"42.66px"}
maxWidth={"455px"}
>
Исследуйте аудиторию и проверяйте гипотезы
</Typography>
<Box
sx={{
maxWidth: isTablet ? "100%" : "416px",
marginTop: "19px",
}}
>
<Typography
fontSize={"18px"}
lineHeight={"21px"}
color={"#4D4D4D"}
>
Опросник помогает проверять гипотезы и принимать грамотные
решения основанные на данных. Создавайте опросы, собирайте
обратную связь и анализируйте ответы в удобной аналитике в
личном кабинете.
</Typography>
</Box>
</Box>
<Box
sx={{
width: "100%",
maxWidth: isTablet ? "100%" : "550px",
marginTop: isMobile ? undefined : isTablet ? "42px" : undefined,
}}
>
<Box
component={"img"}
src={BigBlock}
sx={{
width: "100%",
height: isMobile ? "228px" : isTablet ? "671px" : "418px",
backgroundColor: "#c8dade",
borderRadius: "12px",
}}
<MobileQuizCard
header={businessTasks.research.header}
image={businessTasks.research.image}
text={businessTasks.research.text}
textIcon="Исследования"
icon={
<PieСhartIcon
style={{
color: "white",
fontSize: "24px",
}}
/>
}
/>
<MobileQuizCard
header={businessTasks.segmentation.header}
image={businessTasks.segmentation.image}
text={businessTasks.segmentation.text}
textIcon="Сегментация"
icon={
<SegmentationIcon
style={{
color: "white",
fontSize: "24px",
}}
/>
}
/>
<MobileQuizCard
header={businessTasks.testing.header}
image={businessTasks.testing.image}
text={businessTasks.testing.text}
textIcon="Тестирование"
icon={
<TestingIcon
style={{
color: "white",
fontSize: "24px",
}}
/>
}
/>
<MobileQuizCard
header={businessTasks.eсommerce.header}
image={businessTasks.eсommerce.image}
text={businessTasks.eсommerce.text}
textIcon="E-commerce"
icon={
<EcommerceIcon
style={{
color: "white",
fontSize: "24px",
}}
/>
}
/>
</Box>
</Box>
) : (
<>
<DesktopQuizCard
isOpen={task === "research"}
header={businessTasks.research.header}
image={businessTasks.research.image}
text={businessTasks.research.text}
/>
<DesktopQuizCard
isOpen={task === "segmentation"}
header={businessTasks.segmentation.header}
image={businessTasks.segmentation.image}
text={businessTasks.segmentation.text}
/>
<DesktopQuizCard
isOpen={task === "testing"}
header={businessTasks.testing.header}
image={businessTasks.testing.image}
text={businessTasks.testing.text}
/>
<DesktopQuizCard
isOpen={task === "eсommerce"}
header={businessTasks.eсommerce.header}
image={businessTasks.eсommerce.image}
text={businessTasks.eсommerce.text}
/>
</>
)}
</Box>
</SectionStyled>
);

131
src/pages/Landing/MobileQuizCard.tsx Normal file
View File

@ -0,0 +1,131 @@
import {
Box,
Slide,
Typography,
useMediaQuery,
useTheme,
Zoom,
} from "@mui/material";
import { FC, ReactNode, useRef, useState } from "react";
interface Iprops {
header: string;
image: string;
text: string;
textIcon: string;
icon: ReactNode;
}
export const MobileQuizCard: FC<Iprops> = ({
header,
image,
text,
icon,
textIcon,
}) => {
const [isOpen, setIsOpen] = useState(false);
const containerRef = useRef<HTMLElement>(null);
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
const handleChange = () => {
setIsOpen((prev) => !prev);
};
return (
<Box
ref={containerRef}
onClick={handleChange}
sx={{
width: "100%",
minHeight: isOpen ? "462px" : "auto",
backgroundColor: "#ffffff",
display: "flex",
justifyContent: "space-between",
flexWrap: "wrap",
padding: isMobile ? "15px" : "20px",
borderRadius: "12px",
boxSizing: "border-box",
boxShadow:
"0px 6.6501px 5.32008px 0px rgba(126, 42, 234, 0.03), 0px 12.52155px 10.01724px 0px rgba(126, 42, 234, 0.04), 0px 22.33631px 17.86905px 0px rgba(126, 42, 234, 0.04)",
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
gap: "15px",
}}
>
<Box
sx={{
borderRadius: "8px",
width: "36px",
height: "36px",
background: "#7E2AEA",
display: " flex",
justifyContent: "center",
alignItems: "center",
}}
>
{icon}
</Box>
<Typography>{textIcon}</Typography>
</Box>
{isOpen && (
<Box
sx={{
height: "70%",
display: "flex",
flexDirection: "column",
justifyContent: "space-around",
mt: "14px",
}}
>
<Box>
<Typography
variant="h6"
fontSize={isMobile ? "24px" : "36px"}
lineHeight={isMobile ? "normal" : "42.66px"}
maxWidth={"491px"}
>
{header}
</Typography>
<Box
sx={{
maxWidth: "100%",
marginTop: "20px",
}}
>
<Typography
fontSize={"18px"}
lineHeight={"21px"}
color={"#4D4D4D"}
>
{text}
</Typography>
</Box>
</Box>
<Box
sx={{
width: "100%",
maxWidth: "100%",
marginTop: "30px",
}}
>
<Box
component={"img"}
src={image}
sx={{
width: "100%",
height: isMobile ? "228px" : "671px",
backgroundColor: "#c8dade",
borderRadius: "12px",
}}
/>
</Box>
</Box>
)}
</Box>
);
};

5
src/pages/Landing/WhatTheFeatures.tsx
View File

@ -11,10 +11,12 @@ import Desktop4 from "./images/Frame 1171274552-3.png";
import Desktop5 from "./images/Frame 1171274552-4.png";
import Desktop6 from "./images/Frame 1171274552-5.png";
import Desktop7 from "./images/Frame 1171274552-6.png";
import LandingImg from "./images/LandingImg.png";
interface Props {
children: React.ReactNode;
image: string;
sx?: SxProps;
}
function BoxFich(props: Props) {
@ -33,6 +35,7 @@ function BoxFich(props: Props) {
flexDirection: "column",
justifyContent: isMobile ? "space-between" : undefined,
height: isMobile ? "450px" : undefined,
...props.sx,
}}
>
<Box
@ -55,6 +58,7 @@ function BoxFich(props: Props) {
display: "flex",
justifyContent: "end",
alignItems: "end",
mt: "auto",
}}
>
<img src={props.image} width={"96%"} />
@ -129,6 +133,7 @@ export default function Component() {
<BoxFich image={Desktop1}>
<Box sx={{ maxWidth: isTabletOnly ? "244px" : "174px" }}>
<Typography
variant={"h3"}
sx={{
color: "#7e2aea",
fontSize: "24px",

BIN
src/pages/Landing/images/LandingImg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.6 MiB

BIN
src/pages/Landing/images/businessTasks2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 456 KiB

BIN
src/pages/Landing/images/businessTasks3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 MiB

BIN
src/pages/Landing/images/businessTasks33.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 MiB

BIN
src/pages/Landing/images/businessTasks4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 352 KiB

1
src/pages/Questions/DataOptions/settingData.tsx
View File

@ -96,6 +96,7 @@ export default function SettingsData({ question }: SettingsDataProps) {
Настройки вопросов
</Typography>
<CustomCheckbox
dataCy="checkbox-optional-question"
sx={{ mr: isMobile ? "0px" : "16px" }}
label={"Необязательный вопрос"}
checked={!question.content.required}

1
src/pages/Questions/DraggableList/QuestionPageCard.tsx
View File

@ -133,6 +133,7 @@ export default function QuestionsPageCard({
}}
>
<TextField
id="questionTitle"
defaultValue={question.title}
placeholder={"Заголовок вопроса"}
onChange={({ target }: { target: HTMLInputElement }) =>

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

@ -126,6 +126,7 @@ export default function SettingDropDown({ question }: SettingDropDownProps) {
Настройки вопросов
</Typography>
<CustomCheckbox
dataCy="checkbox-optional-question"
label={"Необязательный вопрос"}
checked={!question.content.required}
handleChange={(e) => {

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

@ -95,6 +95,7 @@ export default function SettingEmoji({ question }: SettingEmojiProps) {
Настройки вопросов
</Typography>
<CustomCheckbox
dataCy="checkbox-optional-question"
sx={{ mr: isMobile ? "0px" : "16px" }}
label={"Необязательный вопрос"}
checked={!question.content.required}

1
src/pages/Questions/OptionsAndPicture/SettingOptionsAndPict.tsx
View File

@ -128,6 +128,7 @@ export default function SettingOptionsAndPict({
Настройки вопросов
</Typography>
<CustomCheckbox
dataCy="checkbox-optional-question"
sx={{ mr: isMobile ? "0px" : "16px" }}
label={"Необязательный вопрос"}
checked={!question.content.required}

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

@ -210,6 +210,7 @@ export default function SettingOpytionsPict({
Настройки вопросов
</Typography>
<CustomCheckbox
dataCy="checkbox-optional-question"
sx={{ alignItems: isMobile ? "flex-start" : "" }}
label={"Необязательный вопрос"}
checked={!question.content.required}

1
src/pages/Questions/OwnTextField/settingTextField.tsx
View File

@ -160,6 +160,7 @@ export default function SettingTextField({ question }: SettingTextFieldProps) {
}}
/> */}
<CustomCheckbox
dataCy="checkbox-optional-question"
sx={{
display: isMobile ? "flex" : "block",
mr: isMobile ? "0px" : "16px",

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

@ -80,6 +80,7 @@ export default function PageOptions({ disableInput, question }: Props) {
}}
>
<CustomTextField
id="addText"
placeholder={"Можно добавить текст"}
text={question.content.text}
onChange={({ target }) => setText(target.value)}

1
src/pages/Questions/RatingOptions/settingRating.tsx
View File

@ -167,6 +167,7 @@ export default function SettingSlider({ question }: SettingSliderProps) {
Настройки вопросов
</Typography>
<CustomCheckbox
dataCy="checkbox-optional-question"
sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
label={"Необязательный вопрос"}
checked={!question.content.required}

1
src/pages/Questions/SliderOptions/settingSlider.tsx
View File

@ -95,6 +95,7 @@ export default function SettingSlider({ question }: SettingSliderProps) {
Настройки вопросов
</Typography>
<CustomCheckbox
dataCy="checkbox-optional-question"
sx={{
mr: isMobile ? "0px" : "16px",
alignItems: isMobile ? "flex-end" : "center",

1
src/pages/Questions/UploadFile/settingUpload.tsx
View File

@ -62,6 +62,7 @@ export default function SettingsUpload({ question }: SettingsUploadProps) {
}}
/> */}
<CustomCheckbox
dataCy="checkbox-optional-question"
sx={{
display: isMobile ? "flex" : "block",
mr: isMobile ? "0px" : "16px",

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

@ -119,6 +119,7 @@ export default function ResponseSettings({ question }: Props) {
Настройки вопросов
</Typography>
<CustomCheckbox
dataCy="checkbox-optional-question"
sx={{ mr: isMobile ? "0px" : "16px" }}
label={"Необязательный вопрос"}
checked={!question.content.required}

6
src/pages/ResultPage/DescriptionForm/DescriptionForm.tsx
View File

@ -50,7 +50,11 @@ export const DescriptionForm = () => {
mb: "19px",
}}
>
<CustomTextField placeholder="Заголовок вопроса" text={""} />
<CustomTextField
id="questionTitle"
placeholder="Заголовок вопроса"
text={""}
/>
<IconButton>
<ExpandMoreIcon />
</IconButton>

1
src/pages/ResultPage/cards/EmailSettingsCard.tsx
View File

@ -119,6 +119,7 @@ export const EmailSettingsCard = ({ quizExpand }: Props) => {
Тема письма
</Typography>
<TextField
id="questionTitle"
value={quiz.config.resultInfo.theme}
placeholder={"Заголовок вопроса"}
onChange={({ target }: { target: HTMLInputElement }) => {

1
src/pages/ViewPublicationPage/Footer.tsx
View File

@ -375,6 +375,7 @@ export const Footer = ({
{isMobileMini ? "←" : "← Назад"}
</Button>
<Button
id="buttonFurther"
disabled={disableNextButton}
variant="contained"
sx={{ fontSize: "16px", padding: "10px 15px" }}

8
src/pages/ViewPublicationPage/StartPageViewPublication.tsx
View File

@ -127,6 +127,7 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
/>
)}
<Typography
data-cy="company"
sx={{
fontSize: "14px",
color:
@ -167,6 +168,7 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
}}
>
<Typography
data-cy="heading"
sx={{
fontWeight: "bold",
fontSize: "26px",
@ -188,6 +190,7 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
{quiz.name}
</Typography>
<Typography
data-cy="text"
sx={{
fontSize: "16px",
m: "16px 0",
@ -211,6 +214,7 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
}
>
<Button
data-cy="startpage-button"
variant="contained"
sx={{
fontSize: "16px",
@ -244,6 +248,7 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
isMobileDevice ? (
<Link href={`tel:${quiz.config.info.phonenumber}`}>
<Typography
data-cy="phonenumber"
sx={{
fontSize: "16px",
color: theme.palette.primary.main,
@ -255,6 +260,7 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
) : (
<ButtonBase onClick={handleCopyNumber}>
<Typography
data-cy="phonenumber"
sx={{
fontSize: "16px",
color: theme.palette.primary.main,
@ -266,12 +272,14 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
)
) : (
<Typography
data-cy="phonenumber"
sx={{ fontSize: "16px", color: theme.palette.primary.main }}
>
{quiz.config.info.phonenumber}
</Typography>
)}
<Typography
data-cy="legalInformation"
sx={{
width: "100%",
overflowWrap: "break-word",

2
src/pages/createQuize/QuizCard.tsx
View File

@ -69,6 +69,7 @@ export default function QuizCard({
return (
<Box
data-cy="quiz-card"
sx={{
display: "flex",
flexDirection: "column",
@ -207,6 +208,7 @@ export default function QuizCard({
Копировать
</Button> */}
<Button
id="deleteButton"
sx={{
display: "block",
width: "100%",

4
src/pages/main.tsx
View File

@ -177,6 +177,7 @@ export default function Main({ sidebar, header, footer, Page }: Props) {
{quiz?.status === "start" &&
(!isLinkButton ? (
<Box
data-cy="link-test"
component={Link}
sx={{
whiteSpace: "nowrap",
@ -193,6 +194,7 @@ export default function Main({ sidebar, header, footer, Page }: Props) {
</Box>
) : (
<Box
data-cy="link-test"
component={Link}
sx={{
cursor: "pointer",
@ -215,6 +217,7 @@ export default function Main({ sidebar, header, footer, Page }: Props) {
{/* Маленькая кнопка ссылки */}
{isMobile && quiz?.status === "start" && (
<Box
data-cy="link-test"
component={Link}
sx={{
cursor: "pointer",
@ -237,6 +240,7 @@ export default function Main({ sidebar, header, footer, Page }: Props) {
{currentStep <= 1 && (
<Box sx={{ textAlign: "end", width: "100%" }}>
<IconButton
data-cy="button-preview"
onClick={toggleQuizPreview}
sx={{
pointerEvents: "auto",

9
src/pages/startPage/StartPageSettings.tsx
View File

@ -126,7 +126,7 @@ export default function StartPageSettings() {
Дизайн
</Typography>
</Button>
<Button onClick={() => setFormState("content")}>
<Button id="contentButton" onClick={() => setFormState("content")}>
<Typography
sx={{
fontWeight: 500,
@ -616,6 +616,7 @@ export default function StartPageSettings() {
Заголовок
</Typography>
<CustomTextField
id="headingInput"
placeholder="Имя заголовка опроса для подбора табуретки"
value={quiz.name}
onChange={(e) =>
@ -636,6 +637,7 @@ export default function StartPageSettings() {
Текст
</Typography>
<CustomTextField
id="textInput"
placeholder="Внимательно заполняйте поля ответов"
value={quiz.config.startpage.description}
onChange={(e) =>
@ -656,6 +658,7 @@ export default function StartPageSettings() {
Текст кнопки
</Typography>
<CustomTextField
id="buttonTextInput"
placeholder="Начать опрос"
value={quiz.config.startpage.button}
onChange={(e) =>
@ -676,6 +679,7 @@ export default function StartPageSettings() {
Телефон
</Typography>
<CustomTextField
id="phoneInput"
placeholder="8-800-000-00-00"
type="number"
value={quiz.config.info.phonenumber}
@ -707,6 +711,7 @@ export default function StartPageSettings() {
Название или слоган компании
</Typography>
<CustomTextField
id="companyInput"
placeholder="Только лучшее"
value={quiz.config.info.orgname}
onChange={(e) =>
@ -727,6 +732,7 @@ export default function StartPageSettings() {
Сайт
</Typography>
<CustomTextField
id="websiteInput"
placeholder="https://mysite.com"
value={quiz.config.info.site}
onChange={(e) =>
@ -747,6 +753,7 @@ export default function StartPageSettings() {
Юридическая информация
</Typography>
<CustomTextField
id="legalInformationInput"
placeholder="Данные наших документов"
value={quiz.config.info.law}
onChange={(e) =>

3
src/ui_kit/CustomTextField.tsx
View File

@ -13,6 +13,7 @@ import type { InputProps, SxProps, Theme } from "@mui/material";
interface CustomTextFieldProps {
placeholder: string;
id?: string;
value?: string;
error?: string;
emptyError?: boolean;
@ -31,6 +32,7 @@ interface CustomTextFieldProps {
export default function CustomTextField({
placeholder,
id,
value = "",
onChange,
onKeyDown,
@ -101,6 +103,7 @@ export default function CustomTextField({
</InputLabel>
)}
<Input
id={id}
defaultValue={text}
fullWidth
value={inputValue}

7
src/ui_kit/StartPagePreview/QuizPreviewLayout.tsx
View File

@ -86,6 +86,7 @@ export default function QuizPreviewLayout() {
/>
)}
<Typography
data-cy="company"
sx={{
fontSize: "12px",
color:
@ -115,6 +116,7 @@ export default function QuizPreviewLayout() {
}}
>
<Typography
data-cy="heading"
sx={{
fontWeight: "bold",
color:
@ -126,6 +128,7 @@ export default function QuizPreviewLayout() {
{quiz.name}
</Typography>
<Typography
data-cy="text"
sx={{
fontSize: "12px",
color:
@ -138,6 +141,7 @@ export default function QuizPreviewLayout() {
</Typography>
<Box>
<Button
data-cy="startpage-button"
variant="contained"
sx={{
fontSize: "16px",
@ -166,6 +170,7 @@ export default function QuizPreviewLayout() {
) : (
<ButtonBase onClick={handleCopyNumber}>
<Typography
data-cy="phonenumber"
sx={{
fontSize: "16px",
color: theme.palette.primary.main,
@ -177,6 +182,7 @@ export default function QuizPreviewLayout() {
)
) : (
<Typography
data-cy="phonenumber"
sx={{
fontSize: "16px",
color:
@ -189,6 +195,7 @@ export default function QuizPreviewLayout() {
</Typography>
)}
<Typography
data-cy="legalInformation"
sx={{
fontSize: "12px",
color:

1
src/ui_kit/Toolbars/ButtonRecallQuiz.tsx
View File

@ -40,6 +40,7 @@ export const ButtonRecallQuiz = () => {
return (
<Button
data-cy="publish-button"
variant="contained"
sx={{
fontSize: "14px",