🎀 Refactor test to use waitForLoaderToDisappear 🎀 (#5243)

* 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

@@ -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.

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"]',
 };

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" });
+  }
 }

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");

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>
     );