tests for pages (#1222)

* tests for pages

* fix tests

* fix imports

* tests for pages

* add wait

* tests for pages

* fix weight recalculate

cypress/apiRequests/Attribute.js

@@ -1,7 +1,8 @@
 export function createAttribute({
   name,
   attributeValues = ["value"],
-  type = "PRODUCT_TYPE"
+  type = "PRODUCT_TYPE",
+  inputType = "DROPDOWN"
 }) {
   const values = attributeValues.map(element => `{name:"${element}"}`);
   const mutation = `mutation{
@@ -10,6 +11,7 @@ export function createAttribute({
       valueRequired:false
       type:${type}
       values: [${values}]
+      inputType: ${inputType}
     }){
       attribute{
         id

cypress/apiRequests/Page.js

@@ -1,3 +1,23 @@
+export function getPage(pageId, auth = "auth") {
+  const query = `query{
+    page(id:"${pageId}"){
+      title
+      isPublished
+      attributes{
+        values{
+          inputType
+          name
+        }
+        attribute{
+          id
+          inputType
+        }
+      }
+    }
+  }`;
+  return cy.sendRequestWithQuery(query, auth).its("body.data.page");
+}
+
 export function createPage({ title, pageTypeId }) {
   const mutation = `mutation{
     pageCreate(input:{

cypress/apiRequests/shopSettings.js

@@ -16,7 +16,7 @@ export function updateShopWeightUnit(weightUnit) {
   }`;
   return cy
     .sendRequestWithQuery(mutation)
-    .wait(1000)
+    .wait(5000)
     .its("body.data.shopSettingsUpdate");
 }
 

cypress/elements/pages/page-details.js

@@ -0,0 +1,10 @@
+export const PAGE_DETAILS = {
+  nameInput: '[name="title"]',
+  pageTypesAutocompleteSelect: '[data-test-id="pageTypesAutocompleteSelect"]',
+  attributeValues: '[data-test="attribute-value"]',
+  isPublishedCheckbox: '[name="isPublished"][value=true]',
+  uploadFileButton: '[data-test="button-upload-file"]',
+  richTextEditorAttributeValue: '[class*="ce-paragraph"]',
+  booleanAttributeValueCheckbox: '[name*="attribute:"][type="checkbox"]',
+  numericAttributeValueInput: '[name*="attribute:"]'
+};

cypress/elements/pages/pages-list.js

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

cypress/integration/pages/pages.js

@@ -0,0 +1,103 @@
+import faker from "faker";
+
+import { createAttribute } from "../../apiRequests/Attribute";
+import { getPage } from "../../apiRequests/Page";
+import { createPageType } from "../../apiRequests/PageTypes";
+import { attributesTypes, createPage } from "../../steps/pageSteps";
+import { deleteAttributesStartsWith } from "../../utils/attributes/attributeUtils";
+import { deletePageTypesStartsWith } from "../../utils/pageTypeUtils";
+
+describe("Tests for pages", () => {
+  const startsWith = `Pages`;
+  const name = `${startsWith}${faker.datatype.number()}`;
+  let attribute;
+
+  const attributeValuesOnPage = {
+    NUMERIC: 1,
+    RICH_TEXT: faker.lorem.sentence(),
+    DROPDOWN: "value",
+    MULTISELECT: "value",
+    BOOLEAN: true
+  };
+
+  before(() => {
+    cy.clearSessionData().loginUserViaRequest();
+    deleteAttributesStartsWith(startsWith);
+    deletePageTypesStartsWith(startsWith);
+
+    createAttribute({ name, type: "PAGE_TYPE" }).then(attributeResp => {
+      attribute = attributeResp;
+      createPageType({ name, attributeId: attribute.id });
+    });
+  });
+
+  beforeEach(() => {
+    cy.clearSessionData().loginUserViaRequest();
+  });
+
+  it("should create not published page", () => {
+    const randomName = `${startsWith}${faker.datatype.number()}`;
+
+    createPage({ pageName: randomName, pageTypeName: name })
+      .then(page => {
+        getPage(page.id);
+      })
+      .then(page => {
+        expect(page.title).to.eq(randomName);
+        expect(page.isPublished).to.be.false;
+        expect(page.attributes[0].attribute.id).to.eq(attribute.id);
+        getPage(page.id, "token").should("be.null");
+      });
+  });
+
+  it("should create published page", () => {
+    const randomName = `${startsWith}${faker.datatype.number()}`;
+
+    createPage({ pageName: randomName, pageTypeName: name, isPublished: true })
+      .then(page => {
+        getPage(page.id, "token");
+      })
+      .then(page => {
+        expect(page.title).to.eq(randomName);
+        expect(page.isPublished).to.be.true;
+        expect(page.attributes[0].attribute.id).to.eq(attribute.id);
+      });
+  });
+
+  Object.keys(attributesTypes).forEach(attributeType => {
+    it(`should create page with ${attributeType} attribute`, () => {
+      const randomName = `${startsWith}${faker.datatype.number()}`;
+      const attributeValues = [attributeValuesOnPage[attributeType]];
+      createAttribute({
+        name: randomName,
+        type: "PAGE_TYPE",
+        inputType: attributeType,
+        attributeValues
+      }).then(attributeResp => {
+        attribute = attributeResp;
+        createPageType({ name: randomName, attributeId: attribute.id });
+      });
+      createPage({
+        pageName: randomName,
+        pageTypeName: randomName,
+        attributeType,
+        attributeValue: attributeValuesOnPage[attributeType]
+      })
+        .then(page => {
+          getPage(page.id);
+        })
+        .then(page => {
+          expect(page.attributes[0].values[0].inputType).to.eq(attributeType);
+          if (attributeType !== "BOOLEAN") {
+            expect(page.attributes[0].values[0].name).to.eq(
+              attributeValuesOnPage[attributeType].toString()
+            );
+          } else {
+            expect(page.attributes[0].values[0].name).to.includes(
+              "Yes".toString()
+            );
+          }
+        });
+    });
+  });
+});

cypress/steps/pageSteps.js

@@ -0,0 +1,75 @@
+import { PAGE_DETAILS } from "../elements/pages/page-details";
+import { PAGES_LIST } from "../elements/pages/pages-list";
+import { BUTTON_SELECTORS } from "../elements/shared/button-selectors";
+import { SHARED_ELEMENTS } from "../elements/shared/sharedElements";
+import { urlList } from "../url/urlList";
+import { confirmationMessageShouldDisappear } from "./shared/confirmationMessages";
+import { fillAutocompleteSelect } from "./shared/selects";
+
+export const attributesTypes = {
+  DROPDOWN: addSelectAttributeValue,
+  MULTISELECT: addSelectAttributeValue,
+  RICH_TEXT: addRichTextAttributeValue,
+  BOOLEAN: addBooleanAttributeValue,
+  NUMERIC: addNumericAttributeValue
+};
+export function createPage({
+  pageName,
+  pageTypeName,
+  isPublished = false,
+  attributeType = "DROPDOWN",
+  attributeValue
+}) {
+  openCreatePageAndFillUpGeneralFields({ pageName, pageTypeName, isPublished });
+  attributesTypes[attributeType](attributeValue);
+  return savePage();
+}
+
+export function addSelectAttributeValue(attributeValue) {
+  fillAutocompleteSelect(PAGE_DETAILS.attributeValues, attributeValue);
+}
+
+export function addRichTextAttributeValue(attributeValue) {
+  cy.get(PAGE_DETAILS.attributeValues)
+    .find(SHARED_ELEMENTS.richTextEditor.empty)
+    .should("exist")
+    .get(PAGE_DETAILS.attributeValues)
+    .find(PAGE_DETAILS.richTextEditorAttributeValue)
+    .type(attributeValue)
+    .wait(500);
+}
+
+export function addBooleanAttributeValue() {
+  cy.get(PAGE_DETAILS.booleanAttributeValueCheckbox).click();
+}
+
+export function addNumericAttributeValue(attributeValue) {
+  cy.get(PAGE_DETAILS.numericAttributeValueInput).type(attributeValue);
+}
+
+function openCreatePageAndFillUpGeneralFields({
+  pageName,
+  pageTypeName,
+  isPublished
+}) {
+  cy.visit(urlList.pages)
+    .get(PAGES_LIST.createPageButton)
+    .click()
+    .get(PAGE_DETAILS.nameInput)
+    .type(pageName);
+  if (isPublished) {
+    cy.get(PAGE_DETAILS.isPublishedCheckbox).click();
+  }
+  fillAutocompleteSelect(
+    PAGE_DETAILS.pageTypesAutocompleteSelect,
+    pageTypeName
+  );
+}
+
+function savePage() {
+  cy.addAliasToGraphRequest("PageCreate")
+    .get(BUTTON_SELECTORS.confirm)
+    .click();
+  confirmationMessageShouldDisappear();
+  return cy.wait("@PageCreate").its("response.body.data.pageCreate.page");
+}

cypress/steps/shippingMethodSteps.js

@@ -58,7 +58,7 @@ export function changeWeightUnit(weightUnit) {
   cy.addAliasToGraphRequest("UpdateDefaultWeightUnit");
   cy.get(SHIPPING_ZONES_LIST.saveUnit).click();
   confirmationMessageShouldDisappear();
-  cy.wait("@UpdateDefaultWeightUnit").wait(1000);
+  cy.wait("@UpdateDefaultWeightUnit").wait(5000);
 }
 
 export function createShippingRate({

cypress/url/urlList.js

@@ -13,6 +13,7 @@ export const urlList = {
   newPassword: "new-password/",
   navigation: "navigation/",
   orders: "orders/",
+  pages: "pages/",
   pageTypes: "page-types/",
   permissionsGroups: "permission-groups/",
   products: "products/",
@@ -21,9 +22,9 @@ export const urlList = {
   shippingMethods: "shipping/",
   siteSettings: "site-settings/",
   staffMembers: "staff/",
-  vouchers: "discounts/vouchers/",
   warehouses: "warehouses/",
-  weightRete: "weight/"
+  weightRete: "weight/",
+  vouchers: "discounts/vouchers/"
 };
 
 export const productDetailsUrl = productId => `${urlList.products}${productId}`;

cypress/utils/attributes.js~HEAD

@@ -0,0 +1,5 @@
+import { deleteAttribute, getAttributes } from "../apiRequests/Attribute";
+
+export function deleteAttributesStartsWith(startsWith) {
+  cy.deleteElementsStartsWith(deleteAttribute, getAttributes, startsWith);
+}

cypress/utils/pageTypeUtils.js

@@ -0,0 +1,5 @@
+import { deletePageType, getPageTypes } from "../apiRequests/PageTypes";
+
+export function deletePageTypesStartsWith(startsWith) {
+  cy.deleteElementsStartsWith(deletePageType, getPageTypes, startsWith);
+}

cypress/utils/products/productsUtils.js

@@ -90,11 +90,7 @@ export function createTypeAttributeAndCategoryForProduct(
 export function deleteProductsStartsWith(startsWith) {
   deleteAttributesStartsWith(startsWith);
   cy.deleteElementsStartsWith(deleteProductType, getProductTypes, startsWith);
-  cy.deleteElementsStartsWith(
-    attributeRequest.deleteAttribute,
-    attributeRequest.getAttributes,
-    startsWith
-  );
+  deleteAttributesStartsWith(startsWith);
   cy.deleteElementsStartsWith(
     categoryRequest.deleteCategory,
     categoryRequest.getCategories,

package-lock.json

@@ -11087,6 +11087,12 @@
         }
       }
     },
+    "cypress-file-upload": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/cypress-file-upload/-/cypress-file-upload-5.0.8.tgz",
+      "integrity": "sha512-+8VzNabRk3zG6x8f8BWArF/xA/W0VK4IZNx3MV0jFWrJS/qKn8eHfa5nU73P9fOQAgwHFJx7zjg4lwOnljMO8g==",
+      "dev": true
+    },
     "cypress-mailhog": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/cypress-mailhog/-/cypress-mailhog-1.3.0.tgz",

package.json

@@ -138,6 +138,7 @@
     "core-js": "^3.7.0",
     "cross-env": "^6.0.3",
     "cypress": "^7.2.0",
+    "cypress-file-upload": "^5.0.8",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.5",
     "enzyme-to-json": "^3.6.1",

src/pages/components/PageListPage/PageListPage.tsx

@@ -32,7 +32,12 @@ const PageListPage: React.FC<PageListPageProps> = ({
         {intl.formatMessage(sectionNames.configuration)}
       </Backlink>
       <PageHeader title={intl.formatMessage(sectionNames.pages)}>
-        <Button onClick={onAdd} variant="contained" color="primary">
+        <Button
+          onClick={onAdd}
+          variant="contained"
+          color="primary"
+          data-test-id="createPage"
+        >
           <FormattedMessage defaultMessage="Create page" description="button" />
         </Button>
       </PageHeader>

src/pages/components/PageOrganizeContent/PageOrganizeContent.tsx

@@ -67,6 +67,7 @@ const PageOrganizeContent: React.FC<PageOrganizeContentProps> = props => {
       <CardContent>
         {canChangeType ? (
           <SingleAutocompleteSelectField
+            data-test-id="pageTypesAutocompleteSelect"
             disabled={disabled}
             displayValue={pageTypeInputDisplayValue}
             label={intl.formatMessage({

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -154089,6 +154089,7 @@ exports[`Storyshots Views / Pages / Page details loading 1`] = `
             >
               <div
                 class="SingleAutocompleteSelectField-container-id"
+                data-test-id="pageTypesAutocompleteSelect"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -154177,6 +154178,7 @@ exports[`Storyshots Views / Pages / Page list default 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
+            data-test-id="createPage"
             tabindex="0"
             type="button"
           >
@@ -154778,6 +154780,7 @@ exports[`Storyshots Views / Pages / Page list loading 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
+            data-test-id="createPage"
             tabindex="0"
             type="button"
           >
@@ -155126,6 +155129,7 @@ exports[`Storyshots Views / Pages / Page list no data 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
+            data-test-id="createPage"
             tabindex="0"
             type="button"
           >