From b0312ad002f4fdf808e39c754ddc91af0ae1e9de Mon Sep 17 00:00:00 2001 From: w3bdesign <45217974+w3bdesign@users.noreply.github.com> Date: Sat, 1 Feb 2025 00:57:15 +0100 Subject: [PATCH 1/4] Mock cart --- src/tests/Produkter/Produkter.spec.ts | 91 +++++++++++++++++---------- 1 file changed, 58 insertions(+), 33 deletions(-) diff --git a/src/tests/Produkter/Produkter.spec.ts b/src/tests/Produkter/Produkter.spec.ts index c27a5c420..668d4e05a 100644 --- a/src/tests/Produkter/Produkter.spec.ts +++ b/src/tests/Produkter/Produkter.spec.ts @@ -1,7 +1,48 @@ -import { test, expect } from '@playwright/test'; +import { test, expect, Page } from '@playwright/test'; test.describe('Produkter', () => { test.beforeEach(async ({ page }) => { + // Mock the cart API response + await page.route('**/graphql', async (route) => { + const json = await route.request().postData(); + if (json?.includes('AddToCart')) { + await route.fulfill({ + status: 200, + contentType: 'application/json', + body: JSON.stringify({ + data: { + addToCart: { + added: true, + cartKey: 'test-cart-key', + cart: { + contents: { + nodes: [ + { + key: 'test-cart-key', + product: { + node: { + name: 'Test simple', + id: '29' + } + }, + quantity: 1, + total: '100' + } + ] + }, + total: '100', + subtotal: '100', + totalProductsCount: 1 + } + } + } + }) + }); + } else { + await route.continue(); + } + }); + await page.goto('http://localhost:3000'); }); @@ -15,51 +56,35 @@ test.describe('Produkter', () => { await expect(page).toHaveURL(/.*simple/); + // Verify buy button is visible await expect(page.getByRole('button', { name: 'KJØP' })).toBeVisible(); - // Click the buy button and wait for it to complete + // Click buy button and wait for the mocked API response + const responsePromise = page.waitForResponse(response => + response.url().includes('graphql') && + response.request().postData()?.includes('AddToCart') + ); await page.getByRole('button', { name: 'KJØP' }).click(); - - // Wait for network idle to ensure any API calls complete - await page.waitForLoadState('networkidle'); + await responsePromise; - // More specific selector for the cart count and consistent timeout - const cartCountSelector = '#header'; - - // Wait for cart count to be visible and equal to "1" - await expect(page.locator(cartCountSelector).getByText('1')).toBeVisible({ - timeout: 30000 - }); + // Verify cart count updates in header + await expect(page.locator('#header').getByText('1')).toBeVisible(); + // Navigate to cart await page.getByRole('link', { name: 'Handlekurv' }).click(); - - await page.locator('section').filter({ hasText: 'Handlekurv' }).waitFor(); - - // Check that that Handlekurv is visible await expect( - page.locator('section').filter({ hasText: 'Handlekurv' }), + page.locator('section').filter({ hasText: 'Handlekurv' }) ).toBeVisible(); - // Check that we can go to Kasse - + // Navigate to checkout await page.getByRole('button', { name: 'GÅ TIL KASSE' }).click(); - - await page.waitForURL('http://localhost:3000/kasse', { - waitUntil: 'networkidle', - }); - + await page.waitForURL('http://localhost:3000/kasse'); await expect( - page.locator('section').filter({ hasText: 'Kasse' }), + page.locator('section').filter({ hasText: 'Kasse' }) ).toBeVisible(); - // Check that we can type something in Billing fields - + // Test billing form await page.getByPlaceholder('Etternavn').fill('testetternavn'); - - await page.getByPlaceholder('Etternavn').waitFor(); - - await expect(page.getByPlaceholder('Etternavn')).toHaveValue( - 'testetternavn', - ); + await expect(page.getByPlaceholder('Etternavn')).toHaveValue('testetternavn'); }); }); From 33208780ee86a931986f13bb3212750797bbcb44 Mon Sep 17 00:00:00 2001 From: w3bdesign <45217974+w3bdesign@users.noreply.github.com> Date: Sat, 1 Feb 2025 00:58:45 +0100 Subject: [PATCH 2/4] Update Produkter.spec.ts --- src/tests/Produkter/Produkter.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/tests/Produkter/Produkter.spec.ts b/src/tests/Produkter/Produkter.spec.ts index 668d4e05a..1039c2e2e 100644 --- a/src/tests/Produkter/Produkter.spec.ts +++ b/src/tests/Produkter/Produkter.spec.ts @@ -1,4 +1,4 @@ -import { test, expect, Page } from '@playwright/test'; +import { test, expect } from '@playwright/test'; test.describe('Produkter', () => { test.beforeEach(async ({ page }) => { From c52670f014b1516e80e059a2b89da5ad6677a01a Mon Sep 17 00:00:00 2001 From: w3bdesign <45217974+w3bdesign@users.noreply.github.com> Date: Sat, 1 Feb 2025 01:10:17 +0100 Subject: [PATCH 3/4] Delete example.spec.txt --- src/tests/example.spec.txt | 18 ------------------ 1 file changed, 18 deletions(-) delete mode 100644 src/tests/example.spec.txt diff --git a/src/tests/example.spec.txt b/src/tests/example.spec.txt deleted file mode 100644 index c511525c1..000000000 --- a/src/tests/example.spec.txt +++ /dev/null @@ -1,18 +0,0 @@ -import { test, expect } from '@playwright/test'; - -test('has title', async ({ page }) => { - await page.goto('https://playwright.dev/'); - - // Expect a title "to contain" a substring. - await expect(page).toHaveTitle(/Playwright/); -}); - -test('get started link', async ({ page }) => { - await page.goto('https://playwright.dev/'); - - // Click the get started link. - await page.getByRole('link', { name: 'Get started' }).click(); - - // Expects the URL to contain intro. - await expect(page).toHaveURL(/.*intro/); -}); From da572b3cfbc54a35d3b3798f1f432da8ca2b1b1c Mon Sep 17 00:00:00 2001 From: w3bdesign <45217974+w3bdesign@users.noreply.github.com> Date: Sat, 1 Feb 2025 01:10:20 +0100 Subject: [PATCH 4/4] Delete Produkter.spec.ts --- src/tests/Produkter/Produkter.spec.ts | 90 --------------------------- 1 file changed, 90 deletions(-) delete mode 100644 src/tests/Produkter/Produkter.spec.ts diff --git a/src/tests/Produkter/Produkter.spec.ts b/src/tests/Produkter/Produkter.spec.ts deleted file mode 100644 index 1039c2e2e..000000000 --- a/src/tests/Produkter/Produkter.spec.ts +++ /dev/null @@ -1,90 +0,0 @@ -import { test, expect } from '@playwright/test'; - -test.describe('Produkter', () => { - test.beforeEach(async ({ page }) => { - // Mock the cart API response - await page.route('**/graphql', async (route) => { - const json = await route.request().postData(); - if (json?.includes('AddToCart')) { - await route.fulfill({ - status: 200, - contentType: 'application/json', - body: JSON.stringify({ - data: { - addToCart: { - added: true, - cartKey: 'test-cart-key', - cart: { - contents: { - nodes: [ - { - key: 'test-cart-key', - product: { - node: { - name: 'Test simple', - id: '29' - } - }, - quantity: 1, - total: '100' - } - ] - }, - total: '100', - subtotal: '100', - totalProductsCount: 1 - } - } - } - }) - }); - } else { - await route.continue(); - } - }); - - await page.goto('http://localhost:3000'); - }); - - test('Test at vi kan kjøpe produktet', async ({ page }) => { - await page.getByRole('link', { name: 'Test simple' }).first().click(); - - // Expects the URL to contain test-simple - await page.waitForURL('http://localhost:3000/produkt/test-simple?id=29', { - waitUntil: 'networkidle', - }); - - await expect(page).toHaveURL(/.*simple/); - - // Verify buy button is visible - await expect(page.getByRole('button', { name: 'KJØP' })).toBeVisible(); - - // Click buy button and wait for the mocked API response - const responsePromise = page.waitForResponse(response => - response.url().includes('graphql') && - response.request().postData()?.includes('AddToCart') - ); - await page.getByRole('button', { name: 'KJØP' }).click(); - await responsePromise; - - // Verify cart count updates in header - await expect(page.locator('#header').getByText('1')).toBeVisible(); - - // Navigate to cart - await page.getByRole('link', { name: 'Handlekurv' }).click(); - await expect( - page.locator('section').filter({ hasText: 'Handlekurv' }) - ).toBeVisible(); - - // Navigate to checkout - await page.getByRole('button', { name: 'GÅ TIL KASSE' }).click(); - await page.waitForURL('http://localhost:3000/kasse'); - await expect( - page.locator('section').filter({ hasText: 'Kasse' }) - ).toBeVisible(); - - // Test billing form - await page.getByPlaceholder('Etternavn').fill('testetternavn'); - await expect(page.getByPlaceholder('Etternavn')).toHaveValue('testetternavn'); - }); -});