fixed issues with CLA, and added tests for update translation (#1868)

* fixed issues with CLA, and added tests for update translation

* npm i

cypress/elements/translations/element-translation.js

@@ -3,5 +3,6 @@ export const ELEMENT_TRANSLATION = {
   editDescriptionButton: '[data-test-id="edit-description"]',
   editSeoTitleButton: '[data-test-id="edit-seoTitle"]',
   editSeoDescriptionButton: '[data-test-id="edit-seoDescription"]',
-  translationInputField: 'div[data-test-id*="translation"]'
+  translationInputField: '[data-test-id="translation-field"]',
+  translationTextEditor: '[data-test-id="rich-text-editor-translation"]'
 };

cypress/integration/configuration/translations.js

@@ -1,90 +0,0 @@
-/// <reference types="cypress"/>
-/// <reference types="../../support"/>
-
-import faker from "faker";
-
-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 { urlList } from "../../fixtures/urlList";
-import {
-  createCategory,
-  getCategory
-} from "../../support/api/requests/Category";
-import { deleteCategoriesStartsWith } from "../../support/api/utils/catalog/categoryUtils";
-import filterTests from "../../support/filterTests";
-import { enterCategoryTranslation } from "../../support/pages/translationPage";
-
-filterTests({ definedTags: ["all"], version: "3.0.0" }, () => {
-  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: startsWith }).then(
-        categoryResp => (category = categoryResp)
-      );
-    });
-
-    beforeEach(() => {
-      cy.clearSessionData().loginUserViaRequest();
-    });
-
-    it("should create translation", () => {
-      cy.visit(urlList.translations);
-      enterCategoryTranslation(
-        LANGUAGES_LIST.polishLanguageButton,
-        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()
-        .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()
-        .get(ELEMENT_TRANSLATION.editSeoTitleButton)
-        .click()
-        .get(ELEMENT_TRANSLATION.translationInputField)
-        .type(`TranslatedSeoTitle${randomNumber}`)
-        .get(BUTTON_SELECTORS.confirm)
-        .click()
-        .confirmationMessageShouldDisappear()
-        .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/integration/translations.js

@@ -0,0 +1,94 @@
+/// <reference types="cypress"/>
+/// <reference types="../support"/>
+
+import faker from "faker";
+
+import {
+  createCategory,
+  getCategory,
+  updateCategoryTranslation
+} from "../support/api/requests/Category";
+import { deleteCategoriesStartsWith } from "../support/api/utils/catalog/categoryUtils";
+import filterTests from "../support/filterTests";
+import { updateTranslationToCategory } from "../support/pages/translationsPage";
+
+filterTests({ definedTags: ["all"], version: "3.0.0" }, () => {
+  describe("As an admin I want to manage translations", () => {
+    const startsWith = "TestTranslations";
+    const randomNumber = faker.datatype.number();
+    const name = `${startsWith}${randomNumber}`;
+
+    let category;
+
+    before(() => {
+      cy.clearSessionData().loginUserViaRequest();
+      deleteCategoriesStartsWith(startsWith);
+      createCategory({ name: startsWith }).then(
+        categoryResp => (category = categoryResp)
+      );
+    });
+
+    beforeEach(() => {
+      cy.clearSessionData().loginUserViaRequest();
+    });
+
+    it("should be able to create new translation. TC:SALEOR_1701", () => {
+      const translatedName = `TranslatedName${randomNumber}`;
+      const translatedDescription = `TranslatedDescription${randomNumber}`;
+      const translatedSeoTitle = `TranslatedSeoTitle${randomNumber}`;
+      const translatedSeoDescription = `TranslatedSeoDescription${randomNumber}`;
+
+      updateTranslationToCategory({
+        categoryName: category.name,
+        translatedName,
+        translatedDescription,
+        translatedSeoTitle,
+        translatedSeoDescription
+      });
+      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}`
+        );
+      });
+    });
+
+    it("should be able to update translation. TC:SALEOR_1702", () => {
+      const randomNumber = faker.datatype.number();
+      const startWithUpdate = `Translations_Update_${randomNumber}`;
+      const seoTitleUpdate = `${startWithUpdate}_seoTitle`;
+      const seoDescriptionUpdate = `${startWithUpdate}_seoDescription`;
+      const nameUpdate = `${startWithUpdate}_nameUpdate`;
+      const descriptionUpdate = `${startWithUpdate}_descryptionUpdate`;
+
+      updateCategoryTranslation({
+        categoryTranslateId: category.id,
+        languageCode: "PL",
+        seoTitle: "test",
+        seoDescription: "test",
+        name: "test",
+        description: "test"
+      })
+        .then(() => {
+          updateTranslationToCategory({
+            categoryName: category.name,
+            translatedName: nameUpdate,
+            translatedDescription: descriptionUpdate,
+            translatedSeoTitle: seoTitleUpdate,
+            translatedSeoDescription: seoDescriptionUpdate
+          });
+          getCategory(category.id, "PL");
+        })
+        .then(({ translation }) => {
+          expect(translation.name).to.eq(nameUpdate);
+          expect(translation.description).to.includes(descriptionUpdate);
+          expect(translation.seoTitle).to.eq(seoTitleUpdate);
+          expect(translation.seoDescription).to.includes(seoDescriptionUpdate);
+        });
+    });
+  });
+});

cypress/support/api/requests/Category.js

@@ -83,3 +83,29 @@ export function deleteCategory(categoryId) {
   }`;
   return cy.sendRequestWithQuery(mutation);
 }
+
+export function updateCategoryTranslation({
+  categoryTranslateId,
+  languageCode,
+  seoTitle,
+  seoDescription,
+  name,
+  description
+}) {
+  const mutation = `mutation Update_fields{
+    categoryTranslate (id:"${categoryTranslateId}",languageCode:${languageCode},input:{
+      seoTitle:"${seoTitle}",
+      seoDescription:"${seoDescription}",
+      name:"${name}"
+      description: "{\\"time\\":1642670800306,\\"blocks\\":[{\\"id\\":\\"l8oQJqyxa3\\",\\"type\\":\\"paragraph\\",\\"data\\":{\\"text\\":\\"${description}\\"}}],\\"version\\":\\"2.22.2\\"}"
+    })
+    {
+      errors{
+        field
+        message
+      }
+    }
+  }
+  `;
+  return cy.sendRequestWithQuery(mutation);
+}

cypress/support/pages/translationPage.js

@@ -1,28 +0,0 @@
-import { BUTTON_SELECTORS } from "../../elements/shared/button-selectors";
-import { SHARED_ELEMENTS } from "../../elements/shared/sharedElements";
-
-export function enterCategoryTranslation(language, categoryName) {
-  cy.addAliasToGraphRequest("CategoryTranslations");
-  cy.get(language).click();
-  getCategoryFromTable(categoryName);
-}
-
-function getCategoryFromTable(categoryName) {
-  cy.wait("@CategoryTranslations")
-    .its("response.body")
-    .then(bodies => {
-      const body = bodies[0];
-      const edges = body.data.translations.edges;
-      const isCategoryInResp = edges.find(
-        edge => edge.node.category.name === categoryName
-      );
-      if (isCategoryInResp) {
-        cy.contains(SHARED_ELEMENTS.tableRow, categoryName).click({
-          force: true
-        });
-      } else {
-        cy.get(BUTTON_SELECTORS.nextPaginationButton).click();
-        getCategoryFromTable(categoryName);
-      }
-    });
-}

cypress/support/pages/translationsPage.js

@@ -0,0 +1,75 @@
+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 { urlList } from "../../fixtures/urlList";
+
+export function updateTranslationToCategory({
+  categoryName,
+  translatedName,
+  translatedDescription,
+  translatedSeoTitle,
+  translatedSeoDescription
+}) {
+  cy.visit(urlList.translations);
+  enterCategoryTranslation(LANGUAGES_LIST.polishLanguageButton, categoryName);
+  cy.get(ELEMENT_TRANSLATION.editNameButton)
+    .click()
+    .get(SHARED_ELEMENTS.skeleton)
+    .should("not.exist")
+    .get(ELEMENT_TRANSLATION.translationInputField)
+    .clearAndType(translatedName)
+    .get(BUTTON_SELECTORS.confirm)
+    .click()
+    .confirmationMessageShouldDisappear()
+    .get(ELEMENT_TRANSLATION.editDescriptionButton)
+    .click()
+    .get(SHARED_ELEMENTS.richTextEditor.loader)
+    .should("not.exist")
+    .get(ELEMENT_TRANSLATION.translationTextEditor)
+    .clearAndType(translatedDescription)
+    .wait(500)
+    .get(BUTTON_SELECTORS.confirm)
+    .click()
+    .confirmationMessageShouldDisappear()
+    .get(ELEMENT_TRANSLATION.editSeoTitleButton)
+    .click()
+    .get(ELEMENT_TRANSLATION.translationInputField)
+    .clearAndType(translatedSeoTitle)
+    .get(BUTTON_SELECTORS.confirm)
+    .click()
+    .confirmationMessageShouldDisappear()
+    .get(ELEMENT_TRANSLATION.editSeoDescriptionButton)
+    .click()
+    .get(ELEMENT_TRANSLATION.translationInputField)
+    .clearAndType(translatedSeoDescription)
+    .get(BUTTON_SELECTORS.confirm)
+    .click()
+    .confirmationMessageShouldDisappear();
+}
+
+export function enterCategoryTranslation(language, categoryName) {
+  cy.addAliasToGraphRequest("CategoryTranslations");
+  cy.get(language).click();
+  getCategoryFromTable(categoryName);
+}
+
+function getCategoryFromTable(categoryName) {
+  cy.wait("@CategoryTranslations")
+    .its("response.body")
+    .then(bodies => {
+      const body = bodies[0];
+      const edges = body.data.translations.edges;
+      const isCategoryInResp = edges.find(
+        edge => edge.node.category.name === categoryName
+      );
+      if (isCategoryInResp) {
+        cy.contains(SHARED_ELEMENTS.tableRow, categoryName).click({
+          force: true
+        });
+      } else {
+        cy.get(BUTTON_SELECTORS.nextPaginationButton).click();
+        getCategoryFromTable(categoryName);
+      }
+    });
+}

src/translations/components/TranslationFields/TranslationFieldsLong.tsx

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

src/translations/components/TranslationFields/TranslationFieldsRich.tsx

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

src/translations/components/TranslationFields/TranslationFieldsShort.tsx

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