Vouchers tests

.changeset/purple-turkeys-agree.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": minor
+---
+
+Tests: Create voucher with auto-generated codes and fixed amount discount, Create voucher with manual code and percentage discount, Edit voucher to have free shipping discount, Edit voucher Usage limit: used in total, per customer, staff only, code used once

playwright/data/e2eTestData.ts

@@ -1,3 +1,13 @@
+export const VOUCHERS_AND_DISCOUNTS = {
+  vouchers: {
+    voucherToBeEditedWithFreeShipping: {
+      id: "Vm91Y2hlcjoyMDI%3D",
+    },
+    voucherToBeEditedUsageLimits: {
+      id: "Vm91Y2hlcjoyMDM%3D",
+    },
+  },
+};
 export const CUSTOMER_ADDRESS = {
   changeBillingAddress: {
     firstName: "Change Billing Address",

playwright/data/url.ts

@@ -32,6 +32,7 @@ export const URL_LIST = {
   translations: "translations/",
   variants: "variant/",
   vouchers: "discounts/vouchers/",
+  vouchersAddPage: "discounts/vouchers/add",
   variant: "variant/",
   warehouses: "warehouses/",
   webhooksAndEvents: "custom-apps/",

playwright/pages/basePage.ts

@@ -218,4 +218,22 @@ export class BasePage {
       expect(locator).toContainText(objectProperty);
     }
   }
+
+  async getNumberOfGridRowsWithText(expectedText: string) {
+    await this.gridCanvas
+      .locator("tr")
+      .filter({ hasText: expectedText })
+      .first()
+      .waitFor({ state: "attached" });
+    const gridRowsWithText = await this.gridCanvas
+      .locator("tr")
+      .filter({ hasText: expectedText })
+      .count();
+    return gridRowsWithText;
+  }
+  async getNumberOfGridRows() {
+    await this.gridCanvas.locator("tr").first().waitFor({ state: "attached" });
+    const gridRowsWithText = await this.gridCanvas.locator("tr").count();
+    return gridRowsWithText;
+  }
 }

playwright/pages/dialogs/addVoucherCodeDialog.ts

@@ -0,0 +1,24 @@
+import type { Page } from "@playwright/test";
+
+export class AddVoucherCodeDialog {
+  constructor(
+    page: Page,
+    readonly quantityInput = page.getByTestId("quantity-input"),
+    readonly prefixInput = page.getByTestId("prefix-input"),
+    readonly confirmButton = page.getByTestId("confirm-button"),
+    readonly enterCodeInput = page.getByTestId("enter-code-input"),
+  ) {}
+
+  async typeCodesQuantity(quantity = "10") {
+    await this.quantityInput.fill(quantity);
+  }
+  async typeCodesPrefix(prefix = "automation") {
+    await this.prefixInput.fill(prefix);
+  }
+  async typeCode(code = "123456789") {
+    await this.enterCodeInput.fill(code);
+  }
+  async clickConfirmButton() {
+    await this.confirmButton.click();
+  }
+}

playwright/pages/vouchersPage.ts

@@ -1,11 +1,96 @@
-import type { Locator, Page } from "@playwright/test";
+import { URL_LIST } from "@data/url";
+import { AddVoucherCodeDialog } from "@dialogs/addVoucherCodeDialog";
+import type { Page } from "@playwright/test";
 
-export class VouchersPage {
+import { BasePage } from "./basePage";
+
+export class VouchersPage extends BasePage {
   readonly page: Page;
-  readonly createVoucherButton: Locator;
+  readonly addVoucherCodeDialog: AddVoucherCodeDialog;
 
-  constructor(page: Page) {
+  constructor(
+    page: Page,
+    readonly createVoucherButton = page.getByTestId("create-voucher"),
+    readonly addCodeButton = page.getByTestId("add-code-button"),
+    readonly usageLimitCheckbox = page.getByTestId("has-usage-limit"),
+    readonly oncePerCustomerLimitCheckbox = page.getByTestId(
+      "apply-once-per-customer",
+    ),
+    readonly onlyForStaffLimitCheckbox = page.getByTestId("only-for-staff"),
+    readonly singleUseLimitCheckbox = page.getByTestId("single-use"),
+    readonly usageLimitSection = page.getByTestId("usage-limit-section"),
+    readonly usageLimitInput = page.getByTestId("usage-limit").locator("input"),
+    readonly saveButton = page.getByTestId("button-bar-confirm"),
+    readonly voucherNameInput = page.getByTestId("voucher-name-input"),
+    readonly discountValueInput = page.getByTestId("discount-value-input"),
+    readonly autoGeneratedCodesItem = page.getByTestId("auto-generate codes"),
+    readonly manualGeneratedCodesItem = page.getByTestId("manual"),
+    readonly percentDiscountTypeButton = page.getByTestId("VALUE_PERCENTAGE"),
+    readonly freeShippingDiscountTypeButton = page.getByTestId("SHIPPING"),
+  ) {
+    super(page);
     this.page = page;
-    this.createVoucherButton = page.getByTestId("create-voucher");
+    this.addVoucherCodeDialog = new AddVoucherCodeDialog(page);
+  }
+
+  async typeVoucherName(voucherName = "special voucher automation") {
+    await this.voucherNameInput.fill(voucherName);
+  }
+  async typeUsageLimit(usageLimit = "10000") {
+    await this.usageLimitInput.fill(usageLimit);
+  }
+
+  async clickCreateVoucherButton() {
+    await this.createVoucherButton.click();
+  }
+  async clickUsageTotalLimitCheckbox() {
+    await this.usageLimitCheckbox.click();
+  }
+  async clickSingleUseLimitCheckbox() {
+    await this.singleUseLimitCheckbox.click();
+  }
+  async clickOnlyForStaffLimitCheckbox() {
+    await this.onlyForStaffLimitCheckbox.click();
+  }
+  async clickOncePerCustomerLimitCheckbox() {
+    await this.oncePerCustomerLimitCheckbox.click();
+  }
+  async clickPercentDiscountTypeButton() {
+    await this.percentDiscountTypeButton.click();
+  }
+  async clickFreeShippingDiscountTypeButton() {
+    await this.freeShippingDiscountTypeButton.click();
+  }
+  async clickSaveButton() {
+    await this.saveButton.click();
+  }
+  async clickAutoGeneratedCodesItem() {
+    await this.autoGeneratedCodesItem.click();
+  }
+  async clickManualGeneratedCodesItem() {
+    await this.manualGeneratedCodesItem.click();
+  }
+  async clickAddCodeButton() {
+    await this.addCodeButton.click();
+  }
+
+  async gotoVouchersListPage() {
+    await this.page.goto(URL_LIST.vouchers);
+  }
+  async gotoExistingVoucherPage(voucherId: string) {
+    await this.page.goto(`${URL_LIST.vouchers}${voucherId}`);
+  }
+  async gotoVoucherAddPage() {
+    await this.page.goto(URL_LIST.vouchersAddPage);
+  }
+
+  async typeDiscountValueInChannel(
+    channel = "Channel-PLN",
+    discountValue = "10",
+  ) {
+    await this.page
+      .getByTestId(channel)
+      .locator(this.discountValueInput)
+      .fill(discountValue);
   }
 }

playwright/tests/discountAndVouchers.spec.ts

@@ -0,0 +1,131 @@
+import { VOUCHERS_AND_DISCOUNTS } from "@data/e2eTestData";
+import { VouchersPage } from "@pages/vouchersPage";
+import { expect, test } from "@playwright/test";
+
+test.use({ storageState: "playwright/.auth/admin.json" });
+
+let vouchersPage: VouchersPage;
+
+test.beforeEach(({ page }) => {
+  vouchersPage = new VouchersPage(page);
+});
+
+test("TC: SALEOR_85 Create voucher with auto-generated codes and fixed amount discount @vouchers @e2e", async () => {
+  const codesQuantity = 5;
+  const codesPrefix = "auto";
+
+  await vouchersPage.gotoVouchersListPage();
+  await vouchersPage.clickCreateVoucherButton();
+  await vouchersPage.typeVoucherName();
+  await vouchersPage.clickAddCodeButton();
+  await vouchersPage.clickAutoGeneratedCodesItem();
+  await vouchersPage.addVoucherCodeDialog.typeCodesQuantity(
+    codesQuantity.toString(),
+  );
+  await vouchersPage.addVoucherCodeDialog.typeCodesPrefix(codesPrefix);
+  await vouchersPage.addVoucherCodeDialog.clickConfirmButton();
+  await vouchersPage.waitForGrid();
+
+  const generatedCodesRows = await vouchersPage.getNumberOfGridRowsWithText(
+    codesPrefix,
+  );
+
+  await expect(
+    generatedCodesRows,
+    `Auto-generated number of codes: ${codesQuantity} should be visible on grid`,
+  ).toEqual(codesQuantity);
+
+  await vouchersPage.typeDiscountValueInChannel();
+  await vouchersPage.clickSaveButton();
+  await vouchersPage.expectSuccessBanner();
+  await vouchersPage.waitForGrid();
+  const activeCodesRows = await vouchersPage.getNumberOfGridRowsWithText(
+    "Active",
+  );
+  await expect(
+    activeCodesRows,
+    `Given codes quantity: ${codesQuantity} should have status Active displayed on grid`,
+  ).toEqual(codesQuantity);
+});
+
+test("TC: SALEOR_86 Create voucher with manual code and percentage discount @vouchers @e2e", async () => {
+  const code = `code-TC: SALEOR_86 ${new Date().toISOString()}`;
+
+  await vouchersPage.gotoVoucherAddPage();
+  await vouchersPage.typeVoucherName();
+  await vouchersPage.clickAddCodeButton();
+  await vouchersPage.clickManualGeneratedCodesItem();
+  await vouchersPage.addVoucherCodeDialog.typeCode(code);
+  await vouchersPage.addVoucherCodeDialog.clickConfirmButton();
+  await vouchersPage.waitForGrid();
+
+  const manualCodesRows = await vouchersPage.getNumberOfGridRowsWithText(code);
+
+  await expect(
+    manualCodesRows,
+    `Manually added code: ${code} should be visible on grid`,
+  ).toEqual(1);
+
+  await vouchersPage.clickPercentDiscountTypeButton();
+  await vouchersPage.typeDiscountValueInChannel("Channel-PLN", "50");
+  await vouchersPage.clickSaveButton();
+
+  await vouchersPage.expectSuccessBanner();
+  await vouchersPage.waitForGrid();
+  const manualActiveCodesRows = await vouchersPage.getNumberOfGridRowsWithText(
+    "Active",
+  );
+
+  await expect(
+    manualActiveCodesRows,
+    `Given codes: ${code} should have status Active displayed on grid`,
+  ).toEqual(1);
+});
+
+test("TC: SALEOR_87 Edit voucher to have free shipping discount @vouchers @e2e", async () => {
+  await vouchersPage.gotoExistingVoucherPage(
+    VOUCHERS_AND_DISCOUNTS.vouchers.voucherToBeEditedWithFreeShipping.id,
+  );
+  await vouchersPage.waitForGrid();
+  const codesRows = await vouchersPage.getNumberOfGridRows();
+
+  await vouchersPage.clickFreeShippingDiscountTypeButton();
+
+  await expect(
+    vouchersPage.discountValueInput,
+    "No discount value input should be visible with free shipping type active ",
+  ).not.toBeVisible();
+
+  await vouchersPage.clickSaveButton();
+  await vouchersPage.waitForGrid();
+
+  await vouchersPage.expectSuccessBanner();
+  const codesRowsAfterSave = await vouchersPage.getNumberOfGridRows();
+
+  await expect(
+    codesRows,
+    `Same amount of codes should have status Active displayed on grid after switching to free shipping`,
+  ).toEqual(codesRowsAfterSave);
+});
+test("TC: SALEOR_88 Edit voucher Usage limit: used in total, per customer, staff only, code used once @vouchers @e2e", async () => {
+  await vouchersPage.gotoExistingVoucherPage(
+    VOUCHERS_AND_DISCOUNTS.vouchers.voucherToBeEditedUsageLimits.id,
+  );
+  await vouchersPage.waitForGrid();
+
+  await vouchersPage.clickUsageTotalLimitCheckbox();
+  await vouchersPage.typeUsageLimit("100000");
+  await vouchersPage.clickOncePerCustomerLimitCheckbox();
+  await vouchersPage.clickOnlyForStaffLimitCheckbox();
+  await vouchersPage.clickSingleUseLimitCheckbox();
+  await vouchersPage.clickSaveButton();
+  await vouchersPage.waitForGrid();
+
+  await vouchersPage.expectSuccessBanner();
+  expect(
+    await vouchersPage.usageLimitSection
+      .locator('[class*="Mui-checked"]')
+      .count(),
+    "All usage limit checkboxes should be checked",
+  ).toEqual(4);
+});

playwright/tests/singlePermissions/orders.spec.ts

@@ -1,6 +1,6 @@
 import { URL_LIST } from "@data/url";
 import { BasePage } from "@pages/basePage";
-import { DraftsPage } from "@pages/draftsPage";
+import { DraftOrdersPage } from "@pages/draftOrdersPage";
 import { MainMenuPage } from "@pages/mainMenuPage";
 import { OrdersPage } from "@pages/ordersPage";
 import { expect, test } from "@playwright/test";
@@ -25,11 +25,11 @@ test("TC: SALEOR_9 User should be able to navigate to draft list as a staff memb
 }) => {
   const basePage = new BasePage(page);
   const mainMenuPage = new MainMenuPage(page);
-  const draftsPage = new DraftsPage(page);
+  const draftOrdersPage = new DraftOrdersPage(page);
 
   await page.goto(URL_LIST.homePage);
   await mainMenuPage.openDrafts();
-  await expect(draftsPage.createDraftButton).toBeVisible();
+  await expect(draftOrdersPage.createDraftOrderButton).toBeVisible();
   await basePage.expectGridToBeAttached();
   await mainMenuPage.expectMenuItemsCount(3);
 });

src/discounts/components/VoucherCodesGenerateDialog/VoucherCodesGenerateDialog.tsx

@@ -79,6 +79,7 @@ export const VoucherCodesGenerateDialog = ({
             })}
             value={data.quantity}
             onChange={handleChange}
+            data-test-id="quantity-input"
           />
           <Input
             name="prefix"
@@ -90,13 +91,18 @@ export const VoucherCodesGenerateDialog = ({
                 [e.target.name]: e.target.value,
               }));
             }}
+            data-test-id="prefix-input"
           />
         </Box>
         <DashboardModal.Actions>
           <Button onClick={handleModalClose} variant="secondary">
             {intl.formatMessage(buttonMessages.back)}
           </Button>
-          <Button onClick={handleSubmit} disabled={Number(data.quantity) === 0}>
+          <Button
+            onClick={handleSubmit}
+            disabled={Number(data.quantity) === 0}
+            data-test-id="confirm-button"
+          >
             {intl.formatMessage(buttonMessages.confirm)}
           </Button>
         </DashboardModal.Actions>

src/discounts/components/VoucherInfo/VoucherInfo.tsx

@@ -44,6 +44,7 @@ const VoucherInfo = ({
           })}
           value={data.name}
           onChange={onChange}
+          data-test-id="voucher-name-input"
         />
       </DashboardCard.Content>
     </DashboardCard>

src/discounts/components/VoucherLimits/VoucherLimits.tsx

@@ -39,7 +39,7 @@ const VoucherLimits = ({
   const usesLeft = data.usageLimit - data.used;
 
   return (
-    <Card>
+    <Card data-test-id="usage-limit-section">
       <CardTitle title={intl.formatMessage(messages.usageLimitsTitle)} />
       <CardContent className={classes.cardContent}>
         <ControlledCheckbox