Skip to content

Commit 7d29eff

Browse files
BobrImperatorBobrImperator
committed
test: setup playwright-tests repo with e2e tests
this is so we're able to test various synchronization scenarios across tabs and perhaps, move some of the acceptance tests over to as well
1 parent c899030 commit 7d29eff

File tree

9 files changed

+859
-83
lines changed

9 files changed

+859
-83
lines changed

‎.github/workflows/ci.yml‎

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ jobs:
2525
- classic-test-app
2626
- test-app
2727
- ember-simple-auth
28+
- playwright-tests
2829

2930
steps:
3031
- uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
@@ -59,7 +60,7 @@ jobs:
5960
- test:one ember-lts-5.4
6061
- test:one ember-lts-5.8
6162
- test:one ember-lts-5.12
62-
- test:one ember-6.0
63+
- test:one ember-lts-6.4
6364
- test:one ember-default
6465
- test:one ember-release
6566
allow-failure: [false]
@@ -91,6 +92,41 @@ jobs:
9192
run: pnpm run --filter ${{ matrix.workspace }} ${{ matrix.test-suite }}
9293
continue-on-error: ${{ matrix.allow-failure }}
9394

95+
browser_tests:
96+
name: Browser Tests
97+
runs-on: ubuntu-latest
98+
timeout-minutes: 10
99+
container:
100+
image: mcr.microsoft.com/playwright:v1.53.2-noble
101+
options: --user 1001
102+
103+
strategy:
104+
fail-fast: false
105+
matrix:
106+
ember-version:
107+
- ember-lts-4.12
108+
- ember-lts-5.4
109+
- ember-lts-6.4
110+
- ember-default
111+
- ember-release
112+
113+
steps:
114+
- uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
115+
- uses: volta-cli/action@5c175f92dea6f48441c436471e6479dbc192e194 # v4
116+
- uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4
117+
with:
118+
path: "**/node_modules"
119+
key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
120+
restore-keys: |
121+
${{ runner.os }}-pnpm-
122+
123+
- run: pnpm install
124+
- name: test ${{ matrix.ember-version }}
125+
env:
126+
EMBER_SERVER_COMMAND: pnpm -F test-app test:one ${{ matrix.ember-version }} --- pnpm start
127+
run: pnpm -F playwright-tests test:e2e:chromium
128+
129+
94130
allow-fail-try-scenarios:
95131
name: ${{ matrix.workspace }} ${{ matrix.test-suite }} - Allowed to fail
96132
runs-on: ubuntu-latest

‎packages/playwright-tests/.gitignore‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
2+
# Playwright
3+
node_modules/
4+
/test-results/
5+
/playwright-report/
6+
/blob-report/
7+
/playwright/.cache/
8+
/playwright/.auth/

‎packages/playwright-tests/eslint.config.mjs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from '../../eslint.config.mjs';

‎packages/playwright-tests/package.json‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "playwright-tests",
3+
"version": "1.0.0",
4+
"description": "Ember-simple-auth e2e tests",
5+
"license": "ISC",
6+
"author": "",
7+
"type": "commonjs",
8+
"main": "index.js",
9+
"scripts": {
10+
"test:e2e": "PUBLIC_MSW_ENABLED=true playwright test",
11+
"test:visual": "PUBLIC_MSW_ENABLED=true playwright test",
12+
"lint": "prettier --check . && ESLINT_USE_FLAT_CONFIG=true eslint .",
13+
"format": "prettier --write . && ESLINT_USE_FLAT_CONFIG=true eslint . --fix",
14+
"test:e2e:firefox": "pnpm test:e2e --project=firefox",
15+
"test:e2e:chromium": "pnpm test:e2e --project=chromium"
16+
},
17+
"devDependencies": {
18+
"@eslint/js": "9.30.1",
19+
"@playwright/test": "1.53.2",
20+
"@types/node": "^24.9.2",
21+
"@typescript-eslint/eslint-plugin": "8.35.1",
22+
"@typescript-eslint/parser": "8.35.1",
23+
"dotenv": "17.0.1",
24+
"dotenv-expand": "12.0.3",
25+
"eslint": "9.30.1",
26+
"eslint-config-prettier": "10.1.8",
27+
"eslint-plugin-prettier": "5.5.4",
28+
"msw": "2.10.5",
29+
"playwright": "1.53.2",
30+
"playwright-msw": "3.0.1",
31+
"prettier": "3.6.2"
32+
}
33+
}

‎packages/playwright-tests/playwright.config.ts‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import { defineConfig, devices } from '@playwright/test';
2+
3+
const TEST_COMMAND = process.env.EMBER_SERVER_COMMAND || 'pnpm -F test-app start';
4+
5+
/**
6+
* Read environment variables from file.
7+
* https://github.com/motdotla/dotenv
8+
*/
9+
// import dotenv from 'dotenv';
10+
// import path from 'path';
11+
// dotenv.config({ path: path.resolve(__dirname, '.env') });
12+
13+
/**
14+
* See https://playwright.dev/docs/test-configuration.
15+
*/
16+
export default defineConfig({
17+
testDir: './tests',
18+
/* Run tests in files in parallel */
19+
fullyParallel: true,
20+
/* Fail the build on CI if you accidentally left test.only in the source code. */
21+
forbidOnly: !!process.env.CI,
22+
/* Retry on CI only */
23+
retries: process.env.CI ? 2 : 0,
24+
/* Opt out of parallel tests on CI. */
25+
workers: 2,
26+
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
27+
reporter: 'html',
28+
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
29+
use: {
30+
/* Base URL to use in actions like `await page.goto('')`. */
31+
baseURL: 'http://localhost:4200',
32+
33+
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
34+
trace: 'on-first-retry',
35+
},
36+
37+
/* Configure projects for major browsers */
38+
projects: [
39+
{
40+
name: 'chromium',
41+
use: { ...devices['Desktop Chrome'] },
42+
},
43+
44+
{
45+
name: 'firefox',
46+
use: { ...devices['Desktop Firefox'] },
47+
},
48+
49+
{
50+
name: 'webkit',
51+
use: { ...devices['Desktop Safari'] },
52+
},
53+
54+
/* Test against mobile viewports. */
55+
// {
56+
// name: 'Mobile Chrome',
57+
// use: { ...devices['Pixel 5'] },
58+
// },
59+
// {
60+
// name: 'Mobile Safari',
61+
// use: { ...devices['iPhone 12'] },
62+
// },
63+
64+
/* Test against branded browsers. */
65+
// {
66+
// name: 'Microsoft Edge',
67+
// use: { ...devices['Desktop Edge'], channel: 'msedge' },
68+
// },
69+
// {
70+
// name: 'Google Chrome',
71+
// use: { ...devices['Desktop Chrome'], channel: 'chrome' },
72+
// },
73+
],
74+
75+
/* Run your local dev server before starting the tests */
76+
webServer: [
77+
{
78+
command: TEST_COMMAND,
79+
url: 'http://localhost:4200',
80+
reuseExistingServer: true,
81+
},
82+
],
83+
});

‎packages/playwright-tests/tests/test-app.spec.ts‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import { test, expect, type Page } from '@playwright/test';
2+
3+
const confirmLoggedIn = async (page: Page) => {
4+
await expect(page).toHaveURL('/');
5+
await expect(page.getByTestId('greeting-text')).toHaveText('Signed in as Some person');
6+
await expect(page.locator('[data-is-authenticated]')).toBeTruthy();
7+
};
8+
9+
const loginWithPassword = async (page: Page) => {
10+
await page.getByPlaceholder('Enter Login').fill('letme');
11+
await page.getByPlaceholder('Enter Password').fill('in');
12+
await page.locator('button[type="submit"]:has-text("Login")').click();
13+
};
14+
15+
test.describe('TestApp', () => {
16+
test('it renders and is available', async ({ page }) => {
17+
await page.goto('/');
18+
19+
await expect(page.getByRole('heading')).toHaveText('Ember Simple Auth example app');
20+
});
21+
22+
test('can log-in', async ({ page }) => {
23+
await page.goto('/');
24+
25+
await page.getByTestId('route-login').click();
26+
await expect(page).toHaveURL('/login#');
27+
28+
await loginWithPassword(page);
29+
await confirmLoggedIn(page);
30+
});
31+
32+
test('logged-in state is synchronized between tabs', async ({ page, context }) => {
33+
await page.goto('/');
34+
35+
await page.getByTestId('route-login').click();
36+
await expect(page).toHaveURL('/login#');
37+
38+
await loginWithPassword(page);
39+
await confirmLoggedIn(page);
40+
41+
const anotherPage = await context.newPage();
42+
await anotherPage.goto('/');
43+
await confirmLoggedIn(anotherPage);
44+
});
45+
46+
test('logged-in state is synchronized between tabs when another page is already opened', async ({
47+
page,
48+
context,
49+
}) => {
50+
await page.goto('/');
51+
52+
await page.getByTestId('route-login').click();
53+
await expect(page).toHaveURL('/login#');
54+
55+
const anotherPage = await context.newPage();
56+
await anotherPage.goto('/');
57+
58+
await loginWithPassword(page);
59+
await confirmLoggedIn(page);
60+
await confirmLoggedIn(anotherPage);
61+
});
62+
});

‎packages/test-app/app/components/main-navigation.hbs‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,7 @@
2828
{{! display logout button when the session is authenticated, login button otherwise }}
2929
{{#if this.session.isAuthenticated}}
3030
{{#if this.sessionAccount.account}}
31-
<span class="navbar-text mr-3">Signed in as
32-
{{this.sessionAccount.account.name}}</span>
31+
<span data-testid="greeting-text" class="navbar-text mr-3">Signed in as {{this.sessionAccount.account.name}}</span>
3332
{{/if}}
3433
<a
3534
{{on "click" this.logout}}
@@ -43,7 +42,8 @@
4342
class="btn btn-success"
4443
href="#"
4544
role="button"
45+
data-testid="route-login"
4646
>Login</a>
4747
{{/if}}
4848
</form>
49-
</nav>
49+
</nav>

‎packages/test-esa/config/ember-try.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,11 +56,11 @@ module.exports = function () {
5656
},
5757
},
5858
{
59-
name: 'ember-6.0',
59+
name: 'ember-lts-6.4',
6060
npm: {
6161
devDependencies: {
62-
'ember-cli': '~6.0.0',
63-
'ember-source': '~6.0.0',
62+
'ember-cli': '~6.4.0',
63+
'ember-source': '~6.4.0',
6464
'ember-data': '~5.3.0',
6565
},
6666
},

0 commit comments

Comments
 (0)