test for category translations (#1247)

2021-09-02 12:36:46 +02:00 · 2021-09-02 12:36:46 +02:00 · a1ed5d1348
commit a1ed5d1348
parent ab0717ef23
16 changed files with 142 additions and 7 deletions
--- 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");
--- 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: {
--- a/cypress/elements/translations/element-translation.js
+++ 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"]'
+};
--- a/cypress/elements/translations/languages-list.js
+++ b/cypress/elements/translations/languages-list.js
@ -0,0 +1,3 @@
+export const LANGUAGES_LIST = {
+  polishLanguageButton: '[data-test-id="PL"]'
+};
--- 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);
--- a/cypress/integration/configuration/translations.js
+++ 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}`
+        );
+      });
+    });
+  });
+});
--- 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)
--- a/cypress/steps/shared/tables.js
+++ 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);
+    }
+  });
+}
--- 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}`;
--- 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`] = `
          >
            <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"
--- a/src/translations/components/TranslationFields/TranslationFields.tsx
+++ b/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>
--- a/src/translations/components/TranslationFields/TranslationFieldsLong.tsx
+++ b/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}
          />
--- a/src/translations/components/TranslationFields/TranslationFieldsRich.tsx
+++ b/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
--- a/src/translations/components/TranslationFields/TranslationFieldsSave.tsx
+++ b/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}
--- a/src/translations/components/TranslationFields/TranslationFieldsShort.tsx
+++ b/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}
          />
--- a/src/translations/components/TranslationsLanguageList/TranslationsLanguageList.tsx
+++ b/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"}