Skip to content

Commit 992c9d1

Browse files
Shane-DonlonShane-Donlon
committed
e2e(docs) add sandbox hello world tests
1 parent c34c726 commit 992c9d1

File tree

1 file changed

+176
-0
lines changed

1 file changed

+176
-0
lines changed

‎e2e/docs-e2e/tests/Sandbox/sandbox.spec.ts‎

Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
import { test, expect } from '@playwright/test';
2+
3+
test.describe('Sandbox Hello World Example', () => {
4+
test.beforeEach(async ({ page }) => {
5+
await page.goto('/examples/introduction/hello-world/');
6+
});
7+
8+
test('Sandbox page loads', async ({ page }) => {
9+
await expect(page).toHaveTitle('Hello World 📚 Qwik Documentation');
10+
const tabButtonsTop = page.getByText('app.tsxentry.server.tsxroot.');
11+
12+
await expect(tabButtonsTop.getByRole('button')).toHaveCount(3);
13+
await expect(page.getByRole('button', { name: 'app.tsx' })).toBeVisible();
14+
await expect(page.getByRole('button', { name: 'entry.server.tsx' })).toBeVisible();
15+
await expect(page.getByRole('button', { name: 'root.tsx' })).toBeVisible();
16+
17+
const tabButtonsBottom = page.getByText('AppHTMLSymbolsClient');
18+
await expect(tabButtonsBottom.getByRole('button')).toHaveCount(6);
19+
await expect(tabButtonsBottom.getByRole('button', { name: 'App' })).toBeVisible();
20+
await expect(tabButtonsBottom.getByRole('button', { name: 'HTML' })).toBeVisible();
21+
await expect(tabButtonsBottom.getByRole('button', { name: 'Symbols' })).toBeVisible();
22+
await expect(tabButtonsBottom.getByRole('button', { name: 'Client Bundles' })).toBeVisible();
23+
await expect(tabButtonsBottom.getByRole('button', { name: 'SSR Module' })).toBeVisible();
24+
await expect(tabButtonsBottom.getByRole('button', { name: 'Diagnostics' })).toBeVisible();
25+
26+
const consoleTabBottom = page.getByText('ConsoleOptions');
27+
await expect(consoleTabBottom.getByRole('button')).toHaveCount(2);
28+
await expect(consoleTabBottom.getByRole('button', { name: 'Console' })).toBeVisible();
29+
await expect(consoleTabBottom.getByRole('button', { name: 'Options' })).toBeVisible();
30+
});
31+
32+
test('Hello world app loads', async ({ page }) => {
33+
const spinner = page.locator('.repl-spinner');
34+
await expect(spinner).toBeVisible();
35+
await page.waitForTimeout(1500);
36+
await expect(spinner).not.toBeVisible();
37+
const appText = page
38+
.getByRole('main')
39+
.locator('iframe')
40+
.contentFrame()
41+
.locator('iframe')
42+
.contentFrame()
43+
.getByText('Hello Qwik');
44+
await expect(appText).toBeVisible();
45+
});
46+
47+
test('Hello World app.tsx loads', async ({ page }) => {
48+
const text = page
49+
.getByRole('code')
50+
.locator('div')
51+
.filter({ hasText: 'return <p>Hello Qwik</p>;' })
52+
.nth(4);
53+
await expect(text).toBeVisible();
54+
});
55+
56+
test('Hello World update p tag', async ({ page }) => {
57+
const text = page
58+
.getByRole('code')
59+
.locator('div')
60+
.filter({ hasText: 'return <p>Hello Qwik</p>;' })
61+
.nth(4);
62+
await expect(text).toBeVisible();
63+
await text.click();
64+
await page.keyboard.press('Home');
65+
await page.keyboard.press('Shift+End');
66+
67+
await page.keyboard.type('return <p>Hello Test 1234</p>;');
68+
await page.waitForTimeout(1000);
69+
await expect(text).not.toBeVisible();
70+
71+
const appText = page
72+
.getByRole('main')
73+
.locator('iframe')
74+
.first()
75+
.contentFrame()
76+
.locator('iframe')
77+
.first()
78+
.contentFrame()
79+
.getByText('Hello Test 1234');
80+
await expect(appText).toBeVisible();
81+
});
82+
83+
test('Hello World entry.server.tsx tab works', async ({ page }) => {
84+
const button = page.getByRole('button', { name: 'entry.server.tsx' });
85+
await expect(button).toBeVisible();
86+
await button.click();
87+
88+
const root = page
89+
.getByRole('code')
90+
.locator('div')
91+
.filter({ hasText: "import { Root } from './root';" })
92+
.nth(4);
93+
await expect(root).toBeVisible();
94+
});
95+
96+
test('Hello World root.tsx tab works', async ({ page }) => {
97+
const button = page.getByRole('button', { name: 'root.tsx' });
98+
await expect(button).toBeVisible();
99+
await button.click();
100+
const app = page
101+
.getByRole('code')
102+
.locator('div')
103+
.filter({ hasText: "import App from './app';" })
104+
.nth(4);
105+
await expect(app).toBeVisible();
106+
});
107+
108+
test('Hello world HTML Button', async ({ page }) => {
109+
const htmlButton = page.getByRole('button', { name: 'HTML' });
110+
await expect(htmlButton).toBeVisible();
111+
await htmlButton.click();
112+
const htmlCode = page.locator('pre.language-markup');
113+
114+
await expect(htmlCode).toBeVisible({ timeout: 5000 });
115+
await expect(htmlCode).toContainText('<!DOCTYPE html>');
116+
});
117+
118+
test('Hello world Symbols Button', async ({ page }) => {
119+
const button = page.getByRole('button', { name: 'Symbols' });
120+
await expect(button).toBeVisible();
121+
await button.click();
122+
await page.waitForTimeout(3000);
123+
const symbolsText = page.getByText('import { _jsxQ } from');
124+
await expect(symbolsText).toBeVisible();
125+
});
126+
127+
test('Hello world Client Bundles Button', async ({ page }) => {
128+
const button = page.getByRole('button', { name: 'Client Bundles' });
129+
await expect(button).toBeVisible();
130+
await button.click();
131+
await page.waitForTimeout(1000);
132+
const bundles = page.locator('#file-modules-client-modules').getByText('build/app.js');
133+
await expect(bundles).toBeVisible();
134+
});
135+
136+
test('Hello world SSR Module Button', async ({ page }) => {
137+
const button = page.getByRole('button', { name: 'SSR Module' });
138+
await expect(button).toBeVisible();
139+
await button.click();
140+
await page.waitForTimeout(1000);
141+
142+
const module = page.locator('#file-modules-client-modules').getByText('entry.server.js');
143+
await expect(module).toBeVisible();
144+
});
145+
146+
test('Hello world Diagnostics Button', async ({ page }) => {
147+
const button = page.getByRole('button', { name: 'Diagnostics' });
148+
await expect(button).toBeVisible();
149+
await button.click();
150+
await page.waitForTimeout(100);
151+
152+
const diagnostics = page.locator('.output-result.output-diagnostics');
153+
await expect(diagnostics).toBeVisible();
154+
await expect(diagnostics).toHaveText('- No Reported Diagnostics -');
155+
});
156+
157+
test('Hello world Console', async ({ page }) => {
158+
const button = page.getByRole('button', { name: 'Console' });
159+
await expect(button).toBeVisible();
160+
const serverConsoleText = page.getByText('🔴 Paused in server');
161+
await expect(serverConsoleText).toBeVisible();
162+
});
163+
164+
test('Hello world Options Button', async ({ page }) => {
165+
const button = page.getByRole('button', { name: 'Options' });
166+
await expect(button).toBeVisible();
167+
await button.click();
168+
await page.waitForTimeout(100);
169+
170+
const serverConsoleText = page.getByText('🔴 Paused in server');
171+
await expect(serverConsoleText).not.toBeVisible();
172+
const DebugCheckBox = page.locator('label').filter({ hasText: 'Debug' });
173+
await expect(DebugCheckBox).toBeVisible();
174+
await expect(DebugCheckBox).not.toBeChecked();
175+
});
176+
});

0 commit comments

Comments
 (0)