From 2d4f3ead6352ebd4b1550ecc005bfcf3aff12132 Mon Sep 17 00:00:00 2001 From: david emioma Date: Tue, 26 Mar 2024 17:10:33 +0000 Subject: [PATCH] Added some more cypress test cases. --- .../categories/_components/CategoryForm.tsx | 11 +- .../categories/_components/CellActions.tsx | 13 +- .../categories/_components/Columns.tsx | 2 +- .../dashboard/[storeId]/categories/page.tsx | 1 + .../colors/_components/CellActions.tsx | 13 +- .../colors/_components/ColorForm.tsx | 15 +- .../[storeId]/colors/_components/Columns.tsx | 2 +- .../dashboard/[storeId]/colors/page.tsx | 1 + .../products/_components/CellActions.tsx | 10 +- .../products/_components/Columns.tsx | 2 +- .../products/_components/ProductForm.tsx | 32 +- .../sizes/_components/CellActions.tsx | 13 +- .../[storeId]/sizes/_components/Columns.tsx | 2 +- .../[storeId]/sizes/_components/SizeForm.tsx | 20 +- .../dashboard/[storeId]/sizes/page.tsx | 1 + cypress/e2e/category.cy.ts | 132 +++++++ cypress/e2e/color.cy.ts | 142 ++++++++ cypress/e2e/product.cy.ts | 324 ++++++++++++++++-- cypress/e2e/size.cy.ts | 137 ++++++++ cypress/e2e/update-product.cy.ts | 169 --------- 20 files changed, 790 insertions(+), 252 deletions(-) create mode 100644 cypress/e2e/category.cy.ts create mode 100644 cypress/e2e/color.cy.ts create mode 100644 cypress/e2e/size.cy.ts delete mode 100644 cypress/e2e/update-product.cy.ts diff --git a/app/(store)/dashboard/[storeId]/categories/_components/CategoryForm.tsx b/app/(store)/dashboard/[storeId]/categories/_components/CategoryForm.tsx index e0b899e..fc66bae 100644 --- a/app/(store)/dashboard/[storeId]/categories/_components/CategoryForm.tsx +++ b/app/(store)/dashboard/[storeId]/categories/_components/CategoryForm.tsx @@ -98,7 +98,7 @@ const CategoryForm = ({ data }: Props) => { }; return ( -
+
setOpen(false)} @@ -124,16 +124,21 @@ const CategoryForm = ({ data }: Props) => { {...field} disabled={isPending} placeholder="Shoes..." + data-cy="category-name-input" /> - + )} />
- diff --git a/app/(store)/dashboard/[storeId]/categories/_components/CellActions.tsx b/app/(store)/dashboard/[storeId]/categories/_components/CellActions.tsx index 191f2a8..eba7e0b 100644 --- a/app/(store)/dashboard/[storeId]/categories/_components/CellActions.tsx +++ b/app/(store)/dashboard/[storeId]/categories/_components/CellActions.tsx @@ -20,9 +20,10 @@ import { type Props = { data: Category; + index: number; }; -const CellActions = ({ data }: Props) => { +const CellActions = ({ data, index }: Props) => { const params = useParams(); const router = useRouter(); @@ -60,10 +61,11 @@ const CellActions = ({ data }: Props) => { onConfirm={onDelete} loading={isPending} featureToDelete="category" + testId={`category-${index}-delete`} /> - + diff --git a/app/(store)/dashboard/[storeId]/colors/_components/Columns.tsx b/app/(store)/dashboard/[storeId]/colors/_components/Columns.tsx index bbdffc9..78bb0b0 100644 --- a/app/(store)/dashboard/[storeId]/colors/_components/Columns.tsx +++ b/app/(store)/dashboard/[storeId]/colors/_components/Columns.tsx @@ -32,6 +32,6 @@ export const columns: ColumnDef[] = [ }, { id: "actions", - cell: ({ row }) => , + cell: ({ row }) => , }, ]; diff --git a/app/(store)/dashboard/[storeId]/colors/page.tsx b/app/(store)/dashboard/[storeId]/colors/page.tsx index 0ebb756..a67fee8 100644 --- a/app/(store)/dashboard/[storeId]/colors/page.tsx +++ b/app/(store)/dashboard/[storeId]/colors/page.tsx @@ -34,6 +34,7 @@ export default async function ColorsPage({ Add new diff --git a/app/(store)/dashboard/[storeId]/products/_components/CellActions.tsx b/app/(store)/dashboard/[storeId]/products/_components/CellActions.tsx index 51befcc..377cab5 100644 --- a/app/(store)/dashboard/[storeId]/products/_components/CellActions.tsx +++ b/app/(store)/dashboard/[storeId]/products/_components/CellActions.tsx @@ -21,9 +21,10 @@ import { type Props = { data: ProductCol; + index: number; }; -const CellActions = ({ data }: Props) => { +const CellActions = ({ data, index }: Props) => { const params = useParams(); const router = useRouter(); @@ -63,6 +64,7 @@ const CellActions = ({ data }: Props) => { onConfirm={onDelete} loading={isPending} featureToDelete="product" + testId={`product-${index}-delete`} /> { /> - + diff --git a/app/(store)/dashboard/[storeId]/sizes/_components/CellActions.tsx b/app/(store)/dashboard/[storeId]/sizes/_components/CellActions.tsx index 6854e50..3ebebff 100644 --- a/app/(store)/dashboard/[storeId]/sizes/_components/CellActions.tsx +++ b/app/(store)/dashboard/[storeId]/sizes/_components/CellActions.tsx @@ -20,9 +20,10 @@ import { type Props = { data: Size; + index: number; }; -const CellActions = ({ data }: Props) => { +const CellActions = ({ data, index }: Props) => { const params = useParams(); const router = useRouter(); @@ -58,10 +59,11 @@ const CellActions = ({ data }: Props) => { onConfirm={onDelete} loading={isPending} featureToDelete="size" + testId={`size-${index}-delete`} /> - + diff --git a/app/(store)/dashboard/[storeId]/sizes/page.tsx b/app/(store)/dashboard/[storeId]/sizes/page.tsx index 9891ff1..4925a01 100644 --- a/app/(store)/dashboard/[storeId]/sizes/page.tsx +++ b/app/(store)/dashboard/[storeId]/sizes/page.tsx @@ -34,6 +34,7 @@ export default async function SizesPage({ Add new diff --git a/cypress/e2e/category.cy.ts b/cypress/e2e/category.cy.ts new file mode 100644 index 0000000..3c65f73 --- /dev/null +++ b/cypress/e2e/category.cy.ts @@ -0,0 +1,132 @@ +const CATEGORY_INDEX = 0; + +describe("Category for store", () => { + beforeEach(() => { + cy.login(Cypress.env("auth_email"), Cypress.env("auth_password")); + + cy.get('[data-cy="go-to-store"]', { timeout: 15000 }).should("be.visible"); + + cy.visit( + `${Cypress.env("public_url")}/dashboard/${Cypress.env( + "auth_storeId" + )}/categories` + ); + }); + + it("Create fail for invalid form", () => { + cy.get('[data-cy="new-category-btn"]', { + timeout: 15000, + }) + .should("be.visible") + .click(); + + cy.wait(2000); + + cy.get('[data-cy="category-form"]').should("exist"); + + cy.get('[data-cy="category-create-btn"]').should("be.visible").click(); + + cy.get('[data-cy="category-name-input-err"]').should("be.visible"); + }); + + it("Create a new category", () => { + cy.get('[data-cy="new-category-btn"]', { + timeout: 15000, + }) + .should("be.visible") + .click(); + + cy.wait(2000); + + cy.get('[data-cy="category-form"]').should("exist"); + + cy.get('[data-cy="category-name-input"]') + .should("be.visible") + .type("Test Category"); + + cy.get('[data-cy="category-create-btn"]') + .should("be.visible") + .click({ force: true }); + + cy.url({ timeout: 80000 }).should( + "eq", + `${Cypress.env("public_url")}/dashboard/${Cypress.env( + "auth_storeId" + )}/categories` + ); + }); + + it("Update an existing category", () => { + cy.get(`[data-cy="category-${CATEGORY_INDEX}-trigger"]`, { + timeout: 15000, + }) + .should("be.visible") + .click(); + + cy.get(`[data-cy="category-${CATEGORY_INDEX}-update-btn"]`) + .should("exist") + .click(); + + cy.wait(2000); + + cy.get('[data-cy="category-form"]').should("exist"); + + cy.get('[data-cy="category-name-input"]') + .should("be.visible") + .clear() + .type("Test Category Update"); + + cy.get('[data-cy="category-save-btn"]') + .should("be.visible") + .click({ force: true }); + + cy.url({ timeout: 80000 }).should( + "eq", + `${Cypress.env("public_url")}/dashboard/${Cypress.env( + "auth_storeId" + )}/categories` + ); + }); + + it("Cancel delete an existing category", () => { + cy.get(`[data-cy="category-${CATEGORY_INDEX}-trigger"]`, { + timeout: 15000, + }) + .should("be.visible") + .click(); + + cy.get(`[data-cy="category-${CATEGORY_INDEX}-delete-btn"]`) + .should("exist") + .click(); + + cy.get(`[data-cy="category-${CATEGORY_INDEX}-delete-cancel"]`) + .should("exist") + .click(); + + cy.get(`[data-cy="category-${CATEGORY_INDEX}-delete-continue"]`).should( + "not.exist" + ); + }); + + it("Continue delete an existing category", () => { + cy.get(`[data-cy="category-${CATEGORY_INDEX}-trigger"]`, { + timeout: 15000, + }) + .should("be.visible") + .click(); + + cy.get(`[data-cy="category-${CATEGORY_INDEX}-delete-btn"]`) + .should("exist") + .click(); + + cy.get(`[data-cy="category-${CATEGORY_INDEX}-delete-continue"]`) + .should("exist") + .click(); + + cy.wait(8000); + + cy.get(`[data-cy="category-${CATEGORY_INDEX}-delete-continue"]`).should( + "not.exist" + ); + }); +}); diff --git a/cypress/e2e/color.cy.ts b/cypress/e2e/color.cy.ts new file mode 100644 index 0000000..06f818a --- /dev/null +++ b/cypress/e2e/color.cy.ts @@ -0,0 +1,142 @@ +const COLOR_INDEX = 0; + +describe("Color for store", () => { + beforeEach(() => { + cy.login(Cypress.env("auth_email"), Cypress.env("auth_password")); + + cy.get('[data-cy="go-to-store"]', { timeout: 15000 }).should("be.visible"); + + cy.visit( + `${Cypress.env("public_url")}/dashboard/${Cypress.env( + "auth_storeId" + )}/colors` + ); + }); + + it("Create fail for invalid form", () => { + cy.get('[data-cy="new-color-btn"]', { + timeout: 15000, + }) + .should("be.visible") + .click(); + + cy.wait(3000); + + cy.get('[data-cy="color-form"]').should("exist"); + + cy.get('[data-cy="color-create-btn"]').should("be.visible").click(); + + cy.get('[data-cy="color-name-input-err"]').should("be.visible"); + + cy.get('[data-cy="color-value-input-err"]').should("be.visible"); + }); + + it("Create a new color", () => { + cy.get('[data-cy="new-color-btn"]', { + timeout: 15000, + }) + .should("be.visible") + .click(); + + cy.wait(3000); + + cy.get('[data-cy="color-form"]').should("exist"); + + cy.get('[data-cy="color-name-input"]') + .should("be.visible") + .type("Test color name"); + + cy.get('[data-cy="color-value-input"] .flexbox-fix > div > div') + .first() + .click(); + + cy.get('[data-cy="color-create-btn"]') + .should("be.visible") + .click({ force: true }); + + cy.url({ timeout: 80000 }).should( + "eq", + `${Cypress.env("public_url")}/dashboard/${Cypress.env( + "auth_storeId" + )}/colors` + ); + }); + + it("Update an existing color", () => { + cy.get(`[data-cy="color-${COLOR_INDEX}-trigger"]`, { + timeout: 15000, + }) + .should("be.visible") + .click(); + + cy.get(`[data-cy="color-${COLOR_INDEX}-update-btn"]`) + .should("exist") + .click(); + + cy.wait(2000); + + cy.get('[data-cy="color-form"]').should("exist"); + + cy.get('[data-cy="color-name-input"]') + .should("be.visible") + .clear() + .type("Test color name update"); + + cy.get('[data-cy="color-value-input"] .flexbox-fix > div > div') + .first() + .click(); + + cy.get('[data-cy="color-save-btn"]') + .should("be.visible") + .click({ force: true }); + + cy.url({ timeout: 80000 }).should( + "eq", + `${Cypress.env("public_url")}/dashboard/${Cypress.env( + "auth_storeId" + )}/colors` + ); + }); + + it("Cancel delete an existing color", () => { + cy.get(`[data-cy="color-${COLOR_INDEX}-trigger"]`, { + timeout: 15000, + }) + .should("be.visible") + .click(); + + cy.get(`[data-cy="color-${COLOR_INDEX}-delete-btn"]`) + .should("exist") + .click(); + + cy.get(`[data-cy="color-${COLOR_INDEX}-delete-cancel"]`) + .should("exist") + .click(); + + cy.get(`[data-cy="color-${COLOR_INDEX}-delete-continue"]`).should( + "not.exist" + ); + }); + + it("Continue delete an existing color", () => { + cy.get(`[data-cy="color-${COLOR_INDEX}-trigger"]`, { + timeout: 15000, + }) + .should("be.visible") + .click(); + + cy.get(`[data-cy="color-${COLOR_INDEX}-delete-btn"]`) + .should("exist") + .click(); + + cy.get(`[data-cy="color-${COLOR_INDEX}-delete-continue"]`) + .should("exist") + .click(); + + cy.wait(8000); + + cy.get(`[data-cy="color-${COLOR_INDEX}-delete-continue"]`).should( + "not.exist" + ); + }); +}); diff --git a/cypress/e2e/product.cy.ts b/cypress/e2e/product.cy.ts index 281d0ff..aa874db 100644 --- a/cypress/e2e/product.cy.ts +++ b/cypress/e2e/product.cy.ts @@ -1,46 +1,76 @@ import "cypress-file-upload"; -describe("Product Form", () => { +const PRODUCT_INDEX = 0; + +const PRODUCT_ITEM_DELETE_INDEX = 0; + +const PRODUCT_ITEM_ADD_INDEX = 0; + +describe("Product for store", () => { beforeEach(() => { cy.login(Cypress.env("auth_email"), Cypress.env("auth_password")); cy.get('[data-cy="go-to-store"]', { timeout: 15000 }).should("be.visible"); - }); - it("Creating a new product", () => { - //New product route cy.visit( - `${Cypress.env("public_url")}/dashboard/${Cypress.env("auth_storeId")}` + `${Cypress.env("public_url")}/dashboard/${Cypress.env( + "auth_storeId" + )}/products` ); + }); + + it("Create fail for invalid form", () => { + cy.get('[data-cy="new-product-btn"]', { + timeout: 15000, + }) + .should("be.visible") + .click(); - //Checking if url contains /dashboard - cy.url().should("include", "/dashboard"); + cy.wait(5000); - //Redirect to product page in store. - cy.get('[data-cy="products-link"]').should("contain", "Products").click(); + cy.get('[data-cy="product-form"]').should("exist"); - //Check if new button exists and click it. - cy.get('[data-cy="new-product-btn"]', { timeout: 15000 }) + cy.get('[data-cy="product-create-btn"]').should("be.visible").click(); + + cy.get('[data-cy="product-name-input-err"]').should("be.visible"); + + cy.get('[data-cy="product-category-input-err"]').should("be.visible"); + + cy.get('[data-cy="product-description-input-err"]').should("be.visible"); + }); + + it("Create a new product", () => { + cy.get('[data-cy="new-product-btn"]', { + timeout: 15000, + }) .should("be.visible") .click(); - //Product Name - cy.get('[data-cy="product-name"]', { timeout: 15000 }).should("be.visible"); + cy.wait(5000); + + cy.get('[data-cy="product-form"]').should("exist"); - cy.get('[data-cy="product-name"]').type("Nike Air Max"); + cy.get('[data-cy="product-name-input"]') + .should("be.visible") + .type("Test product"); //Product Description - cy.get(".ql-editor").should("be.visible"); + cy.get(".ql-editor").should("be.visible").type("Test product description"); - cy.get(".ql-editor").type("Nike Air Max for men."); + //Category + cy.get('[data-cy="product-category-select-trigger"]') + .should("be.visible") + .click(); - //Add product item button - cy.get('[data-cy="add-product-item"]').should("be.visible").click(); + //Wait for category to be loaded + cy.wait(3000); - //Remove product Item - cy.get('[data-cy="product-item-form-0-remove"]') + cy.get('[data-cy^="product-category-select-0"]') .should("be.visible") - .click(); + .click({ force: true }); + + //Wait for category to be selected + cy.wait(2000); //Add product item button cy.get('[data-cy="add-product-item"]').should("be.visible").click(); @@ -63,6 +93,9 @@ describe("Product Form", () => { }); }); + //Wait for image to upload + cy.wait(8000); + //Add Size button cy.get('[data-cy="product-item-form-0-available-add"]') .should("be.visible") @@ -98,6 +131,9 @@ describe("Product Form", () => { .should("be.visible") .click() .then(($select) => { + //Wait for colors to load + cy.wait(3000); + cy.contains( '[data-cy^="product-item-form-0-color-select-"]', "Black", @@ -119,19 +155,15 @@ describe("Product Form", () => { .should("be.visible") .click(); + //Wait for sizes to load + cy.wait(3000); + cy.get('[data-cy^="product-item-form-0-available-select-size-"]') .first() .click(); - //Category - cy.get('[data-cy="product-select"]').should("be.visible").click(); - - cy.get('[data-cy^="product-0"]') - .should("be.visible") - .click({ force: true }); - //Create Product - cy.get('[data-cy="create-btn"]') + cy.get('[data-cy="product-create-btn"]') .should("be.visible") .click({ force: true }); @@ -142,4 +174,238 @@ describe("Product Form", () => { )}/products` ); }); + + it("Update an existing product", () => { + cy.get(`[data-cy="product-${PRODUCT_INDEX}-trigger"]`, { + timeout: 15000, + }) + .should("be.visible") + .click(); + + cy.get(`[data-cy="product-${PRODUCT_INDEX}-update-btn"]`) + .should("exist") + .click(); + + cy.wait(5000); + + cy.get('[data-cy="product-form"]').should("exist"); + + //delete product item + cy.get( + `[data-cy="product-item-form-${PRODUCT_ITEM_DELETE_INDEX}-delete"]`, + { + timeout: 40000, + } + ) + .should("be.visible") + .click(); + + cy.get(`[data-cy="product-item-form-${PRODUCT_ITEM_DELETE_INDEX}"]`, { + timeout: 40000, + }).should("not.exist"); + + //Product Name + cy.get('[data-cy="product-name-input"]') + .should("be.visible") + .clear() + .type("Test product update"); + + //Product Description + cy.get(".ql-editor") + .should("be.visible") + .clear() + .type("Test product description update"); + + //Category + cy.get('[data-cy="product-category-select-trigger"]') + .should("be.visible") + .click(); + + //Wait for category to be loaded + cy.wait(3000); + + cy.get('[data-cy^="product-category-select-1"]') + .should("be.visible") + .click({ force: true }); + + //Wait for category to be selected + cy.wait(2000); + + //Add product item + cy.get('[data-cy="add-product-item"]').should("be.visible").click(); + + //Remove product Item + cy.get(`[data-cy="product-item-form-${PRODUCT_ITEM_ADD_INDEX}-remove"]`) + .should("be.visible") + .click(); + + //Add product item again + cy.get('[data-cy="add-product-item"]').should("be.visible").click(); + + //New product Item Form + cy.get(`[data-cy="product-item-form-${PRODUCT_ITEM_ADD_INDEX}"]`) + .should("be.visible") + .within(() => { + //Image Upload + cy.get( + `[data-cy="product-item-form-${PRODUCT_ITEM_ADD_INDEX}-upload-parent"]` + ).should("be.visible"); + + cy.fixture("images/test1.png").then((fileContent) => { + cy.get( + `[data-cy="product-item-form-${PRODUCT_ITEM_ADD_INDEX}-upload"]` + ).attachFile({ + fileContent: fileContent.toString(), + fileName: "test1.png", + mimeType: "image/png", + encoding: "base64", + }); + }); + + //Wait for image to upload + cy.wait(8000); + + //Add Size button + cy.get( + `[data-cy="product-item-form-${PRODUCT_ITEM_ADD_INDEX}-available-add"]` + ) + .should("be.visible") + .click(); + + //Size Form + cy.get( + `[data-cy="product-item-form-${PRODUCT_ITEM_ADD_INDEX}-available-0"]` + ) + .should("be.visible") + .within(() => { + //Price + cy.get('input[placeholder="Price"]') + .should("be.visible") + .clear() + .type("50"); + + //Num in stocks + cy.get('input[placeholder="Number in Stock"]') + .should("be.visible") + .clear() + .type("3"); + }); + + //Discount + cy.get('input[placeholder="Discount"]') + .should("be.visible") + .clear() + .type("10"); + + //Color + cy.get( + `[data-cy="product-item-form-${PRODUCT_ITEM_ADD_INDEX}-color-select"]` + ) + .should("be.visible") + .click() + .then(($select) => { + //Wait for colors to load + cy.wait(3000); + + cy.contains( + `[data-cy^="product-item-form-${PRODUCT_ITEM_ADD_INDEX}-color-select-"]`, + "Black", + { + timeout: 10000, + } + ) + .should("be.visible") + .click(); + + cy.get( + `[data-cy="product-item-form-${PRODUCT_ITEM_ADD_INDEX}-color-select"]` + ).click(); + + //Wait for colors to be selected + cy.wait(3000); + }); + }); + + //Choosing size + cy.get( + `[data-cy="product-item-form-${PRODUCT_ITEM_ADD_INDEX}-available-0"]` + ).should("be.visible"); + + cy.get( + `[data-cy="product-item-form-${PRODUCT_ITEM_ADD_INDEX}-available-0-size-select"]` + ) + .should("be.visible") + .click(); + + //Wait for size to load + cy.wait(3000); + + cy.get( + `[data-cy^="product-item-form-${PRODUCT_ITEM_ADD_INDEX}-available-select-size-"]` + ) + .first() + .click(); + + //Wait for size to be selected + cy.wait(3000); + + //Save product + cy.get('[data-cy="product-save-btn"]') + .should("be.visible") + .click({ force: true }); + + cy.wait(8000); + + //Expect a new product item + cy.get( + `[data-cy="product-item-form-${PRODUCT_ITEM_ADD_INDEX}-delete"]` + ).should("exist"); + + //Back to products + cy.get('[data-cy="back-btn"]') + .should("contain", "Back to products") + .click(); + }); + + it("Cancel delete an existing size", () => { + cy.get(`[data-cy="product-${PRODUCT_INDEX}-trigger"]`, { + timeout: 15000, + }) + .should("be.visible") + .click(); + + cy.get(`[data-cy="product-${PRODUCT_INDEX}-delete-btn"]`) + .should("exist") + .click(); + + cy.get(`[data-cy="product-${PRODUCT_INDEX}-delete-cancel"]`) + .should("exist") + .click(); + + cy.get(`[data-cy="product-${PRODUCT_INDEX}-delete-continue"]`).should( + "not.exist" + ); + }); + + it("Continue delete an existing size", () => { + cy.get(`[data-cy="product-${PRODUCT_INDEX}-trigger"]`, { + timeout: 15000, + }) + .should("be.visible") + .click(); + + cy.get(`[data-cy="product-${PRODUCT_INDEX}-delete-btn"]`) + .should("exist") + .click(); + + cy.get(`[data-cy="product-${PRODUCT_INDEX}-delete-continue"]`) + .should("exist") + .click(); + + cy.wait(8000); + + cy.get(`[data-cy="product-${PRODUCT_INDEX}-delete-continue"]`).should( + "not.exist" + ); + }); }); diff --git a/cypress/e2e/size.cy.ts b/cypress/e2e/size.cy.ts new file mode 100644 index 0000000..903e1a4 --- /dev/null +++ b/cypress/e2e/size.cy.ts @@ -0,0 +1,137 @@ +const SIZE_INDEX = 0; + +describe("Size for store", () => { + beforeEach(() => { + cy.login(Cypress.env("auth_email"), Cypress.env("auth_password")); + + cy.get('[data-cy="go-to-store"]', { timeout: 15000 }).should("be.visible"); + + cy.visit( + `${Cypress.env("public_url")}/dashboard/${Cypress.env( + "auth_storeId" + )}/sizes` + ); + }); + + it("Create fail for invalid form", () => { + cy.get('[data-cy="new-size-btn"]', { + timeout: 15000, + }) + .should("be.visible") + .click(); + + cy.wait(3000); + + cy.get('[data-cy="size-form"]').should("exist"); + + cy.get('[data-cy="size-create-btn"]').should("be.visible").click(); + + cy.get('[data-cy="size-name-input-err"]').should("be.visible"); + + cy.get('[data-cy="size-value-input-err"]').should("be.visible"); + }); + + it("Create a new size", () => { + cy.get('[data-cy="new-size-btn"]', { + timeout: 15000, + }) + .should("be.visible") + .click(); + + cy.wait(3000); + + cy.get('[data-cy="size-form"]').should("exist"); + + cy.get('[data-cy="size-name-input"]') + .should("be.visible") + .type("Test size name"); + + cy.get('[data-cy="size-value-input"]') + .should("be.visible") + .type("Test size value"); + + cy.get('[data-cy="size-create-btn"]') + .should("be.visible") + .click({ force: true }); + + cy.url({ timeout: 80000 }).should( + "eq", + `${Cypress.env("public_url")}/dashboard/${Cypress.env( + "auth_storeId" + )}/sizes` + ); + }); + + it("Update an existing size", () => { + cy.get(`[data-cy="size-${SIZE_INDEX}-trigger"]`, { + timeout: 15000, + }) + .should("be.visible") + .click(); + + cy.get(`[data-cy="size-${SIZE_INDEX}-update-btn"]`).should("exist").click(); + + cy.wait(2000); + + cy.get('[data-cy="size-form"]').should("exist"); + + cy.get('[data-cy="size-name-input"]') + .should("be.visible") + .clear() + .type("Test size name update"); + + cy.get('[data-cy="size-value-input"]') + .should("be.visible") + .clear() + .type("Test size value update"); + + cy.get('[data-cy="size-save-btn"]') + .should("be.visible") + .click({ force: true }); + + cy.url({ timeout: 80000 }).should( + "eq", + `${Cypress.env("public_url")}/dashboard/${Cypress.env( + "auth_storeId" + )}/sizes` + ); + }); + + it("Cancel delete an existing size", () => { + cy.get(`[data-cy="size-${SIZE_INDEX}-trigger"]`, { + timeout: 15000, + }) + .should("be.visible") + .click(); + + cy.get(`[data-cy="size-${SIZE_INDEX}-delete-btn"]`).should("exist").click(); + + cy.get(`[data-cy="size-${SIZE_INDEX}-delete-cancel"]`) + .should("exist") + .click(); + + cy.get(`[data-cy="size-${SIZE_INDEX}-delete-continue"]`).should( + "not.exist" + ); + }); + + it("Continue delete an existing size", () => { + cy.get(`[data-cy="size-${SIZE_INDEX}-trigger"]`, { + timeout: 15000, + }) + .should("be.visible") + .click(); + + cy.get(`[data-cy="size-${SIZE_INDEX}-delete-btn"]`).should("exist").click(); + + cy.get(`[data-cy="size-${SIZE_INDEX}-delete-continue"]`) + .should("exist") + .click(); + + cy.wait(8000); + + cy.get(`[data-cy="size-${SIZE_INDEX}-delete-continue"]`).should( + "not.exist" + ); + }); +}); diff --git a/cypress/e2e/update-product.cy.ts b/cypress/e2e/update-product.cy.ts deleted file mode 100644 index d8866fa..0000000 --- a/cypress/e2e/update-product.cy.ts +++ /dev/null @@ -1,169 +0,0 @@ -import "cypress-file-upload"; - -const formNum = 1; - -describe("Update a product", () => { - beforeEach(() => { - cy.login(Cypress.env("auth_email"), Cypress.env("auth_password")); - - cy.get('[data-cy="go-to-store"]', { timeout: 15000 }).should("be.visible"); - - //Go to store page - cy.visit( - `${Cypress.env("public_url")}/dashboard/${Cypress.env("auth_storeId")}` - ); - - //Checking if url contains /dashboard - cy.url().should("include", "/dashboard"); - }); - - it("Updating an existing product", () => { - //Redirect to product page in store. - cy.get('[data-cy="products-link"]').should("contain", "Products").click(); - - //Check if product has a manage button - cy.get(`[data-cy="${Cypress.env("test_productId")}-trigger"]`) - .should("be.visible") - .click(); - - //Check if product has a update button - cy.get(`[data-cy="${Cypress.env("test_productId")}-update"]`) - .should("be.visible") - .click(); - - cy.get(`[data-cy="product-form-${Cypress.env("test_productId")}"]`, { - timeout: 80000, - }).should("be.visible"); - - //Check if it has an existing text and change the name - cy.get(`[data-cy="product-name-${Cypress.env("test_productId")}"]`, { - timeout: 10000, - }) - .should("be.visible") - .clear() - .type("Nike Air Jordan One Low"); - - //change description - cy.get(".ql-editor") - .should("not.be.empty") - .clear() - .type("Nike Air Max for all men."); - - //delete product item - cy.get(`[data-cy="product-item-form-${formNum}-delete"]`, { - timeout: 40000, - }) - .should("be.visible") - .click(); - - cy.get(`[data-cy="product-item-form-${formNum}"]`, { - timeout: 40000, - }).should("not.exist"); - - //Add product item - cy.get('[data-cy="add-product-item"]').should("be.visible").click(); - - //Remove product Item - cy.get(`[data-cy="product-item-form-${formNum}-remove"]`) - .should("be.visible") - .click(); - - //Add product item again - cy.get('[data-cy="add-product-item"]').should("be.visible").click(); - - //New product Item Form - cy.get(`[data-cy="product-item-form-${formNum}"]`) - .should("be.visible") - .within(() => { - //Image Upload - cy.get(`[data-cy="product-item-form-${formNum}-upload-parent"]`).should( - "be.visible" - ); - - cy.fixture("images/test1.png").then((fileContent) => { - cy.get(`[data-cy="product-item-form-${formNum}-upload"]`).attachFile({ - fileContent: fileContent.toString(), - fileName: "test1.png", - mimeType: "image/png", - encoding: "base64", - }); - }); - - //Add Size button - cy.get(`[data-cy="product-item-form-${formNum}-available-add"]`) - .should("be.visible") - .click(); - - //Size Form - cy.get(`[data-cy="product-item-form-${formNum}-available-0"]`) - .should("be.visible") - .within(() => { - //Price - cy.get('input[placeholder="Price"]') - .should("be.visible") - .clear() - .type("50"); - - //Num in stocks - cy.get('input[placeholder="Number in Stock"]') - .should("be.visible") - .clear() - .type("3"); - }); - - //Discount - cy.get('input[placeholder="Discount"]') - .should("be.visible") - .clear() - .type("10"); - - //Color - cy.get(`[data-cy="product-item-form-${formNum}-color-select"]`) - .should("be.visible") - .click() - .then(($select) => { - cy.contains( - `[data-cy^="product-item-form-${formNum}-color-select-"]`, - "Black", - { - timeout: 10000, - } - ) - .should("be.visible") - .click(); - - cy.get( - `[data-cy="product-item-form-${formNum}-color-select"]` - ).click(); - }); - }); - - //Choosing size - cy.get(`[data-cy="product-item-form-${formNum}-available-0"]`).should( - "be.visible" - ); - - cy.get(`[data-cy="product-item-form-${formNum}-available-0-size-select"]`) - .should("be.visible") - .click(); - - cy.get(`[data-cy^="product-item-form-${formNum}-available-select-size-"]`) - .first() - .click(); - - // Save Product - cy.get(`[data-cy="save-btn-${Cypress.env("test_productId")}"]`) - .should("be.visible") - .click(); - - //Expect a new product item - cy.get(`[data-cy="product-item-form-${formNum}-delete"]`, { - timeout: 80000, - }).should("exist"); - - //Back to products - cy.get('[data-cy="back-btn"]') - .should("contain", "Back to products") - .click(); - }); -});