e2e: Happy path

__tests__/example.spec.ts

@@ -1,18 +1,28 @@
-import { test, expect } from "@playwright/test";
+import { expect, test } from "@playwright/test";
 
-test("has title", async ({ page }) => {
-	await page.goto("https://playwright.dev/");
+test("test", async ({ page }) => {
+	await page.goto("/");
+	await page.getByTestId("ProductElement").first().click();
+	await page.getByRole("button", { name: "Add to cart" }).click();
 
-	// Expect a title "to contain" a substring.
-	await expect(page).toHaveTitle(/Playwright/);
-});
+	await page.getByRole("link", { name: "1 items in cart, view bag" }).click();
+	await page.getByRole("link", { name: "Checkout" }).click();
 
-test("get started link", async ({ page }) => {
-	await page.goto("https://playwright.dev/");
+	await page.getByLabel("First name*").fill("Jan");
+	await page.getByLabel("Last name*").fill("Kowalski");
+	await page.getByLabel("Street address*").fill("3111 Broadway");
+	await page.getByLabel("City*").fill("New York");
+	await page.getByLabel("Zip code*").fill("10027");
+	await page.getByLabel("Phone number").fill("+48123456789");
 
-	// Click the get started link.
-	await page.getByRole("link", { name: "Get started" }).click();
+	await page
+		.frameLocator('iframe[title="Iframe for card number"]')
+		.getByLabel("Card number")
+		.fill("4111 1111 4555 1142");
+	await page.frameLocator('iframe[title="Iframe for expiry date"]').getByLabel("Expiry date").fill("03/30");
+	await page.frameLocator('iframe[title="Iframe for security code"]').getByLabel("Security code").fill("333");
+	await page.getByLabel("Name on card").fill("Jan Kowalski");
+	await page.getByRole("button", { name: "Pay" }).click();
 
-	// Expects page to have a heading with the name of Installation.
-	await expect(page.getByRole("heading", { name: "Installation" })).toBeVisible();
+	expect(true).toBe(true);
 });

src/app/(main)/categories/[slug]/page.tsx

@@ -2,7 +2,7 @@ import { notFound } from "next/navigation";
 import { type Metadata } from "next";
 import { ProductListByCategoryDocument } from "@/gql/graphql";
 import { execute } from "@/lib/graphql";
-import { ProductElement } from "@/ui/components/ProductElement";
+import { ProductsList } from "@/ui/components/ProductsList";
 
 export const generateMetadata = async ({ params }: { params: { slug: string } }): Promise<Metadata> => {
 	const { category } = await execute(ProductListByCategoryDocument, {
@@ -20,7 +20,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
 		variables: { slug: params.slug },
 	});
 
-	if (!category) {
+	if (!category || !category.products) {
 		notFound();
 	}
 
@@ -35,11 +35,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
 			</div>
 			<section className="sm:py-18 mx-auto max-w-2xl px-8 py-12 sm:px-6 lg:max-w-7xl">
 				<h2 className="sr-only">Products in category {category.name}</h2>
-				<div className="mt-4 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
-					{products?.edges.map(({ node: product }, index) => (
-						<ProductElement key={product.id} product={product} loading={index < 4 ? "eager" : "lazy"} />
-					))}
-				</div>
+				<ProductsList products={products.edges.map((e) => e.node)} />
 			</section>
 		</div>
 	);

src/app/(main)/page.tsx

@@ -1,6 +1,6 @@
 import { ProductListDocument } from "@/gql/graphql";
 import { execute } from "@/lib/graphql";
-import { ProductElement } from "@/ui/components/ProductElement";
+import { ProductsList } from "@/ui/components/ProductsList";
 
 export const metadata = {
 	title: "Saleor Storefront example",
@@ -17,14 +17,9 @@ export default async function Page() {
 	return (
 		<div>
 			<h1 className="sr-only">Saleor Storefront example</h1>
-			{/* <CollectionList /> */}
 			<section className="mx-auto max-w-7xl p-8">
 				<h2 className="sr-only">Product list</h2>
-				<div className="mt-4 grid gap-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-					{products.map((product, index) => (
-						<ProductElement key={product.id} product={product} loading={index < 4 ? "eager" : "lazy"} />
-					))}
-				</div>
+				<ProductsList products={products} />
 			</section>
 		</div>
 	);

src/app/(main)/products/[slug]/page.tsx

@@ -8,7 +8,7 @@ import { AddButton } from "./AddButton";
 import { VariantSelector } from "@/ui/components/VariantSelector";
 import { ProductImageWrapper } from "@/ui/atoms/ProductImageWrapper";
 import { execute, formatMoney } from "@/lib/graphql";
-import { CheckoutAddLineDocument, ProductElementDocument, ProductListDocument } from "@/gql/graphql";
+import { CheckoutAddLineDocument, ProductDetailsDocument, ProductListDocument } from "@/gql/graphql";
 import * as Checkout from "@/lib/checkout";
 
 export async function generateMetadata({
@@ -18,7 +18,7 @@ export async function generateMetadata({
 	params: { slug: string };
 	searchParams: { variant?: string };
 }): Promise<Metadata> {
-	const { product } = await execute(ProductElementDocument, {
+	const { product } = await execute(ProductDetailsDocument, {
 		variables: {
 			slug: decodeURIComponent(params.slug),
 		},
@@ -56,7 +56,7 @@ const parser = edjsHTML();
 export default async function Page(props: { params: { slug: string }; searchParams: { variant?: string } }) {
 	const { params, searchParams } = props;
 
-	const { product } = await execute(ProductElementDocument, {
+	const { product } = await execute(ProductDetailsDocument, {
 		variables: {
 			slug: decodeURIComponent(params.slug),
 		},

src/app/(main)/products/page.tsx

@@ -2,7 +2,7 @@ import { notFound } from "next/navigation";
 import { ProductListPaginatedDocument } from "@/gql/graphql";
 import { ProductsPerPage, execute } from "@/lib/graphql";
 import { Pagination } from "@/ui/components/Pagination";
-import { ProductElement } from "@/ui/components/ProductElement";
+import { ProductsList } from "@/ui/components/ProductsList";
 
 export const metadata = {
 	title: "Product List · Saleor Storefront example",
@@ -38,11 +38,7 @@ export default async function Page({ searchParams }: Props) {
 			</div>
 			<section className="sm:py-18 mx-auto max-w-2xl px-8 py-12 sm:px-6 lg:max-w-7xl">
 				<h2 className="sr-only">Product list</h2>
-				<div className="my-8 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
-					{products?.edges.map(({ node: product }, index) => (
-						<ProductElement key={product.id} product={product} loading={index < 4 ? "eager" : "lazy"} />
-					))}
-				</div>
+				<ProductsList products={products.edges.map((e) => e.node)} />
 				<Pagination pageInfo={products.pageInfo} />
 			</section>
 		</div>

src/graphql/ProductElement.graphql → src/graphql/ProductDetails.graphql

@@ -1,11 +1,19 @@
-query ProductElement($slug: String!) {
+query ProductDetails($slug: String!) {
 	product(slug: $slug, channel: "default-channel") {
 		id
 		name
-		description
 		slug
+		description
 		seoTitle
 		seoDescription
+		thumbnail(size: 1024, format: WEBP) {
+			url
+			alt
+		}
+		category {
+			id
+			name
+		}
 		variants {
 			id
 			name
@@ -18,9 +26,5 @@ query ProductElement($slug: String!) {
 				}
 			}
 		}
-		thumbnail(size: 1024, format: WEBP) {
-			url
-			alt
-		}
 	}
 }

src/graphql/ProductList.graphql

@@ -2,7 +2,7 @@ query ProductList {
 	products(first: 12, channel: "default-channel") {
 		edges {
 			node {
-				...Product
+				...ProductListItem
 			}
 		}
 	}

src/graphql/ProductListByCategory.graphql

@@ -7,7 +7,7 @@ query ProductListByCategory($slug: String!) {
 		products(first: 100, channel: "default-channel") {
 			edges {
 				node {
-					...Product
+					...ProductListItem
 				}
 			}
 		}

src/graphql/Product.graphql → src/graphql/ProductListItem.graphql

@@ -1,15 +1,7 @@
-fragment Product on Product {
+fragment ProductListItem on Product {
 	id
 	name
 	slug
-	thumbnail(size: 1024, format: WEBP) {
-		url
-		alt
-	}
-	category {
-		id
-		name
-	}
 	pricing {
 		priceRange {
 			start {
@@ -26,4 +18,12 @@ fragment Product on Product {
 			}
 		}
 	}
+	category {
+		id
+		name
+	}
+	thumbnail(size: 1024, format: WEBP) {
+		url
+		alt
+	}
 }

src/graphql/ProductListPaginated.graphql

@@ -3,7 +3,7 @@ query ProductListPaginated($first: Int!, $after: String) {
 		totalCount
 		edges {
 			node {
-				...Product
+				...ProductListItem
 			}
 			cursor
 		}

src/ui/atoms/Loader.tsx

@@ -1,7 +1,7 @@
 export function Loader() {
 	return (
-		<div className="text-center">
-			<div role="status">
+		<div className="text-center" aria-busy="true" role="status">
+			<div>
 				<svg
 					aria-hidden="true"
 					className="mr-2 inline h-12 w-12 animate-spin fill-gray-600 text-gray-200 dark:text-gray-600"

src/ui/components/Nav.tsx

@@ -37,8 +37,12 @@ export async function Nav() {
 						<div className="">
 							<Link href="/cart" className="group -m-2 flex items-center p-2">
 								<ShoppingBagIcon className="h-6 w-6 flex-shrink-0 " aria-hidden="true" />
-								<span className="ml-2 text-sm font-medium ">{lineCount || ""}</span>
-								<span className="sr-only">items in cart, view bag</span>
+								{lineCount && (
+									<>
+										<span className="ml-2 text-sm font-medium ">{lineCount}</span>
+										<span className="sr-only">items in cart, view bag</span>
+									</>
+								)}
 							</Link>
 						</div>
 					</div>

src/ui/components/ProductElement.tsx

@@ -1,37 +1,39 @@
 import Link from "next/link";
 import { ProductImageWrapper } from "@/ui/atoms/ProductImageWrapper";
 
-import type { ProductFragment } from "@/gql/graphql";
+import type { ProductListItemFragment } from "@/gql/graphql";
 import { formatMoneyRange } from "@/lib/graphql";
 
-export function ProductElement(props: { product: ProductFragment } & { loading: "eager" | "lazy" }) {
+export function ProductElement(props: { product: ProductListItemFragment } & { loading: "eager" | "lazy" }) {
 	const { product, loading } = props;
 
 	return (
-		<Link href={`/products/${product.slug}`} key={product.id}>
-			<div>
-				{product?.thumbnail?.url && (
-					<ProductImageWrapper
-						loading={loading}
-						src={product.thumbnail.url}
-						alt={product.thumbnail.alt ?? ""}
-						width={512}
-						height={512}
-					/>
-				)}
-				<div className="mt-2 flex justify-between">
-					<div>
-						<h3 className="text-sm font-semibold text-gray-700">{product.name}</h3>
-						<p className="text-sm text-gray-500">{product?.category?.name}</p>
+		<li data-testid="ProductElement">
+			<Link href={`/products/${product.slug}`} key={product.id}>
+				<div>
+					{product?.thumbnail?.url && (
+						<ProductImageWrapper
+							loading={loading}
+							src={product.thumbnail.url}
+							alt={product.thumbnail.alt ?? ""}
+							width={512}
+							height={512}
+						/>
+					)}
+					<div className="mt-2 flex justify-between">
+						<div>
+							<h3 className="text-sm font-semibold text-gray-700">{product.name}</h3>
+							<p className="text-sm text-gray-500">{product?.category?.name}</p>
+						</div>
+						<p className="text-sm font-medium text-gray-900">
+							{formatMoneyRange({
+								start: product?.pricing?.priceRange?.start?.gross,
+								stop: product?.pricing?.priceRange?.stop?.gross,
+							})}
+						</p>
 					</div>
-					<p className="text-sm font-medium text-gray-900">
-						{formatMoneyRange({
-							start: product?.pricing?.priceRange?.start?.gross,
-							stop: product?.pricing?.priceRange?.stop?.gross,
-						})}
-					</p>
 				</div>
-			</div>
-		</Link>
+			</Link>
+		</li>
 	);
 }

src/ui/components/ProductsList.tsx

@@ -0,0 +1,16 @@
+import { ProductElement } from "./ProductElement";
+import { type ProductListItemFragment } from "@/gql/graphql";
+
+export const ProductsList = ({ products }: { products: readonly ProductListItemFragment[] }) => {
+	return (
+		<ul
+			role="list"
+			data-testid="ProductsList"
+			className="my-8 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4"
+		>
+			{products.map((product, index) => (
+				<ProductElement key={product.id} product={product} loading={index < 4 ? "eager" : "lazy"} />
+			))}
+		</ul>
+	);
+};