Skip to content

Commit 07c2d86

Browse files
ScriptedAlchemyScriptedAlchemy
committed
feat: port comprehensive demo react16 tests to playwright
1 parent 0c352c2 commit 07c2d86

14 files changed

+229
-576
lines changed

‎comprehensive-demo-react16/e2e/checkApp1.spec.ts‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import { test, expect } from '@playwright/test';
2+
3+
const base = 'http://localhost:3001';
4+
5+
test.describe('Comprehensive Demo App1', () => {
6+
test('main page displays sidebar links and elements', async ({ page }) => {
7+
await page.goto(base);
8+
await expect(page.getByRole('heading', { name: 'SideNav' })).toBeVisible();
9+
10+
const demoLinks = ['Main', 'UI Library', 'Dialog', 'Svelte Page', 'Routing'];
11+
for (const name of demoLinks) {
12+
await expect(page.getByRole('link', { name })).toBeVisible();
13+
}
14+
15+
const appLinks = [
16+
{ name: 'App #1', href: 'http://localhost:3001' },
17+
{ name: 'App #2', href: 'http://localhost:3002' },
18+
{ name: 'App #3', href: 'http://localhost:3003' },
19+
{ name: 'App #4', href: 'http://localhost:3004' },
20+
{ name: 'App #5', href: 'http://localhost:3005' },
21+
];
22+
for (const { name, href } of appLinks) {
23+
await expect(page.getByRole('link', { name })).toHaveAttribute('href', href);
24+
}
25+
26+
await expect(page.getByRole('heading', { name: 'Module Federation Demo' })).toBeVisible();
27+
await expect(page.getByText('Alert from LitElement')).toBeVisible();
28+
const actionButton = page.getByRole('button', { name: 'Lit Element Action' });
29+
await expect(actionButton).toBeVisible();
30+
});
31+
32+
test('main tab functionality', async ({ page }) => {
33+
await page.goto(base);
34+
page.once('dialog', async dialog => {
35+
expect(dialog.message()).toBe('You have pressed a button.');
36+
await dialog.accept();
37+
});
38+
await page.getByRole('button', { name: 'Lit Element Action' }).click();
39+
await page.locator('.closebtn').click();
40+
await expect(page.locator('.alert')).toBeHidden();
41+
});
42+
43+
test('UI library page renders remote button', async ({ page }) => {
44+
await page.goto(`${base}/#/ui-library`);
45+
await expect(page.getByRole('heading', { name: 'UI Library Demo' })).toBeVisible();
46+
await expect(
47+
page.getByText('Simple example showing host app and external component using separate CSS solutions.'),
48+
).toBeVisible();
49+
await expect(page.getByRole('button', { name: /Button/ })).toBeVisible();
50+
});
51+
52+
test('dialog page loads and dialog opens', async ({ page }) => {
53+
await page.goto(`${base}/#/dialog`);
54+
await expect(page.getByRole('heading', { name: 'Dialog Demo' })).toBeVisible();
55+
await expect(
56+
page.getByText(
57+
'Clicking the button below will render a Dialog using React Portal. This dialog component is being lazy loaded from the app #2.',
58+
),
59+
).toBeVisible();
60+
await page.getByRole('button', { name: 'Open Dialog' }).click();
61+
const dialog = page.locator('[role="dialog"]');
62+
await expect(dialog.getByRole('heading', { name: 'Dialog Example' })).toBeVisible();
63+
await expect(
64+
dialog.getByText('This is a dialog from the Material UI app rendered in a React Portal.'),
65+
).toBeVisible();
66+
await dialog.getByRole('button', { name: 'Nice' }).click();
67+
await expect(dialog).not.toBeVisible();
68+
});
69+
70+
test('svelte page updates greeting', async ({ page }) => {
71+
await page.goto(`${base}/#/svelte`);
72+
await expect(page.getByRole('heading', { name: 'Svelte Demo' })).toBeVisible();
73+
const input = page.locator('input');
74+
await input.fill('test');
75+
await expect(page.locator('h1')).toHaveText('Hello From Svelte test!');
76+
});
77+
78+
test('routing page renders tabs', async ({ page }) => {
79+
await page.goto(`${base}/#/routing/foo`);
80+
await expect(page.getByRole('heading', { name: 'Routing Demo' })).toBeVisible();
81+
await expect(page.getByText('Foo Content')).toBeVisible();
82+
await page.getByRole('tab', { name: 'Bar' }).click();
83+
await expect(page.getByText('Bar Content')).toBeVisible();
84+
await expect(page.getByRole('button', { name: 'Bar Button' })).toHaveCSS(
85+
'background-color',
86+
'rgb(219, 112, 147)',
87+
);
88+
});
89+
});

‎comprehensive-demo-react16/e2e/checkApp2.spec.ts‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { test, expect } from '@playwright/test';
2+
3+
const base = 'http://localhost:3002';
4+
5+
test.describe('Comprehensive Demo App2', () => {
6+
test('renders blocks, dialog and tabs', async ({ page }) => {
7+
await page.goto(base);
8+
await expect(page.locator('header')).toHaveCSS('background-color', 'rgb(63, 81, 181)');
9+
await expect(page.locator('.jss2')).toHaveCSS('background-color', 'rgb(250, 250, 250)');
10+
await expect(page.locator('.jss3')).toHaveCSS('background-color', 'rgb(255, 255, 255)');
11+
12+
await expect(page.getByRole('heading', { name: 'Material UI App' })).toBeVisible();
13+
await expect(page.getByText('Dialog Component')).toBeVisible();
14+
await page.getByRole('button', { name: 'Open Dialog' }).click();
15+
const dialog = page.locator('[role="dialog"]');
16+
await expect(dialog.getByRole('heading', { name: 'Dialog Example' })).toBeVisible();
17+
await expect(
18+
dialog.getByText('This is a dialog from the Material UI app rendered in a React Portal.'),
19+
).toBeVisible();
20+
await dialog.getByRole('button', { name: 'Nice' }).click();
21+
await expect(dialog).not.toBeVisible();
22+
23+
await expect(page.getByText('Tabs Component')).toBeVisible();
24+
await expect(page.getByText('Foo Content')).toBeVisible();
25+
await page.getByRole('tab', { name: 'Bar' }).click();
26+
await expect(page.getByText('Bar Content')).toBeVisible();
27+
await expect(page.getByRole('button', { name: 'Bar Button' })).toHaveCSS(
28+
'background-color',
29+
'rgb(219, 112, 147)',
30+
);
31+
});
32+
});

‎comprehensive-demo-react16/e2e/checkApp3.spec.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { test, expect } from '@playwright/test';
2+
3+
const base = 'http://localhost:3003';
4+
5+
test.describe('Comprehensive Demo App3', () => {
6+
test('shows styled button', async ({ page }) => {
7+
await page.goto(base);
8+
await expect(page.getByRole('heading', { name: 'Styled Components App' })).toBeVisible();
9+
const button = page.getByRole('button', { name: /Test Button/ });
10+
await expect(button).toBeVisible();
11+
await expect(button).toHaveCSS('background-color', 'rgb(219, 112, 147)');
12+
});
13+
});

‎comprehensive-demo-react16/e2e/checkApp4.spec.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { test, expect } from '@playwright/test';
2+
3+
test.describe('Comprehensive Demo App4', () => {
4+
test('shows svelte greeting', async ({ page }) => {
5+
await page.goto('http://localhost:3004');
6+
await expect(page.locator('h1')).toHaveText('Hello From Svelte world!');
7+
});
8+
});

‎comprehensive-demo-react16/e2e/checkApp5.spec.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { test, expect } from '@playwright/test';
2+
3+
const base = 'http://localhost:3005';
4+
5+
test.describe('Comprehensive Demo App5', () => {
6+
test('shows button and alert', async ({ page }) => {
7+
await page.goto(base);
8+
const button = page.locator('action-button').locator('button');
9+
await expect(button).toHaveText('bar');
10+
await expect(page.locator('.alert')).toHaveText(/Hello/);
11+
await expect(page.locator('.closebtn')).toBeVisible();
12+
});
13+
14+
test('button triggers alert and close hides it', async ({ page }) => {
15+
await page.goto(base);
16+
page.once('dialog', async dialog => {
17+
expect(dialog.message()).toBe('You have pressed a button.');
18+
await dialog.accept();
19+
});
20+
await page.locator('action-button').locator('button').click();
21+
await page.locator('.closebtn').click();
22+
await expect(page.locator('.alert')).toBeHidden();
23+
});
24+
});

‎comprehensive-demo-react16/e2e/checkApplications.spec.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { test, expect } from '@playwright/test';
2+
3+
const apps = [
4+
{ port: 3001, name: 'App 1', selector: 'h6', text: 'Module Federation Demo' },
5+
{ port: 3002, name: 'App 2', selector: 'h6', text: 'Material UI App' },
6+
{ port: 3003, name: 'App 3', selector: 'h6', text: 'Styled Components App' },
7+
{ port: 3004, name: 'App 4', selector: 'h1', text: 'Hello From Svelte world!' },
8+
{ port: 3005, name: 'App 5', selector: 'action-button button', text: 'bar' },
9+
];
10+
11+
apps.forEach(({ port, name, selector, text }) => {
12+
test.describe(name, () => {
13+
test(`build and run ${name}`, async ({ page }) => {
14+
await page.goto(`http://localhost:${port}`);
15+
await expect(page.locator(selector)).toContainText(text);
16+
});
17+
});
18+
});

0 commit comments

Comments
 (0)