STF_05: checkout as a unlogged user (saleor#1021)

Ion-Mobility · Nov 14, 2023 · 9a863a5 · 9a863a5
1 parent 856e9fc
commit 9a863a5
Show file tree

Hide file tree

Showing 9 changed files with 65 additions and 12 deletions.
diff --git a/__tests__/STF_05.spec.ts 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
@@ -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
@@ -9,6 +9,7 @@ type Props = {
 export const CheckoutLink = ({ disabled, checkoutId, className = "" }: Props) => {
 	return (
 		<a
+			data-testid="CheckoutLink"
 			aria-disabled={disabled}
 			onClick={(e) => 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
@@ -10,6 +10,7 @@ export function AddButton({ disabled }: { disabled?: boolean }) {
 		<button
 			type="submit"
 			aria-disabled={isButtonDisabled}
+			aria-busy={pending}
 			onClick={(e) => isButtonDisabled && e.preventDefault()}
 			className="h-12 items-center rounded-md bg-neutral-900 px-6 py-3 text-base font-medium leading-6 text-white shadow hover:bg-neutral-800 disabled:cursor-not-allowed disabled:opacity-70 hover:disabled:bg-neutral-700 aria-disabled:cursor-not-allowed aria-disabled:opacity-70 hover:aria-disabled:bg-neutral-700"
 		>

diff --git a/src/checkout/components/CountrySelect.tsx b/src/checkout/components/CountrySelect.tsx
@@ -16,10 +16,5 @@ export const CountrySelect: React.FC<CountrySelectProps> = ({ only = [] }) => {
 		label: getCountryName(countryCode),
 	}));
 
-	return (
-		<label className="flex flex-col">
-			<span className="text-xs text-neutral-700">Country</span>
-			<Select name="countryCode" options={countryOptions} autoComplete="countryCode" />
-		</label>
-	);
+	return <Select name="countryCode" label="Country" options={countryOptions} autoComplete="countryCode" />;
 };
diff --git a/src/checkout/components/PasswordInput/PasswordInput.tsx b/src/checkout/components/PasswordInput/PasswordInput.tsx
@@ -30,7 +30,7 @@ export const PasswordInputComponent = <TName extends string>({
 			<div className="flex flex-col">
 				<label className="text-xs text-neutral-700">
 					{label}
-					{required && "*"}
+					{required && <span aria-hidden="true">*</span>}
 				</label>
 				<div className="relative mt-1 flex items-stretch shadow-sm">
 					<input

diff --git a/src/checkout/components/TextInput.tsx b/src/checkout/components/TextInput.tsx
@@ -25,7 +25,7 @@ export const TextInputComponent = <TName extends string>({
 			<label className="flex flex-col">
 				<span className="text-xs text-neutral-700">
 					{label}
-					{required && "*"}
+					{required && <span aria-hidden="true">*</span>}
 				</span>
 				<input
 					required={required}

diff --git a/src/checkout/sections/Summary/Summary.tsx b/src/checkout/sections/Summary/Summary.tsx
@@ -51,7 +51,7 @@ export const Summary: FC<SummaryProps> = ({
 					<Title>Summary</Title>
 					<ChevronDownIcon className="mb-2 group-open:rotate-180" />
 				</summary>
-				<ul className="pb-4 pt-2">
+				<ul className="pb-4 pt-2" data-testid="SummaryProductList">
 					{lines.map((line) => (
 						<SummaryItem line={line} key={line?.id}>
 							{editable ? (

diff --git a/src/checkout/sections/Summary/SummaryItem.tsx b/src/checkout/sections/Summary/SummaryItem.tsx
@@ -16,7 +16,7 @@ export const SummaryItem = ({ line, children }: SummaryItemProps) => {
 	const attributesText = useSummaryLineLineAttributesText(line);
 
 	return (
-		<li className="relative mb-6 flex flex-row items-start last-of-type:mb-0">
+		<li className="relative mb-6 flex flex-row items-start last-of-type:mb-0" data-testid="SummaryItem">
 			<div className="relative flex flex-row">
 				<div className="z-1 mr-4 flex h-24 w-20 items-center justify-start">
 					{productImage ? (