From 9a863a5408b25645c948285d0e1e23dec4141f32 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Miszczyszyn?= Date: Tue, 14 Nov 2023 12:58:09 +0100 Subject: [PATCH] STF_05: checkout as a unlogged user (#1021) --- __tests__/STF_05.spec.ts | 47 +++++++++++++++++++ __tests__/utils.ts | 13 ++++- src/app/(main)/cart/CheckoutLink.tsx | 1 + src/app/(main)/products/[slug]/AddButton.tsx | 1 + src/checkout/components/CountrySelect.tsx | 7 +-- .../PasswordInput/PasswordInput.tsx | 2 +- src/checkout/components/TextInput.tsx | 2 +- src/checkout/sections/Summary/Summary.tsx | 2 +- src/checkout/sections/Summary/SummaryItem.tsx | 2 +- 9 files changed, 65 insertions(+), 12 deletions(-) create mode 100644 __tests__/STF_05.spec.ts diff --git a/__tests__/STF_05.spec.ts b/__tests__/STF_05.spec.ts new file mode 100644 index 000000000..cd9637e12 --- /dev/null +++ b/__tests__/STF_05.spec.ts @@ -0,0 +1,47 @@ +import { expect, test } from "@playwright/test"; +import { + addCurrentProductToCart, + clickOnNthProductElement, + openCart, + selectRandomAvailableVariant, +} from "./utils"; + +test("STF_05: Checkout as a unlogged user", async ({ page }) => { + await page.goto("/"); + + const product = await clickOnNthProductElement({ page, nth: 0 }); + await selectRandomAvailableVariant({ page }); + await addCurrentProductToCart({ page }); + await openCart({ page }); + + await page.getByTestId("CheckoutLink").click(); + await page.getByTestId("shippingAddressSection").waitFor(); + + await page.getByLabel("Email").pressSequentially("example@saleor.io", { delay: 50 }); + await page.getByLabel("Country").selectOption("Poland"); + + await page.getByTestId("shippingAddressSection").waitFor(); + await page.getByLabel("First name").pressSequentially("Jan", { delay: 50 }); + await page.getByLabel("Last name").pressSequentially("Kowalski", { delay: 50 }); + await page.getByLabel("Street address").first().pressSequentially("Ojcowska 23", { delay: 50 }); + await page.getByRole("textbox", { name: "City" }).pressSequentially("Gdańsk", { delay: 50 }); + await page.getByLabel("Postal code").pressSequentially("80-146", { delay: 50 }); + await page.getByLabel("Postal code").blur(); + + await page.getByTestId("deliveryMethods").waitFor(); + await page.getByLabel("DHL").click(); + await page.getByLabel("DHL").blur(); + + await page.getByTestId("paymentMethods").waitFor(); + const stripeIframe = page.getByTestId("paymentMethods").frameLocator("iframe"); + await stripeIframe.getByLabel("Card number").fill("4242424242424242"); + await stripeIframe.getByLabel("Expiration").fill("03/30"); + await stripeIframe.getByLabel("CVC").fill("737"); + await page.getByRole("button", { name: "Pay now" }).click(); + + await page.getByText("Thank you for placing your order.", { exact: false }).waitFor(); + + const summaryProductList = page.getByTestId("SummaryProductList"); + await expect(summaryProductList.getByTestId("SummaryItem")).toHaveCount(1); + await expect(summaryProductList).toContainText(product.name); +}); diff --git a/__tests__/utils.ts b/__tests__/utils.ts index 8146dcee8..f707239e4 100644 --- a/__tests__/utils.ts +++ b/__tests__/utils.ts @@ -4,7 +4,14 @@ export async function clickOnRandomProductElement({ page }: { page: Page }) { const productLinks = page.getByTestId("ProductElement"); await productLinks.first().waitFor(); const count = await productLinks.count(); - const randomProductLink = productLinks.nth(Math.floor(Math.random() * count)); + const nth = Math.floor(Math.random() * count); + return clickOnNthProductElement({ page, nth }); +} + +export async function clickOnNthProductElement({ page, nth }: { page: Page; nth: number }) { + const productLinks = page.getByTestId("ProductElement"); + await productLinks.first().waitFor(); + const randomProductLink = productLinks.nth(nth); const name = await randomProductLink.getByRole("heading").textContent(); const priceRange = await randomProductLink.getByTestId("ProductElement_PriceRange").textContent(); @@ -43,7 +50,9 @@ export async function selectRandomAvailableVariant({ page }: { page: Page }) { export async function addCurrentProductToCart({ page }: { page: Page }) { expect(page.url()).toContain("/products/"); expect(page.url()).toContain("?variant="); - await page.getByRole("button", { name: "Add to cart" }).click(); + const checkoutButton = page.getByRole("button", { name: "Add to cart" }); + await checkoutButton.click(); + await checkoutButton.isEnabled(); } export async function openCart({ page }: { page: Page }) { diff --git a/src/app/(main)/cart/CheckoutLink.tsx b/src/app/(main)/cart/CheckoutLink.tsx index b5ec40885..556328586 100644 --- a/src/app/(main)/cart/CheckoutLink.tsx +++ b/src/app/(main)/cart/CheckoutLink.tsx @@ -9,6 +9,7 @@ type Props = { export const CheckoutLink = ({ disabled, checkoutId, className = "" }: Props) => { return ( disabled && e.preventDefault()} href={`/checkout?checkout=${checkoutId}`} diff --git a/src/app/(main)/products/[slug]/AddButton.tsx b/src/app/(main)/products/[slug]/AddButton.tsx index ff964d40e..81929ce75 100644 --- a/src/app/(main)/products/[slug]/AddButton.tsx +++ b/src/app/(main)/products/[slug]/AddButton.tsx @@ -10,6 +10,7 @@ export function AddButton({ disabled }: { disabled?: boolean }) {