test for category translations (#1247)

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");

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: {

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"]'
+};

cypress/elements/translations/languages-list.js

@@ -0,0 +1,3 @@
+export const LANGUAGES_LIST = {
+  polishLanguageButton: '[data-test-id="PL"]'
+};

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);

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}`
+        );
+      });
+    });
+  });
+});

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)

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);
+    }
+  });
+}

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/",
+  weightRete: "weight/"
-  vouchers: "discounts/vouchers/"
 };
 
 export const appDetailsUrl = appId => `${urlList.apps}custom/${appId}`;

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -253081,6 +253081,7 @@ exports[`Storyshots Views / Translations / Language list default 1`] = `
           >
             <tr
               class="MuiTableRow-root-id TranslationsLanguageList-link-id MuiTableRow-hover-id"
+              data-test-id="DE"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id TranslationsLanguageList-capitalize-id"
@@ -253090,6 +253091,7 @@ exports[`Storyshots Views / Translations / Language list default 1`] = `
             </tr>
             <tr
               class="MuiTableRow-root-id TranslationsLanguageList-link-id MuiTableRow-hover-id"
+              data-test-id="EN"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id TranslationsLanguageList-capitalize-id"
@@ -253099,6 +253101,7 @@ exports[`Storyshots Views / Translations / Language list default 1`] = `
             </tr>
             <tr
               class="MuiTableRow-root-id TranslationsLanguageList-link-id MuiTableRow-hover-id"
+              data-test-id="ES"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id TranslationsLanguageList-capitalize-id"
@@ -253108,6 +253111,7 @@ exports[`Storyshots Views / Translations / Language list default 1`] = `
             </tr>
             <tr
               class="MuiTableRow-root-id TranslationsLanguageList-link-id MuiTableRow-hover-id"
+              data-test-id="PL"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id TranslationsLanguageList-capitalize-id"
@@ -253175,6 +253179,7 @@ exports[`Storyshots Views / Translations / Language list loading 1`] = `
           >
             <tr
               class="MuiTableRow-root-id"
+              data-test-id="skeleton"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id TranslationsLanguageList-capitalize-id"

src/translations/components/TranslationFields/TranslationFields.tsx

@@ -163,7 +163,11 @@ const TranslationFields: React.FC<TranslationFieldsProps> = props => {
                   {field.displayName}
                 </Typography>
                 <div className={classes.editButtonContainer}>
-                  <Button color="primary" onClick={() => onEdit(field.name)}>
+                  <Button
+                    color="primary"
+                    onClick={() => onEdit(field.name)}
+                    data-test-id={`edit-${field.name}`}
+                  >
                     <FormattedMessage {...buttonMessages.edit} />
                   </Button>
                 </div>

src/translations/components/TranslationFields/TranslationFieldsLong.tsx

@@ -40,6 +40,7 @@ const TranslationFieldsLong: React.FC<TranslationFieldsLongProps> = ({
               defaultMessage: "Translation"
             })}
             name="translation"
+            data-test-id="translation"
             value={data.translation || ""}
             onChange={change}
           />

src/translations/components/TranslationFields/TranslationFieldsRich.tsx

@@ -47,6 +47,7 @@ const TranslationFieldsRich: React.FC<TranslationFieldsRichProps> = ({
           defaultMessage: "Translation"
         })}
         name="translation"
+        data-test-id="translation"
         onChange={change}
       />
       <TranslationFieldsSave

src/translations/components/TranslationFields/TranslationFieldsSave.tsx

@@ -37,6 +37,7 @@ const TranslationFieldsSave: React.FC<TranslationFieldsSaveProps> = props => {
   return (
     <div className={classes.root}>
       <ConfirmButton
+        data-test="button-bar-confirm"
         className={classes.confirmButton}
         transitionState={saveButtonState}
         onClick={onSave}

src/translations/components/TranslationFields/TranslationFieldsShort.tsx

@@ -39,6 +39,7 @@ const TranslationFieldsShort: React.FC<TranslationFieldsShortProps> = ({
               defaultMessage: "Translation"
             })}
             name="translation"
+            data-test-id="translation"
             value={data.translation || ""}
             onChange={change}
           />

src/translations/components/TranslationsLanguageList/TranslationsLanguageList.tsx

@@ -51,6 +51,7 @@ const TranslationsLanguageList: React.FC<TranslationsLanguageListProps> = props
             languages,
             language => (
               <TableRow
+                data-test-id={language ? language.code : "skeleton"}
                 className={!!language ? classes.link : undefined}
                 hover={!!language}
                 key={language ? language.code : "skeleton"}