Skip to content

test(website): add Playwright test for Playground linting #6080

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Nov 25, 2022
Merged

test(website): add Playwright test for Playground linting #6080

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a05aceb
test(website): add Playwright test for Playground linting
JoshuaKGoldberg Nov 24, 2022
ab2189b
Update packages/website/playwright.config.ts
JoshuaKGoldberg Nov 24, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/website/playwright.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ const config: PlaywrightTestConfig = {
webServer: {
command: 'yarn start',
port: 3000,
reuseExistingServer: !process.env.CI,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not strictly necessary for this PR, but really nice when working locally 😄.

https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests

},
workers: process.env.CI ? 1 : undefined,
};
Expand Down
8 changes: 6 additions & 2 deletions packages/website/src/components/config/ConfigEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,8 +129,12 @@ function ConfigEditor(props: ConfigEditorProps): JSX.Element {
<label className={styles.searchResult} key={item.key}>
<span className={styles.searchResultDescription}>
<span className={styles.searchResultName}>{item.key}</span>
{item.label && <br />}
{item.label && <span>{item.label}</span>}
{item.label && (
<>
<br />
<span> {item.label}</span>
</>
)}
</span>
{item.type === 'boolean' && (
<Checkbox
Expand Down
65 changes: 65 additions & 0 deletions packages/website/tests/playground.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import AxeBuilder from '@axe-core/playwright';
import type { Page } from '@playwright/test';
import { expect, test } from '@playwright/test';

test.describe('Playground', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/play');
});

test('Accessibility', async ({ page }) => {
await new AxeBuilder({ page }).analyze();
});

test('Usage', async ({ page }) => {
// 1. Type some valid code in the playground
await writeInEditor(page, 'let value: string[];');

// 2. Enable a lint rule
await page.getByRole('tab', { name: 'eslintrc' }).click();
await page.getByRole('button', { name: 'Visual Editor' }).click();
await page
.getByLabel(
'@typescript-eslint/array-type Require consistently using either `T[]` or `Array<T>` for arrays',
)
.check();
await page.getByRole('button', { name: 'Close' }).click();

// 3. Make sure it still says "All is ok!"
await expect(page.getByText('All is ok!')).toBeVisible();

// 4. Change the code to violate the lint rule
await page.getByRole('tab', { name: 'code' }).click();
await writeInEditor(page, 'let value: Array<string>;');

// 5. Make sure it now says the complaint
await expect(
page.getByText(
`Array type using 'Array<string>' is forbidden. Use 'string[]' instead. 1:12 - 1:25`,
),
).toBeVisible();

// 6. Press the 'fix' button to autofix that complaint
await page.getByRole('button', { name: 'fix' }).click();

// 7. Make sure the code is updated, and it says "All is ok!"
await expect(page.getByText('let value: string[];')).toBeVisible();
await expect(page.getByText('All is ok!')).toBeVisible();
});
});

async function writeInEditor(page: Page, text: string): Promise<void> {
const monacoEditor = page.locator('.monaco-editor').nth(0);
await monacoEditor.click();

// Select all existing text and delete it first...
await page.keyboard.down('Control');
await page.keyboard.down('A');
await page.keyboard.up('Control');
await page.keyboard.up('A');
await page.keyboard.down('Delete');
await page.keyboard.up('Delete');

// ...and then type in the text
await page.keyboard.type(text);
}