From 24d77b984a60b0183d6031bb55d4dd058d1e7771 Mon Sep 17 00:00:00 2001 From: Karolina Rakoczy Date: Thu, 1 Sep 2022 10:35:19 +0200 Subject: [PATCH] Add test for thumbnails (#2219) * Add test for thumbnails * Add test for thumbnails * split into functions * update snapshot --- cypress/e2e/products/images.js | 140 +++++++++++------- .../catalog/products/products-list.js | 1 + cypress/support/api/requests/Product.js | 3 + .../api/utils/products/productsUtils.js | 64 ++++++++ src/components/TableCellAvatar/Avatar.tsx | 2 +- .../__snapshots__/Stories.test.ts.snap | 24 +++ 6 files changed, 178 insertions(+), 56 deletions(-) diff --git a/cypress/e2e/products/images.js b/cypress/e2e/products/images.js index 41efad586..f5c515fea 100644 --- a/cypress/e2e/products/images.js +++ b/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") - .then(resp => { - const data = resp.find(element => - element.data.hasOwnProperty("products"), - ).data; - const products = data.products.edges; - cy.expectSkeletonIsVisible() - .get(SHARED_ELEMENTS.skeleton) - .should("not.exist"); + .its("response.body.data.products.edges") + .then(products => { + cy.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) - .find(SHARED_ELEMENTS.svgImage) - .should("have.length", expectedProductsSvgAvatars); + cy.get(PRODUCTS_LIST.imageIcon).should( + "have.length", + expectedProductsSvgAvatars, + ); }); }); }, ); - it("Should display product image", { tags: ["@products", "@allEnv"] }, () => { - getFirstProducts(1, demoProductsNames.carrotJuice) - .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 display product image", + { tags: ["@products", "@allEnv", "@stable"] }, + () => { + getFirstProducts(1, demoProductsNames.carrotJuice) + .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", { tags: ["@products", "@allEnv"] }, () => { - const name = "CyImages"; + it( + "Should upload saved image", + { tags: ["@products", "@allEnv", "@stable"] }, + () => { + const name = "CyImages"; - cy.clearSessionData().loginUserViaRequest(); - createNewProductWithNewDataAndDefaultChannel({ name }) - .then(({ product }) => { - cy.visit(productDetailsUrl(product.id)) - .waitForProgressBarToNotBeVisible() - .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); - }); - }); + deleteProductsStartsWith(name); + deleteCollectionsStartsWith(name); + cy.clearSessionData().loginUserViaRequest(); + createNewProductWithNewDataAndDefaultChannel({ name }) + .then(({ product }) => { + cy.visit(productDetailsUrl(product.id)) + .waitForProgressBarToNotBeVisible() + .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); + }); + }, + ); + + 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")); + } + }); + }, + ); }); diff --git a/cypress/elements/catalog/products/products-list.js b/cypress/elements/catalog/products/products-list.js index 153278b65..6fb181031 100644 --- a/cypress/elements/catalog/products/products-list.js +++ b/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"]', diff --git a/cypress/support/api/requests/Product.js b/cypress/support/api/requests/Product.js index 7ece40b9f..d13f54238 100644 --- a/cypress/support/api/requests/Product.js +++ b/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{ diff --git a/cypress/support/api/utils/products/productsUtils.js b/cypress/support/api/utils/products/productsUtils.js index e44ea3bcf..fdc301eee 100644 --- a/cypress/support/api/utils/products/productsUtils.js +++ b/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; +} diff --git a/src/components/TableCellAvatar/Avatar.tsx b/src/components/TableCellAvatar/Avatar.tsx index 970fd58b1..c577b1a43 100644 --- a/src/components/TableCellAvatar/Avatar.tsx +++ b/src/components/TableCellAvatar/Avatar.tsx @@ -64,7 +64,7 @@ const Avatar: React.FC = ({ {badge} {!thumbnail ? ( - + ) : (