diff --git a/cypress/elements/translations/element-translation.js b/cypress/elements/translations/element-translation.js index e71a956f2..756ce8778 100644 --- a/cypress/elements/translations/element-translation.js +++ b/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"]' }; diff --git a/cypress/integration/configuration/translations.js b/cypress/integration/configuration/translations.js deleted file mode 100644 index 8e7f545c1..000000000 --- a/cypress/integration/configuration/translations.js +++ /dev/null @@ -1,90 +0,0 @@ -/// -/// - -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}` - ); - }); - }); - }); -}); diff --git a/cypress/integration/translations.js b/cypress/integration/translations.js new file mode 100644 index 000000000..591ed294c --- /dev/null +++ b/cypress/integration/translations.js @@ -0,0 +1,94 @@ +/// +/// + +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); + }); + }); + }); +}); diff --git a/cypress/support/api/requests/Category.js b/cypress/support/api/requests/Category.js index 1de223784..bc62a9c20 100644 --- a/cypress/support/api/requests/Category.js +++ b/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); +} diff --git a/cypress/support/pages/translationPage.js b/cypress/support/pages/translationPage.js deleted file mode 100644 index 90e8646d0..000000000 --- a/cypress/support/pages/translationPage.js +++ /dev/null @@ -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); - } - }); -} diff --git a/cypress/support/pages/translationsPage.js b/cypress/support/pages/translationsPage.js new file mode 100644 index 000000000..6c2b8a3b1 --- /dev/null +++ b/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); + } + }); +} diff --git a/src/translations/components/TranslationFields/TranslationFieldsLong.tsx b/src/translations/components/TranslationFields/TranslationFieldsLong.tsx index 59e929ecf..23e9892fa 100644 --- a/src/translations/components/TranslationFields/TranslationFieldsLong.tsx +++ b/src/translations/components/TranslationFields/TranslationFieldsLong.tsx @@ -42,8 +42,8 @@ const TranslationFieldsLong: React.FC = ({ defaultMessage: "Translation" })} name="translation" - data-test-id="translation" value={data.translation || ""} + data-test-id="translation-field" onChange={change} /> = ({ defaultMessage: "Translation" })} name="translation" - data-test-id="translation" + data-test-id="translation-field" onChange={change} /> = ({ defaultMessage: "Translation" })} name="translation" - data-test-id="translation" + data-test-id="translation-field" value={data.translation || ""} onChange={change} />