chore(react-infobutton): Adding vr tests for InfoButton and updating conformance tests #25682

sopranopillow · 2022-11-15T20:15:20Z

This PR adds the following:

VR tests for InfoButton.
Updating content of InfoButton in its conformance tests.

Related Issue(s)

fabricteam · 2022-11-15T20:26:24Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-components` react-components: Button, FluentProvider & webLightTheme	`62.951 kB` `17.675 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`190.427 kB` `53.087 kB`
`react-components` react-components: FluentProvider & webLightTheme	`33.456 kB` `11.029 kB`
`react-infobutton` InfoButton	`117.938 kB` `35.399 kB`
`react-portal-compat` PortalCompatProvider	`5.857 kB` `1.978 kB`

_{🤖 This report was generated against c7a1e243f8366456cb12af369ae5b749aabaec95}

codesandbox-ci · 2022-11-15T20:27:45Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 0fefe44:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

size-auditor · 2022-11-15T20:30:27Z

Asset size changes

Project	Bundle	Baseline Size	New Size	Difference
office-ui-fabric-react	fluentui-react-Pickers	279.337 kB	279.607 kB	270 bytes

Over Tolerance (1024 B) Over Baseline Below Baseline New Removed 1 kB = 1000 B

Baseline commit: c7a1e243f8366456cb12af369ae5b749aabaec95 (build)

…to infobutton/tests

behowell · 2022-11-16T18:48:57Z

apps/vr-tests-react-components/src/stories/InfoButton.stories.tsx

+
+const infoButtonContent = 'This is the content of an InfoButton.';
+
+storiesOf('InfoButton', module)


It would be good to add tests for the hover, pressed, and keyboard focused states. (As a rough guideline, VR tests should cover all of the states in useInfoButtonStyles.)

Also, it should crop to a test wrapper if possible, to reduce the size of the image.

Suggested change

storiesOf('InfoButton', module)

storiesOf('InfoButton', module)

.addDecorator(TestWrapperDecoratorFixedWidth)

.addDecorator(story => (

<Screener

steps={new Steps()

.snapshot('rest', { cropTo: '.testWrapper' })

.hover('button')

.snapshot('hover', { cropTo: '.testWrapper' })

.focus('button')

.snapshot('focus', { cropTo: '.testWrapper' })

.mouseDown('button')

.snapshot('active', { cropTo: '.testWrapper' })

.end()}

>

{story()}

</Screener>

))

You might need to split out the size stories into a separate call to storiesOf, so that the state tests only have a single InfoButton in them.

behowell · 2022-11-16T18:58:29Z

apps/vr-tests-react-components/src/stories/InfoButton.stories.tsx

+          id="show-content-small"
+          size="small"
+          content={{ children: infoButtonContent }}
+          popover={{ open: true } as PopoverProps}


It would be good to fix whatever is making it so you need this as PopoverProps cast. Ideally it should not be necessary here. This can be fixed in a separate PR though, since it's not related to this change.

apps/vr-tests-react-components/src/stories/InfoButton.stories.tsx

…to infobutton/tests

fabricteam · 2022-11-16T22:52:31Z

Perf Analysis (`@fluentui/react-components`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1581	1570	5000
Button	mount	1161	1125	5000
FluentProvider	mount	1946	1952	5000
FluentProviderWithTheme	mount	763	784	10
FluentProviderWithTheme	virtual-rerender	716	695	10
FluentProviderWithTheme	virtual-rerender-with-unmount	746	754	10
MakeStyles	mount	2251	2294	50000
SpinButton	mount	3018	3112	5000

behowell · 2022-11-17T19:02:39Z

apps/vr-tests-react-components/src/stories/InfoButton.stories.tsx

+  .addStory(
+    'size-open',
+    () => (
+      <div style={{ display: 'flex', flexDirection: 'column', padding: '60px', gap: '80px', alignItems: 'start' }}>


It looks like this padding is causing the balloon to go off the edge of the TestWrapper. Maybe change it only to top padding?

Suggested change

<div style={{ display: 'flex', flexDirection: 'column', padding: '60px', gap: '80px', alignItems: 'start' }}>

<div style={{ display: 'flex', flexDirection: 'column', paddingTop: '60px', gap: '80px', alignItems: 'start' }}>

behowell · 2022-11-17T19:03:19Z

apps/vr-tests-react-components/src/stories/InfoButton.stories.tsx

+    </Screener>
+  ))
+  .addStory(
+    'size',


Suggested change

'size',

'default',

behowell · 2022-11-17T19:04:34Z

apps/vr-tests-react-components/src/stories/InfoButton.stories.tsx

+  .addStory(
+    'size',
+    () => (
+      <div style={{ display: 'flex', flexDirection: 'column', padding: '60px', gap: '80px', alignItems: 'start' }}>
+        <InfoButton size="small" content="This is the content of an InfoButton." />
+        <InfoButton size="medium" content="This is the content of an InfoButton." />
+        <InfoButton size="large" content="This is the content of an InfoButton." />
+      </div>
+    ),
+    {
+      includeHighContrast: true,
+      includeDarkMode: true,
+    },
+  )


You can probably get away with only size-open, since the rest of the visuals are tested by the default case.

Suggested change

.addStory(

'size',

() => (

<div style={{ display: 'flex', flexDirection: 'column', padding: '60px', gap: '80px', alignItems: 'start' }}>

<InfoButton size="small" content="This is the content of an InfoButton." />

<InfoButton size="medium" content="This is the content of an InfoButton." />

<InfoButton size="large" content="This is the content of an InfoButton." />

</div>

),

{

includeHighContrast: true,

includeDarkMode: true,

},

)

behowell · 2022-11-17T19:05:48Z

apps/vr-tests-react-components/src/stories/InfoButton.stories.tsx

+    },
+  );
+
+storiesOf('InfoButton - sizes', module)


Keep this name the same so they're grouped together:

Suggested change

storiesOf('InfoButton - sizes', module)

storiesOf('InfoButton', module)

behowell · 2022-11-17T19:07:11Z

apps/vr-tests-react-components/src/stories/InfoButton.stories.tsx

+storiesOf('InfoButton - sizes', module)
+  .addDecorator(TestWrapperDecoratorFixedWidth)
+  .addDecorator(story => (
+    <Screener steps={new Screener.Steps().snapshot('active', { cropTo: '.testWrapper' }).end()}>{story()}</Screener>


Suggested change

<Screener steps={new Screener.Steps().snapshot('active', { cropTo: '.testWrapper' }).end()}>{story()}</Screener>

<Screener steps={new Screener.Steps().snapshot('rest', { cropTo: '.testWrapper' }).end()}>{story()}</Screener>

behowell · 2022-11-17T19:09:17Z

apps/vr-tests-react-components/src/stories/InfoButton.stories.tsx

+        .focus('#info-button')
+        .snapshot('focus', { cropTo: '.testWrapper' })


It should have a border when focused, right? It's not showing a border in the screener results:

Adding VR tests

9f82aac

sopranopillow added Fluent UI react-components (v9) Component: InfoButton labels Nov 15, 2022

sopranopillow added this to the November Project Cycle Q4 2022 milestone Nov 15, 2022

sopranopillow requested a review from a team as a code owner November 15, 2022 20:15

sopranopillow self-assigned this Nov 15, 2022

sopranopillow requested a review from a team as a code owner November 15, 2022 20:15

sopranopillow added 3 commits November 15, 2022 14:50

adding dependency

3507eb7

Merge branch 'master' of https://www.github.com/microsoft/fluentui in…

dfaf279

…to infobutton/tests

splitting open vs closed size stories

5142322

sopranopillow mentioned this pull request Nov 15, 2022

InfoLabel #25062

Closed

30 tasks

sopranopillow added 2 commits November 15, 2022 15:54

updating wrapper

e5dbb4e

adding more padding for open version

ad0a2dd

behowell reviewed Nov 16, 2022

View reviewed changes

sopranopillow added 3 commits November 16, 2022 15:27

adding more stories

1aaea9b

fixing dependency

5faf328

Merge branch 'master' of https://www.github.com/microsoft/fluentui in…

8a83f7c

…to infobutton/tests

change selector

0fefe44

behowell reviewed Nov 17, 2022

View reviewed changes

sopranopillow closed this Nov 18, 2022

sopranopillow mentioned this pull request Jan 9, 2023

InfoButton: Add vr-tests and update conformance tests #26270

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore(react-infobutton): Adding vr tests for InfoButton and updating conformance tests #25682

chore(react-infobutton): Adding vr tests for InfoButton and updating conformance tests #25682

sopranopillow commented Nov 15, 2022

fabricteam commented Nov 15, 2022 •

edited

Loading

codesandbox-ci bot commented Nov 15, 2022 •

edited

Loading

size-auditor bot commented Nov 15, 2022 •

edited

Loading

behowell Nov 16, 2022

behowell Nov 16, 2022

behowell Nov 16, 2022

fabricteam commented Nov 16, 2022 •

edited

Loading

behowell Nov 17, 2022

behowell Nov 17, 2022

behowell Nov 17, 2022

behowell Nov 17, 2022

behowell Nov 17, 2022

behowell Nov 17, 2022


		const infoButtonContent = 'This is the content of an InfoButton.';

		storiesOf('InfoButton', module)

	<div style={{ display: 'flex', flexDirection: 'column', padding: '60px', gap: '80px', alignItems: 'start' }}>
	<div style={{ display: 'flex', flexDirection: 'column', paddingTop: '60px', gap: '80px', alignItems: 'start' }}>

	storiesOf('InfoButton - sizes', module)
	storiesOf('InfoButton', module)

	<Screener steps={new Screener.Steps().snapshot('active', { cropTo: '.testWrapper' }).end()}>{story()}</Screener>
	<Screener steps={new Screener.Steps().snapshot('rest', { cropTo: '.testWrapper' }).end()}>{story()}</Screener>

		.focus('#info-button')
		.snapshot('focus', { cropTo: '.testWrapper' })

chore(react-infobutton): Adding vr tests for InfoButton and updating conformance tests #25682

chore(react-infobutton): Adding vr tests for InfoButton and updating conformance tests #25682

Conversation

sopranopillow commented Nov 15, 2022

Related Issue(s)

fabricteam commented Nov 15, 2022 • edited Loading

📊 Bundle size report

codesandbox-ci bot commented Nov 15, 2022 • edited Loading

size-auditor bot commented Nov 15, 2022 • edited Loading

Asset size changes

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fabricteam commented Nov 16, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fabricteam commented Nov 15, 2022 •

edited

Loading

codesandbox-ci bot commented Nov 15, 2022 •

edited

Loading

size-auditor bot commented Nov 15, 2022 •

edited

Loading

fabricteam commented Nov 16, 2022 •

edited

Loading