From d6aa7fad7771646d02906fa9397826b5f7ede994 Mon Sep 17 00:00:00 2001
From: "M.Graczyk" <michalina.graczyk@saleor.io>
Date: Wed, 13 Nov 2024 11:48:17 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=80=20Refactor=20test=20to=20use=20wai?=
 =?UTF-8?q?tForLoaderToDisappear=20=F0=9F=8E=80=20=20(#5243)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Refactor test to use waitForLoaderToDisappear

* add changeset

* add not commitet changes

* remove unused import

* Change loader name to datagrid-loader

* fix for lost loader

* remove unnecessary function from DOM
---
 .changeset/nasty-grapes-attend.md    | 5 +++++
 playwright/data/commonLocators.ts    | 2 +-
 playwright/pages/basePage.ts         | 7 +++++--
 playwright/tests/categories.spec.ts  | 2 +-
 src/components/Datagrid/Datagrid.tsx | 2 +-
 5 files changed, 13 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/nasty-grapes-attend.md

diff --git a/.changeset/nasty-grapes-attend.md b/.changeset/nasty-grapes-attend.md
new file mode 100644
index 00000000000..831882b4671
--- /dev/null
+++ b/.changeset/nasty-grapes-attend.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Refactor tests to replace `waitForDOMToFullyLoad` with `waitForLoaderToDisappear`, making the test shorter by waiting only for the loader to disappear instead of the entire DOM to load.
diff --git a/playwright/data/commonLocators.ts b/playwright/data/commonLocators.ts
index 40bad19ab70..e8556e8e11a 100644
--- a/playwright/data/commonLocators.ts
+++ b/playwright/data/commonLocators.ts
@@ -6,5 +6,5 @@ export const LOCATORS = {
   dataGridTable: '[data-testid="data-grid-canvas"]',
   deleteButton: '[data-test-id="button-bar-delete"]',
   bulkDeleteButton: '[data-test-id="bulk-delete-button"]',
-  loader: '[data-test-id="loader"]',
+  dataGridLoader: '[data-test-id="datagrid-loader"]',
 };
diff --git a/playwright/pages/basePage.ts b/playwright/pages/basePage.ts
index 517d73d2f38..d8bd6eab888 100644
--- a/playwright/pages/basePage.ts
+++ b/playwright/pages/basePage.ts
@@ -18,7 +18,7 @@ export class BasePage {
     readonly errorBanner = page.locator(LOCATORS.errorBanner),
     readonly saveButton = page.locator(LOCATORS.saveButton),
     readonly infoBanner = page.locator(LOCATORS.infoBanner),
-    readonly loader = page.locator(LOCATORS.loader),
+    readonly dataGridLoader = page.locator(LOCATORS.dataGridLoader),
     readonly previousPagePaginationButton = page.getByTestId("button-pagination-back"),
     readonly rowNumberButton = page.getByTestId("PaginationRowNumberSelect"),
     readonly rowNumberOption = page.getByTestId("rowNumberOption"),
@@ -313,7 +313,6 @@ export class BasePage {
 
   async waitForDOMToFullyLoad() {
     await this.page.waitForLoadState("domcontentloaded", { timeout: 70000 });
-    await this.loader.waitFor({ state: "hidden" });
   }
 
   async expectElementIsHidden(locator: Locator) {
@@ -327,4 +326,8 @@ export class BasePage {
   async waitForCanvasContainsText(text: string) {
     await this.gridCanvas.getByText(text).waitFor({ state: "attached", timeout: 50000 });
   }
+
+  async waitForDatagridLoaderToDisappear() {
+    await this.dataGridLoader.waitFor({ state: "hidden" });
+  }
 }
diff --git a/playwright/tests/categories.spec.ts b/playwright/tests/categories.spec.ts
index 157ec65fc5d..3d8aedd0eda 100644
--- a/playwright/tests/categories.spec.ts
+++ b/playwright/tests/categories.spec.ts
@@ -12,7 +12,7 @@ test.beforeEach(({ page }) => {
 });
 test("TC: SALEOR_102 Create basic category @e2e @category", async () => {
   await categoriesPage.gotoCategoryListView();
-  await categoriesPage.waitForDOMToFullyLoad();
+  await categoriesPage.waitForDatagridLoaderToDisappear();
   await categoriesPage.clickCreateNewCategoryButton();
   await categoriesPage.typeCategoryName("Utils");
   await categoriesPage.typeCategoryDescription("Utils description");
diff --git a/src/components/Datagrid/Datagrid.tsx b/src/components/Datagrid/Datagrid.tsx
index 5623cd1391e..cad7e807ccb 100644
--- a/src/components/Datagrid/Datagrid.tsx
+++ b/src/components/Datagrid/Datagrid.tsx
@@ -396,7 +396,7 @@ export const Datagrid: React.FC<DatagridProps> = ({
 
   if (loading) {
     return (
-      <Box data-test-id="loader" display="flex" justifyContent="center" marginY={9}>
+      <Box data-test-id="datagrid-loader" display="flex" justifyContent="center" marginY={9}>
         <CircularProgress />
       </Box>
     );