update flow to create manual voucher codes (#4413)

* update flow to create manual voucher codes * changeset added
saleor · Nov 9, 2023 · 9856c76 · 9856c76
1 parent 926a74b
commit 9856c76
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 10 deletions.
diff --git a/.changeset/five-days-film.md b/.changeset/five-days-film.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+update e2e voucher code creation tests
diff --git a/cypress.config.js b/cypress.config.js
@@ -14,7 +14,7 @@ module.exports = defineConfig({
   screenshotsFolder: "cypress/reports/mochareports",
   screenshotOnRunFailure: true,
   experimentalMemoryManagement: true,
-  numTestsKeptInMemory: 0,
+  numTestsKeptInMemory: 8,
   retries: {
     runMode: 2,
     openMode: 0,

diff --git a/cypress/elements/discounts/vouchers.js b/cypress/elements/discounts/vouchers.js
@@ -1,6 +1,9 @@
 export const VOUCHERS_SELECTORS = {
   createVoucherButton: "[data-test-id='create-voucher']",
-  voucherCodeInput: "[name='code']",
+  manualVoucherItem: "[data-test-id='manual']",
+  voucherCodeConfirmButton: "[data-test-id='confirm-button']",
+  voucherCodeAddButton: "[data-test-id='add-code-button']",
+  voucherCodeNameInput: "[data-test-id='enter-code-input']",
   discountRadioButtons: "[name='discountType']",
   percentageDiscountRadioButton:
     "[name='discountType'][value='VALUE_PERCENTAGE']",
@@ -17,12 +20,12 @@ export const VOUCHERS_SELECTORS = {
     usageLimitCheckbox: '[data-test-id="has-usage-limit"]',
     usageLimitTextField: '[data-test-id="usage-limit"]',
     applyOncePerCustomerCheckbox: '[data-test-id="apply-once-per-customer"]',
-    onlyForStaffCheckbox: '[data-test-id="only-for-staff"]'
+    onlyForStaffCheckbox: '[data-test-id="only-for-staff"]',
   },
   requirements: {
     minOrderValueCheckbox: '[name="requirementsPicker"][value="ORDER"]',
     minAmountOfItemsCheckbox: '[name="requirementsPicker"][value="ITEM"]',
     minCheckoutItemsQuantityInput: '[name="minCheckoutItemsQuantity"]',
-    minOrderValueInput: '[name="minSpent"]'
-  }
+    minOrderValueInput: '[name="minSpent"]',
+  },
 };
diff --git a/cypress/support/pages/discounts/vouchersPage.js b/cypress/support/pages/discounts/vouchersPage.js
@@ -25,10 +25,11 @@ export function createVoucher({
 }) {
   cy.get(VOUCHERS_SELECTORS.createVoucherButton).click();
   selectChannelInDetailsPages(channelName);
-  cy.get(VOUCHERS_SELECTORS.voucherCodeInput)
-    .type(voucherCode)
-    .get(discountOption)
-    .click();
+  cy.get(VOUCHERS_SELECTORS.voucherCodeAddButton).click();
+  cy.get(VOUCHERS_SELECTORS.manualVoucherItem).click();
+  cy.get(VOUCHERS_SELECTORS.voucherCodeNameInput).type(voucherCode);
+  cy.get(VOUCHERS_SELECTORS.voucherCodeConfirmButton).click();
+  cy.get(discountOption).click();
   if (discountOption !== discountOptions.SHIPPING) {
     cy.get(VOUCHERS_SELECTORS.discountValueInputs).type(voucherValue, {
       force: true,

diff --git a/src/components/SubMenu/SubMenu.tsx b/src/components/SubMenu/SubMenu.tsx
@@ -33,7 +33,12 @@ export const SubMenu = ({ menuItems }: SubMenuProps) => {
             borderBottomWidth={1}
             borderColor="neutralPlain"
           >
-            <Text variant="bodyStrong">{title}</Text>
+            <Text
+              data-test-id={String(title).toLowerCase()}
+              variant="bodyStrong"
+            >
+              {title}
+            </Text>
             <Text>{description}</Text>
           </List.Item>
         );

diff --git a/src/discounts/components/VoucherCodesAddButton/VoucherCodesAddButton.tsx b/src/discounts/components/VoucherCodesAddButton/VoucherCodesAddButton.tsx
@@ -55,6 +55,7 @@ export const VoucherCodesAddButton = ({
     <Popover open={isSubMenuOpen} onOpenChange={setSubMenuOpen}>
       <Popover.Trigger>
         <Button
+          data-test-id="add-code-button"
           type="button"
           backgroundColor="interactiveNeutralDefault"
           color="textNeutralContrasted"

diff --git a/src/discounts/components/VoucherCodesManualDialog/VoucherCodesManualDialog.tsx b/src/discounts/components/VoucherCodesManualDialog/VoucherCodesManualDialog.tsx
@@ -55,6 +55,7 @@ export const VoucherCodesManualDialog = ({
         </DashboardModal.Title>
         <Box display="grid" gap={3} __width={390}>
           <Input
+            data-test-id="enter-code-input"
             name="code"
             type="text"
             size="small"
@@ -73,6 +74,7 @@ export const VoucherCodesManualDialog = ({
             {intl.formatMessage(buttonMessages.back)}
           </Button>
           <ConfirmButton
+            data-test-id="confirm-button"
             transitionState={confirmButtonTransitionState}
             onClick={handleSubmit}
           >