Skip to content

Commit b492b34

Browse files
dwightjackdwightjack
committed
refactor with fixtures and add more tests
1 parent 0bdc5eb commit b492b34

File tree

2 files changed

+116
-44
lines changed

2 files changed

+116
-44
lines changed

‎tests/fixtures/app.ts

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { type Page, type Locator, test as base } from '@playwright/test';
2+
import { Interval } from '../../src/types';
3+
export class AppPage {
4+
readonly list: Locator;
5+
readonly timer: Locator;
6+
readonly controls: Locator;
7+
8+
constructor(public readonly page: Page) {
9+
this.list = this.page.getByRole('list', { name: 'Intervals' });
10+
this.timer = this.page.getByRole('timer');
11+
this.controls = this.page.getByRole('group', { name: 'Timer controls' });
12+
}
13+
14+
async setStorage(intervals: Interval[]) {
15+
// set two intervals
16+
await this.page.addInitScript((intervals) => {
17+
window.localStorage.setItem('intervals', JSON.stringify(intervals));
18+
}, intervals);
19+
}
20+
}
21+
22+
export const test = base.extend<{ appPage: AppPage }>({
23+
appPage: async ({ page }, use) => {
24+
const todoPage = new AppPage(page);
25+
26+
await use(todoPage);
27+
},
28+
});
29+
30+
export { expect } from '@playwright/test';

‎tests/timer.spec.ts

Lines changed: 86 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { test, expect } from '@playwright/test';
1+
import { test, expect } from './fixtures/app';
22
import { uid } from 'uid';
33
import { IntervalType } from '../src/types';
44

@@ -12,69 +12,111 @@ test.describe('initial state', () => {
1212
test.beforeEach(async ({ page }) => {
1313
await page.goto('/');
1414
});
15-
test('default timer', async ({ page }) => {
16-
await expect(page.getByRole('timer')).toContainText('45:00');
15+
test('default timer', async ({ appPage }) => {
16+
await expect(appPage.timer).toContainText('45:00');
1717
});
18-
test('default timer - accessible name', async ({ page }) => {
19-
await expect(page.getByRole('timer')).toContainText('45 minutes left');
18+
test('default timer - accessible name', async ({ appPage }) => {
19+
await expect(appPage.timer).toContainText('45 minutes left');
2020
});
21-
test('cycle list', async ({ page }) => {
22-
const list = page.getByRole('list', { name: 'Intervals' });
23-
await expect(list.getByRole('listitem')).toHaveCount(1);
24-
await expect(list.getByRole('listitem')).toContainText('W');
25-
await expect(list.getByRole('listitem')).toContainText('45:00');
21+
test('cycle list', async ({ appPage }) => {
22+
await expect(appPage.list.getByRole('listitem')).toHaveCount(1);
23+
await expect(appPage.list.getByRole('listitem')).toContainText('W');
24+
await expect(appPage.list.getByRole('listitem')).toContainText('45:00');
2625
});
2726

28-
test('controls', async ({ page }) => {
29-
const controls = page.getByRole('group', { name: 'Timer controls' });
30-
await expect(controls.getByRole('button', { name: 'Play' })).toBeVisible();
31-
await expect(controls.getByRole('button', { name: 'Skip' })).toBeVisible();
32-
await expect(controls.getByRole('button', { name: 'Reset' })).toBeVisible();
27+
test('controls', async ({ appPage }) => {
3328
await expect(
34-
controls.getByRole('button', { name: 'Settings' }),
29+
appPage.controls.getByRole('button', { name: 'Play' }),
30+
).toBeVisible();
31+
await expect(
32+
appPage.controls.getByRole('button', { name: 'Skip' }),
33+
).toBeVisible();
34+
await expect(
35+
appPage.controls.getByRole('button', { name: 'Reset' }),
36+
).toBeVisible();
37+
await expect(
38+
appPage.controls.getByRole('button', { name: 'Settings' }),
3539
).toBeVisible();
3640
});
3741
});
3842

3943
test.describe('functionality', () => {
40-
test.beforeEach(async ({ page }) => {
41-
// set two intervals
42-
await page.addInitScript(
43-
(intervals) => {
44-
window.localStorage.setItem('intervals', JSON.stringify(intervals));
45-
},
46-
[
47-
mockInterval(IntervalType.Work, 1),
48-
mockInterval(IntervalType.ShortBreak, 2),
49-
],
50-
);
44+
test.beforeEach(async ({ page, appPage }) => {
45+
await appPage.setStorage([
46+
mockInterval(IntervalType.Work, 1),
47+
mockInterval(IntervalType.ShortBreak, 2),
48+
]);
5149
await page.goto('/');
5250
});
53-
test('list of two intervals', async ({ page }) => {
54-
const list = page.getByRole('list', { name: 'Intervals' });
55-
await expect(list.getByRole('listitem')).toHaveCount(2);
51+
52+
test('list of two intervals', async ({ appPage }) => {
53+
await expect(appPage.list.getByRole('listitem')).toHaveCount(2);
5654
});
5755

58-
test('play', async ({ page }) => {
59-
await page.getByRole('button', { name: 'Play' }).click();
56+
test('play', async ({ appPage }) => {
57+
await appPage.controls.getByRole('button', { name: 'Play' }).click();
6058

61-
await expect(page.getByRole('button', { name: 'Play' })).not.toBeVisible();
62-
await expect(page.getByRole('button', { name: 'Pause' })).toBeVisible();
59+
await expect(
60+
appPage.controls.getByRole('button', { name: 'Play' }),
61+
).not.toBeVisible();
62+
await expect(
63+
appPage.controls.getByRole('button', { name: 'Pause' }),
64+
).toBeVisible();
6365
});
6466

65-
test('pause', async ({ page }) => {
66-
await page.getByRole('button', { name: 'Play' }).click();
67+
test('pause', async ({ appPage }) => {
68+
await appPage.controls.getByRole('button', { name: 'Play' }).click();
6769

68-
await expect(page.getByRole('button', { name: 'Play' })).not.toBeVisible();
69-
await page.getByRole('button', { name: 'Pause' }).click();
70-
await expect(page.getByRole('button', { name: 'Play' })).toBeVisible();
70+
await expect(
71+
appPage.controls.getByRole('button', { name: 'Play' }),
72+
).not.toBeVisible();
73+
await appPage.controls.getByRole('button', { name: 'Pause' }).click();
74+
await expect(
75+
appPage.controls.getByRole('button', { name: 'Play' }),
76+
).toBeVisible();
7177
});
7278

73-
test('skip', async ({ page }) => {
74-
await expect(page.getByRole('timer')).toContainText('01:00');
75-
await page.getByRole('button', { name: 'Skip' }).click();
76-
await page.waitForTimeout(700);
79+
test('skip', async ({ appPage }) => {
80+
await expect(appPage.timer).toContainText('01:00');
7781

78-
await expect(page.getByRole('timer')).toContainText('02:00');
82+
await appPage.controls.getByRole('button', { name: 'Skip' }).click();
83+
await appPage.page.waitForTimeout(700);
84+
85+
await expect(appPage.timer).toContainText('02:00');
86+
});
87+
88+
test('skip cycle', async ({ appPage }) => {
89+
await expect(appPage.timer).toContainText('01:00');
90+
91+
await appPage.controls.getByRole('button', { name: 'Skip' }).click();
92+
await appPage.page.waitForTimeout(700);
93+
94+
await expect(appPage.timer).toContainText('02:00');
95+
96+
await appPage.controls.getByRole('button', { name: 'Skip' }).click();
97+
await appPage.page.waitForTimeout(700);
98+
99+
await expect(appPage.timer).toContainText('01:00');
100+
});
101+
102+
test('skip when paused', async ({ appPage }) => {
103+
await appPage.controls.getByRole('button', { name: 'Skip' }).click();
104+
await appPage.page.waitForTimeout(700);
105+
106+
await expect(appPage.timer).toContainText('02:00');
107+
await expect(
108+
appPage.controls.getByRole('button', { name: 'Play' }),
109+
).toBeVisible();
110+
});
111+
112+
test('skip when playing', async ({ appPage }) => {
113+
await appPage.controls.getByRole('button', { name: 'Play' }).click();
114+
await appPage.controls.getByRole('button', { name: 'Skip' }).click();
115+
await appPage.page.waitForTimeout(700);
116+
117+
await expect(appPage.timer).toContainText('02:00');
118+
await expect(
119+
appPage.controls.getByRole('button', { name: 'Pause' }),
120+
).toBeVisible();
79121
});
80122
});

0 commit comments

Comments
 (0)