Skip to content

Commit

Permalink
Playwright test implemented
Browse files Browse the repository at this point in the history
  • Loading branch information
prokawsar committed Aug 27, 2024
1 parent e6281da commit 2fdc338
Show file tree
Hide file tree
Showing 10 changed files with 182 additions and 44 deletions.
27 changes: 27 additions & 0 deletions .github/workflows/playwright.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
name: Playwright Tests
on:
push:
branches: [master]
pull_request:
branches: [master]
jobs:
test:
timeout-minutes: 60
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: lts/*
- name: Install dependencies
run: npm ci
- name: Install Playwright Browsers
run: npx playwright install --with-deps
- name: Run Playwright tests
run: npx playwright test
- uses: actions/upload-artifact@v4
if: always()
with:
name: playwright-report
path: playwright-report/
retention-days: 10
5 changes: 5 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,8 @@ node_modules
vite.config.js.timestamp-*
vite.config.ts.timestamp-*
package-lock.json
/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/
.vercel
6 changes: 5 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,23 +5,27 @@
"scripts": {
"dev": "vite dev",
"build": "vite build",
"build:dev": "vite build --mode development",
"preview": "vite preview",
"test": "npm run test:integration && npm run test:unit",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"test:integration": "playwright test",
"test:ui": "playwright test",
"test:unit": "vitest",
"lint": "prettier --plugin-search-dir . --check .",
"format": "prettier --plugin-search-dir . --write ."
},
"devDependencies": {
"@iconify/svelte": "^4.0.2",
"@playwright/test": "^1.46.1",
"@sveltejs/adapter-auto": "^3.0.0",
"@sveltejs/adapter-vercel": "^5.4.1",
"@sveltejs/kit": "^2.0.0",
"@sveltejs/vite-plugin-svelte": "^3.0.0",
"@types/mixpanel-browser": "^2.49.0",
"@types/node": "^22.5.0",
"autoprefixer": "^10.4.14",
"dotenv": "^16.4.5",
"postcss": "^8.4.27",
"prettier": "^2.8.0",
"prettier-plugin-svelte": "^2.10.1",
Expand Down
60 changes: 60 additions & 0 deletions playwright.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import { defineConfig, devices } from '@playwright/test'

/**
* Read environment variables from file.
* https://github.com/motdotla/dotenv
*/
// dotenv.config({ path: path.resolve(__dirname, '.env.development') })

export default defineConfig({
testDir: './tests',
timeout: 5000,
fullyParallel: true,
forbidOnly: !!process.env.CI,
/* Retry on CI only */
retries: process.env.CI ? 2 : 1,
workers: process.env.CI ? 1 : undefined,
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
reporter: 'html',
use: {
/* Base URL to use in actions like `await page.goto('/')`. */
baseURL: 'http://localhost:4173',
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
trace: 'on-first-retry'
},

/* Configure projects for major browsers */
projects: [
// {
// name: 'chromium',
// use: { ...devices['Desktop Chrome'] }
// },

/* Test against mobile viewports. */
{
name: 'Mobile Chrome',
use: { ...devices['Pixel 7'] }
},
{
name: 'Mobile Safari',
use: { ...devices['iPhone 12'] }
}

/* Test against branded browsers. */
// {
// name: 'Microsoft Edge',
// use: { ...devices['Desktop Edge'], channel: 'msedge' },
// },
// {
// name: 'Google Chrome',
// use: { ...devices['Desktop Chrome'], channel: 'chrome' },
// },
],

/* Run your local dev server before starting the tests */
webServer: {
command: 'npm run build:dev && npm run preview',
url: 'http://localhost:4173',
reuseExistingServer: !process.env.CI
}
})
2 changes: 2 additions & 0 deletions src/lib/elements/Input.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
export let id: string = makeid(3)
export let value: string
export let name: string = ''
export let type: string = 'number'
export let disabled: boolean = false
export let classNames: string = ''
Expand All @@ -19,6 +20,7 @@
</script>

<input
data-testid={name}
bind:this={inputRef}
{id}
{disabled}
Expand Down
2 changes: 1 addition & 1 deletion src/lib/elements/PaperItem.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
<Icon icon="ph:trash-light" width="16px" />
</button>
{#each fields as field}
<Input bind:value={paper[field]} placeholder={placeholders[field]} on:keydown />
<Input name={field} bind:value={paper[field]} placeholder={placeholders[field]} on:keydown />
{/each}
</div>
<div class="flex flex-grow justify-center px-1">
Expand Down
8 changes: 4 additions & 4 deletions src/lib/elements/Result.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,14 @@

<div class="flex flex-col gap-1 w-full border shadow-md rounded py-1 px-2">
<div class="flex flex-row justify-between">
<p class="text-teal-600">Total:</p>
<p>
<p class="text-teal-600" data-testid="total-text">Total:</p>
<p data-testid="total-value">
{total.toFixed(2)}
</p>
</div>
<div class="flex flex-row justify-between">
<p class="text-teal-600">Total with (40%):</p>
<p>
<p class="text-teal-600" data-testid="total40-text">Total with (40%):</p>
<p data-testid="total40-value">
{(total + _40Percent).toFixed(2)}
</p>
</div>
Expand Down
33 changes: 1 addition & 32 deletions src/routes/(app)/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,7 @@
{/if}
<div class="flex w-full gap-1 items-start">
<input
data-testid="product_name"
bind:value={customer_name}
type="text"
placeholder="Product name"
Expand Down Expand Up @@ -181,38 +182,6 @@
on:keydown={(event) => handleKeyDown(event)}
on:remove={() => removePaper(paper.id)}
/>
<!-- <div
id={paper.id}
class="flex flex-row items-center justify-between rounded"
in:receive={{ key: paper.id }}
out:send={{ key: paper.id }}
>
<div class="flex flex-row gap-[3px] items-center overflow-x-auto">
<button
disabled={paperCount.length == 1 && i == 0}
class="border border-gray-400 rounded-md text-red-600 p-1 w-fit disabled:border-gray-200 disabled:cursor-not-allowed disabled:text-opacity-45"
on:click={() => removePaper(paper.id)}
>
<Icon icon="ph:trash-light" width="16px" />
</button>
{#each fields as field}
<Input
bind:value={paper[field]}
placeholder={placeholders[field]}
on:keydown={(event) => handleKeyDown(event)}
/>
{/each}
</div>
<div class="flex flex-grow justify-center px-1">
<p
class="{perPaperResult.get(paper.id)
? 'font-semibold'
: 'font-light text-gray-400'} pr-[2px]"
>
= {perPaperResult.get(paper.id)?.toFixed(2) || 'total'}
</p>
</div>
</div> -->
{/each}
</div>

Expand Down
77 changes: 77 additions & 0 deletions tests/index.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
import { expect, test } from '@playwright/test'

test('index page has loaded fine', async ({ page }) => {
await page.goto('/')
await expect(page.getByText('Paper Cost')).toBeVisible()
})

test('test calculate paper cost works', async ({ page }) => {
await page.goto('/')

await page.getByPlaceholder('Product name').click()
await page.getByPlaceholder('Product name').fill('Test product')
await page.getByPlaceholder('L').fill('23')
await page.getByPlaceholder('W').fill('23')
await page.getByPlaceholder('GSM').fill('23')
await page.getByPlaceholder('R', { exact: true }).fill('100')
await page.getByRole('button', { name: 'Calculate' }).click()
await page.getByRole('button', { name: 'Save cost' }).click()
await expect(page.getByText('Total with (40%):')).toBeVisible()
await expect(page.getByText('1.10')).toBeVisible()
await page.getByRole('button', { name: 'Clear' }).click()
await expect(page.getByText('= total')).toBeVisible()
})

test('test cost history saved in history', async ({ page }) => {
await page.goto('/')
await page.getByPlaceholder('L').fill('34')
await page.getByPlaceholder('L').press('Enter')
await page.getByPlaceholder('W').fill('34')
await page.getByPlaceholder('W').press('Enter')
await page.getByPlaceholder('GSM').fill('34')
await page.getByPlaceholder('GSM').press('Enter')
await page.getByPlaceholder('R', { exact: true }).fill('100')
await page.getByPlaceholder('R', { exact: true }).press('Enter')
await expect(page.getByText('Total with (40%):')).toBeVisible()
await expect(page.getByText('3.55')).toBeVisible()
await page.getByRole('button', { name: 'Save cost' }).click()
await expect(page.getByText('Cost details saved')).toBeVisible()
await page.getByRole('link', { name: 'Cost History' }).click()
await expect(page.getByRole('heading', { name: 'History' })).toBeVisible()
})

test('test multiple paper calcuation', async ({ page }) => {
await page.goto('/')

await page.getByTestId('product_name').click()
await page.getByTestId('product_name').fill('Snaks')
await page.getByRole('button', { name: 'Add paper' }).click()

await page.getByTestId('length').first().click()
await page.getByTestId('length').first().fill('34')
await page.getByTestId('length').first().press('Enter')
await page.getByTestId('width').first().fill('43')
await page.getByTestId('width').first().press('Enter')
await page.getByTestId('thickness').first().fill('33')
await page.getByTestId('thickness').first().press('Enter')
await page.getByTestId('rate').first().fill('100')
await page.getByTestId('rate').first().press('Enter')

await page.getByTestId('length').nth(1).fill('43')
await page.getByTestId('length').nth(1).press('Enter')
await page.getByTestId('width').nth(1).fill('32')
await page.getByTestId('width').nth(1).press('Enter')
await page.getByTestId('thickness').nth(1).fill('54')
await page.getByTestId('thickness').nth(1).press('Enter')
await page.getByTestId('rate').nth(1).fill('120')
await page.getByTestId('rate').nth(1).press('Enter')

await expect(page.getByTestId('total40-text')).toBeVisible()
await expect(page.getByTestId('total40-value')).toBeVisible()
await expect(page.getByTestId('total-text')).toBeVisible()
await expect(page.getByTestId('total-value')).toBeVisible()
await page.getByRole('button', { name: 'Clear' }).click()

await expect(page.getByTestId('total40-value')).not.toBeVisible()
await expect(page.getByTestId('total-text')).not.toBeVisible()
})
6 changes: 0 additions & 6 deletions tests/test.ts

This file was deleted.

0 comments on commit 2fdc338

Please sign in to comment.