djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add test for thumbnails (#2219)

Browse source 
* Add test for thumbnails

* Add test for thumbnails

* split into functions

* update snapshot
This commit is contained in:
Karolina Rakoczy 2022-09-01 10:35:19 +02:00 committed by GitHub
parent 6789b73f00
commit 24d77b984a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 178 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

140
cypress/e2e/products/images.js
View file

@ -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"));
}
});
},
);
});

1
cypress/elements/catalog/products/products-list.js
View file

@ -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"]',

3
cypress/support/api/requests/Product.js
View file

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

64
cypress/support/api/utils/products/productsUtils.js
View file

@ -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;
}

2
src/components/TableCellAvatar/Avatar.tsx
View file

@ -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

24
src/storybook/__snapshots__/Stories.test.ts.snap
View file

@ -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"
>