Skip to content

Commit

Permalink
add dev only story and VRT test and fix unit tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@broccolinisoup
broccolinisoup committed Dec 15, 2023
1 parent 22a1613 commit 92799a8
Show file tree
Hide file tree
Showing 5 changed files with 106 additions and 57 deletions.
34 changes: 34 additions & 0 deletions e2e/components/PageHeader.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -673,4 +673,38 @@ test.describe('PageHeader', () => {
})
}
})

test.describe('Large Variant with Multiline Title', () => {
for (const theme of themes) {
test.describe(theme, () => {
test('default @vrt', async ({page}) => {
await visit(page, {
id: 'drafts-components-pageheader-devonly--large-variant-with-multiline-title',
globals: {
colorScheme: theme,
},
})

// Default state
expect(await page.screenshot()).toMatchSnapshot(`PageHeader.Large Variant with Multiline Title.${theme}.png`)
})

test('axe @aat', async ({page}) => {
await visit(page, {
id: 'drafts-components-pageheader-devonly--large-variant-with-multiline-title',
globals: {
colorScheme: theme,
},
})
await expect(page).toHaveNoViolations({
rules: {
'color-contrast': {
enabled: theme !== 'dark_dimmed',
},
},
})
})
})
}
})
})
4 changes: 4 additions & 0 deletions script/generate-e2e-tests.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -871,6 +871,10 @@ const components = new Map([
id: 'drafts-components-pageheader-features--with-parent-link-and-actions-of-context-area',
name: 'With Parent Link and Actions of Context Area',
},
{
id: 'drafts-components-pageheader-devonly--large-variant-with-multiline-title',
name: 'Large Variant with Multiline Title',
},
],
},
],
Expand Down
43 changes: 43 additions & 0 deletions src/PageHeader/PageHeader.dev.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import React from 'react'
import {Meta} from '@storybook/react'
import {Button, IconButton, Box} from '..'
import Label from '../Label'
import {GitBranchIcon, PencilIcon, SidebarExpandIcon} from '@primer/octicons-react'

import {PageHeader} from './PageHeader'

export default {
title: 'Drafts/Components/PageHeader/DevOnly',
parameters: {
layout: 'fullscreen',
controls: {expanded: true},
},
} as Meta

export const LargeVariantWithMultilineTitle = () => (
<Box sx={{padding: 3}}>
<PageHeader>
<PageHeader.LeadingAction>
<IconButton aria-label="Edit" icon={PencilIcon} variant="invisible" />
</PageHeader.LeadingAction>
<PageHeader.TitleArea variant="large">
<PageHeader.LeadingVisual>
<GitBranchIcon />
</PageHeader.LeadingVisual>
<PageHeader.Title>
Title long title some extra loooong looong words here some extra loooong looong words here some extra loooong
looong words here some extra loooong looong words here some extra loooong looong words here
</PageHeader.Title>
<PageHeader.TrailingVisual>
<Label>Beta</Label>
</PageHeader.TrailingVisual>
</PageHeader.TitleArea>
<PageHeader.TrailingAction>
<IconButton aria-label="Expand sidebar" icon={SidebarExpandIcon} variant="invisible" />
</PageHeader.TrailingAction>
<PageHeader.Actions>
<Button variant="primary">Add Item</Button>
</PageHeader.Actions>
</PageHeader>
</Box>
)
34 changes: 1 addition & 33 deletions src/PageHeader/PageHeader.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import {PageHeader} from '.'
import MatchMediaMock from 'jest-matchmedia-mock'
import {behavesAsComponent, checkExports, renderStyles} from '../utils/testing'
import {IconButton} from '../Button'
import {ChevronLeftIcon, GitBranchIcon, PencilIcon, SidebarExpandIcon} from '@primer/octicons-react'
import {SidebarExpandIcon} from '@primer/octicons-react'
import {mediaQueries} from '../utils/layout'

let matchmedia: MatchMediaMock
Expand Down Expand Up @@ -158,38 +158,6 @@ describe('PageHeader', () => {
)
expect(getByText('Title')).toHaveStyle('font-size: 32px')
})
it("respects the title variant prop and updates the children components' container height accordingly", () => {
const {getByText} = render(
<PageHeader>
<PageHeader.TitleArea variant="large">
<PageHeader.LeadingVisual>
Leading Visual
<GitBranchIcon />
</PageHeader.LeadingVisual>
<PageHeader.Title>Title</PageHeader.Title>
<PageHeader.TrailingVisual>
Trailing Visual
<ChevronLeftIcon />
</PageHeader.TrailingVisual>
</PageHeader.TitleArea>
<PageHeader.ContextArea>ContextArea</PageHeader.ContextArea>
<PageHeader.LeadingAction>
Leading Action
<IconButton aria-label="Expand" icon={SidebarExpandIcon} variant="invisible" />
</PageHeader.LeadingAction>
<PageHeader.TrailingAction>
Trailing Action
<IconButton aria-label="Edit" icon={PencilIcon} variant="invisible" />
</PageHeader.TrailingAction>
</PageHeader>,
)

expect(getByText('Leading Visual')).toHaveStyle('height: 3rem')
expect(getByText('Trailing Visual')).toHaveStyle('height: 3rem')
expect(getByText('Leading Action')).toHaveStyle('height: 3rem')
expect(getByText('Trailing Action')).toHaveStyle('height: 3rem')
// add actions here
})
it('renders "aria-label" prop when Navigation is rendered as "nav" landmark', () => {
const {getByLabelText, getByText} = render(
<PageHeader>
Expand Down
48 changes: 24 additions & 24 deletions src/PageHeader/__snapshots__/PageHeader.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,23 +12,23 @@ exports[`PageHeader renders consistently 1`] = `
.c0[data-size-variant="large"] [data-component="PH_Actions"],
.c0[data-size-variant="large"] [data-component="PH_LeadingVisual"],
.c0[data-size-variant="large"] [data-component="PH_TrailingVisual"] {
height: 3rem;
height: var(--custom-height,3rem);
}
.c0[data-size-variant="medium"] [data-component="PH_LeadingAction"],
.c0[data-size-variant="medium"] [data-component="PH_TrailingAction"],
.c0[data-size-variant="medium"] [data-component="PH_Actions"],
.c0[data-size-variant="medium"] [data-component="PH_LeadingVisual"],
.c0[data-size-variant="medium"] [data-component="PH_TrailingVisual"] {
height: 2rem;
height: var(--custom-height,2rem);
}
.c0[data-size-variant="subtitle"] [data-component="PH_LeadingAction"],
.c0[data-size-variant="subtitle"] [data-component="PH_TrailingAction"],
.c0[data-size-variant="subtitle"] [data-component="PH_Actions"],
.c0[data-size-variant="subtitle"] [data-component="PH_LeadingVisual"],
.c0[data-size-variant="subtitle"] [data-component="PH_TrailingVisual"] {
height: 2rem;
height: var(--custom-height,2rem);
}
.c1 {
Expand All @@ -49,21 +49,21 @@ exports[`PageHeader renders consistently 1`] = `
}
.c1[data-size-variant="large"] [data-component="PH_Title"] {
font-size: var(--text-title-size-large,2rem);
line-height: var(--text-title-lineHeight-large,1.5);
font-weight: var(--base-text-weight-normal,400);
font-size: var(--custom-font-size,var(--text-title-size-large,2rem));
line-height: var(--custom-line-height,var(--text-title-lineHeight-large,1.5));
font-weight: var(--custom-font-weight,var(--base-text-weight-normal,400));
}
.c1[data-size-variant="medium"] [data-component="PH_Title"] {
font-size: var(--text-title-size-medium,1.25rem);
line-height: var(--text-title-lineHeight-medium,1.6);
font-weight: var(--base-text-weight-semibold,600);
font-size: var(--custom-font-size,var(--text-title-size-medium,1.25rem));
line-height: var(--custom-line-height,var(--text-title-lineHeight-medium,1.6));
font-weight: var(--custom-font-weight,var(--base-text-weight-semibold,600));
}
.c1[data-size-variant="subtitle"] [data-component="PH_Title"] {
font-size: var(--text-title-size-medium,1.25rem);
line-height: var(--text-title-lineHeight-medium,1.6);
font-weight: var(--base-text-weight-normal,400);
font-size: var(--custom-font-size,var(--text-title-size-medium,1.25rem));
line-height: var(--custom-line-height,var(--text-title-lineHeight-medium,1.6));
font-weight: var(--custom-font-weight,var(--base-text-weight-normal,400));
}
.c2 {
Expand Down Expand Up @@ -157,23 +157,23 @@ exports[`PageHeader renders default layout 1`] = `
.c0[data-size-variant="large"] [data-component="PH_Actions"],
.c0[data-size-variant="large"] [data-component="PH_LeadingVisual"],
.c0[data-size-variant="large"] [data-component="PH_TrailingVisual"] {
height: 3rem;
height: var(--custom-height,3rem);
}
.c0[data-size-variant="medium"] [data-component="PH_LeadingAction"],
.c0[data-size-variant="medium"] [data-component="PH_TrailingAction"],
.c0[data-size-variant="medium"] [data-component="PH_Actions"],
.c0[data-size-variant="medium"] [data-component="PH_LeadingVisual"],
.c0[data-size-variant="medium"] [data-component="PH_TrailingVisual"] {
height: 2rem;
height: var(--custom-height,2rem);
}
.c0[data-size-variant="subtitle"] [data-component="PH_LeadingAction"],
.c0[data-size-variant="subtitle"] [data-component="PH_TrailingAction"],
.c0[data-size-variant="subtitle"] [data-component="PH_Actions"],
.c0[data-size-variant="subtitle"] [data-component="PH_LeadingVisual"],
.c0[data-size-variant="subtitle"] [data-component="PH_TrailingVisual"] {
height: 2rem;
height: var(--custom-height,2rem);
}
.c1 {
Expand All @@ -194,21 +194,21 @@ exports[`PageHeader renders default layout 1`] = `
}
.c1[data-size-variant="large"] [data-component="PH_Title"] {
font-size: var(--text-title-size-large,2rem);
line-height: var(--text-title-lineHeight-large,1.5);
font-weight: var(--base-text-weight-normal,400);
font-size: var(--custom-font-size,var(--text-title-size-large,2rem));
line-height: var(--custom-line-height,var(--text-title-lineHeight-large,1.5));
font-weight: var(--custom-font-weight,var(--base-text-weight-normal,400));
}
.c1[data-size-variant="medium"] [data-component="PH_Title"] {
font-size: var(--text-title-size-medium,1.25rem);
line-height: var(--text-title-lineHeight-medium,1.6);
font-weight: var(--base-text-weight-semibold,600);
font-size: var(--custom-font-size,var(--text-title-size-medium,1.25rem));
line-height: var(--custom-line-height,var(--text-title-lineHeight-medium,1.6));
font-weight: var(--custom-font-weight,var(--base-text-weight-semibold,600));
}
.c1[data-size-variant="subtitle"] [data-component="PH_Title"] {
font-size: var(--text-title-size-medium,1.25rem);
line-height: var(--text-title-lineHeight-medium,1.6);
font-weight: var(--base-text-weight-normal,400);
font-size: var(--custom-font-size,var(--text-title-size-medium,1.25rem));
line-height: var(--custom-line-height,var(--text-title-lineHeight-medium,1.6));
font-weight: var(--custom-font-weight,var(--base-text-weight-normal,400));
}
.c2 {
Expand Down

0 comments on commit 92799a8

Please sign in to comment.