Fix failing e2e

.changeset/tidy-deserts-fix.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Fixed data-fetching in Order details page. Now when line items are changed, order summary (total, shipping price, etc.) are updated. Previously these values were not updated and displayed stale data.

.changeset/wicked-olives-take.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Fixed e2e tests: updated assertions for notifications, datagrid, gift cards

docs/running-tests.md

@@ -25,3 +25,9 @@ You are ready to run Playwright commands like:
 ```shell
 pnpm run e2e
 ```
+
+Note that if you have changed `BASE_URL` to run tests on different environment you will need to clear login data which is stored locally in `playwright/.auth` folder:
+
+```
+pnpm run e2e:clean-auth
+```

package.json

@@ -24,6 +24,7 @@
     "dev": "vite --host",
     "dev:no-strict": "cross-env VITE_DISABLE_STRICT_MODE=true vite --host",
     "e2e": "pnpm exec playwright test --grep \"#e2e\"",
+    "e2e:clean-auth": "rm -rf ./playwright/.auth",
     "e2e:ui": "pnpm exec playwright test --ui",
     "extract-messages": "formatjs extract 'src/**/*.{ts,tsx}' --ignore '**/*.d.ts' --out-file locale/defaultMessages.json --format scripts/formatter.cjs",
     "fetch-local-schema": "node scripts/fetch-local-schema.cjs",

playwright/data/copy.ts

@@ -1,3 +1,6 @@
 export const AVAILABILITY = {
+  /** Used for product pages with new AvailabilityCard */
+  in1Of: "In 1 of",
+  /** Used for voucher/discount pages with old ChannelsAvailabilityCard */
   in1OutOf: "In 1 out of",
 };

playwright/pages/pageElements/metadataSeoPage.ts

@@ -56,12 +56,20 @@ export class MetadataSeoPage {
     privateMetaName = privateMetaDataName,
     privateMetaValue = privateMetaDataValue,
   ) {
+    // Wait for public metadata section to be visible before expanding
+    await this.publicMetaSection.waitFor({ state: "visible", timeout: 2_000 });
     await this.clickMetadataSectionExpandButton();
+    await this.addMetaButton.waitFor({ state: "visible", timeout: 1_000 });
     await this.addMetaButton.click();
+    await this.metaDataNameInput.waitFor({ state: "visible", timeout: 1_000 });
     await this.metaDataNameInput.fill(metaName);
     await this.metadataValueField.fill(metaValue);
+    // Wait for private metadata section before expanding
+    await this.privateMetaSection.waitFor({ state: "visible", timeout: 1_000 });
     await this.clickPrivateMetadataSectionExpandButton();
+    await this.addPrivateMetaButton.waitFor({ state: "visible", timeout: 1_000 });
     await this.addPrivateMetaButton.click();
+    await this.privateMetaDataNameInput.waitFor({ state: "visible", timeout: 1_000 });
     await this.privateMetaDataNameInput.fill(privateMetaName);
     await this.privateMetadataValueField.fill(privateMetaValue);
   }

playwright/pages/pageElements/rightSideDetailsSection.ts

@@ -181,6 +181,7 @@ export class RightSideDetailsPage extends BasePage {
   }
 
   async selectCustomer(customer = "allison.freeman@example.com") {
+    await this.selectCustomerOption.locator(`text=${customer}`).waitFor({ state: "visible" });
     await this.selectCustomerOption.locator(`text=${customer}`).click();
     await this.waitForDOMToFullyLoad();
   }

playwright/pages/permissionGroupDetailsPage.ts

@@ -42,6 +42,10 @@ export class PermissionGroupDetailsPage extends BasePage {
     return this.page.locator(`[data-test-id="permission-checkbox-${permission}"] input`);
   }
 
+  permissionGroupCheckboxWrapper(permission: string) {
+    return this.page.locator(`[data-test-id="permission-checkbox-${permission}"]`);
+  }
+
   async fillPermissionGroupNameInput(name: string) {
     await this.permissionGroupNameInput.fill(name);
   }
@@ -51,7 +55,10 @@ export class PermissionGroupDetailsPage extends BasePage {
   }
 
   async selectPermissionGroup(permission: string) {
-    await this.permissionGroupListItem.filter({ hasText: permission }).first().click();
+    const checkboxWrapper = this.permissionGroupCheckboxWrapper(permission);
+
+    await checkboxWrapper.waitFor({ state: "visible" });
+    await checkboxWrapper.click();
   }
 
   async clickAssignMembersButton() {

playwright/pages/productPage.ts

@@ -29,9 +29,7 @@ export class ProductPage extends BasePage {
   constructor(
     page: Page,
     readonly productsNames = page.getByTestId("name"),
-    readonly productAvailableInChannelsText = page.getByTestId(
-      "product-available-in-channels-text",
-    ),
+    readonly productAvailableInChannelsText = page.getByTestId("availability-card"),
     readonly createProductButton = page.getByTestId("add-product"),
     readonly cogShowMoreButtonButton = page.getByTestId("show-more-button"),
     readonly exportButton = page.getByTestId("export"),

playwright/pages/taxesPage.ts

@@ -3,7 +3,7 @@ import { URL_LIST } from "@data/url";
 import { AddCountriesDialog } from "@dialogs/addCountriesDialog";
 import { MetadataSeoPage } from "@pageElements/metadataSeoPage";
 import { BasePage } from "@pages/basePage";
-import type { Page } from "@playwright/test";
+import { expect, type Page } from "@playwright/test";
 
 export class TaxesPage extends BasePage {
   readonly page: Page;
@@ -38,9 +38,7 @@ export class TaxesPage extends BasePage {
     readonly searchTaxClassInput = page.getByTestId("search-tax-class-input").locator("input"),
     readonly searchedCountryRows = page.getByTestId("country-rows"),
 
-    readonly searchTaxCountryInput = page
-      .getByTestId("search-tax-countries-input")
-      .locator("input"),
+    readonly searchTaxCountryInput = page.getByRole("textbox", { name: "Search tax countries" }),
     readonly taxClassNameInput = page.getByTestId("class-name-input").locator("input"),
     readonly noTaxRateInput = page.getByTestId("No Taxes").locator("input"),
     readonly defaultRateInput = page.getByTestId("Country default rate").locator("input"),
@@ -105,17 +103,29 @@ export class TaxesPage extends BasePage {
 
   async typeSearchedTaxCountryName(taxCountryName: string) {
     await this.searchTaxCountryInput.fill(taxCountryName);
+    // Verify the input value is set before checking filtered results
+    await expect(this.searchTaxCountryInput).toHaveValue(taxCountryName);
+    // Wait for search results to filter
+    await this.searchedCountryRows
+      .filter({ hasText: taxCountryName })
+      .waitFor({ state: "visible", timeout: 10000 });
   }
 
   async typeTaxRateInSearchedCountryRow(taxCountryName: string, taxRateValue: string) {
-    await this.searchedCountryRows
-      .filter({ hasText: taxCountryName })
-      .locator("input")
-      .fill(taxRateValue);
+    const countryRow = this.searchedCountryRows.filter({ hasText: taxCountryName });
+
+    await countryRow.waitFor({ state: "visible", timeout: 10000 });
+
+    const input = countryRow.locator("input");
+
+    await input.waitFor({ state: "visible", timeout: 5000 });
+    await input.fill(taxRateValue);
   }
 
   async clickCreateClassButton() {
     await this.createClassButton.click();
+    // Wait for the new tax class form to load
+    await this.taxClassNameInput.waitFor({ state: "visible" });
   }
 
   async selectTaxCalculationMethod(method: string) {

playwright/tests/attributes.spec.ts

@@ -38,7 +38,7 @@ for (const attr of attributeClasses) {
       await attributesPage.addValueDialog.typeAndSaveAttributeValue();
       await attributesPage.clickSaveButton();
       await attributesPage.expectSuccessBanner();
-      await expect(await attributesPage.attributesRows.count()).toEqual(1);
+      await expect(attributesPage.attributesRows).toHaveCount(1);
       await attributesPage.valueRequiredCheckbox.waitFor({
         state: "visible",
         timeout: 10000,

playwright/tests/customers.spec.ts

@@ -222,12 +222,11 @@ test("TC: SALEOR_207 Issue a new gift card for the customer #e2e #customer", asy
   await customersPage.issueGiftCardDialog.typeCustomTag(faker.lorem.word());
   await customersPage.issueGiftCardDialog.typeNote(faker.lorem.sentences(3));
   await customersPage.issueGiftCardDialog.clickIssueButton();
-  await customersPage.expectSuccessBanner();
+  await giftCardsPage.expectSuccessBanner({ message: "Gift card created" });
   await expect(giftCardsPage.issueGiftCardDialog.cardCode).toBeVisible();
 
   await giftCardsPage.issueGiftCardDialog.clickCopyCodeButton();
-  await giftCardsPage.expectSuccessBanner();
+  await giftCardsPage.expectSuccessBanner({ message: "Copied to clipboard" });
   await giftCardsPage.issueGiftCardDialog.clickOkButton();
   await giftCardsPage.expectElementIsHidden(giftCardsPage.giftCardDialog);
-  await giftCardsPage.expectSuccessBanner({ message: "Successfully created gift card" });
 });

playwright/tests/discounts.spec.ts

@@ -344,9 +344,15 @@ for (const promotion of promotionsWithRules) {
       await discounts.gotoExistingDiscount(promotion.id);
       await discounts.ruleSection.waitFor({
         state: "visible",
-        timeout: 50000,
+        timeout: 15000,
       });
-      await discounts.clickDeleteRuleButton(`${promotion.type} rule: ${rule.name}`);
+      const deleteButton = discounts.existingRule
+        .locator(discounts.ruleLabelWithActions)
+        .filter({ hasText: `${promotion.type} rule: ${rule.name}` })
+        .locator(discounts.deleteRuleButton);
+
+      await deleteButton.waitFor({ state: "visible", timeout: 10000 });
+      await deleteButton.click();
       await expect(discounts.deleteRuleModal).toBeVisible({ timeout: 10000 });
       await discounts.deleteRuleDialog.clickConfirmDeleteButton();
       await discounts.expectSuccessBanner();

playwright/tests/giftCards.spec.ts

@@ -22,14 +22,14 @@ test("TC: SALEOR_105 Issue gift card #e2e #gift", async () => {
   await giftCardsPage.issueGiftCardDialog.clickRequiresActivationCheckbox();
   await giftCardsPage.issueGiftCardDialog.clickIssueButton();
   await expect(giftCardsPage.issueGiftCardDialog.cardCode).toBeVisible();
+  await giftCardsPage.expectSuccessBanner({ message: "Gift card created" });
 
   const code = (await giftCardsPage.issueGiftCardDialog.cardCode.innerText()).slice(-4);
 
   await giftCardsPage.issueGiftCardDialog.clickCopyCodeButton();
-  await giftCardsPage.expectSuccessBanner();
+  await giftCardsPage.expectSuccessBanner({ message: "Copied to clipboard" });
   await giftCardsPage.issueGiftCardDialog.clickOkButton();
   await giftCardsPage.giftCardDialog.waitFor({ state: "hidden" });
-  await giftCardsPage.expectSuccessBanner({ message: "Successfully created gift card" });
   await giftCardsPage.gotoGiftCardsListView();
   await giftCardsPage.gridCanvas
     .getByText(`Code ending with ${code}`)
@@ -43,13 +43,13 @@ test("TC: SALEOR_106 Issue gift card with specific customer and expiry date #e2e
   await giftCardsPage.issueGiftCardDialog.clickSendToCustomerCheckbox();
   await giftCardsPage.issueGiftCardDialog.selectCustomer("e2e-customer to-be-activated");
   await giftCardsPage.issueGiftCardDialog.clickIssueButton();
+  await giftCardsPage.expectSuccessBanner({ message: "Gift card created" });
   await expect(giftCardsPage.issueGiftCardDialog.cardCode).toBeVisible();
 
   const fullCode = await giftCardsPage.issueGiftCardDialog.cardCode.innerText();
 
   await giftCardsPage.issueGiftCardDialog.clickOkButton();
   await giftCardsPage.giftCardDialog.waitFor({ state: "hidden" });
-  await giftCardsPage.expectSuccessBanner({ message: "Successfully created gift card" });
   await giftCardsPage.gotoGiftCardsListView();
   await giftCardsPage.searchAndFindRowIndexes(fullCode);
   expect(

playwright/tests/orders.spec.ts

@@ -62,6 +62,8 @@ test("TC: SALEOR_76 Create order with transaction flow activated #e2e #order", a
   await ordersPage.rightSideDetailsPage.selectCustomer();
   await expect(ordersPage.addressDialog.existingAddressRadioButton).toBeVisible();
   await ordersPage.addressDialog.clickConfirmButton();
+  await ordersPage.addShippingCarrierLink.waitFor({ state: "visible", timeout: 30000 });
+  await ordersPage.addShippingCarrierLink.scrollIntoViewIfNeeded();
   await ordersPage.clickAddShippingCarrierButton();
   await ordersPage.shippingAddressDialog.pickAndConfirmShippingMethod();
   await ordersPage.clickFinalizeButton();

playwright/tests/product.spec.ts

@@ -156,7 +156,7 @@ test("TC: SALEOR_46 As an admin, I should be able to update a product by uploadi
   await expect(
     productPage.productAvailableInChannelsText,
     "Label copy shows 1 out of 7 channels ",
-  ).toContainText(AVAILABILITY.in1OutOf);
+  ).toContainText(AVAILABILITY.in1Of);
   expect(
     await productPage.productImage.count(),
     "Newly added single image should be present",

playwright/tests/shippingMethods.spec.ts

@@ -50,7 +50,7 @@ test("TC: SALEOR_32 Add price rate to shipping method - with excluded zip codes
   await shippingRatesPage.expectSuccessBanner();
   await shippingRatesPage.excludedProductsRows.waitFor({ state: "visible" });
   await expect(shippingRatesPage.excludedProductsRows).toContainText("Bean Juice");
-  await expect(await shippingRatesPage.assignedPostalCodesRows.count()).toEqual(1);
+  await expect(shippingRatesPage.assignedPostalCodesRows).toHaveCount(1);
 });
 test("TC: SALEOR_33 Add weight rate to shipping method - with included zip codes and excluded product #shipping-method #e2e", async () => {
   await shippingMethodsPage.gotoExistingShippingMethod(
@@ -102,10 +102,17 @@ test("TC: SALEOR_35 Delete a single shipping rate from its details page #shippin
   await shippingMethodsPage.clickDeleteShippingRateButton();
   await shippingMethodsPage.deleteShippingMethodDialog.clickDeleteButton();
   await shippingMethodsPage.expectSuccessBanner();
+  await shippingMethodsPage.page.waitForURL(
+    url => url.pathname.includes("/shipping/") && !url.pathname.includes(shippingRateId),
+    { timeout: 30000 },
+  );
+  // Wait for the rate row to disappear from the table after deletion
+  await expect(
+    shippingMethodsPage.weightBasedRatesSection.getByRole("link", { name: weightBasedRate }),
+  ).toBeHidden({ timeout: 30000 });
   await expect(shippingMethodsPage.weightBasedRatesSection).toContainText(
     "No shipping rates found",
   );
-  await expect(shippingMethodsPage.weightBasedRatesSection).not.toContainText(weightBasedRate);
 });
 test("TC: SALEOR_36 Delete shipping zones in bulk #shipping-method #e2e", async () => {
   const shippingZone1 = SHIPPING_METHODS.shippingMethodToBeBulkDeleted1.name;

playwright/tests/taxes.spec.ts

@@ -47,22 +47,40 @@ test("TC: SALEOR_117 Add new country and tax rates to it #taxes #e2e", async ()
   await taxesPage.addCountriesDialog.checkAndSaveSingleCountry(
     COUNTRIES.countryToBeAddedInTaxes.name,
   );
-  expect(await taxesPage.countriesListRow.first()).toHaveText(
+  await expect(taxesPage.countriesListRow.first()).toHaveText(
     COUNTRIES.countryToBeAddedInTaxes.name,
   );
   await taxesPage.typeAllTaxRatesForCountry("23", "0", "16", "7", "21", "19");
   await taxesPage.clickSaveButton();
   await taxesPage.expectSuccessBanner();
 });
-test("TC: SALEOR_118 Add new class with metadata and set tax rate for single country #taxes #e2e", async () => {
+test("TC: SALEOR_118 Add new class with metadata and set tax rate for single country #taxes #e2e", async ({
+  page,
+}) => {
   await taxesPage.gotoChannelsTabUrl();
   await taxesPage.clickTaxClassTab();
   await taxesPage.clickCreateClassButton();
-  expect(await taxesPage.taxClassNameInput).toHaveValue("New tax class");
+  await expect(taxesPage.taxClassNameInput).toHaveValue("New tax class");
   await taxesPage.typeTaxClassName("Automation test tax class");
   await taxesPage.typeSearchedTaxCountryName("United States of America");
   await taxesPage.typeTaxRateInSearchedCountryRow("United States of America", "20");
+  await taxesPage.metadataSeoPage.publicMetaSection.waitFor({ state: "attached", timeout: 10000 });
+  await taxesPage.metadataSeoPage.publicMetaSection.scrollIntoViewIfNeeded();
   await taxesPage.metadataSeoPage.expandAndAddAllMetadata();
+
+  // Ensure save button is enabled after metadata changes
+  await expect(taxesPage.saveButton).toBeEnabled();
+
+  // Wait for the GraphQL mutation when save is clicked, then verify success
+  const responsePromise = page.waitForResponse(
+    resp =>
+      resp.url().includes("/graphql/") &&
+      resp.request().postDataJSON()?.operationName === "TaxClassCreate",
+    { timeout: 10000 },
+  );
+
   await taxesPage.clickSaveButton();
+  await responsePromise;
+
   await taxesPage.expectSuccessBanner();
 });

src/components/notifications/Toast.tsx

@@ -122,6 +122,7 @@ export const Toast = ({ id, type, title, description, action }: ToastProps) => {
 
   return (
     <Box
+      data-test-type={type}
       display="flex"
       alignItems="flex-start"
       gap={3}

src/fragments/orders.ts

@@ -152,6 +152,72 @@ export const fragmentOrderLine = gql`
   }
 `;
 
+// Slim fragment for order line mutations - includes only data that changes
+// when lines are added/updated/deleted (lines + pricing + shipping if no longer required)
+export const fragmentOrderLinesUpdate = gql`
+  fragment OrderLinesUpdate on Order {
+    id
+    lines {
+      ...OrderLine
+    }
+    subtotal {
+      gross {
+        ...Money
+      }
+      net {
+        ...Money
+      }
+    }
+    total {
+      gross {
+        ...Money
+      }
+      net {
+        ...Money
+      }
+      tax {
+        ...Money
+      }
+    }
+    undiscountedTotal {
+      gross {
+        ...Money
+      }
+      net {
+        ...Money
+      }
+    }
+    # Shipping can change when lines are deleted/added
+    # (shippingMethod, shippingPrice, shippingMethodName are reset when isShippingRequired becomes false)
+    isShippingRequired
+    shippingMethod {
+      id
+    }
+    shippingPrice {
+      gross {
+        amount
+        currency
+      }
+    }
+    shippingMethodName
+    collectionPointName
+    # Available shipping methods can change based on order contents (weight, items)
+    shippingMethods {
+      id
+      name
+      price {
+        ...Money
+      }
+      active
+      message
+    }
+    # Discounts shown in order summary
+    discounts {
+      ...OrderDiscount
+    }
+  }
+`;
+
 export const fragmentOrderLineMetadata = gql`
   fragment OrderLineMetadata on OrderLine {
     metadata {