mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-07 22:42:05 +08:00
92 lines
3.2 KiB
TypeScript
92 lines
3.2 KiB
TypeScript
/* eslint-disable jest/no-disabled-tests */
|
|
import { test, expect } from '@playwright/test';
|
|
import process from 'process';
|
|
import { SbPage } from './util';
|
|
|
|
const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:6006';
|
|
const templateName = process.env.STORYBOOK_TEMPLATE_NAME;
|
|
|
|
test.beforeEach(async ({ page }) => {
|
|
await page.goto(storybookUrl);
|
|
await new SbPage(page).waitUntilLoaded();
|
|
});
|
|
|
|
test.describe('Svelte', () => {
|
|
test.skip(
|
|
// eslint-disable-next-line jest/valid-title
|
|
!templateName?.includes('svelte'),
|
|
'Only run this test on Svelte'
|
|
);
|
|
|
|
test('JS story has auto-generated args table', async ({ page }) => {
|
|
const sbPage = new SbPage(page);
|
|
|
|
await sbPage.navigateToStory('stories/renderers/svelte/js-docs', 'docs');
|
|
const root = sbPage.previewRoot();
|
|
const argsTable = root.locator('.docblock-argstable');
|
|
await expect(argsTable).toContainText('Rounds the button');
|
|
});
|
|
|
|
test('TS story has auto-generated args table', async ({ page }) => {
|
|
// eslint-disable-next-line jest/valid-title
|
|
test.skip(!templateName?.endsWith('ts') || false, 'Only test TS story in TS templates');
|
|
const sbPage = new SbPage(page);
|
|
|
|
await sbPage.navigateToStory('stories/renderers/svelte/ts-docs', 'docs');
|
|
const root = sbPage.previewRoot();
|
|
const argsTable = root.locator('.docblock-argstable');
|
|
await expect(argsTable).toContainText('Rounds the button');
|
|
});
|
|
|
|
test('Decorators are excluded from generated source code', async ({ page }) => {
|
|
const sbPage = new SbPage(page);
|
|
|
|
await sbPage.navigateToStory('stories/renderers/svelte/slot-decorators', 'docs');
|
|
const root = sbPage.previewRoot();
|
|
const showCodeButton = (await root.locator('button', { hasText: 'Show Code' }).all())[0];
|
|
await showCodeButton.click();
|
|
const sourceCode = root.locator('pre.prismjs');
|
|
const expectedSource = '<ButtonJavaScript primary/>';
|
|
await expect(sourceCode.textContent()).resolves.toContain(expectedSource);
|
|
});
|
|
|
|
test('Decorators runs only once', async ({ page }) => {
|
|
const sbPage = new SbPage(page);
|
|
const lines: string[] = [];
|
|
page.on('console', (msg) => {
|
|
lines.push(msg.text());
|
|
});
|
|
|
|
await sbPage.navigateToStory('stories/renderers/svelte/decorators-runs-once', 'default');
|
|
expect(lines).toHaveLength(1);
|
|
});
|
|
});
|
|
|
|
test.describe('SvelteKit', () => {
|
|
test.skip(
|
|
// eslint-disable-next-line jest/valid-title
|
|
!templateName?.includes('svelte-kit'),
|
|
'Only run this test on SvelteKit'
|
|
);
|
|
|
|
test('Links are logged in Actions panel', async ({ page }) => {
|
|
const sbPage = new SbPage(page);
|
|
|
|
await sbPage.navigateToStory('stories/sveltekit/modules/hrefs', 'default-actions');
|
|
const root = sbPage.previewRoot();
|
|
const link = root.locator('a', { hasText: 'Link to /basic-href' });
|
|
await link.click();
|
|
|
|
await sbPage.viewAddonPanel('Actions');
|
|
const basicLogItem = await page.locator('#storybook-panel-root #panel-tab-content', {
|
|
hasText: `/basic-href`,
|
|
});
|
|
|
|
await expect(basicLogItem).toBeVisible();
|
|
const complexLogItem = await page.locator('#storybook-panel-root #panel-tab-content', {
|
|
hasText: `/deep/nested`,
|
|
});
|
|
await expect(complexLogItem).toBeVisible();
|
|
});
|
|
});
|