test cases STF_02 and STF_03 (#989)

saleor · Oct 25, 2023 · e13cf58 · e13cf58
1 parent 426c4b7
commit e13cf58
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 19 deletions.
diff --git a/__tests__/STF_01.spec.ts b/__tests__/STF_01.spec.ts
@@ -7,7 +7,7 @@ import {
 	selectRandomAvailableVariant,
 } from "./utils";
 
-test("STF_01", async ({ page }) => {
+test("STF_01: Add items to the basket", async ({ page }) => {
 	await page.goto("/");
 
 	const product = await clickOnRandomProductElement({ page });
@@ -18,14 +18,11 @@ test("STF_01", async ({ page }) => {
 	await expect(page.getByTestId("CartNavItem")).toContainText("0 items");
 	await addCurrentProductToCart({ page });
 	await expect(page.getByTestId("CartNavItem")).toContainText("1 item");
-	await addCurrentProductToCart({ page });
-	await expect(page.getByTestId("CartNavItem")).toContainText("2 items");
 
 	await openCart({ page });
 
-	const totalPrice = (price * 2).toFixed(2);
 	await expect(page.getByTestId("CartProductList").getByRole("listitem")).toHaveCount(1);
 	await expect(page.getByTestId("CartProductList").getByRole("listitem")).toContainText(product.name);
-	await expect(page.getByTestId("CartProductList").getByRole("listitem")).toContainText(`Qty: 2`);
-	await expect(page.getByTestId("CartProductList").getByRole("listitem")).toContainText(totalPrice);
+	await expect(page.getByTestId("CartProductList").getByRole("listitem")).toContainText(`Qty: 1`);
+	await expect(page.getByTestId("CartProductList").getByRole("listitem")).toContainText(price.toFixed(2));
 });
diff --git a/__tests__/STF_02.spec.ts b/__tests__/STF_02.spec.ts
@@ -0,0 +1,28 @@
+import { expect, test } from "@playwright/test";
+import {
+	addCurrentProductToCart,
+	clickOnRandomProductElement,
+	openCart,
+	selectRandomAvailableVariant,
+} from "./utils";
+
+test("STF_02: Remove items from the basket", async ({ page }) => {
+	await page.goto("/");
+
+	const product = await clickOnRandomProductElement({ page });
+	await selectRandomAvailableVariant({ page });
+
+	await expect(page.getByTestId("CartNavItem")).toContainText("0 items");
+	await addCurrentProductToCart({ page });
+	await expect(page.getByTestId("CartNavItem")).toContainText("1 item");
+
+	await openCart({ page });
+
+	const productInCart = page.getByTestId("CartProductList").getByRole("listitem");
+	await expect(productInCart).toHaveCount(1);
+	await expect(productInCart).toContainText(product.name);
+
+	await productInCart.getByRole("button", { name: "Remove" }).click();
+	await expect(page.getByTestId("CartNavItem")).toContainText("0 items");
+	await expect(productInCart).toHaveCount(0);
+});
diff --git a/__tests__/STF_03.spec.ts b/__tests__/STF_03.spec.ts
@@ -0,0 +1,31 @@
+import { expect, test } from "@playwright/test";
+import {
+	addCurrentProductToCart,
+	clickOnRandomProductElement,
+	getCurrentProductPrice,
+	openCart,
+	selectRandomAvailableVariant,
+} from "./utils";
+
+test("STF_03: Check if price are calculating correctly", async ({ page }) => {
+	await page.goto("/");
+
+	const product = await clickOnRandomProductElement({ page });
+	await selectRandomAvailableVariant({ page });
+
+	const price = await getCurrentProductPrice({ page });
+
+	await expect(page.getByTestId("CartNavItem")).toContainText("0 items");
+	await addCurrentProductToCart({ page });
+	await expect(page.getByTestId("CartNavItem")).toContainText("1 item");
+	await addCurrentProductToCart({ page });
+	await expect(page.getByTestId("CartNavItem")).toContainText("2 items");
+
+	await openCart({ page });
+
+	const totalPrice = (price * 2).toFixed(2);
+	await expect(page.getByTestId("CartProductList").getByRole("listitem")).toHaveCount(1);
+	await expect(page.getByTestId("CartProductList").getByRole("listitem")).toContainText(product.name);
+	await expect(page.getByTestId("CartProductList").getByRole("listitem")).toContainText(`Qty: 2`);
+	await expect(page.getByTestId("CartProductList").getByRole("listitem")).toContainText(totalPrice);
+});
diff --git a/__tests__/utils.ts b/__tests__/utils.ts
@@ -27,12 +27,16 @@ export async function getCurrentProductPrice({ page }: { page: Page }) {
 }
 
 export async function selectRandomAvailableVariant({ page }: { page: Page }) {
-	const variant = page.getByTestId("VariantSelector").getByRole("radio", { disabled: false });
-	const count = await variant.count();
-	// some products only have a single variant
-	if (count > 0) {
-		await variant.nth(Math.floor(Math.random() * count)).click();
-	}
+	// some products only have a single variant so this block can throw and it's expected
+	try {
+		await page.getByTestId("VariantSelector").waitFor({ timeout: 1000 });
+		const variant = page.getByTestId("VariantSelector").getByRole("radio", { disabled: false });
+		const count = await variant.count();
+		if (count > 0) {
+			await variant.nth(Math.floor(Math.random() * count)).click();
+		}
+	} catch {}
+
 	await page.waitForURL(/\?variant=.+/);
 }
 

diff --git a/src/ui/components/VariantSelector.tsx b/src/ui/components/VariantSelector.tsx
@@ -17,11 +17,11 @@ export function VariantSelector({
 	}
 
 	return (
-		<fieldset className="my-4" role="radiogroup" data-testid="VariantSelector">
-			<legend className="sr-only">Variants</legend>
-			<div className="flex flex-wrap gap-3">
-				{variants.length > 1 &&
-					variants.map((variant) => {
+		variants.length > 1 && (
+			<fieldset className="my-4" role="radiogroup" data-testid="VariantSelector">
+				<legend className="sr-only">Variants</legend>
+				<div className="flex flex-wrap gap-3">
+					{variants.map((variant) => {
 						const isDisabled = !variant.quantityAvailable;
 						const isCurrentVariant = selectedVariant?.id === variant.id;
 						return (
@@ -46,8 +46,9 @@ export function VariantSelector({
 							</Link>
 						);
 					})}
-			</div>
-		</fieldset>
+				</div>
+			</fieldset>
+		)
 	);
 }