Enable cypress for v8 #21678
Merged
Enable cypress for v8 #21678
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ecraig12345
force-pushed
the
cypress-v8
branch
from
114c6a7
to
d1c59d2
Compare
|
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 47fbc8a:
|
Asset size changesSize Auditor did not detect a change in bundle size for any component! Baseline commit: 21ad43bbd1664a7f409b28c4b7f21e50d7039a4d (build) |
📊 Bundle size reportUnchanged fixtures
|
Perf Analysis (
|
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| ContextualMenu | mount | 17440 | 8600 | 1000 | Possible regression |
All results
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| Avatar | mount | 915 | 916 | 5000 | |
| BaseButton | mount | 995 | 972 | 5000 | |
| Breadcrumb | mount | 2705 | 2664 | 1000 | |
| ButtonNext | mount | 503 | 503 | 5000 | |
| Checkbox | mount | 1614 | 1581 | 5000 | |
| CheckboxBase | mount | 1354 | 1368 | 5000 | |
| ChoiceGroup | mount | 4886 | 4942 | 5000 | |
| ComboBox | mount | 1018 | 1028 | 1000 | |
| CommandBar | mount | 10454 | 10544 | 1000 | |
| ContextualMenu | mount | 17440 | 8600 | 1000 | Possible regression |
| DefaultButton | mount | 1169 | 1203 | 5000 | |
| DetailsRow | mount | 3820 | 3842 | 5000 | |
| DetailsRowFast | mount | 3881 | 3880 | 5000 | |
| DetailsRowNoStyles | mount | 3674 | 3653 | 5000 | |
| Dialog | mount | 2317 | 2337 | 1000 | |
| DocumentCardTitle | mount | 189 | 195 | 1000 | |
| Dropdown | mount | 3300 | 3332 | 5000 | |
| FluentProviderNext | mount | 1948 | 1957 | 5000 | |
| FluentProviderWithTheme | mount | 187 | 172 | 10 | |
| FluentProviderWithTheme | virtual-rerender | 115 | 119 | 10 | |
| FluentProviderWithTheme | virtual-rerender-with-unmount | 208 | 214 | 10 | |
| FocusTrapZone | mount | 1958 | 1932 | 5000 | |
| FocusZone | mount | 1861 | 1869 | 5000 | |
| IconButton | mount | 1806 | 1801 | 5000 | |
| Label | mount | 363 | 390 | 5000 | |
| Layer | mount | 3111 | 3043 | 5000 | |
| Link | mount | 517 | 503 | 5000 | |
| MakeStyles | mount | 1725 | 1771 | 50000 | |
| MenuButton | mount | 1562 | 1532 | 5000 | |
| MessageBar | mount | 2041 | 2070 | 5000 | |
| Nav | mount | 3362 | 3434 | 1000 | |
| OverflowSet | mount | 1181 | 1150 | 5000 | |
| Panel | mount | 2284 | 2233 | 1000 | |
| Persona | mount | 896 | 913 | 1000 | |
| Pivot | mount | 1503 | 1485 | 1000 | |
| PrimaryButton | mount | 1352 | 1356 | 5000 | |
| Rating | mount | 7985 | 7867 | 5000 | |
| SearchBox | mount | 1419 | 1409 | 5000 | |
| Shimmer | mount | 2595 | 2613 | 5000 | |
| Slider | mount | 2042 | 2047 | 5000 | |
| SpinButton | mount | 5159 | 5153 | 5000 | |
| Spinner | mount | 453 | 478 | 5000 | |
| SplitButton | mount | 3300 | 3245 | 5000 | |
| Stack | mount | 550 | 558 | 5000 | |
| StackWithIntrinsicChildren | mount | 2377 | 2454 | 5000 | |
| StackWithTextChildren | mount | 5426 | 5516 | 5000 | |
| SwatchColorPicker | mount | 11855 | 11842 | 5000 | |
| TagPicker | mount | 2709 | 2761 | 5000 | |
| TeachingBubble | mount | 13538 | 13665 | 5000 | |
| Text | mount | 465 | 477 | 5000 | |
| TextField | mount | 1435 | 1462 | 5000 | |
| ThemeProvider | mount | 1277 | 1277 | 5000 | |
| ThemeProvider | virtual-rerender | 673 | 674 | 5000 | |
| ThemeProvider | virtual-rerender-with-unmount | 1954 | 1950 | 5000 | |
| Toggle | mount | 851 | 874 | 5000 | |
| buttonNative | mount | 168 | 162 | 5000 |
Perf Analysis (@fluentui/react-northstar)
Perf tests with no regressions
| Scenario | Current PR Ticks | Baseline Ticks | Ratio |
|---|---|---|---|
| TreeWith60ListItems.default | 221 | 178 | 1.24:1 |
| FormMinimalPerf.default | 445 | 399 | 1.12:1 |
| HeaderMinimalPerf.default | 392 | 359 | 1.09:1 |
| ButtonMinimalPerf.default | 186 | 174 | 1.07:1 |
| RefMinimalPerf.default | 260 | 243 | 1.07:1 |
| AccordionMinimalPerf.default | 165 | 155 | 1.06:1 |
| LabelMinimalPerf.default | 406 | 388 | 1.05:1 |
| ProviderMinimalPerf.default | 1196 | 1136 | 1.05:1 |
| SegmentMinimalPerf.default | 374 | 355 | 1.05:1 |
| DatepickerMinimalPerf.default | 5860 | 5643 | 1.04:1 |
| RadioGroupMinimalPerf.default | 483 | 463 | 1.04:1 |
| TableMinimalPerf.default | 428 | 411 | 1.04:1 |
| AttachmentSlotsPerf.default | 1115 | 1086 | 1.03:1 |
| GridMinimalPerf.default | 363 | 354 | 1.03:1 |
| ImageMinimalPerf.default | 388 | 375 | 1.03:1 |
| StatusMinimalPerf.default | 704 | 685 | 1.03:1 |
| AttachmentMinimalPerf.default | 167 | 164 | 1.02:1 |
| CarouselMinimalPerf.default | 495 | 485 | 1.02:1 |
| DividerMinimalPerf.default | 381 | 375 | 1.02:1 |
| EmbedMinimalPerf.default | 4273 | 4203 | 1.02:1 |
| InputMinimalPerf.default | 1332 | 1304 | 1.02:1 |
| MenuMinimalPerf.default | 871 | 858 | 1.02:1 |
| PortalMinimalPerf.default | 187 | 183 | 1.02:1 |
| ReactionMinimalPerf.default | 388 | 381 | 1.02:1 |
| SkeletonMinimalPerf.default | 360 | 352 | 1.02:1 |
| SplitButtonMinimalPerf.default | 4391 | 4322 | 1.02:1 |
| TooltipMinimalPerf.default | 1067 | 1051 | 1.02:1 |
| AvatarMinimalPerf.default | 204 | 202 | 1.01:1 |
| ButtonSlotsPerf.default | 576 | 573 | 1.01:1 |
| CardMinimalPerf.default | 570 | 565 | 1.01:1 |
| CheckboxMinimalPerf.default | 2771 | 2752 | 1.01:1 |
| DropdownManyItemsPerf.default | 680 | 672 | 1.01:1 |
| HeaderSlotsPerf.default | 794 | 786 | 1.01:1 |
| ItemLayoutMinimalPerf.default | 1229 | 1217 | 1.01:1 |
| ListMinimalPerf.default | 534 | 528 | 1.01:1 |
| LoaderMinimalPerf.default | 706 | 702 | 1.01:1 |
| SliderMinimalPerf.default | 1711 | 1699 | 1.01:1 |
| TextMinimalPerf.default | 356 | 353 | 1.01:1 |
| CustomToolbarPrototype.default | 4174 | 4125 | 1.01:1 |
| DialogMinimalPerf.default | 784 | 781 | 1:1 |
| DropdownMinimalPerf.default | 3092 | 3087 | 1:1 |
| LayoutMinimalPerf.default | 366 | 365 | 1:1 |
| ListCommonPerf.default | 650 | 653 | 1:1 |
| ListWith60ListItems.default | 660 | 659 | 1:1 |
| RosterPerf.default | 1217 | 1222 | 1:1 |
| ProviderMergeThemesPerf.default | 1781 | 1777 | 1:1 |
| AlertMinimalPerf.default | 278 | 280 | 0.99:1 |
| AnimationMinimalPerf.default | 557 | 563 | 0.99:1 |
| ChatWithPopoverPerf.default | 390 | 393 | 0.99:1 |
| PopupMinimalPerf.default | 634 | 639 | 0.99:1 |
| ToolbarMinimalPerf.default | 949 | 957 | 0.99:1 |
| BoxMinimalPerf.default | 362 | 370 | 0.98:1 |
| MenuButtonMinimalPerf.default | 1662 | 1690 | 0.98:1 |
| IconMinimalPerf.default | 618 | 631 | 0.98:1 |
| TableManyItemsPerf.default | 1923 | 1958 | 0.98:1 |
| VideoMinimalPerf.default | 649 | 662 | 0.98:1 |
| ChatDuplicateMessagesPerf.default | 304 | 315 | 0.97:1 |
| ListNestedPerf.default | 557 | 575 | 0.97:1 |
| TreeMinimalPerf.default | 819 | 843 | 0.97:1 |
| ChatMinimalPerf.default | 745 | 776 | 0.96:1 |
| ButtonOverridesMissPerf.default | 1720 | 1802 | 0.95:1 |
| FlexMinimalPerf.default | 300 | 315 | 0.95:1 |
| TextAreaMinimalPerf.default | 495 | 523 | 0.95:1 |
ecraig12345
force-pushed
the
cypress-v8
branch
from
d1c59d2
to
54cbfcf
Compare
Hotell
approved these changes
Feb 10, 2022
ling1726
reviewed
Feb 10, 2022
| @@ -62,7 +64,9 @@ function loadStories() { | |||
|
|
|||
| for (const req of contexts) { | |||
| req.keys().forEach(key => { | |||
| generateStoriesFromExamples(key, stories, req); | |||
| if (includeE2E || !key.includes('/e2e/')) { | |||
There was a problem hiding this comment.
do stories in react-examples actually show up in the docsite ? I thought that it was an internal only dev loop
There was a problem hiding this comment.
They're also for our public docs: all the examples on the individual control pages here https://developer.microsoft.com/en-us/fluentui#/controls/web
They're also used in our legacy demo site https://aka.ms/fluentdemo.
There was a problem hiding this comment.
The list of examples to include in both of those cases is set up manually, and neither of those use storybook. The query param is just for if someone wants to start with storybook.
|
Noticed I had some tests in there referencing currently nonexistent stories, which should have caused the build to fail, but it didn't--turns out this was because the |
|
Removed the extra tests, so now it should work. |
ling1726
reviewed
Feb 11, 2022
ling1726
reviewed
Feb 11, 2022
ling1726
reviewed
Feb 11, 2022
ling1726
approved these changes
Feb 11, 2022
spmonahan
approved these changes
Feb 11, 2022
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Current Behavior
In v9 we can use cypress to run interactive tests in a real browser. This isn't possible today in v8.
Running tests in a real browser is desirable for testing related to interactive features such as focus that aren't realistically simulated in jsdom.
New Behavior
Enable cypress tests for v8 and add one test for FocusTrapZone as an example.
Our cypress wrapper (
scripts/cypress.js) was hardcoded to always load thereact-componentsstorybook in PR builds, so I added a--packageoption.Since the storybook for v8 is in
react-examples, it's easiest to also have the e2e tests and e2e-specific stories live there. Longer-term once v8 is migrated to the new build system, the e2e tests and stories could potentially be relocated to thereactpackage itself.To facilitate having e2e-only stories that don't show up on the doc site, I updated
react-examples/.storybook/preview.jsto look for ae2e=1query parameter which determines whether to show stories with/e2e/in their path. (Storybook appears to preserve any user-provided query parameters when changing stories.)Related Issue(s)
Fixes #21662