tests for gift cards (#1361)

cypress/apiRequests/giftCards.js

@@ -0,0 +1,31 @@
+export function getGiftCardWithTag(tag) {
+  return getGiftCardsWithTag(1, tag)
+    .its("body.data.giftCards.edges")
+    .its(0)
+    .its("node");
+}
+
+export function getGiftCardsWithTag(first, tag) {
+  const query = `query{
+    giftCards(first: ${first}, filter: { tag: "${tag}"}){
+      edges{
+        node{
+          id
+          code
+          isActive
+          expiryType
+          expiryDate
+          expiryPeriod{
+            amount
+            type
+          }
+          initialBalance{
+            currency
+            amount
+          }
+        }
+      }
+    }
+  }`;
+  return cy.sendRequestWithQuery(query);
+}

cypress/elements/giftCard/giftCardDialog.js

@@ -0,0 +1,17 @@
+export const GIFT_CARD_DIALOG = {
+  amountInput: '[name="balanceAmount"]',
+  currencySelectButton: '[id="mui-component-select-balanceCurrency"]',
+  currenciesOptions: '[data-test="selectFieldOption"]',
+  expirationOptions: {
+    neverExpireRadioButton: '[value="NEVER_EXPIRE"]',
+    expiryPeriodRadioButton: '[value="EXPIRY_PERIOD"]',
+    expiryDateRadioButton: '[value="EXPIRY_DATE"]',
+    expiryPeriodAmount: '[name="expiryPeriodAmount"]',
+    expiryPeriodTypeButton: '[id*="select-expiryPeriodType"]',
+    expiryPeriodMonthType: '[data-test-id="MONTH"]',
+    expiryDateInput: '[name="expiryDate"]'
+  },
+  noteInput: '[name="note"]',
+  cardCodeText: '[data-test-id="cardCode"]',
+  tagInput: '[data-test-id="gift-card-tag-select-field"]'
+};

cypress/elements/giftCard/giftCardList.js

@@ -0,0 +1,3 @@
+export const GIFT_CARD_LIST = {
+  issueCardButton: '[data-test-id="issueCardButton"]'
+};

cypress/integration/giftCards.js

@@ -0,0 +1,103 @@
+// <reference types="cypress" />
+import faker from "faker";
+
+import { getGiftCardWithTag } from "../apiRequests/giftCards";
+import {
+  expiryPeriods,
+  openAndFillUpCreateGiftCardDialog,
+  saveGiftCard,
+  setExpiryDate,
+  setExpiryPeriod,
+  setNeverExpire
+} from "../steps/giftCardSteps";
+import filterTests from "../support/filterTests";
+import { formatDate } from "../support/format/formatDate";
+
+filterTests(["all"], () => {
+  describe("Tests for gift cards", () => {
+    const startsWith = "GiftCards";
+    const amount = 50;
+    const currency = "USD";
+
+    before(() => {
+      cy.clearSessionData().loginUserViaRequest();
+    });
+
+    beforeEach(() => {
+      cy.clearSessionData().loginUserViaRequest();
+    });
+
+    it("should create never expire gift card", () => {
+      const name = `${startsWith}${faker.datatype.number()}`;
+      let giftCardCode;
+
+      openAndFillUpCreateGiftCardDialog({
+        note: name,
+        tag: name,
+        amount,
+        currency
+      });
+      setNeverExpire();
+      saveGiftCard()
+        .then(createdGiftCardCode => {
+          giftCardCode = createdGiftCardCode;
+          getGiftCardWithTag(name);
+        })
+        .then(giftCard => {
+          expect(giftCard.code).to.eq(giftCardCode);
+          expect(giftCard.initialBalance.amount).to.eq(amount);
+          expect(giftCard.initialBalance.currency).to.eq(currency);
+        });
+    });
+
+    it("should create gift card with two moths expiry", () => {
+      const name = `${startsWith}${faker.datatype.number()}`;
+      let giftCardCode;
+
+      openAndFillUpCreateGiftCardDialog({
+        note: name,
+        tag: name,
+        amount,
+        currency
+      });
+      setExpiryPeriod(2, expiryPeriods.MONTH);
+      saveGiftCard()
+        .then(createdGiftCardCode => {
+          giftCardCode = createdGiftCardCode;
+          getGiftCardWithTag(name);
+        })
+        .then(giftCard => {
+          expect(giftCard.code).to.eq(giftCardCode);
+          expect(giftCard.initialBalance.amount).to.eq(amount);
+          expect(giftCard.initialBalance.currency).to.eq(currency);
+          expect(giftCard.expiryPeriod.amount).to.eq(2);
+          expect(giftCard.expiryPeriod.type).to.eq("MONTH");
+        });
+    });
+
+    it("should create gift card with date expiry", () => {
+      const name = `${startsWith}${faker.datatype.number()}`;
+      let giftCardCode;
+      const date = formatDate(new Date(new Date().getFullYear() + 2, 1, 1));
+
+      openAndFillUpCreateGiftCardDialog({
+        note: name,
+        tag: name,
+        amount,
+        currency
+      });
+      setExpiryDate(date);
+      saveGiftCard()
+        .then(createdGiftCardCode => {
+          giftCardCode = createdGiftCardCode;
+          getGiftCardWithTag(name);
+        })
+        .then(giftCard => {
+          expect(giftCard.code).to.eq(giftCardCode);
+          expect(giftCard.initialBalance.amount).to.eq(amount);
+          expect(giftCard.initialBalance.currency).to.eq(currency);
+          expect(giftCard.expiryDate).to.eq(date);
+        });
+    });
+  });
+});

cypress/steps/giftCardSteps.js

@@ -0,0 +1,63 @@
+import { GIFT_CARD_DIALOG } from "../elements/giftCard/giftCardDialog";
+import { GIFT_CARD_LIST } from "../elements/giftCard/giftCardList";
+import { BUTTON_SELECTORS } from "../elements/shared/button-selectors";
+import { urlList } from "../url/urlList";
+import { createNewOption } from "./shared/selects";
+
+export function openAndFillUpCreateGiftCardDialog({
+  note,
+  tag,
+  amount,
+  currency
+}) {
+  cy.visit(urlList.giftCards)
+    .get(GIFT_CARD_LIST.issueCardButton)
+    .click()
+    .get(GIFT_CARD_DIALOG.currencySelectButton)
+    .click();
+  cy.contains(GIFT_CARD_DIALOG.currenciesOptions, currency)
+    .click()
+    .get(GIFT_CARD_DIALOG.amountInput)
+    .clearAndType(amount);
+  createNewOption(GIFT_CARD_DIALOG.tagInput, tag);
+  cy.get(GIFT_CARD_DIALOG.noteInput).type(note);
+}
+
+export function saveGiftCard() {
+  return cy
+    .get(BUTTON_SELECTORS.submit)
+    .click()
+    .get(GIFT_CARD_DIALOG.cardCodeText)
+    .invoke("text")
+    .then(text => {
+      const giftCardCode = text;
+      cy.get(BUTTON_SELECTORS.submit).click();
+      return cy.wrap(giftCardCode);
+    });
+}
+
+export function setNeverExpire() {
+  cy.get(GIFT_CARD_DIALOG.expirationOptions.neverExpireRadioButton).click();
+}
+
+export const expiryPeriods = {
+  MONTH: GIFT_CARD_DIALOG.expirationOptions.expiryPeriodMonthType
+};
+
+export function setExpiryPeriod(amount, period) {
+  cy.get(GIFT_CARD_DIALOG.expirationOptions.expiryPeriodRadioButton)
+    .click()
+    .get(GIFT_CARD_DIALOG.expirationOptions.expiryPeriodAmount)
+    .clearAndType(amount)
+    .get(GIFT_CARD_DIALOG.expirationOptions.expiryPeriodTypeButton)
+    .click()
+    .get(period)
+    .click();
+}
+
+export function setExpiryDate(date) {
+  cy.get(GIFT_CARD_DIALOG.expirationOptions.expiryDateRadioButton)
+    .click()
+    .get(GIFT_CARD_DIALOG.expirationOptions.expiryDateInput)
+    .type(date);
+}

cypress/steps/shared/selects.js

@@ -28,3 +28,10 @@ export function fillBaseSelect(selectSelector, value) {
     .get(selectorWithDataValue(value))
     .click();
 }
+
+export function createNewOption(selectSelector, newOption) {
+  cy.get(selectSelector).type(newOption);
+  cy.contains(BUTTON_SELECTORS.selectOption, newOption)
+    .should("be.visible")
+    .click();
+}

cypress/url/urlList.js

@@ -9,6 +9,7 @@ export const urlList = {
   configuration: "configuration/",
   customers: "customers/",
   draftOrders: "orders/drafts/",
+  giftCards: "gift-cards/",
   homePage: "/",
   newPassword: "new-password/",
   navigation: "navigation/",

src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogCodeContent.tsx

@@ -38,7 +38,7 @@ const GiftCardCreateDialogCodeContent: React.FC<GiftCardCreateDialogCodeContentP
         {intl.formatMessage(messages.createdGiftCardLabel)}
       </Typography>
       <VerticalSpacer />
-      <Typography variant="h6" color="textSecondary">
+      <Typography variant="h6" color="textSecondary" data-test-id="cardCode">
         {cardCode}
       </Typography>
       <VerticalSpacer spacing={2} />
@@ -47,7 +47,12 @@ const GiftCardCreateDialogCodeContent: React.FC<GiftCardCreateDialogCodeContentP
           {intl.formatMessage(messages.copyCodeLabel)}
         </Button>
         <HorizontalSpacer spacing={2} />
-        <Button color="primary" variant="contained" onClick={onClose}>
+        <Button
+          color="primary"
+          variant="contained"
+          onClick={onClose}
+          data-test="submit"
+        >
           {intl.formatMessage(buttonMessages.ok)}
         </Button>
       </div>

src/giftCards/GiftCardsList/GiftCardsListHeader.tsx

@@ -39,7 +39,12 @@ const GiftCardsListHeader: React.FC<GiftCardsListHeaderProps> = ({
     <PageHeader title={intl.formatMessage(sectionNames.giftCards)}>
       {/* <CardMenu menuItems={menuItems} data-test="menu" /> */}
       <HorizontalSpacer spacing={2} />
-      <Button color="primary" variant="contained" onClick={onIssueButtonClick}>
+      <Button
+        color="primary"
+        variant="contained"
+        onClick={onIssueButtonClick}
+        data-test-id="issueCardButton"
+      >
         {intl.formatMessage(messages.issueButtonLabel)}
       </Button>
     </PageHeader>