[QA] Fixing flaky test - TC: SALEOR_106 Issue gift card with specific…

… customer and expiry date (#4848) * adding staff member CRUD tests * Fixing flaky test - TC: SALEOR_106 Issue gift card with specific customer and expiry date * Update playwright/tests/giftCards.spec.ts Co-authored-by: Wojciech Mista <[email protected]> --------- Co-authored-by: Wojciech Mista <[email protected]>
saleor · May 23, 2024 · d679949 · d679949
1 parent 2f37ed5
commit d679949
Show file tree

Hide file tree

Showing 16 changed files with 50 additions and 41 deletions.
diff --git a/.changeset/metal-vans-begin.md b/.changeset/metal-vans-begin.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": minor
+---
+
+Fixing flaky test - TC: SALEOR_106 Issue gift card with specific customer and expiry date
diff --git a/playwright/pages/basePage.ts b/playwright/pages/basePage.ts
@@ -26,6 +26,7 @@ export class BasePage {
     readonly searchInputListView = page.getByTestId("search-input"),
     readonly emptyDataGridListView = page.getByTestId("empty-data-grid-text"),
     readonly dialog = page.getByRole("dialog"),
+    readonly submitButton = page.getByTestId("submit"),
     readonly giftCardInTable = page.locator('[href*="/dashboard/gift-cards/.*]'),
     readonly selectAllCheckbox = page.getByTestId("select-all-checkbox").locator("input"),
   ) {
@@ -63,6 +64,10 @@ export class BasePage {
     await this.deleteButton.click();
   }
 
+  async clickSubmitButton() {
+    await this.submitButton.click();
+  }
+
   async typeInSearchOnListView(searchItem: string) {
     await this.waitForNetworkIdle(async () => {
       await this.searchInputListView.fill(searchItem);

diff --git a/playwright/pages/configurationPage.ts b/playwright/pages/configurationPage.ts
@@ -57,7 +57,7 @@ export class ConfigurationPage extends BasePage {
     await this.pluginsButton.click();
   }
 
-  async goToConfirgurationView() {
+  async goToConfigurationView() {
     await this.page.goto(URL_LIST.configuration);
   }
 
@@ -68,8 +68,4 @@ export class ConfigurationPage extends BasePage {
   async openAttributes() {
     await this.attributesButton.click();
   }
-
-  async gotoConfigurationView() {
-    await this.page.goto(URL_LIST.configuration);
-  }
 }
diff --git a/playwright/pages/dialogs/issueGiftCardDialog.ts b/playwright/pages/dialogs/issueGiftCardDialog.ts
@@ -1,5 +1,5 @@
 import { BasePage } from "@pages/basePage";
-import { Page } from "@playwright/test";
+import { expect, Page } from "@playwright/test";
 
 export class IssueGiftCardDialog extends BasePage {
   constructor(
@@ -8,8 +8,10 @@ export class IssueGiftCardDialog extends BasePage {
     readonly expiryPeriodAmountInput = page.locator('[name="expiryPeriodAmount"]'),
     readonly tagsInput = page.getByTestId("gift-card-tag-select-field").locator("input"),
     readonly cardCode = page.getByTestId("cardCode"),
-
-    readonly sendToCustomerCheckbox = page.getByTestId("send-to-customer-section").locator("input"),
+    readonly giftCardExpireFields = page.getByTestId("gift-card-expire-data-fields"),
+    readonly sendToCustomerCheckbox = page
+      .getByTestId("send-to-customer-section")
+      .locator('input[type="checkbox"]'),
     readonly sendExpireDateCheckbox = page.getByTestId("expiry-section").locator("input"),
     readonly customerInput = page.getByTestId("customer-field").locator("input"),
     readonly noteTextArea = page.getByTestId("note-field").locator('[name="note"]'),
@@ -19,14 +21,14 @@ export class IssueGiftCardDialog extends BasePage {
     readonly issueButton = page.getByTestId("submit"),
     readonly okButton = page.getByTestId("submit"),
     readonly copyCodeButton = page.getByTestId("copy-code-button"),
+    readonly dropdown = page.getByTestId("autocomplete-dropdown"),
+    readonly option = page.getByTestId("single-autocomplete-select-option"),
   ) {
     super(page);
   }
 
   async clickIssueButton() {
-    await this.waitForNetworkIdle(async () => {
-      await this.issueButton.click();
-    });
+    await this.issueButton.click();
   }
 
   async clickOkButton() {
@@ -41,8 +43,12 @@ export class IssueGiftCardDialog extends BasePage {
     await this.enterAmountInput.fill(amount);
   }
 
-  async typeCustomer(customer: string) {
+  async selectCustomer(customer: string) {
     await this.customerInput.fill(customer);
+    await this.dropdown.waitFor({ state: "attached" });
+    await this.option.filter({ hasText: customer }).waitFor({ state: "visible" });
+    await this.option.filter({ hasText: customer }).click();
+    await expect(this.customerInput).toHaveValue(customer);
   }
 
   async typeExpiryPeriodAmount(expiryPeriodAmount: string) {
@@ -59,10 +65,15 @@ export class IssueGiftCardDialog extends BasePage {
 
   async clickSendToCustomerCheckbox() {
     await this.sendToCustomerCheckbox.click();
+    await expect(this.sendToCustomerCheckbox.isChecked()).toBeTruthy();
+    await this.customerInput.waitFor({ state: "attached" });
   }
 
   async clickSendExpireDateCheckbox() {
     await this.sendExpireDateCheckbox.click();
+    await this.waitForDOMToFullyLoad();
+    await expect(this.sendExpireDateCheckbox.isChecked()).toBeTruthy();
+    await this.giftCardExpireFields.waitFor({ state: "attached" });
   }
 
   async clickRequiresActivationCheckbox() {

diff --git a/playwright/pages/giftCardsPage.ts b/playwright/pages/giftCardsPage.ts
@@ -97,5 +97,6 @@ export class GiftCardsPage extends BasePage {
 
     console.log("Navigating to existing gift card: " + existingGiftCardUrl);
     await this.page.goto(existingGiftCardUrl);
+    await this.waitForDOMToFullyLoad();
   }
 }
diff --git a/playwright/tests/attributes.spec.ts b/playwright/tests/attributes.spec.ts
@@ -25,7 +25,7 @@ for (const attr of attributeClasses) {
       page,
     }) => {
       await page.context().storageState({ path: "./playwright/.auth/admin.json" });
-      await configurationPage.gotoConfigurationView();
+      await configurationPage.goToConfigurationView();
       await configurationPage.openAttributes();
       await attributesPage.clickCreateAttributeButton();
       await attributesPage.selectAttributeType(attr);
@@ -59,7 +59,7 @@ for (const attr of attributeClasses) {
       page,
     }) => {
       await page.context().storageState({ path: "./playwright/.auth/admin.json" });
-      await configurationPage.gotoConfigurationView();
+      await configurationPage.goToConfigurationView();
       await configurationPage.openAttributes();
       await attributesPage.waitForDOMToFullyLoad();
       await attributesPage.clickCreateAttributeButton();
@@ -94,7 +94,7 @@ for (const attr of attributeClasses) {
       page,
     }) => {
       await page.context().storageState({ path: "./playwright/.auth/admin.json" });
-      await configurationPage.gotoConfigurationView();
+      await configurationPage.goToConfigurationView();
       await configurationPage.openAttributes();
       await attributesPage.waitForDOMToFullyLoad();
       await attributesPage.clickCreateAttributeButton();

diff --git a/playwright/tests/channels.spec.ts b/playwright/tests/channels.spec.ts
@@ -15,7 +15,7 @@ test.beforeEach(({ page }) => {
 test("TC: SALEOR_97 Create basic channel @e2e @channels", async () => {
   const slugName = new Date().toISOString();
 
-  await configurationPage.gotoConfigurationView();
+  await configurationPage.goToConfigurationView();
   await configurationPage.openChannels();
   await channelPage.clickCreateChannelButton();
   await channelPage.typeChannelName();
@@ -29,7 +29,7 @@ test("TC: SALEOR_97 Create basic channel @e2e @channels", async () => {
 test("TC: SALEOR_208 Create channel with all settings @e2e @channels", async () => {
   const slugName = new Date().toISOString();
 
-  await configurationPage.gotoConfigurationView();
+  await configurationPage.goToConfigurationView();
   await configurationPage.openChannels();
   await channelPage.clickCreateChannelButton();
   await channelPage.typeChannelName();

diff --git a/playwright/tests/giftCards.spec.ts b/playwright/tests/giftCards.spec.ts
@@ -20,9 +20,7 @@ test("TC: SALEOR_105 Issue gift card @e2e @gift", async () => {
   await giftCardsPage.issueGiftCardDialog.typeAmount("50");
   await giftCardsPage.issueGiftCardDialog.typeTag("super ultra automation discount");
   await giftCardsPage.issueGiftCardDialog.clickRequiresActivationCheckbox();
-  await giftCardsPage.waitForNetworkIdle(() =>
-    giftCardsPage.issueGiftCardDialog.clickIssueButton(),
-  );
+  await giftCardsPage.issueGiftCardDialog.clickIssueButton();
   await expect(giftCardsPage.issueGiftCardDialog.cardCode).toBeVisible();
 
   const code = (await giftCardsPage.issueGiftCardDialog.cardCode.innerText()).slice(-4);
@@ -45,13 +43,12 @@ test("TC: SALEOR_105 Issue gift card @e2e @gift", async () => {
 test("TC: SALEOR_106 Issue gift card with specific customer and expiry date @e2e @gift", async () => {
   test.slow();
   await giftCardsPage.clickIssueCardButton();
-  await giftCardsPage.issueGiftCardDialog.clickSendToCustomerCheckbox();
-  await giftCardsPage.issueGiftCardDialog.typeCustomer("Allison Freeman");
+
   await giftCardsPage.issueGiftCardDialog.clickSendExpireDateCheckbox();
   await giftCardsPage.issueGiftCardDialog.typeExpiryPeriodAmount("2");
-  await giftCardsPage.waitForNetworkIdle(() =>
-    giftCardsPage.issueGiftCardDialog.clickIssueButton(),
-  );
+  await giftCardsPage.issueGiftCardDialog.clickSendToCustomerCheckbox();
+  await giftCardsPage.issueGiftCardDialog.selectCustomer("e2e-customer to-be-activated");
+  await giftCardsPage.issueGiftCardDialog.clickIssueButton();
   await expect(giftCardsPage.issueGiftCardDialog.cardCode).toBeVisible();
 
   const code = (await giftCardsPage.issueGiftCardDialog.cardCode.innerText()).slice(-4);
@@ -63,8 +60,7 @@ test("TC: SALEOR_106 Issue gift card with specific customer and expiry date @e2e
     state: "hidden",
     timeout: 30000,
   });
-  await giftCardsPage.waitForNetworkIdle(() => giftCardsPage.gotoGiftCardsListView());
-  await giftCardsPage.waitForDOMToFullyLoad();
+  await giftCardsPage.gotoGiftCardsListView();
   await giftCardsPage.gridCanvas
     .getByText(`Code ending with ${code}`)
     .waitFor({ state: "attached", timeout: 30000 });
@@ -77,21 +73,18 @@ test("TC: SALEOR_107 Resend code @e2e @gift", async () => {
 });
 test("TC: SALEOR_108 Deactivate gift card @e2e @gift", async () => {
   await giftCardsPage.gotoExistingGiftCardView(GIFT_CARDS.giftCardToBeDeactivated.id);
-  await giftCardsPage.waitForDOMToFullyLoad();
   await giftCardsPage.clickDeactivateButton();
   await giftCardsPage.expectSuccessBanner();
   await expect(giftCardsPage.pageHeader).toContainText("Disabled");
 });
 test("TC: SALEOR_109 Activate gift card @e2e @gift", async () => {
   await giftCardsPage.gotoExistingGiftCardView(GIFT_CARDS.giftCardToBeActivated.id);
-  await giftCardsPage.waitForDOMToFullyLoad();
   await giftCardsPage.clickDeactivateButton();
   await giftCardsPage.expectSuccessBanner();
   await expect(giftCardsPage.pageHeader).not.toContainText("Disabled");
 });
 test("TC: SALEOR_110 Edit gift card @e2e @gift", async () => {
   await giftCardsPage.gotoExistingGiftCardView(GIFT_CARDS.giftCardToBeEdited.id);
-  await giftCardsPage.waitForDOMToFullyLoad();
   await giftCardsPage.clickCardExpiresCheckbox();
   await giftCardsPage.metadataSeoPage.expandAndAddAllMetadata();
   await giftCardsPage.clickSaveButton();
@@ -103,15 +96,13 @@ test("TC: SALEOR_111 Bulk delete gift cards @e2e @gift", async () => {
   await giftCardsPage.deleteDialog.clickConfirmDeletionCheckbox();
   await giftCardsPage.deleteDialog.clickDeleteButton();
   await giftCardsPage.dialog.waitFor({ state: "hidden" });
-  await giftCardsPage.waitForNetworkIdle(() => giftCardsPage.gotoGiftCardsListView());
-  await giftCardsPage.waitForDOMToFullyLoad();
+  await giftCardsPage.gotoGiftCardsListView();
   for (const last4Code of GIFT_CARDS.giftCardsToBeDeleted.last4) {
     await expect(giftCardsPage.gridCanvas).not.toContainText(`Code ending with ${last4Code}`);
   }
 });
 test("TC: SALEOR_181 Set gift card balance @e2e @gift", async () => {
   await giftCardsPage.gotoExistingGiftCardView(GIFT_CARDS.giftCardToBeEdited.id);
-  await giftCardsPage.waitForDOMToFullyLoad();
   await giftCardsPage.clickSetBalance();
   await giftCardsPage.setGiftCardsBalanceDialog.setBalance("34");
   await giftCardsPage.expectSuccessBanner();

diff --git a/playwright/tests/navigation.spec.ts b/playwright/tests/navigation.spec.ts
@@ -20,7 +20,7 @@ test.beforeEach(({ page }) => {
   addNavigationMenuItemDialog = new AddNavigationMenuItemDialog(page);
 });
 test("TC: SALEOR_193 Should go to Navigation page @navigation @e2e", async () => {
-  await config.gotoConfigurationView();
+  await config.goToConfigurationView();
   await navigation.clickNavigationButtonFromConfiguration();
   await expect(navigation.navigationHeader).toBeVisible();
   await expect(navigation.navigationList).toBeVisible();

diff --git a/playwright/tests/permissionGroup.spec.ts b/playwright/tests/permissionGroup.spec.ts
@@ -23,7 +23,7 @@ test.beforeEach(({ page }) => {
   unassignDialog = new UnassignPermissionGroupMembersDialog(page);
 });
 test("TC: SALEOR_139 Should be able to navigate to permission groups page @permissions @e2e", async () => {
-  await config.gotoConfigurationView();
+  await config.goToConfigurationView();
   await config.permissionGroupsButton.scrollIntoViewIfNeeded();
   await config.openPermissionGroups();
   await expect(permissions.permissionGroupsList).toBeVisible();

diff --git a/playwright/tests/singlePermissions/channelsWebhooks.spec.ts b/playwright/tests/singlePermissions/channelsWebhooks.spec.ts
@@ -37,7 +37,7 @@ test("TC: SALEOR_11 User should be able to navigate to channel list as a staff m
   await expect(channelPage.deleteChannelButton.first()).toBeVisible();
 });
 test("TC: SALEOR_12 User should be able to navigate to webhooks and events as a staff member using CHANNEL permission @e2e", async () => {
-  await configurationPage.goToConfirgurationView();
+  await configurationPage.goToConfigurationView();
   await mainMenuPage.expectMenuItemsCount(3);
   await configurationPage.openWebhooksAndEvents();
   await expect(webhooksEventsPage.createAppButton).toBeVisible();

diff --git a/playwright/tests/singlePermissions/contentPage.spec.ts b/playwright/tests/singlePermissions/contentPage.spec.ts
@@ -40,7 +40,7 @@ test("TC: SALEOR_14 User should be able to navigate to content list as a staff m
   await basePage.expectGridToBeAttached();
 });
 test("TC: SALEOR_15 User should be able to navigate to page types list as a staff member using CONTENT aka PAGE permission @e2e", async () => {
-  await configurationPage.goToConfirgurationView();
+  await configurationPage.goToConfigurationView();
   await expect(configurationPage.taxesButton).toBeVisible();
   await expect(configurationPage.pageTypesButton).toBeVisible();
   await expect(configurationPage.webhooksAndEventsButton).toBeVisible();

diff --git a/playwright/tests/singlePermissions/plugins.spec.ts b/playwright/tests/singlePermissions/plugins.spec.ts
@@ -15,7 +15,7 @@ test.beforeEach(({ page }) => {
   pluginsPage = new PluginsPage(page);
 });
 test("TC: SALEOR_16 User should be able to navigate to plugin list as a staff member using PLUGINS permission @e2e", async () => {
-  await configurationPage.gotoConfigurationView();
+  await configurationPage.goToConfigurationView();
   await configurationPage.openPlugins();
   await expect(pluginsPage.pluginRow.first()).toBeVisible();
   await mainMenuPage.expectMenuItemsCount(3);

diff --git a/playwright/tests/singlePermissions/staffMembers.spec.ts b/playwright/tests/singlePermissions/staffMembers.spec.ts
@@ -16,7 +16,7 @@ test.beforeEach(async ({ page, request }) => {
   mainMenuPage = new MainMenuPage(page);
   configurationPage = new ConfigurationPage(page);
   permissionGroupsPage = new PermissionGroupsPage(page);
-  await configurationPage.gotoConfigurationView();
+  await configurationPage.goToConfigurationView();
   await configurationPage.waitForDOMToFullyLoad();
 });
 test("TC: SALEOR_19 User should be able to navigate to staff members list page as a staff member using STAFF permission @e2e", async () => {

diff --git a/playwright/tests/taxes.spec.ts b/playwright/tests/taxes.spec.ts
@@ -13,7 +13,7 @@ test.beforeEach(({ page }) => {
   taxesPage = new TaxesPage(page);
 });
 test("TC: SALEOR_115 Change taxes in channel to use tax app  @taxes @e2e", async () => {
-  await configurationPage.gotoConfigurationView();
+  await configurationPage.goToConfigurationView();
   await configurationPage.openTaxes();
   await taxesPage.selectChannel(CHANNELS.channelForTaxEdition.name);
   await taxesPage.selectTaxCalculationMethod("saleor.app.dummy.tax");

diff --git a/src/giftCards/GiftCardCreateDialog/GiftCardCreateExpirySelect/GiftCardCreateExpirySelect.tsx b/src/giftCards/GiftCardCreateDialog/GiftCardCreateExpirySelect/GiftCardCreateExpirySelect.tsx
@@ -95,7 +95,7 @@ const GiftCardCreateExpirySelect: React.FC<GiftCardCreateExpirySelectProps> = ({
           )}
 
           {expiryType === "EXPIRY_PERIOD" && (
-            <div className={classes.periodField}>
+            <div data-test-id="gift-card-expire-data-fields" className={classes.periodField}>
               <TimePeriodField
                 isError={!!errors?.expiryDate}
                 helperText={getGiftCardErrorMessage(errors?.expiryDate, intl)}