mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-05 16:11:33 +08:00
261 lines
11 KiB
TypeScript
261 lines
11 KiB
TypeScript
import { expect, test } from '@playwright/test';
|
|
import process from 'process';
|
|
|
|
import { SbPage } from './util';
|
|
|
|
const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
|
|
const templateName = process.env.STORYBOOK_TEMPLATE_NAME;
|
|
|
|
test.describe('Manager UI', () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
await page.goto(storybookUrl);
|
|
|
|
await new SbPage(page, expect).waitUntilLoaded();
|
|
});
|
|
|
|
test.describe('Desktop', () => {
|
|
// TODO: test dragging and resizing
|
|
|
|
test('Sidebar toggling', async ({ page }) => {
|
|
const sbPage = new SbPage(page, expect);
|
|
|
|
await expect(sbPage.page.locator('.sidebar-container')).toBeVisible();
|
|
|
|
// toggle with keyboard shortcut
|
|
await sbPage.page.locator('html').press('Alt+s');
|
|
await expect(sbPage.page.locator('.sidebar-container')).toBeHidden();
|
|
await sbPage.page.locator('html').press('Alt+s');
|
|
await expect(sbPage.page.locator('.sidebar-container')).toBeVisible();
|
|
|
|
// toggle with menu item
|
|
await sbPage.page.locator('[aria-label="Shortcuts"]').click();
|
|
await sbPage.page.locator('#list-item-S').click();
|
|
await expect(sbPage.page.locator('.sidebar-container')).toBeHidden();
|
|
|
|
// toggle with "show sidebar" button
|
|
await sbPage.page.locator('[aria-label="Show sidebar"]').click();
|
|
await expect(sbPage.page.locator('.sidebar-container')).toBeVisible();
|
|
});
|
|
|
|
test('Toolbar toggling', async ({ page }) => {
|
|
const sbPage = new SbPage(page, expect);
|
|
const expectToolbarVisibility = async (visible: boolean) => {
|
|
await expect(async () => {
|
|
const toolbar = sbPage.page.locator(`[data-test-id="sb-preview-toolbar"]`);
|
|
const marginTop = await toolbar.evaluate(
|
|
(element) => window.getComputedStyle(element).marginTop
|
|
);
|
|
expect(marginTop).toBe(visible ? '0px' : '-40px');
|
|
}).toPass({ intervals: [400] });
|
|
};
|
|
|
|
await expectToolbarVisibility(true);
|
|
|
|
// toggle with keyboard shortcut
|
|
await sbPage.page.locator('html').press('Alt+t');
|
|
await expectToolbarVisibility(false);
|
|
await sbPage.page.locator('html').press('Alt+t');
|
|
await expectToolbarVisibility(true);
|
|
|
|
// toggle with menu item
|
|
await sbPage.page.locator('[aria-label="Shortcuts"]').click();
|
|
await sbPage.page.locator('#list-item-T').click();
|
|
await expectToolbarVisibility(false);
|
|
await sbPage.page.locator('[aria-label="Shortcuts"]').click();
|
|
await sbPage.page.locator('#list-item-T').click();
|
|
await expectToolbarVisibility(true);
|
|
});
|
|
|
|
test.describe('Panel', () => {
|
|
test('Hidden in docs view', async ({ page }) => {
|
|
const sbPage = new SbPage(page, expect);
|
|
|
|
// navigate to docs to hide panel
|
|
await sbPage.navigateToStory('example/button', 'docs');
|
|
|
|
await expect(sbPage.page.locator('#storybook-panel-root')).toBeHidden();
|
|
|
|
// toggle with keyboard shortcut
|
|
await sbPage.page.locator('html').press('Alt+a');
|
|
await expect(sbPage.page.locator('#storybook-panel-root')).toBeHidden();
|
|
await sbPage.page.locator('html').press('Alt+a');
|
|
await expect(sbPage.page.locator('#storybook-panel-root')).toBeHidden();
|
|
});
|
|
|
|
test('Toggling', async ({ page }) => {
|
|
const sbPage = new SbPage(page, expect);
|
|
|
|
// navigate to story to show panel
|
|
await sbPage.navigateToStory('example/button', 'primary');
|
|
|
|
await expect(sbPage.page.locator('#storybook-panel-root')).toBeVisible();
|
|
|
|
// toggle with keyboard shortcut
|
|
await sbPage.page.locator('html').press('Alt+a');
|
|
await expect(sbPage.page.locator('#storybook-panel-root')).toBeHidden();
|
|
await sbPage.page.locator('html').press('Alt+a');
|
|
await expect(sbPage.page.locator('#storybook-panel-root')).toBeVisible();
|
|
|
|
// toggle with menu item
|
|
await sbPage.page.locator('[aria-label="Shortcuts"]').click();
|
|
await sbPage.page.locator('#list-item-A').click();
|
|
await expect(sbPage.page.locator('#storybook-panel-root')).toBeHidden();
|
|
|
|
// toggle with "show addons" button
|
|
await sbPage.page.locator('[aria-label="Show addons"]').click();
|
|
await expect(sbPage.page.locator('#storybook-panel-root')).toBeVisible();
|
|
});
|
|
|
|
test('Positioning', async ({ page }) => {
|
|
const sbPage = new SbPage(page, expect);
|
|
|
|
// navigate to story to show panel
|
|
await sbPage.navigateToStory('example/button', 'primary');
|
|
|
|
await expect(sbPage.page.locator('#storybook-panel-root')).toBeVisible();
|
|
|
|
// toggle position with keyboard shortcut
|
|
await sbPage.page.locator('html').press('Alt+d');
|
|
await expect(sbPage.page.locator('#storybook-panel-root')).toBeVisible();
|
|
// TODO: how to assert panel position?
|
|
|
|
// hide with keyboard shortcut
|
|
await sbPage.page.locator('html').press('Alt+a');
|
|
await expect(sbPage.page.locator('#storybook-panel-root')).toBeHidden();
|
|
|
|
// toggling position should also show the panel again
|
|
await sbPage.page.locator('html').press('Alt+d');
|
|
await expect(sbPage.page.locator('#storybook-panel-root')).toBeVisible();
|
|
});
|
|
});
|
|
|
|
test('Fullscreen toggling', async ({ page }) => {
|
|
const sbPage = new SbPage(page, expect);
|
|
|
|
// navigate to story to show panel
|
|
await sbPage.navigateToStory('example/button', 'primary');
|
|
|
|
await expect(sbPage.page.locator('#storybook-panel-root')).toBeVisible();
|
|
await expect(sbPage.page.locator('.sidebar-container')).toBeVisible();
|
|
|
|
// toggle with keyboard shortcut
|
|
await sbPage.page.locator('html').press('Alt+f');
|
|
await expect(sbPage.page.locator('#storybook-panel-root')).toBeHidden();
|
|
await expect(sbPage.page.locator('.sidebar-container')).toBeHidden();
|
|
|
|
await sbPage.page.locator('html').press('Alt+f');
|
|
await expect(sbPage.page.locator('#storybook-panel-root')).toBeVisible();
|
|
await expect(sbPage.page.locator('.sidebar-container')).toBeVisible();
|
|
|
|
// toggle with menu item
|
|
await sbPage.page.locator('[aria-label="Shortcuts"]').click();
|
|
await sbPage.page.locator('#list-item-F').click();
|
|
await expect(sbPage.page.locator('.sidebar-container')).toBeHidden();
|
|
await expect(sbPage.page.locator('#storybook-panel-root')).toBeHidden();
|
|
|
|
// toggle with "go/exit fullscreen" button
|
|
await sbPage.page.locator('[aria-label="Exit full screen"]').click();
|
|
await expect(sbPage.page.locator('#storybook-panel-root')).toBeVisible();
|
|
await expect(sbPage.page.locator('.sidebar-container')).toBeVisible();
|
|
|
|
await sbPage.page.locator('[aria-label="Go full screen"]').click();
|
|
await expect(sbPage.page.locator('#storybook-panel-root')).toBeHidden();
|
|
await expect(sbPage.page.locator('.sidebar-container')).toBeHidden();
|
|
|
|
// go fullscreen when sidebar is shown but panel is hidden
|
|
await sbPage.page.locator('[aria-label="Show sidebar"]').click();
|
|
await sbPage.page.locator('[aria-label="Go full screen"]').click();
|
|
await expect(sbPage.page.locator('#storybook-panel-root')).toBeHidden();
|
|
await expect(sbPage.page.locator('.sidebar-container')).toBeHidden();
|
|
|
|
// go fullscreen when panel is shown but sidebar is hidden
|
|
await sbPage.page.locator('[aria-label="Show addons"]').click();
|
|
await sbPage.page.locator('[aria-label="Go full screen"]').click();
|
|
await expect(sbPage.page.locator('#storybook-panel-root')).toBeHidden();
|
|
await expect(sbPage.page.locator('.sidebar-container')).toBeHidden();
|
|
});
|
|
|
|
test('Settings page', async ({ page }) => {
|
|
const sbPage = new SbPage(page, expect);
|
|
await sbPage.page.locator('[aria-label="Shortcuts"]').click();
|
|
await sbPage.page.locator('#list-item-about').click();
|
|
|
|
await expect(sbPage.page.url()).toContain('/settings/about');
|
|
|
|
await expect(sbPage.page.locator('#storybook-panel-root')).toBeHidden();
|
|
|
|
await sbPage.page.locator('[title="Close settings page"]').click();
|
|
await expect(sbPage.page.url()).not.toContain('/settings/about');
|
|
});
|
|
});
|
|
|
|
test.describe('Mobile', () => {
|
|
test.describe.configure({ retries: 3 });
|
|
// TODO: remove this when SSV6 templates have been removed
|
|
// Some assertions in these tests are not compatible with SSV6
|
|
// GIven that SSV6 will be removed before the new mobile UI released, it doesn't make sense to fix them
|
|
test.skip(templateName?.includes('ssv6') || false, 'Skip mobile UI tests for SSV6');
|
|
|
|
// standard iPhone viewport size
|
|
test.use({ viewport: { width: 390, height: 844 } });
|
|
|
|
test('Navigate to story', async ({ page }) => {
|
|
const sbPage = new SbPage(page, expect);
|
|
|
|
const closeNavigationButton = sbPage.page.locator('[title="Close navigation menu"]');
|
|
const mobileNavigationHeading = sbPage.page.locator('[title="Open navigation menu"]');
|
|
|
|
// navigation menu is closed
|
|
await expect(closeNavigationButton).toBeHidden();
|
|
await expect(sbPage.page.locator('#storybook-explorer-menu')).toBeHidden();
|
|
|
|
// open navigation menu
|
|
await mobileNavigationHeading.click();
|
|
|
|
await sbPage.openComponent('Example/Button');
|
|
|
|
// navigation menu is still open
|
|
await expect(sbPage.page.locator('#storybook-explorer-menu')).toBeVisible();
|
|
// story has not changed
|
|
await expect(sbPage.page.url()).toContain('configure-your-project');
|
|
|
|
await sbPage.navigateToStory('Example/Button', 'Secondary');
|
|
|
|
// navigation menu is closed
|
|
await expect(mobileNavigationHeading).toHaveText('Example/Button/Secondary');
|
|
await expect(sbPage.page.locator('#storybook-explorer-menu')).toBeHidden();
|
|
// story has changed
|
|
await expect(sbPage.page.url()).toContain('example-button--secondary');
|
|
});
|
|
|
|
test('Open and close addon panel', async ({ page }) => {
|
|
const sbPage = new SbPage(page, expect);
|
|
|
|
const mobileNavigationHeading = sbPage.page.locator('[title="Open navigation menu"]');
|
|
await mobileNavigationHeading.click();
|
|
await sbPage.navigateToStory('Example/Button', 'Secondary');
|
|
|
|
// panel is closed
|
|
await expect(mobileNavigationHeading).toHaveText('Example/Button/Secondary');
|
|
await expect(sbPage.page.locator('#tabbutton-addon-controls')).toBeHidden();
|
|
|
|
// open panel
|
|
await sbPage.page.locator('[title="Open addon panel"]').click();
|
|
|
|
const addonsMenuButton = sbPage.page.locator('#addons-menu-button');
|
|
await expect(addonsMenuButton).toBeVisible();
|
|
await addonsMenuButton.click();
|
|
|
|
// panel is open
|
|
await expect(sbPage.page.locator('#list-item-addon-controls')).toBeVisible();
|
|
|
|
// close panel
|
|
await sbPage.page.locator('[title="Close addon panel"]').click();
|
|
|
|
// panel is closed
|
|
await expect(mobileNavigationHeading).toHaveText('Example/Button/Secondary');
|
|
await expect(sbPage.page.locator('#tabbutton-addon-controls')).toBeHidden();
|
|
});
|
|
});
|
|
});
|