forked from clerk/javascript
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathappearance.test.ts
More file actions
54 lines (48 loc) · 1.71 KB
/
Copy pathappearance.test.ts
File metadata and controls
54 lines (48 loc) · 1.71 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
import { expect, test } from '@playwright/test';
import type { Application } from '../models/application';
import { appConfigs } from '../presets';
import { createTestUtils } from '../testUtils';
test.describe('appearance prop', () => {
test.describe.configure({ mode: 'parallel' });
let app: Application;
test.beforeAll(async () => {
app = await appConfigs.react.vite
.clone()
.addFile(
'src/App.tsx',
({ tsx }) => tsx`
import { SignIn, SignUp } from '@clerk/clerk-react';
import { dark, neobrutalism, shadesOfPurple } from '@clerk/themes';
const themes = { shadesOfPurple, neobrutalism, dark };
export default function App() {
const elements = ['shadesOfPurple', 'neobrutalism', 'dark']
// deterministic order
.map(name => [name, themes[name]])
.map(([name, theme]) => {
return (
<div key={name}>
<h2>{name}</h2>
<SignIn appearance={{ baseTheme: theme }} />
<SignUp appearance={{ baseTheme: theme }} />
</div>
);
});
return <main>{elements}</main>;
}`,
)
.commit();
await app.setup();
await app.withEnv(appConfigs.envs.withEmailCodes);
await app.dev();
});
test.afterAll(async () => {
await app.teardown();
});
test('all @clerk/themes render', async ({ page }) => {
const u = createTestUtils({ app, page });
await u.page.goToAppHome();
await u.po.signIn.waitForMounted();
await u.po.signUp.waitForMounted();
await expect(page).toHaveScreenshot({ fullPage: true });
});
});