Add reports to tests (#1898)

* add reporter, fix tests

* remove unused import

* get functions duration

* merge

* update snaps

.gitignore

@@ -42,6 +42,7 @@ cypress/videos
 webpack-bundle.json
 /templates/templated_email/compiled/*
 !/templates/templated_email/compiled/.gitkeep
+cypress/reports
 
 # Exported results file
 django-queries-results.html

cypress.json

@@ -6,8 +6,5 @@
   "defaultCommandTimeout": 15000,
   "requestTimeout": 15000,
   "viewportWidth": 1400,
-  "viewportHeight": 660,
+  "viewportHeight": 660
-  "retries": {
+}
-    "runMode": 2
-  }
-}

cypress/elements/catalog/categories/categories-list.js

@@ -2,4 +2,4 @@ export const CATEGORIES_LIST = {
   addCategoryButton: '[data-test-id="create-category"]'
 };
 
-export const categoryRow = categoryId => `[data-test-id="${categoryId}"]`;
+export const categoryRow = categoryId => `[data-test-id*="${categoryId}"]`;

cypress/elements/shared/button-selectors.js

@@ -8,6 +8,7 @@ export const BUTTON_SELECTORS = {
   selectOption: "[data-test-id*='select-option']",
   notSelectedOption: ":not([aria-selected])",
   deleteButton: '[data-test="button-bar-delete"]',
+  confirmDeleteButton: '[data-test-id="confirm-delete"]',
   expandIcon: '[data-test-id="expand-icon"]',
   nextPaginationButton: '[data-test="button-pagination-next"]',
   deleteIcon: '[data-test-id="delete-icon"]',

cypress/integration/catalog/categories.js

@@ -12,7 +12,6 @@ import { BUTTON_SELECTORS } from "../../elements/shared/button-selectors";
 import { SHARED_ELEMENTS } from "../../elements/shared/sharedElements";
 import { categoryDetailsUrl, urlList } from "../../fixtures/urlList";
 import { getCategory } from "../../support/api/requests/Category";
-import { createCategory as createCategoryRequest } from "../../support/api/requests/Category";
 import { deleteCategoriesStartsWith } from "../../support/api/utils/catalog/categoryUtils";
 import * as channelsUtils from "../../support/api/utils/channelsUtils";
 import * as productsUtils from "../../support/api/utils/products/productsUtils";
@@ -148,7 +147,7 @@ filterTests({ definedTags: ["all"] }, () => {
     it("should be able to delete category. TC: SALEOR_0206", () => {
       const categoryName = `${startsWith}${faker.datatype.number()}`;
 
-      createCategoryRequest({ name: categoryName }).then(categoryResp => {
+      createCategory({ name: categoryName }).then(categoryResp => {
         cy.visit(categoryDetailsUrl(categoryResp.id))
           .get(BUTTON_SELECTORS.deleteButton)
           .click()
@@ -164,7 +163,7 @@ filterTests({ definedTags: ["all"] }, () => {
       const categoryName = `${startsWith}${faker.datatype.number()}`;
       const updatedName = `${startsWith}updatedCategory`;
 
-      createCategoryRequest({ name: categoryName })
+      createCategory({ name: categoryName })
         .then(categoryResp => {
           cy.visitAndWaitForProgressBarToDisappear(
             categoryDetailsUrl(categoryResp.id)
@@ -186,10 +185,10 @@ filterTests({ definedTags: ["all"] }, () => {
       let firstCategory;
       let secondCategory;
 
-      createCategoryRequest({ name: firstCategoryName }).then(categoryResp => {
+      createCategory({ name: firstCategoryName }).then(categoryResp => {
         firstCategory = categoryResp;
       });
-      createCategoryRequest({ name: secondCategoryName }).then(categoryResp => {
+      createCategory({ name: secondCategoryName }).then(categoryResp => {
         secondCategory = categoryResp;
         cy.visit(urlList.categories)
           .searchInTable(startsWith)
@@ -216,7 +215,7 @@ filterTests({ definedTags: ["all"] }, () => {
       let subCategory;
       let mainCategory;
 
-      createCategoryRequest({ name: mainCategoryName })
+      createCategory({ name: mainCategoryName })
         .then(categoryResp => {
           mainCategory = categoryResp;
           createCategoryRequest({

cypress/integration/configuration/attributes/attributeVariantSelection.js

@@ -20,7 +20,7 @@ import filterTests from "../../../support/filterTests";
 import { fillUpVariantDetails } from "../../../support/pages/catalog/products/VariantsPage";
 
 filterTests({ definedTags: ["all"], version: "3.1.0" }, () => {
-  describe("Create attribute with type", () => {
+  describe("Create variant with variant selection attribute", () => {
     const startsWith = "VarSel";
 
     const attributesTypes = [
@@ -39,7 +39,7 @@ filterTests({ definedTags: ["all"], version: "3.1.0" }, () => {
       cy.clearSessionData().loginUserViaRequest();
       deleteProductsStartsWith(startsWith);
       getDefaultChannel().then(defaultChannel => (channel = defaultChannel));
-      createCategory(startsWith).then(
+      createCategory({ name: startsWith }).then(
         categoryResp => (category = categoryResp)
       );
     });

cypress/integration/configuration/productTypes/attributesInProduductTypes.js

@@ -18,7 +18,7 @@ import { deleteProductsStartsWith } from "../../../support/api/utils/products/pr
 import filterTests from "../../../support/filterTests";
 
 filterTests({ definedTags: ["all"] }, () => {
-  describe("As an admin I want to manage product types", () => {
+  describe("As an admin I want to manage attributes in product types", () => {
     const startsWith = "productType";
     let category;
     let channel;
@@ -28,7 +28,7 @@ filterTests({ definedTags: ["all"] }, () => {
       cy.clearSessionData().loginUserViaRequest();
       deleteProductsStartsWith(startsWith);
       createAttribute({ name: startsWith }).then(resp => (attribute = resp));
-      createCategory(startsWith).then(resp => (category = resp));
+      createCategory({ name: startsWith }).then(resp => (category = resp));
       getDefaultChannel().then(resp => (channel = resp));
     });
 

cypress/integration/configuration/productTypes/deleteProductType.js

@@ -31,7 +31,7 @@ filterTests({ definedTags: ["all"] }, () => {
       cy.clearSessionData().loginUserViaRequest();
       deleteProductsStartsWith(startsWith);
       createAttribute({ name: startsWith }).then(resp => (attribute = resp));
-      createCategory(startsWith).then(resp => (category = resp));
+      createCategory({ name: startsWith }).then(resp => (category = resp));
       getDefaultChannel().then(resp => (channel = resp));
     });
 
@@ -49,8 +49,7 @@ filterTests({ definedTags: ["all"] }, () => {
           .get(BUTTON_SELECTORS.deleteButton)
           .click()
           .addAliasToGraphRequest("ProductTypeDelete")
-          .get(SHARED_ELEMENTS.warningDialog)
+          .get(BUTTON_SELECTORS.confirmDeleteButton)
-          .find(BUTTON_SELECTORS.deleteButton)
           .click()
           .waitForRequestAndCheckIfNoErrors("@ProductTypeDelete");
         getProductType(productType.id).should("be.null");
@@ -78,13 +77,11 @@ filterTests({ definedTags: ["all"] }, () => {
             .get(BUTTON_SELECTORS.deleteButton)
             .click()
             .addAliasToGraphRequest("ProductTypeDelete")
-            .get(SHARED_ELEMENTS.warningDialog)
+            .get(BUTTON_SELECTORS.confirmDeleteButton)
-            .find(BUTTON_SELECTORS.deleteButton)
             .should("not.be.enabled")
             .get(BUTTON_SELECTORS.deleteAssignedItemsConsentCheckbox)
             .click()
-            .get(SHARED_ELEMENTS.warningDialog)
+            .get(BUTTON_SELECTORS.confirmDeleteButton)
-            .find(BUTTON_SELECTORS.deleteButton)
             .click()
             .waitForRequestAndCheckIfNoErrors("@ProductTypeDelete");
           getProductType(productType.id).should("be.null");

cypress/plugins/index.js

@@ -22,6 +22,7 @@ const graphql = require("graphql-request");
 
 module.exports = async (on, config) => {
   // make env variables visible for cypress
+  require("cypress-mochawesome-reporter/plugin")(on);
   config.env.API_URI = process.env.API_URI;
   config.env.APP_MOUNT_URI = process.env.APP_MOUNT_URI;
   config.env.mailHogUrl = process.env.CYPRESS_MAILHOG;

cypress/support/index.js

@@ -13,6 +13,10 @@ import "./customCommands/sharedElementsOperations/tables";
 import "./customCommands/sharedElementsOperations/deleteElement";
 import "cypress-mailhog";
 import "cypress-file-upload";
+import "cypress-mochawesome-reporter/register";
+
+import { commandTimings } from "cypress-timings";
+commandTimings();
 
 import { urlList } from "../fixtures/urlList";
 

cypress/support/pages/catalog/collectionsPage.js

@@ -56,8 +56,10 @@ export function updateCollection({ name, description }) {
 export function assignProductsToCollection(productName) {
   cy.get(COLLECTION_SELECTORS.addProductButton)
     .click()
+    .addAliasToGraphRequest("SearchProducts")
     .get(ASSIGN_ELEMENTS_SELECTORS.searchInput)
-    .type(productName);
+    .type(productName)
+    .waitForRequestAndCheckIfNoErrors("@SearchProducts");
   cy.contains(ASSIGN_ELEMENTS_SELECTORS.tableRow, productName)
     .find(ASSIGN_ELEMENTS_SELECTORS.checkbox)
     .click();

cypress/support/pages/catalog/products/VariantsPage.js

@@ -3,6 +3,7 @@ import { PRODUCT_DETAILS } from "../../../../elements/catalog/products/product-d
 import { VARIANTS_SELECTORS } from "../../../../elements/catalog/products/variants-selectors";
 import { AVAILABLE_CHANNELS_FORM } from "../../../../elements/channels/available-channels-form";
 import { BUTTON_SELECTORS } from "../../../../elements/shared/button-selectors";
+import { SHARED_ELEMENTS } from "../../../../elements/shared/sharedElements";
 import { formatDate } from "../../../formatData/formatDate";
 import { selectChannelVariantInDetailsPage } from "../../channelsPage";
 import { fillUpPriceList } from "./priceListComponent";
@@ -62,9 +63,10 @@ export function createVariant({
 }) {
   cy.get(PRODUCT_DETAILS.addVariantsButton).click();
   fillUpVariantDetails({ attributeName, sku, warehouseName, quantity });
-  cy.get(BUTTON_SELECTORS.back);
   cy.get(VARIANTS_SELECTORS.saveButton)
     .click()
+    .get(VARIANTS_SELECTORS.skuInput)
+    .should("be.enabled")
     .get(BUTTON_SELECTORS.back)
     .click();
   selectChannelForVariantAndFillUpPrices({
@@ -152,6 +154,8 @@ export function selectChannelForVariantAndFillUpPrices({
     .get(VARIANTS_SELECTORS.saveButton)
     .click()
     .waitForRequestAndCheckIfNoErrors("@ProductVariantChannelListingUpdate")
+    .get(PRICE_LIST.priceInput)
+    .should("be.enabled")
     .get(BUTTON_SELECTORS.back)
     .click()
     .waitForProgressBarToNotBeVisible()

package.json

@@ -41,6 +41,7 @@
     "crc-32": "^1.2.0",
     "currency-codes": "^2.1.0",
     "cypress-mailhog": "^1.3.0",
+    "cypress-mochawesome-reporter": "^2.3.0",
     "downshift": "^6.1.7",
     "editorjs-inline-tool": "^0.4.0",
     "editorjs-undo": "^0.1.4",
@@ -51,6 +52,7 @@
     "hotkeys-js": "^3.8.1",
     "is-url": "^1.2.4",
     "jss": "^9.8.7",
+    "junit-report-merger": "^3.0.5",
     "keycode": "^2.2.0",
     "lodash": "^4.17.20",
     "moment-timezone": "^0.5.32",
@@ -140,6 +142,8 @@
     "cross-env": "^6.0.3",
     "cypress": "^9.2.1",
     "cypress-file-upload": "^5.0.8",
+    "cypress-multi-reporters": "^1.5.0",
+    "cypress-timings": "^1.0.0",
     "dotenv": "^10.0.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.5",
@@ -162,6 +166,10 @@
     "jest-localstorage-mock": "^2.4.3",
     "jscodeshift": "^0.13.0",
     "lint-staged": "^10.5.1",
+    "mocha-junit-reporter": "^2.0.2",
+    "mochawesome": "^7.0.1",
+    "mochawesome-merge": "^4.2.1",
+    "mochawesome-report-generator": "^6.0.1",
     "mock-apollo-client": "^0.4.0",
     "prettier": "^1.19.1",
     "react-intl-translations-manager": "^5.0.3",
@@ -253,6 +261,9 @@
     "start": "npm run generate-fragment-types && webpack-dev-server -d",
     "storybook": "start-storybook -p 3000 -c src/storybook/",
     "cy:run": "cypress run",
+    "cy:run:report": "cypress run --env tags=all --reporter cypress-mochawesome-reporter --reporter-options reportDir='cypress/reports',overwrite=true,charts=true",
+    "cy:combine:reports": "npx mochawesome-merge 'cypress/results/*.json' > mochawesome.json",
+    "cy:run:merge": "npx marge mochawesome.json",
     "cy:run:dashboard": "cypress run --record --key 1fe833f5-fca4-4454-ac55-943815b91c6c",
     "cy:run:record": "npm run cy:run -- --record",
     "cy:open": "cypress open",

src/components/DeleteButton/DeleteButton.tsx

@@ -20,11 +20,13 @@ interface DeleteButtonProps {
   onClick: () => void;
   label?: string | React.ReactNode;
   disabled?: boolean;
+  testId?: string;
 }
 
 const DeleteButton: React.FC<DeleteButtonProps> = ({
   onClick,
   label,
+  testId,
   disabled = false
 }) => {
   const classes = useStyles({});
@@ -35,7 +37,7 @@ const DeleteButton: React.FC<DeleteButtonProps> = ({
       variant="primary"
       onClick={onClick}
       className={classes.button}
-      data-test-id="button-bar-delete"
+      data-test-id={testId ? "confirm-delete" : "button-bar-delete"}
       disabled={disabled}
     >
       {label || intl.formatMessage(buttonMessages.delete)}

src/components/TypeDeleteWarningDialog/TypeDeleteWarningDialogContent.tsx

@@ -72,7 +72,11 @@ const TypeDeleteWarningDialogContent: React.FC<TypeDeleteWarningDialogContentPro
             <HorizontalSpacer spacing={3} />
           </>
         )}
-        <DeleteButton onClick={onDelete} disabled={isDisbled} />
+        <DeleteButton
+          onClick={onDelete}
+          disabled={isDisbled}
+          testId="confirm-delete"
+        />
       </div>
     </CardContent>
   );