e2e: make sure we start every test with clean state

This commit is contained in:
Yann Braga 2023-08-01 14:34:21 +02:00
parent 0057098646
commit b47521d36a
6 changed files with 27 additions and 20 deletions

View File

@ -3,7 +3,7 @@ import process from 'process';
import { SbPage } from './util';
const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
const templateName = process.env.STORYBOOK_TEMPLATE_NAME;
const templateName = process.env.STORYBOOK_TEMPLATE_NAME || '';
test.describe('addon-backgrounds', () => {
test.beforeEach(async ({ page }) => {

View File

@ -83,7 +83,7 @@ test.describe('addon-docs', () => {
});
test('should provide source snippet', async ({ page }) => {
// templateName is e.g. 'Vue-CLI (Default JS)'
// templateName is e.g. 'vue-cli/default-js'
test.skip(
/^(vue3|vue-cli|preact)/i.test(`${templateName}`),
`Skipping ${templateName}, which does not support dynamic source snippets`

View File

@ -12,9 +12,8 @@ test.describe('addon-interactions', () => {
await new SbPage(page).waitUntilLoaded();
});
// FIXME: skip xxx
test('should have interactions', async ({ page }) => {
// templateName is e.g. 'Vue-CLI (Default JS)'
// templateName is e.g. 'vue-cli/default-js'
test.skip(
// eslint-disable-next-line jest/valid-title
/^(lit)/i.test(`${templateName}`),
@ -43,7 +42,7 @@ test.describe('addon-interactions', () => {
});
test('should step through interactions', async ({ page }) => {
// templateName is e.g. 'Vue-CLI (Default JS)'
// templateName is e.g. 'vue-cli/default-js'
test.skip(
// eslint-disable-next-line jest/valid-title
/^(lit)/i.test(`${templateName}`),
@ -105,18 +104,6 @@ test.describe('addon-interactions', () => {
await expect(interactionsTab).toBeVisible();
await expect(interactionsTab.getByText('3')).toBeVisible();
// After debugging I found that sometimes the toolbar gets hidden, maybe some keypress or session storage issue?
// if the toolbar is hidden, this will toggle the toolbar
if (await page.locator('[offset="40"]').isHidden()) {
await page.locator('html').press('t');
}
// After debugging I found that sometimes the toolbar gets hidden, maybe some keypress or session storage issue?
// if the toolbar is hidden, this will toggle the toolbar
if (await page.locator('[offset="40"]').isHidden()) {
await page.locator('html').press('t');
}
// Test remount state (from toolbar) - Interactions have rerun, count is correct and values are as expected
const remountComponentButton = await page.locator('[title="Remount component"]');
await remountComponentButton.click();

View File

@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test';
import process from 'process';
const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
const templateName = process.env.STORYBOOK_TEMPLATE_NAME;
const templateName = process.env.STORYBOOK_TEMPLATE_NAME || '';
test.describe('JSON files', () => {
test.beforeEach(async ({ page }) => {

View File

@ -14,10 +14,19 @@ test.describe('preview-web', () => {
test('should pass over shortcuts, but not from play functions, story', async ({ page }) => {
const sbPage = new SbPage(page);
await sbPage.deepLinkToStory(storybookUrl, 'lib/preview-api/shortcuts', 'keydown-during-play');
await expect(sbPage.page.locator('.sidebar-container')).toBeVisible();
await sbPage.previewRoot().locator('button').press('s');
// wait for the play function to complete
await sbPage.viewAddonPanel('Interactions');
const interactionsTab = await page.locator('#tabbutton-storybook-interactions-panel');
await expect(interactionsTab).toBeVisible();
const panel = sbPage.panelContent();
const runStatusBadge = await panel.locator('[aria-label="Status of the test run"]');
await expect(runStatusBadge).toContainText(/Pass/);
// click outside, to remove focus from the input of the story, then press S to toggle sidebar
await sbPage.previewRoot().click();
await sbPage.previewRoot().press('s');
await expect(sbPage.page.locator('.sidebar-container')).not.toBeVisible();
});

View File

@ -54,6 +54,17 @@ export class SbPage {
}
async waitUntilLoaded() {
// make sure we start every test with clean state to avoid possible flakyness
await this.page.context().addInitScript(() => {
const storeState = {
layout: {
showToolbar: true,
showNav: true,
showPanel: true,
},
};
window.sessionStorage.setItem('@storybook/manager/store', JSON.stringify(storeState));
}, {});
const root = this.previewRoot();
const docsLoadingPage = root.locator('.sb-preparing-docs');
const storyLoadingPage = root.locator('.sb-preparing-story');