From a1ed5d1348d4968b27789d0b79cfc3cd75e2fd5f Mon Sep 17 00:00:00 2001 From: Karolina Rakoczy Date: Thu, 2 Sep 2021 12:36:46 +0200 Subject: [PATCH] test for category translations (#1247) --- cypress/apiRequests/Category.js | 17 +++- cypress/elements/shared/sharedElements.js | 3 +- .../translations/element-translation.js | 7 ++ .../elements/translations/languages-list.js | 3 + .../integration/configuration/siteSettings.js | 1 + .../integration/configuration/translations.js | 82 +++++++++++++++++++ cypress/steps/categoriesSteps.js | 2 +- cypress/steps/shared/tables.js | 13 +++ cypress/url/urlList.js | 5 +- .../__snapshots__/Stories.test.ts.snap | 5 ++ .../TranslationFields/TranslationFields.tsx | 6 +- .../TranslationFieldsLong.tsx | 1 + .../TranslationFieldsRich.tsx | 1 + .../TranslationFieldsSave.tsx | 1 + .../TranslationFieldsShort.tsx | 1 + .../TranslationsLanguageList.tsx | 1 + 16 files changed, 142 insertions(+), 7 deletions(-) create mode 100644 cypress/elements/translations/element-translation.js create mode 100644 cypress/elements/translations/languages-list.js create mode 100644 cypress/integration/configuration/translations.js create mode 100644 cypress/steps/shared/tables.js diff --git a/cypress/apiRequests/Category.js b/cypress/apiRequests/Category.js index 9f21a37f6..ee94bb68c 100644 --- a/cypress/apiRequests/Category.js +++ b/cypress/apiRequests/Category.js @@ -1,3 +1,5 @@ +import { getValueWithDefault } from "./utils/Utils"; + export function createCategory(name, slug = name) { const mutation = `mutation{ categoryCreate(input:{name:"${name}", slug: "${slug}"}){ @@ -16,12 +18,22 @@ export function createCategory(name, slug = name) { .its("body.data.categoryCreate.category"); } -export function getCategory(categoryId) { +export function getCategory(categoryId, translationLanguageCode) { + const translation = getValueWithDefault( + translationLanguageCode, + `translation(languageCode:${translationLanguageCode}){ + name + description + seoTitle + seoDescription + }` + ); + const mutation = `query{ category(id:"${categoryId}"){ name description - products{ + products(first:100){ edges{ node{ name @@ -35,6 +47,7 @@ export function getCategory(categoryId) { } } } + ${translation} } }`; return cy.sendRequestWithQuery(mutation).its("body.data.category"); diff --git a/cypress/elements/shared/sharedElements.js b/cypress/elements/shared/sharedElements.js index 6d6de4811..91c4b67ad 100644 --- a/cypress/elements/shared/sharedElements.js +++ b/cypress/elements/shared/sharedElements.js @@ -4,12 +4,13 @@ export const SHARED_ELEMENTS = { circularProgress: '[class*="CircularProgress-circle"]', skeleton: '[data-test-id="skeleton"]', table: 'table[class*="Table"]', - tableRow: '[data-test="id"]', + tableRow: '[data-test="id"], [class*="MuiTableRow"]', notificationSuccess: '[data-test="notification"][data-test-type="success"]', dialog: '[role="dialog"]', searchInput: '[data-test-id="searchInput"]', selectOption: '[data-test="selectFieldOption"]', richTextEditor: { + loader: '[class*="codex-editor__loader"]', empty: '[class*="codex-editor--empty"]' }, filters: { diff --git a/cypress/elements/translations/element-translation.js b/cypress/elements/translations/element-translation.js new file mode 100644 index 000000000..c5b77a3f7 --- /dev/null +++ b/cypress/elements/translations/element-translation.js @@ -0,0 +1,7 @@ +export const ELEMENT_TRANSLATION = { + editNameButton: '[data-test-id="edit-name"]', + editDescriptionButton: '[data-test-id="edit-description"]', + editSeoTitleButton: '[data-test-id="edit-seoTitle"]', + editSeoDescriptionButton: '[data-test-id="edit-seoDescription"]', + translationInputField: '[data-test-id="translation"]' +}; diff --git a/cypress/elements/translations/languages-list.js b/cypress/elements/translations/languages-list.js new file mode 100644 index 000000000..daf25e350 --- /dev/null +++ b/cypress/elements/translations/languages-list.js @@ -0,0 +1,3 @@ +export const LANGUAGES_LIST = { + polishLanguageButton: '[data-test-id="PL"]' +}; diff --git a/cypress/integration/configuration/siteSettings.js b/cypress/integration/configuration/siteSettings.js index dc2ffe435..892e44cc9 100644 --- a/cypress/integration/configuration/siteSettings.js +++ b/cypress/integration/configuration/siteSettings.js @@ -14,6 +14,7 @@ filterTests(["all"], () => { before(() => { cy.clearSessionData().loginUserViaRequest(); + cy.fixture("addresses").then(({ usAddress, plAddress }) => { address = usAddress; updateShopAddress(plAddress); diff --git a/cypress/integration/configuration/translations.js b/cypress/integration/configuration/translations.js new file mode 100644 index 000000000..cb866671a --- /dev/null +++ b/cypress/integration/configuration/translations.js @@ -0,0 +1,82 @@ +import faker from "faker"; + +import { createCategory, getCategory } from "../../apiRequests/Category"; +import { BUTTON_SELECTORS } from "../../elements/shared/button-selectors"; +import { SHARED_ELEMENTS } from "../../elements/shared/sharedElements"; +import { ELEMENT_TRANSLATION } from "../../elements/translations/element-translation"; +import { LANGUAGES_LIST } from "../../elements/translations/languages-list"; +import { confirmationMessageShouldDisappear } from "../../steps/shared/confirmationMessages"; +import { findElementOnTable } from "../../steps/shared/tables"; +import filterTests from "../../support/filterTests"; +import { urlList } from "../../url/urlList"; +import { deleteCategoriesStartsWith } from "../../utils/categoryUtils"; + +filterTests(["all"], () => { + describe("Tests for translations", () => { + const startsWith = "Translations"; + const randomNumber = faker.datatype.number(); + const name = `${startsWith}${randomNumber}`; + + let category; + + before(() => { + cy.clearSessionData().loginUserViaRequest(); + deleteCategoriesStartsWith(startsWith); + createCategory(name).then(categoryResp => (category = categoryResp)); + }); + + beforeEach(() => { + cy.clearSessionData().loginUserViaRequest(); + }); + + it("should create translation", () => { + cy.visit(urlList.translations) + .get(LANGUAGES_LIST.polishLanguageButton) + .click(); + findElementOnTable(category.name); + cy.get(ELEMENT_TRANSLATION.editNameButton) + .click() + .get(SHARED_ELEMENTS.skeleton) + .should("not.exist") + .get(ELEMENT_TRANSLATION.translationInputField) + .type(`TranslatedName${randomNumber}`) + .get(BUTTON_SELECTORS.confirm) + .click(); + confirmationMessageShouldDisappear(); + cy.get(ELEMENT_TRANSLATION.editDescriptionButton) + .click() + .get(SHARED_ELEMENTS.richTextEditor.loader) + .should("not.exist") + .get(ELEMENT_TRANSLATION.translationInputField) + .type(`TranslatedDescription${randomNumber}`) + .wait(500) + .get(BUTTON_SELECTORS.confirm) + .click(); + confirmationMessageShouldDisappear(); + cy.get(ELEMENT_TRANSLATION.editSeoTitleButton) + .click() + .get(ELEMENT_TRANSLATION.translationInputField) + .type(`TranslatedSeoTitle${randomNumber}`) + .get(BUTTON_SELECTORS.confirm) + .click(); + confirmationMessageShouldDisappear(); + cy.get(ELEMENT_TRANSLATION.editSeoDescriptionButton) + .click() + .get(ELEMENT_TRANSLATION.translationInputField) + .type(`TranslatedSeoDescription${randomNumber}`) + .get(BUTTON_SELECTORS.confirm) + .click(); + confirmationMessageShouldDisappear(); + getCategory(category.id, "PL").then(({ translation }) => { + expect(translation.name).to.eq(`TranslatedName${randomNumber}`); + expect(translation.description).to.includes( + `TranslatedDescription${randomNumber}` + ); + expect(translation.seoTitle).to.eq(`TranslatedSeoTitle${randomNumber}`); + expect(translation.seoDescription).to.eq( + `TranslatedSeoDescription${randomNumber}` + ); + }); + }); + }); +}); diff --git a/cypress/steps/categoriesSteps.js b/cypress/steps/categoriesSteps.js index adeb27f0c..5cf7fdc0e 100644 --- a/cypress/steps/categoriesSteps.js +++ b/cypress/steps/categoriesSteps.js @@ -1,6 +1,6 @@ import { CATEGORY_DETAILS } from "../elements/catalog/categories/category-details"; import { BUTTON_SELECTORS } from "../elements/shared/button-selectors"; -import { confirmationMessageShouldDisappear } from "./shared/confirmationMessages"; +import { confirmationMessageShouldDisappear } from "./shared/confirmationMessage"; export function createCategory({ name, description }) { cy.get(CATEGORY_DETAILS.nameInput) diff --git a/cypress/steps/shared/tables.js b/cypress/steps/shared/tables.js new file mode 100644 index 000000000..a9481b239 --- /dev/null +++ b/cypress/steps/shared/tables.js @@ -0,0 +1,13 @@ +import { BUTTON_SELECTORS } from "../../elements/shared/button-selectors"; +import { SHARED_ELEMENTS } from "../../elements/shared/sharedElements"; + +export function findElementOnTable(elementName) { + cy.getTextFromElement(SHARED_ELEMENTS.table).then(tableText => { + if (tableText.includes(elementName)) { + cy.contains(SHARED_ELEMENTS.tableRow, elementName).click(); + } else { + cy.get(BUTTON_SELECTORS.nextPaginationButton).click(); + findElementOnTable(elementName); + } + }); +} diff --git a/cypress/url/urlList.js b/cypress/url/urlList.js index 63d9dc38a..ad57d8fcd 100644 --- a/cypress/url/urlList.js +++ b/cypress/url/urlList.js @@ -22,9 +22,10 @@ export const urlList = { shippingMethods: "shipping/", siteSettings: "site-settings/", staffMembers: "staff/", + translations: "translations/", + vouchers: "discounts/vouchers/", warehouses: "warehouses/", - weightRete: "weight/", - vouchers: "discounts/vouchers/" + weightRete: "weight/" }; export const appDetailsUrl = appId => `${urlList.apps}custom/${appId}`; diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap index cffff3c27..bd92e9513 100644 --- a/src/storybook/__snapshots__/Stories.test.ts.snap +++ b/src/storybook/__snapshots__/Stories.test.ts.snap @@ -253081,6 +253081,7 @@ exports[`Storyshots Views / Translations / Language list default 1`] = ` > = props => { {field.displayName}
-
diff --git a/src/translations/components/TranslationFields/TranslationFieldsLong.tsx b/src/translations/components/TranslationFields/TranslationFieldsLong.tsx index 8b4366447..5792dc651 100644 --- a/src/translations/components/TranslationFields/TranslationFieldsLong.tsx +++ b/src/translations/components/TranslationFields/TranslationFieldsLong.tsx @@ -40,6 +40,7 @@ const TranslationFieldsLong: React.FC = ({ defaultMessage: "Translation" })} name="translation" + data-test-id="translation" value={data.translation || ""} onChange={change} /> diff --git a/src/translations/components/TranslationFields/TranslationFieldsRich.tsx b/src/translations/components/TranslationFields/TranslationFieldsRich.tsx index 0d741d7fa..1a464826e 100644 --- a/src/translations/components/TranslationFields/TranslationFieldsRich.tsx +++ b/src/translations/components/TranslationFields/TranslationFieldsRich.tsx @@ -47,6 +47,7 @@ const TranslationFieldsRich: React.FC = ({ defaultMessage: "Translation" })} name="translation" + data-test-id="translation" onChange={change} /> = props => { return (
= ({ defaultMessage: "Translation" })} name="translation" + data-test-id="translation" value={data.translation || ""} onChange={change} /> diff --git a/src/translations/components/TranslationsLanguageList/TranslationsLanguageList.tsx b/src/translations/components/TranslationsLanguageList/TranslationsLanguageList.tsx index da32b7c5f..eb0abaa3a 100644 --- a/src/translations/components/TranslationsLanguageList/TranslationsLanguageList.tsx +++ b/src/translations/components/TranslationsLanguageList/TranslationsLanguageList.tsx @@ -51,6 +51,7 @@ const TranslationsLanguageList: React.FC = props languages, language => (