chore (v0 vr-tests): Remove usage of Screener by TristanWatanabe · Pull Request #26053 · microsoft/fluentui

TristanWatanabe · 2022-12-20T23:04:24Z

Changes:

removes Screener related .steps. and commonScreenerSteps files from @fluentui/docs since they are no longer needed.
removes all Screener related files from scripts/screener.
removes Screener related files (vr-build and vr-test) from scripts/gulp/tasks.
removes vr-build and vr-test from gulpfile.ts
updates config files to remove mention of Screener.
updates screenerSteps export to StoryWrightSteps for an existing v0 vr-test.
not completely northstar related, but also removes Screener related just-task.

Related Issue(s)

Part of [Epic]: Visual Regression Tool Migration #25078

…ps files

…vr-tests package

TristanWatanabe · 2022-12-20T23:06:22Z

packages/fluentui/docs/.eslintrc.json

    {
      // These files don't have actual dependencies
-      "files": ["src/examples/**/*.steps.ts", "src/examples/**/commonScreenerSteps.ts"],
+      "files": ["src/vr-tests/**/*.stories.tsx", "src/vr-tests/**/*.stories.ts", "src/vr-tests/**/*.ts"],


Will create a follow-up PR removing all the eslint-disable-next-line import/no-extraneous-dependencies lines that were added to stories within the vr-tests subfolder

Issue created #26054

DustyTheBot · 2022-12-20T23:08:31Z

	Warnings
⚠️	There are no updates provided to CHANGELOG. Ensure there are no publicly visible changes introduced by this PR.

Generated by 🚫 dangerJS against a739fee

fabricteam · 2022-12-20T23:10:03Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`global-context` createContext	`533 B` `341 B`
`global-context` createContextSelector	`554 B` `348 B`
`priority-overflow` createOverflowManager	`3.153 kB` `1.299 kB`
`react-accordion` Accordion (including children components)	`79.294 kB` `24.443 kB`
`react-alert` Alert	`84.15 kB` `21.28 kB`
`react-avatar` Avatar	`51.083 kB` `14.289 kB`
`react-avatar` AvatarGroup	`15.006 kB` `6.009 kB`
`react-avatar` AvatarGroupItem	`67.313 kB` `18.585 kB`
`react-badge` Badge	`23.357 kB` `7.361 kB`
`react-badge` CounterBadge	`24.247 kB` `7.643 kB`
`react-badge` PresenceBadge	`24.001 kB` `7.049 kB`
`react-button` Button	`32.923 kB` `8.61 kB`
`react-button` CompoundButton	`39.953 kB` `9.933 kB`
`react-button` MenuButton	`37.611 kB` `9.942 kB`
`react-button` SplitButton	`45.057 kB` `11.323 kB`
`react-button` ToggleButton	`48.753 kB` `10.715 kB`
`react-card` Card - All	`77.541 kB` `22.325 kB`
`react-card` Card	`72.485 kB` `20.913 kB`
`react-card` CardFooter	`8.617 kB` `3.62 kB`
`react-card` CardHeader	`10.382 kB` `4.258 kB`
`react-card` CardPreview	`9.424 kB` `3.97 kB`
`react-checkbox` Checkbox	`28.65 kB` `9.09 kB`
`react-checkbox` CheckboxField	`35.067 kB` `10.89 kB`
`react-combobox` Combobox (including child components)	`78.629 kB` `25.167 kB`
`react-combobox` ComboboxField	`75.831 kB` `25.116 kB`
`react-combobox` Dropdown (including child components)	`77.876 kB` `25.104 kB`
`react-components` react-components: Button, FluentProvider & webLightTheme	`59.381 kB` `16.465 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`187.067 kB` `52.466 kB`
`react-components` react-components: FluentProvider & webLightTheme	`33.843 kB` `11.129 kB`
`react-dialog` Dialog (including children components)	`83.036 kB` `24.754 kB`
`react-divider` Divider	`16.515 kB` `5.921 kB`
`react-image` Image	`10.836 kB` `4.283 kB`
`react-infobutton` InfoButton	`118.298 kB` `35.438 kB`
`react-input` Input	`24.194 kB` `7.89 kB`
`react-input` InputField	`33.408 kB` `10.584 kB`
`react-label` Label	`9.394 kB` `3.88 kB`
`react-link` Link	`11.862 kB` `4.885 kB`
`react-menu` Menu (including children components)	`117.794 kB` `36.361 kB`
`react-menu` Menu (including selectable components)	`120.863 kB` `36.895 kB`
`react-overflow` hooks only	`11.004 kB` `4.188 kB`
`react-persona` Persona	`57.12 kB` `15.945 kB`
`react-popover` Popover	`104.042 kB` `32.021 kB`
`react-portal` Portal	`10.495 kB` `3.851 kB`
`react-portal-compat` PortalCompatProvider	`5.857 kB` `1.978 kB`
`react-positioning` usePositioning	`19.868 kB` `7.432 kB`
`react-progress` ProgressBar	`13.155 kB` `5.048 kB`
`react-progress` ProgressField	`22.461 kB` `7.919 kB`
`react-provider` FluentProvider	`15.91 kB` `5.931 kB`
`react-radio` Radio	`31.827 kB` `10.316 kB`
`react-radio` RadioGroup	`14.304 kB` `5.72 kB`
`react-radio` RadioGroupField	`23.604 kB` `8.65 kB`
`react-select` Select	`23.474 kB` `8.017 kB`
`react-select` SelectField	`31.731 kB` `10.256 kB`
`react-slider` Slider	`32.091 kB` `10.183 kB`
`react-slider` SliderField	`41.113 kB` `12.903 kB`
`react-spinbutton` SpinButton	`44.502 kB` `12.812 kB`
`react-spinbutton` SpinButtonField	`52.784 kB` `15.085 kB`
`react-spinner` Spinner	`20.013 kB` `6.446 kB`
`react-switch` Switch	`33.427 kB` `10.581 kB`
`react-switch` SwitchField	`39.745 kB` `12.362 kB`
`react-text` Text - Default	`11.838 kB` `4.625 kB`
`react-text` Text - Wrappers	`15.148 kB` `5.06 kB`
`react-textarea` Textarea	`25.733 kB` `8.328 kB`
`react-textarea` TextareaField	`34.949 kB` `11.012 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`30.908 kB` `6.714 kB`
`react-theme` Teams: Light theme	`17.776 kB` `5.141 kB`
`react-tooltip` Tooltip	`42.074 kB` `14.752 kB`
`react-utilities` SSRProvider	`180 B` `159 B`

_{🤖 This report was generated against cf10f5be18439d0c0c3f53baac7f996237569691}

TristanWatanabe · 2022-12-20T23:10:40Z

packages/fluentui/docs/package.json

@@ -73,8 +73,6 @@
    "screener:build": "yarn build:storybook",


screener:build will be renamed along with v8 and v9 in a separate PR

TristanWatanabe · 2022-12-20T23:11:40Z

packages/fluentui/docs/src/app.tsx


-// Temporarily disabling the validation for Screener.
-if (process.env.NODE_ENV !== 'production' && !process.env.SCREENER) {
+if (process.env.NODE_ENV !== 'production') {


Not totally sure what this does so didn't remove the entire check and only removed the Screener part.

@TristanWatanabe this adds a panel with validation warnings. We don't want to have it to be visible in production builds anyway, so let's keep it.

fabricteam · 2022-12-20T23:17:19Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1285	1277	5000
Button	mount	909	899	5000
FluentProvider	mount	1495	1503	5000
FluentProviderWithTheme	mount	575	587	10
FluentProviderWithTheme	virtual-rerender	543	542	10
FluentProviderWithTheme	virtual-rerender-with-unmount	576	582	10
MakeStyles	mount	1967	1954	50000
Persona	mount	2819	2778	5000
SpinButton	mount	2351	2370	5000

size-auditor · 2022-12-20T23:32:06Z

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: cf10f5be18439d0c0c3f53baac7f996237569691 (build)

codesandbox-ci · 2022-12-20T23:35:36Z

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 a739fee:

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

fabricteam · 2022-12-20T23:36:17Z

Perf Analysis (`@fluentui/react`)

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
GroupedList	mount	2187	2518	2	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
BaseButton	mount	1405	1392	5000
Breadcrumb	mount	3576	3489	1000
Checkbox	mount	3039	3066	5000
CheckboxBase	mount	2724	2761	5000
ChoiceGroup	mount	5153	5116	5000
ComboBox	mount	1443	1444	1000
CommandBar	mount	11202	11160	1000
ContextualMenu	mount	12547	12723	1000
DefaultButton	mount	1638	1614	5000
DetailsRow	mount	4140	4195	5000
DetailsRowFast	mount	4263	4292	5000
DetailsRowNoStyles	mount	4002	4025	5000
Dialog	mount	3620	3643	1000
DocumentCardTitle	mount	673	669	1000
Dropdown	mount	3783	3738	5000
FocusTrapZone	mount	2327	2336	5000
FocusZone	mount	2291	2317	5000
GroupedList	mount	2187	2518	2	Possible regression
GroupedList	virtual-rerender	1359	1352	2
GroupedList	virtual-rerender-with-unmount	1978	1953	2
GroupedListV2	mount	677	665	2
GroupedListV2	virtual-rerender	643	655	2
GroupedListV2	virtual-rerender-with-unmount	652	681	2
IconButton	mount	2211	2236	5000
Label	mount	845	851	5000
Layer	mount	4992	5055	5000
Link	mount	979	965	5000
MenuButton	mount	1913	1981	5000
MessageBar	mount	2669	2756	5000
Nav	mount	3859	4192	1000
OverflowSet	mount	1618	1596	5000
Panel	mount	2978	2951	1000
Persona	mount	1525	1557	1000
Pivot	mount	1924	1930	1000
PrimaryButton	mount	1818	1828	5000
Rating	mount	8136	8154	5000
SearchBox	mount	1727	1794	5000
Shimmer	mount	3393	3331	5000
Slider	mount	2473	2518	5000
SpinButton	mount	5449	5488	5000
Spinner	mount	960	955	5000
SplitButton	mount	3636	3626	5000
Stack	mount	991	976	5000
StackWithIntrinsicChildren	mount	2751	2754	5000
StackWithTextChildren	mount	5639	5701	5000
SwatchColorPicker	mount	12164	12213	5000
TagPicker	mount	3103	3087	5000
TeachingBubble	mount	98854	99313	5000
Text	mount	918	921	5000
TextField	mount	1874	1878	5000
ThemeProvider	mount	1803	1820	5000
ThemeProvider	virtual-rerender	1272	1265	5000
ThemeProvider	virtual-rerender-with-unmount	2590	2531	5000
Toggle	mount	1303	1305	5000
buttonNative	mount	660	648	5000

fabricteam · 2022-12-20T23:37:22Z

🕵 fluentuiv8 Open the Visual Regressions report to inspect the 4 screenshots

✅ There was 4 screenshots added, 0 screenshots removed, 1041 screenshots unchanged, 0 screenshots with different dimensions and 0 screenshots with visible difference.

unknown 4 screenshots

Image Name	Diff(in Pixels)	Image Type
Pivot - Overflow.Root.Narrow - Last tab selected.chromium.png	0	Added
Pivot - Overflow.Root.Narrow - Overflow menu.chromium.png	0	Added
Pivot - Overflow.Tabs - RTL.Narrow - Last tab selected.chromium.png	0	Added
Pivot - Overflow.Tabs - RTL.Narrow - Overflow menu.chromium.png	0	Added

fabricteam · 2022-12-20T23:39:16Z

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

⚠️ No perf measurements available

fabricteam · 2022-12-20T23:43:41Z

🕵 fluentuiv9 No visual regressions between this PR and main

fabricteam · 2022-12-20T23:52:49Z

🕵 FluentUI-v0 Open the Visual Regressions report to inspect the 1 screenshots

✅ There was 0 screenshots added, 0 screenshots removed, 1259 screenshots unchanged, 0 screenshots with different dimensions and 1 screenshots with visible difference.

unknown 1 screenshots

Image Name	Diff(in Pixels)	Image Type
Animation.Animation Example Fill Mode.chromium.png	58	Changed

Hotell · 2022-12-21T15:16:46Z

scripts/tsconfig.json

      "path": "./monorepo/tsconfig.json"
    },
-    {
-      "path": "./screener/tsconfig.json"


TristanWatanabe added 12 commits December 16, 2022 05:51

chore: remove screener related files from scripts folder

5de3392

chore: remove deleted screener file imports from files

8e3eb63

chore: remove Screener related things from scripts/gulp/config.ts

3c9196b

chore: remove northstar screener steps files

4438111

chore: delete more screener step files

d79253d

chore: remove more northstar screener related steps commonScreenerSte…

d51ad89

…ps files

chore: remove screener scripts from v0 docs package.json

492a810

chore: rename screenerSteps to storywrightSteps

4d03587

chore: miscellaneous removal of screener verbiage

27ea406

chore: update eslint override to disable no-extraneous-deps rule for …

059058c

…vr-tests package

nit: change variable casing to StoryWrightSteps to match other files

767d7ad

chore: remove vr-build and vr-test scripts in gulpfile

a739fee

TristanWatanabe self-assigned this Dec 20, 2022

msft-fluent-ui-bot added the Fluent UI react-northstar label Dec 20, 2022

github-actions bot added this to the October Project Cycle Q4 2022 milestone Dec 20, 2022

TristanWatanabe commented Dec 20, 2022

View reviewed changes

This was referenced Dec 20, 2022

Remove all the eslint-disable-next-line import/no-extraneous-dependencies lines that were added to northstar stories #26054

Closed

[Epic]: Visual Regression Tool Migration #25078

Closed

TristanWatanabe marked this pull request as ready for review December 21, 2022 00:05

TristanWatanabe requested review from a team as code owners December 21, 2022 00:05

layershifter approved these changes Dec 21, 2022

View reviewed changes

ling1726 approved these changes Dec 21, 2022

View reviewed changes

Hotell reviewed Dec 21, 2022

View reviewed changes

scripts/tsconfig.json

"path": "./monorepo/tsconfig.json"

},

{

"path": "./screener/tsconfig.json"

Copy link

Contributor

Hotell Dec 21, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

😻

TristanWatanabe merged commit c12218d into microsoft:master Dec 21, 2022

TristanWatanabe deleted the remove-screener-scripts branch December 21, 2022 18:17

q1b pushed a commit to q1b/fluentui that referenced this pull request Jan 24, 2023

chore (v0 vr-tests): Remove usage of Screener (microsoft#26053)

e6d67e6

Hotell pushed a commit to Hotell/fluentui that referenced this pull request Feb 9, 2023

chore (v0 vr-tests): Remove usage of Screener (microsoft#26053)

5ed253b

Conversation

TristanWatanabe commented Dec 20, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes:

Related Issue(s)

Uh oh!

Choose a reason for hiding this comment

Uh oh!

TristanWatanabe Dec 20, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

DustyTheBot commented Dec 20, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabricteam commented Dec 20, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

TristanWatanabe Dec 20, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

fabricteam commented Dec 20, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

size-auditor bot commented Dec 20, 2022

Asset size changes

Uh oh!

codesandbox-ci bot commented Dec 20, 2022

Uh oh!

fabricteam commented Dec 20, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabricteam commented Dec 20, 2022

Uh oh!

fabricteam commented Dec 20, 2022

Perf Analysis (@fluentui/react-northstar)

Uh oh!

fabricteam commented Dec 20, 2022

🕵 fluentuiv9 No visual regressions between this PR and main

Uh oh!

fabricteam commented Dec 20, 2022

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

TristanWatanabe commented Dec 20, 2022 •

edited

Loading

TristanWatanabe Dec 20, 2022 •

edited

Loading

DustyTheBot commented Dec 20, 2022 •

edited

Loading

fabricteam commented Dec 20, 2022 •

edited

Loading

TristanWatanabe Dec 20, 2022 •

edited

Loading

fabricteam commented Dec 20, 2022 •

edited

Loading

fabricteam commented Dec 20, 2022 •

edited

Loading

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