Saleor 4581 tests for products images (#1450)

* tests for images on product list

* image on product details page should be displayed

* test for upload image

* fix collection utils import

* fix creating test data

* update jest

cypress/elements/catalog/products/product-details.js

@@ -19,5 +19,9 @@ export const PRODUCT_DETAILS = {
   variantRow: "[data-test-id='product-variant-row']",
   variantPrice: '[data-test="price"]',
   collectionRemoveButtons: '[data-test-id="collectionRemove"]',
-  variantRow: "[data-test-id='product-variant-row']"
+  productImage: '[data-test="product-image"]',
+  uploadImageButton: '[data-test="button-upload-image"]',
+  uploadSavedImagesButton: '[data-test="uploadImages"]',
+  uploadMediaUrlButton: '[data-test="uploadMediaUrl"]',
+  saveUploadUrlButton: '[data-test-id="upload-url-button"]'
 };

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

@@ -4,6 +4,8 @@ export const PRODUCTS_LIST = {
   createProductBtn: "[data-test='add-product']",
   searchProducts: "[placeholder='Search Products...']",
   emptyProductRow: "[data-test-id='skeleton']",
+  productImage: "[class='MuiAvatar-img']",
+  tableCellAvatar: "[data-test-id='tableCellAvatar']",
   productRowElements: {
     name: '[data-test="name"]',
     type: '[data-test="product-type"]',

cypress/elements/shared/sharedElements.js

@@ -10,6 +10,9 @@ export const SHARED_ELEMENTS = {
   dialog: '[role="dialog"]',
   searchInput: '[data-test-id="searchInput"]',
   selectOption: '[data-test="selectFieldOption"]',
+  svgImage: "svg",
+  fileInput: 'input[type="file"]',
+  urlInput: 'input[type="url"]',
   richTextEditor: {
     loader: '[class*="codex-editor__loader"]',
     empty: '[class*="codex-editor--empty"]'

cypress/fixtures/products.js

@@ -0,0 +1,3 @@
+export const demoProductsNames = {
+  appleJuice: "Apple Juice"
+};

cypress/integration/products/images.js

@@ -0,0 +1,91 @@
+/// <reference types="cypress"/>
+/// <reference types="../../support"/>
+
+import { PRODUCT_DETAILS } from "../../elements/catalog/products/product-details";
+import { PRODUCTS_LIST } from "../../elements/catalog/products/products-list";
+import { SHARED_ELEMENTS } from "../../elements/shared/sharedElements";
+import { demoProductsNames } from "../../fixtures/products";
+import { productDetailsUrl, urlList } from "../../fixtures/urlList";
+import { getFirstProducts } from "../../support/api/requests/Product";
+import { loginDeleteProductsAndCreateNewOneWithNewDataAndDefaultChannel } from "../../support/api/utils/products/productsUtils";
+import filterTests from "../../support/filterTests";
+
+filterTests({ definedTags: ["all"] }, () => {
+  describe("Tests for images", () => {
+    beforeEach(() => {
+      cy.clearSessionData().loginUserViaRequest();
+    });
+
+    it("Images on product list should be displayed", () => {
+      cy.addAliasToGraphRequest("ProductList")
+        .visit(urlList.products)
+        .wait("@ProductList")
+        .its("response.body")
+        .then(resp => {
+          const data = resp.find(element =>
+            element.data.hasOwnProperty("products")
+          ).data;
+          const products = data.products.edges;
+          cy.get(PRODUCTS_LIST.productImage)
+            .each($image => {
+              cy.wrap($image)
+                .invoke("attr", "src")
+                .then(imageUrl => {
+                  cy.request(imageUrl);
+                })
+                .then(respImage => {
+                  expect(respImage.status).to.eq(200);
+                });
+            })
+            .then(images => {
+              const expectedProductsSvgAvatars =
+                products.length - images.length;
+              cy.get(PRODUCTS_LIST.tableCellAvatar)
+                .find(SHARED_ELEMENTS.svgImage)
+                .should("have.length", expectedProductsSvgAvatars);
+            });
+        });
+    });
+
+    it("Should display product image", () => {
+      getFirstProducts(1, demoProductsNames.appleJuice)
+        .then(resp => {
+          const product = resp[0].node;
+          cy.visit(productDetailsUrl(product.id))
+            .get(PRODUCT_DETAILS.productImage)
+            .find("img")
+            .invoke("attr", "src");
+        })
+        .then(imageUrl => {
+          cy.request(imageUrl);
+        })
+        .then(imageResp => {
+          expect(imageResp.status).to.equal(200);
+        });
+    });
+
+    it("Should upload saved image", () => {
+      const name = "CyImages";
+
+      loginDeleteProductsAndCreateNewOneWithNewDataAndDefaultChannel({ name })
+        .then(product => {
+          cy.visit(productDetailsUrl(product.id))
+            .get(PRODUCT_DETAILS.uploadImageButton)
+            .click()
+            .get(PRODUCT_DETAILS.uploadSavedImagesButton)
+            .click()
+            .get(SHARED_ELEMENTS.fileInput)
+            .attachFile("images/saleorDemoProductSneakers.png")
+            .get(PRODUCT_DETAILS.productImage)
+            .find("img")
+            .invoke("attr", "src");
+        })
+        .then(imageUrl => {
+          cy.request(imageUrl);
+        })
+        .then(imageResp => {
+          expect(imageResp.status).to.equal(200);
+        });
+    });
+  });
+});

cypress/support/api/requests/Product.js

@@ -24,6 +24,7 @@ export function getFirstProducts(first, search) {
     .sendRequestWithQuery(query)
     .then(resp => resp.body.data.products.edges);
 }
+
 export function updateProduct(productId, input) {
   const mutation = `mutation {
     productUpdate(id:"${productId}", input:${stringify(input)} ){

cypress/support/api/utils/products/productsUtils.js

@@ -1,5 +1,6 @@
 import * as attributeRequest from "../../requests/Attribute";
 import * as categoryRequest from "../../requests/Category";
+import { createCollection } from "../../requests/Collections";
 import * as productRequest from "../../requests/Product";
 import {
   createTypeProduct,
@@ -7,6 +8,8 @@ import {
   getProductTypes
 } from "../../requests/ProductType";
 import { deleteAttributesStartsWith } from "../attributes/attributeUtils";
+import { deleteCollectionsStartsWith } from "../catalog/collectionsUtils";
+import { getDefaultChannel } from "../channelsUtils";
 
 export function createProductInChannel({
   name,
@@ -103,3 +106,38 @@ export function deleteProductsStartsWith(startsWith) {
     startsWith
   );
 }
+
+export function loginDeleteProductsAndCreateNewOneWithNewDataAndDefaultChannel({
+  name,
+  description = name
+}) {
+  let defaultChannel;
+  let collection;
+  let attribute;
+
+  cy.clearSessionData().loginUserViaRequest();
+  deleteProductsStartsWith(name);
+  deleteCollectionsStartsWith(name);
+  return getDefaultChannel()
+    .then(channel => {
+      defaultChannel = channel;
+      createCollection(name);
+    })
+    .then(collectionResp => {
+      collection = collectionResp;
+      createTypeAttributeAndCategoryForProduct({ name });
+    })
+    .then(({ attribute: attributeResp, category, productType }) => {
+      attribute = attributeResp;
+      createProductInChannel({
+        attributeId: attribute.id,
+        categoryId: category.id,
+        productTypeId: productType.id,
+        channelId: defaultChannel.id,
+        name,
+        collectionId: collection.id,
+        description
+      });
+    })
+    .then(({ product: productResp }) => productResp);
+}

cypress/support/index.js

@@ -11,6 +11,7 @@ import "./customCommands/sharedElementsOperations/progressBar.js";
 import "./customCommands/sharedElementsOperations/selects.js";
 import "./customCommands/sharedElementsOperations/tables";
 import "cypress-mailhog";
+import "cypress-file-upload";
 
 import { urlList } from "../fixtures/urlList";
 

src/components/TableCellAvatar/TableCellAvatar.tsx

@@ -29,7 +29,11 @@ const TableCellAvatar: React.FC<TableCellAvatarProps> = props => {
   const classes = useStyles(props);
 
   return (
-    <TableCell className={classNames(classes.root, className)} {...rest}>
+    <TableCell
+      className={classNames(classes.root, className)}
+      data-test-id="tableCellAvatar"
+      {...rest}
+    >
       <Avatar {...rest} />
     </TableCell>
   );