From 1900602dcf72f465439d6704a2a48c4b1bedd9eb Mon Sep 17 00:00:00 2001 From: Armagan Ersoz Date: Mon, 6 Mar 2023 16:10:39 +1000 Subject: [PATCH 1/6] Hidden: rename -> and reformat stories and add e2e tests --- docs/content/drafts/Hidden.mdx | 4 +- docs/content/drafts/PageHeader.mdx | 4 +- e2e/components/Hidden.test.ts | 43 +++++++++++++++++++ script/generate-e2e-tests.js | 11 +++++ src/Hidden/Hidden.docs.json | 2 +- ...tories.tsx => Hidden.examples.stories.tsx} | 10 ++--- src/Hidden/Hidden.features.stories.tsx | 29 +++++++++++++ src/Hidden/Hidden.stories.tsx | 12 ++++-- src/Hidden/Hidden.test.tsx | 26 +++++------ src/Hidden/Hidden.tsx | 8 ++-- src/Hidden/__snapshots__/Hidden.test.tsx.snap | 6 +-- src/Hidden/features.stories.tsx | 29 ------------- .../PageHeader.examples.stories.tsx | 20 ++++----- .../PageHeader.features.stories.tsx | 4 +- src/PageHeader/PageHeader.stories.tsx | 8 ++-- 15 files changed, 137 insertions(+), 79 deletions(-) create mode 100644 e2e/components/Hidden.test.ts rename src/Hidden/{examples.stories.tsx => Hidden.examples.stories.tsx} (93%) create mode 100644 src/Hidden/Hidden.features.stories.tsx delete mode 100644 src/Hidden/features.stories.tsx diff --git a/docs/content/drafts/Hidden.mdx b/docs/content/drafts/Hidden.mdx index 2090bdde820..a7e6ee93adc 100644 --- a/docs/content/drafts/Hidden.mdx +++ b/docs/content/drafts/Hidden.mdx @@ -18,7 +18,7 @@ The `Hidden` component is a utility component that will help you hide or show co ### Single viewport value provided ```jsx live drafts - + ``` @@ -26,7 +26,7 @@ The `Hidden` component is a utility component that will help you hide or show co ### Multiple viewport values provided ```jsx live drafts - + ``` diff --git a/docs/content/drafts/PageHeader.mdx b/docs/content/drafts/PageHeader.mdx index 07eab16538f..44f751767bd 100644 --- a/docs/content/drafts/PageHeader.mdx +++ b/docs/content/drafts/PageHeader.mdx @@ -293,10 +293,10 @@ import {PageHeader} from '@primer/react/drafts' Webhooks - + - + diff --git a/e2e/components/Hidden.test.ts b/e2e/components/Hidden.test.ts new file mode 100644 index 00000000000..c17574ca987 --- /dev/null +++ b/e2e/components/Hidden.test.ts @@ -0,0 +1,43 @@ +import {test, expect} from '@playwright/test' +import {visit} from '../test-helpers/storybook' +import {themes} from '../test-helpers/themes' +import {viewports} from '../test-helpers/viewports' + +test.describe('Hidden', () => { + test.describe('Default', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'drafts-components-hidden--default', + globals: { + colorScheme: theme, + }, + }) + + // Default state + await page.setViewportSize({width: viewports['primer.breakpoint.md'], height: 768}) + await page + .getByText('The content is visible when the viewport is regular or wide but hidden when narrow.') + .waitFor() + expect(await page.screenshot()).toMatchSnapshot(`Hidden.Default.medium.${theme}.png`) + await page.setViewportSize({width: viewports['primer.breakpoint.lg'], height: 768}) + await page + .getByText('The content is visible when the viewport is regular or wide but hidden when narrow.') + .waitFor() + expect(await page.screenshot()).toMatchSnapshot(`Hidden.Default.wide.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'drafts-components-hidden--default', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations() + }) + }) + } + }) +}) diff --git a/script/generate-e2e-tests.js b/script/generate-e2e-tests.js index c5093b7926a..5fd49234d4c 100644 --- a/script/generate-e2e-tests.js +++ b/script/generate-e2e-tests.js @@ -374,6 +374,17 @@ const components = new Map([ ], }, ], + [ + 'Hidden', + { + stories: [ + { + id: 'drafts-components-hidden--default', + name: 'Default', + }, + ], + }, + ], [ 'IconButton', { diff --git a/src/Hidden/Hidden.docs.json b/src/Hidden/Hidden.docs.json index 3816f52e391..0c4b3a0d3e0 100644 --- a/src/Hidden/Hidden.docs.json +++ b/src/Hidden/Hidden.docs.json @@ -6,7 +6,7 @@ "stories": [], "props": [ { - "name": "on", + "name": "when", "type": "'narrow' | 'wide' | 'regular' | Array<'narrow' | 'regular' | 'wide'>", "defaultValue": "", "description": "In which viewport(s) the children are going to be hidden" diff --git a/src/Hidden/examples.stories.tsx b/src/Hidden/Hidden.examples.stories.tsx similarity index 93% rename from src/Hidden/examples.stories.tsx rename to src/Hidden/Hidden.examples.stories.tsx index b6d9b62ef92..39a1fcef230 100644 --- a/src/Hidden/examples.stories.tsx +++ b/src/Hidden/Hidden.examples.stories.tsx @@ -4,7 +4,7 @@ import {Button, Link, Text, StateLabel, BranchName, Box} from '..' import {ArrowRightIcon} from '@primer/octicons-react' import {PageHeader} from '../PageHeader' -import Hidden from '../Hidden' +import Hidden from '.' export default { title: 'Drafts/Components/Hidden/Examples', @@ -30,11 +30,11 @@ export const Webhooks = () => ( Webhooks - + - + @@ -60,7 +60,7 @@ export const PullRequestPage = () => ( Open - + broccolinisoup @@ -69,7 +69,7 @@ export const PullRequestPage = () => ( broccolinisoup/add-hidden-component - + main diff --git a/src/Hidden/Hidden.features.stories.tsx b/src/Hidden/Hidden.features.stories.tsx new file mode 100644 index 00000000000..f6cbcaf8752 --- /dev/null +++ b/src/Hidden/Hidden.features.stories.tsx @@ -0,0 +1,29 @@ +import {ComponentMeta} from '@storybook/react' +import React from 'react' +import {Hidden} from './Hidden' +import {Box, Button} from '..' + +export default { + title: 'Drafts/Components/Hidden/Features', + component: Hidden, +} as ComponentMeta