Add test for thumbnails (#2219)

* Add test for thumbnails

* Add test for thumbnails

* split into functions

* update snapshot

cypress/e2e/products/images.js

@@ -7,29 +7,28 @@ 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 { createNewProductWithNewDataAndDefaultChannel } from "../../support/api/utils/products/productsUtils";
+import { deleteCollectionsStartsWith } from "../../support/api/utils/catalog/collectionsUtils";
+import {
+  createNewProductWithNewDataAndDefaultChannel,
+  deleteProductsStartsWith,
+  iterateThroughThumbnails,
+} from "../../support/api/utils/products/productsUtils";
 
-xdescribe("Tests for images", () => {
+describe("Tests for images", () => {
   beforeEach(() => {
     cy.clearSessionData().loginUserViaRequest();
   });
 
   it(
     "Images on product list should be displayed",
-    { tags: ["@products", "@allEnv"] },
+    { tags: ["@products", "@allEnv", "@stable"] },
     () => {
       cy.addAliasToGraphRequest("ProductList")
         .visit(urlList.products)
         .wait("@ProductList")
-        .its("response.body")
+        .its("response.body.data.products.edges")
-        .then(resp => {
+        .then(products => {
-          const data = resp.find(element =>
+          cy.get(SHARED_ELEMENTS.skeleton).should("not.exist");
-            element.data.hasOwnProperty("products"),
-          ).data;
-          const products = data.products.edges;
-          cy.expectSkeletonIsVisible()
-            .get(SHARED_ELEMENTS.skeleton)
-            .should("not.exist");
           cy.get(PRODUCTS_LIST.productImage)
             .each($image => {
               cy.wrap($image)
@@ -44,54 +43,85 @@ xdescribe("Tests for images", () => {
             .then(images => {
               const expectedProductsSvgAvatars =
                 products.length - images.length;
-              cy.get(PRODUCTS_LIST.tableCellAvatar)
+              cy.get(PRODUCTS_LIST.imageIcon).should(
-                .find(SHARED_ELEMENTS.svgImage)
+                "have.length",
-                .should("have.length", expectedProductsSvgAvatars);
+                expectedProductsSvgAvatars,
+              );
             });
         });
     },
   );
 
-  it("Should display product image", { tags: ["@products", "@allEnv"] }, () => {
+  it(
-    getFirstProducts(1, demoProductsNames.carrotJuice)
+    "Should display product image",
-      .then(resp => {
+    { tags: ["@products", "@allEnv", "@stable"] },
-        const product = resp[0].node;
+    () => {
-        cy.visit(productDetailsUrl(product.id))
+      getFirstProducts(1, demoProductsNames.carrotJuice)
-          .get(PRODUCT_DETAILS.productImage)
+        .then(resp => {
-          .find("img")
+          const product = resp[0].node;
-          .invoke("attr", "src");
+          cy.visit(productDetailsUrl(product.id))
-      })
+            .get(PRODUCT_DETAILS.productImage)
-      .then(imageUrl => {
+            .find("img")
-        cy.request(imageUrl);
+            .invoke("attr", "src");
-      })
+        })
-      .then(imageResp => {
+        .then(imageUrl => {
-        expect(imageResp.status).to.equal(200);
+          cy.request(imageUrl);
-      });
+        })
-  });
+        .then(imageResp => {
+          expect(imageResp.status).to.equal(200);
+        });
+    },
+  );
 
-  it("Should upload saved image", { tags: ["@products", "@allEnv"] }, () => {
+  it(
-    const name = "CyImages";
+    "Should upload saved image",
+    { tags: ["@products", "@allEnv", "@stable"] },
+    () => {
+      const name = "CyImages";
 
-    cy.clearSessionData().loginUserViaRequest();
+      deleteProductsStartsWith(name);
-    createNewProductWithNewDataAndDefaultChannel({ name })
+      deleteCollectionsStartsWith(name);
-      .then(({ product }) => {
+      cy.clearSessionData().loginUserViaRequest();
-        cy.visit(productDetailsUrl(product.id))
+      createNewProductWithNewDataAndDefaultChannel({ name })
-          .waitForProgressBarToNotBeVisible()
+        .then(({ product }) => {
-          .get(PRODUCT_DETAILS.uploadImageButton)
+          cy.visit(productDetailsUrl(product.id))
-          .click()
+            .waitForProgressBarToNotBeVisible()
-          .get(PRODUCT_DETAILS.uploadSavedImagesButton)
+            .get(PRODUCT_DETAILS.uploadImageButton)
-          .click()
+            .click()
-          .get(SHARED_ELEMENTS.fileInput)
+            .get(PRODUCT_DETAILS.uploadSavedImagesButton)
-          .attachFile("images/saleorDemoProductSneakers.png")
+            .click()
-          .get(PRODUCT_DETAILS.productImage)
+            .get(SHARED_ELEMENTS.fileInput)
-          .find("img")
+            .attachFile("images/saleorDemoProductSneakers.png")
-          .invoke("attr", "src");
+            .get(PRODUCT_DETAILS.productImage)
-      })
+            .find("img")
-      .then(imageUrl => {
+            .invoke("attr", "src");
-        cy.request(imageUrl);
+        })
-      })
+        .then(imageUrl => {
-      .then(imageResp => {
+          cy.request(imageUrl);
-        expect(imageResp.status).to.equal(200);
+        })
-      });
+        .then(imageResp => {
-  });
+          expect(imageResp.status).to.equal(200);
+        });
+    },
+  );
+
+  it(
+    "should create thumbnail url after entering image url",
+    { tags: ["@products", "@allEnv", "@stable"] },
+    () => {
+      let failedRequests;
+      getFirstProducts(100)
+        .then(products => {
+          const productsWithThumbnails = products.filter(
+            product => product.node.thumbnail !== null,
+          );
+          failedRequests = iterateThroughThumbnails(productsWithThumbnails);
+        })
+        .then(() => {
+          if (failedRequests && failedRequests.length > 0) {
+            throw new Error(failedRequests.join("\n"));
+          }
+        });
+    },
+  );
 });

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

@@ -5,6 +5,7 @@ export const PRODUCTS_LIST = {
   searchProducts: "[placeholder='Search Products...']",
   emptyProductRow: "[data-test-id='skeleton']",
   productImage: "[class='MuiAvatar-img']",
+  imageIcon: '[data-test-id="imageIcon"]',
   tableCellAvatar: "[data-test-id='table-cell-avatar']",
   productRowElements: {
     name: '[data-test-id="name"]',

cypress/support/api/requests/Product.js

@@ -15,6 +15,9 @@ export function getFirstProducts(first, search) {
     products(first:${first}${filter}){
       edges{
         node{
+          thumbnail{
+            url
+          }
           id
           name
           variants{

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

@@ -468,3 +468,67 @@ export function createShippingProductTypeAttributeAndCategory(
       defaultChannel,
     }));
 }
+
+export function sendRequestForMediaThumbnails(thumbnailUrl, productId) {
+  return cy
+    .request({
+      url: thumbnailUrl,
+      followRedirect: false,
+      failOnStatusCode: false,
+    })
+    .then(response => {
+      if (response.status !== 302) {
+        return `product: ${productId}, expectedStatus: 302, status: ${response.status}`;
+      } else {
+        cy.request({
+          url: response.redirectedToUrl,
+          failOnStatusCode: false,
+        }).then(resp => {
+          if (resp.status !== 200) {
+            return `product: ${productId}, expectedStatus: 200, status: ${resp.status}`;
+          } else {
+            return null;
+          }
+        });
+      }
+    });
+}
+
+export function sendRequestForThumbnails(thumbnailUrl, productId) {
+  return cy
+    .request({ url: thumbnailUrl, failOnStatusCode: false })
+    .then(response => {
+      if (response.status !== 200) {
+        return `product: ${productId}, expectedStatus: 200, status: ${response.status}`;
+      } else {
+        return null;
+      }
+    });
+}
+
+export function checkThumbnailTypeAndSendRequest(thumbnailUrl, productId) {
+  if (!thumbnailUrl.includes("/media/thumbnails")) {
+    return sendRequestForMediaThumbnails(thumbnailUrl, productId).then(
+      notCorrectStatus => notCorrectStatus,
+    );
+  } else {
+    return sendRequestForThumbnails(thumbnailUrl, productId).then(
+      notCorrectStatus => notCorrectStatus,
+    );
+  }
+}
+
+export function iterateThroughThumbnails(productsWithThumbnails) {
+  const failedRequests = [];
+  productsWithThumbnails.forEach(product => {
+    const thumbnailUrl = product.node.thumbnail.url;
+    checkThumbnailTypeAndSendRequest(thumbnailUrl, product.node.id).then(
+      notCorrectStatus => {
+        if (notCorrectStatus) {
+          failedRequests.push(notCorrectStatus);
+        }
+      },
+    );
+  });
+  return failedRequests;
+}

src/components/TableCellAvatar/Avatar.tsx

@@ -64,7 +64,7 @@ const Avatar: React.FC<AvatarProps> = ({
       {badge}
       {!thumbnail ? (
         <MuiAvatar className={classNames(classes.avatar, avatarProps)}>
-          <ImageIcon color="primary" />
+          <ImageIcon color="primary" data-test-id="imageIcon" />
         </MuiAvatar>
       ) : (
         <MuiAvatar

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

@@ -21340,6 +21340,7 @@ exports[`Storyshots Shipping / ShippingMethodProducts default 1`] = `
                   <svg
                     aria-hidden="true"
                     class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                    data-test-id="imageIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
                   >
@@ -58154,6 +58155,7 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details l
                           <svg
                             aria-hidden="true"
                             class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            data-test-id="imageIcon"
                             focusable="false"
                             viewBox="0 0 24 24"
                           >
@@ -114348,6 +114350,7 @@ exports[`Storyshots Views / Orders / Fulfill order default 1`] = `
                       <svg
                         aria-hidden="true"
                         class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                        data-test-id="imageIcon"
                         focusable="false"
                         viewBox="0 0 24 24"
                       >
@@ -114428,6 +114431,7 @@ exports[`Storyshots Views / Orders / Fulfill order default 1`] = `
                       <svg
                         aria-hidden="true"
                         class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                        data-test-id="imageIcon"
                         focusable="false"
                         viewBox="0 0 24 24"
                       >
@@ -114508,6 +114512,7 @@ exports[`Storyshots Views / Orders / Fulfill order default 1`] = `
                       <svg
                         aria-hidden="true"
                         class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                        data-test-id="imageIcon"
                         focusable="false"
                         viewBox="0 0 24 24"
                       >
@@ -114692,6 +114697,7 @@ exports[`Storyshots Views / Orders / Fulfill order error 1`] = `
                       <svg
                         aria-hidden="true"
                         class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                        data-test-id="imageIcon"
                         focusable="false"
                         viewBox="0 0 24 24"
                       >
@@ -114772,6 +114778,7 @@ exports[`Storyshots Views / Orders / Fulfill order error 1`] = `
                       <svg
                         aria-hidden="true"
                         class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                        data-test-id="imageIcon"
                         focusable="false"
                         viewBox="0 0 24 24"
                       >
@@ -114852,6 +114859,7 @@ exports[`Storyshots Views / Orders / Fulfill order error 1`] = `
                       <svg
                         aria-hidden="true"
                         class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                        data-test-id="imageIcon"
                         focusable="false"
                         viewBox="0 0 24 24"
                       >
@@ -115100,6 +115108,7 @@ exports[`Storyshots Views / Orders / Fulfill order one warehouse 1`] = `
                       <svg
                         aria-hidden="true"
                         class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                        data-test-id="imageIcon"
                         focusable="false"
                         viewBox="0 0 24 24"
                       >
@@ -115180,6 +115189,7 @@ exports[`Storyshots Views / Orders / Fulfill order one warehouse 1`] = `
                       <svg
                         aria-hidden="true"
                         class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                        data-test-id="imageIcon"
                         focusable="false"
                         viewBox="0 0 24 24"
                       >
@@ -115260,6 +115270,7 @@ exports[`Storyshots Views / Orders / Fulfill order one warehouse 1`] = `
                       <svg
                         aria-hidden="true"
                         class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                        data-test-id="imageIcon"
                         focusable="false"
                         viewBox="0 0 24 24"
                       >
@@ -180399,6 +180410,7 @@ exports[`Storyshots Views / Products / Create product variant add first variant
                           <svg
                             aria-hidden="true"
                             class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            data-test-id="imageIcon"
                             focusable="false"
                             viewBox="0 0 24 24"
                           >
@@ -181401,6 +181413,7 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
                           <svg
                             aria-hidden="true"
                             class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            data-test-id="imageIcon"
                             focusable="false"
                             viewBox="0 0 24 24"
                           >
@@ -182403,6 +182416,7 @@ exports[`Storyshots Views / Products / Create product variant no warehouses 1`]
                           <svg
                             aria-hidden="true"
                             class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            data-test-id="imageIcon"
                             focusable="false"
                             viewBox="0 0 24 24"
                           >
@@ -183325,6 +183339,7 @@ exports[`Storyshots Views / Products / Create product variant when loading data
                           <svg
                             aria-hidden="true"
                             class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            data-test-id="imageIcon"
                             focusable="false"
                             viewBox="0 0 24 24"
                           >
@@ -183369,6 +183384,7 @@ exports[`Storyshots Views / Products / Create product variant when loading data
                           <svg
                             aria-hidden="true"
                             class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            data-test-id="imageIcon"
                             focusable="false"
                             viewBox="0 0 24 24"
                           >
@@ -184238,6 +184254,7 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
                           <svg
                             aria-hidden="true"
                             class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            data-test-id="imageIcon"
                             focusable="false"
                             viewBox="0 0 24 24"
                           >
@@ -213210,6 +213227,7 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
                       <svg
                         aria-hidden="true"
                         class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                        data-test-id="imageIcon"
                         focusable="false"
                         viewBox="0 0 24 24"
                       >
@@ -227534,6 +227552,7 @@ exports[`Storyshots Views / Products / Product variant details when loading data
                           <svg
                             aria-hidden="true"
                             class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            data-test-id="imageIcon"
                             focusable="false"
                             viewBox="0 0 24 24"
                           >
@@ -229956,6 +229975,7 @@ exports[`Storyshots Views / Shipping / Shipping rate create price rate 1`] = `
                           <svg
                             aria-hidden="true"
                             class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            data-test-id="imageIcon"
                             focusable="false"
                             viewBox="0 0 24 24"
                           >
@@ -231169,6 +231189,7 @@ exports[`Storyshots Views / Shipping / Shipping rate create weight rate 1`] = `
                           <svg
                             aria-hidden="true"
                             class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            data-test-id="imageIcon"
                             focusable="false"
                             viewBox="0 0 24 24"
                           >
@@ -232186,6 +232207,7 @@ exports[`Storyshots Views / Shipping / Shipping rate loading 1`] = `
                           <svg
                             aria-hidden="true"
                             class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            data-test-id="imageIcon"
                             focusable="false"
                             viewBox="0 0 24 24"
                           >
@@ -233343,6 +233365,7 @@ exports[`Storyshots Views / Shipping / Shipping rate update price rate 1`] = `
                           <svg
                             aria-hidden="true"
                             class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            data-test-id="imageIcon"
                             focusable="false"
                             viewBox="0 0 24 24"
                           >
@@ -234640,6 +234663,7 @@ exports[`Storyshots Views / Shipping / Shipping rate update weight rate 1`] = `
                           <svg
                             aria-hidden="true"
                             class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            data-test-id="imageIcon"
                             focusable="false"
                             viewBox="0 0 24 24"
                           >