[E2E] Add tests for translations (#4723)

* add changeset

* add ttest for add and edit translation

* add test for celaring translation

.changeset/sharp-cobras-obey.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+add playwright test for translations

playwright/data/e2eTestData.ts

@@ -380,3 +380,21 @@ export const APPS = {
     info: "App used in delete app test",
   }
 }
+
+export const TRANSLATIONS = {
+  translationsToBeAdded: {
+    id: "Q2F0ZWdvcnk6NTEy",
+    name: "CategoryToTranslate",
+    info: "Category used to add translation test",
+  },
+  translationsToBeEdited: {
+    id: "UHJvZHVjdDo3OA==",
+    name: "Green Juice",
+    info: "Product used to edit translation test",
+  },
+  translationsToBeCleared: {
+    id: "Q29sbGVjdGlvbjox",
+    name: "Summer collection",
+    info: "Translation used in clear translation test",
+  }
+}

playwright/pages/translationsPage.ts

@@ -1,9 +1,33 @@
 import type { Page } from "@playwright/test";
+import { URL_LIST } from "@data/url";
+import { BasePage } from "@pages/basePage";
 
-export class TranslationsPage {
+export class TranslationsPage extends BasePage {
   readonly page: Page;
+  readonly basePage: BasePage;
 
-  constructor(page: Page) {
+
+  constructor(page: Page,
+    readonly translationPl_PL = page.getByTestId("PL_PL"),
+    readonly editTranslationNameButton = page.getByTestId("edit-name"),
+    readonly translationInput = page.getByTestId("translation-field").locator("input"),
+    readonly translationRichText = page
+      .getByTestId("rich-text-editor-translation")
+      .locator("[contenteditable]"),
+    readonly editTranslationDescriptionButton = page.getByTestId("edit-description"),
+  ) {
+    super(page);
     this.page = page;
+    this.basePage = new BasePage(page);
+  }
+
+  async gotoTranslationsPage() {
+    await this.page.goto(URL_LIST.translations);
   }
+
+  async goToDirectTranslationPage(translationCode: string, translatedObjectType: string, translatedObjectId: string,) {
+    const translationUrl = URL_LIST.translations + translationCode + "/" + translatedObjectType + "/" + translatedObjectId;
+    await this.page.goto(translationUrl)
+  }
+
 }

playwright/tests/translations.spec.ts

@@ -0,0 +1,49 @@
+import { TRANSLATIONS } from "@data/e2eTestData";
+import { expect, test } from "@playwright/test";
+import { TranslationsPage } from "@pages/translationsPage";
+
+test.use({ storageState: "playwright/.auth/admin.json" });
+let translationsPage: TranslationsPage;
+test.beforeEach(({ page }) => {
+    translationsPage = new TranslationsPage(page);
+});
+
+test("TC: SALEOR_121 Should be able to add translation  @e2e @translations", async () => {
+    await translationsPage.gotoTranslationsPage();
+    await translationsPage.translationPl_PL.click();
+    await translationsPage.page.getByText("CategoryToTranslate").click();
+    await expect(translationsPage.page.getByText("Translation Category \"CategoryToTranslate\" - PL_PL")).toBeVisible();
+    await translationsPage.editTranslationNameButton.click();
+    await translationsPage.translationInput.fill("Kategoria do Translacji");
+    await translationsPage.saveButton.click();
+    await expect(translationsPage.successBanner).toBeVisible();
+    await expect(translationsPage.page.getByText("Kategoria do Translacji")).toBeVisible();
+});
+
+test("TC: SALEOR_122 Should be able to edit translation  @e2e @translations", async () => {
+    const newDescription = "Brukselka, szpinak, groszek, jarmuż, sałata, kapusta, cukinia, więcej brukselki. Wszystkie warzywa, jakich będziesz potrzebować, w jednym pysznym soku."
+
+    await translationsPage.goToDirectTranslationPage("PL_PL", "products", TRANSLATIONS.translationsToBeEdited.id);
+    await expect(translationsPage.page.getByText("Translation Product \"Green Juice\" - PL_PL")).toBeVisible();
+    await expect(translationsPage.page.getByText("Brukselka, szpinak")).toBeVisible();
+    await translationsPage.editTranslationDescriptionButton.click();
+    await translationsPage.translationRichText.clear();
+    await translationsPage.translationRichText.type(newDescription);
+
+    await translationsPage.saveButton.click();
+    await expect(translationsPage.successBanner).toBeVisible();
+    await expect(translationsPage.page.getByText(newDescription)).toBeVisible();
+});
+
+test("TC: SALEOR_123 Should be able to clear translation  @e2e @translations", async () => {
+    const description = "Letnia kolekcja Saleor obejmuje gamę produktów, które cieszą się popularnością na rynku.Sklep demonstracyjny na każdą porę roku.Saleor uchwycił słońce open source, e-commerce."
+
+    await translationsPage.goToDirectTranslationPage("PL_PL", "collections", TRANSLATIONS.translationsToBeCleared.id);
+    await expect(translationsPage.page.getByText("Translation Collection \"Summer collection\" - PL_PL")).toBeVisible();
+    await expect(translationsPage.page.getByText(description)).toBeVisible();
+    await translationsPage.editTranslationDescriptionButton.click();
+    await translationsPage.translationRichText.clear();
+    await translationsPage.saveButton.click();
+    await expect(translationsPage.successBanner).toBeVisible();
+    await expect(translationsPage.page.getByText(description)).not.toBeVisible();
+});