Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug]: v9 VR tests silently fail when griffel makeStyles api is used directly for story rendering #33861

Open
2 tasks done
Hotell opened this issue Feb 18, 2025 · 0 comments · May be fixed by #33860
Open
2 tasks done

[Bug]: v9 VR tests silently fail when griffel makeStyles api is used directly for story rendering #33861

Hotell opened this issue Feb 18, 2025 · 0 comments · May be fixed by #33860
Assignees
@Hotell
Labels
Area: Storywright Fluent UI react-components (v9) Status: Blocked Resolution blocked by another issue Status: In PR Storybook Type: Bug 🐛

Comments

@Hotell
Copy link
Contributor

Hotell commented Feb 18, 2025 •
edited
Loading

Component

Other...

Package version

latest

React version

17

Environment

not applicable

Current Behavior

We already shipped new StoryWright features that reverted 2k+ lost VR test (#33759).

While migrating to the new SW version I ran into more issues within our stories and VR processing.

Actual issue description:

Note: SW = StoryWright

SW was silently failing when issues occured during processing VR test Story to obtain Steps definition.

Whenever we use griffel makeStyles within VR Story in order to tweak test cases, SW would throw error and completely ignore these VR Test for processing.

While running storybook storyFn() to obtain dynamically Story object and its props in order to acquire steps prop, it would throw on Griffel not able to find Context for text direction.

Although the component render tree works as expected ↓

Image

the under the hood mechanism of using storyFn() directly won't properly load the decorators hierarchy in order to get React Context which is needed for Griffel.

Affected VR Test:

"Error processing render() method of:badge-converged--size-tiny",
    "Error processing render() method of:badge-converged--size-tiny-rtl",
    "Error processing render() method of:badge-converged--size-extra-small",
    "Error processing render() method of:badge-converged--size-extra-small-rtl",
    "Error processing render() method of:badge-converged--size-small",
    "Error processing render() method of:badge-converged--size-small-rtl",
    "Error processing render() method of:badge-converged--size-medium",
    "Error processing render() method of:badge-converged--size-medium-rtl",
    "Error processing render() method of:badge-converged--size-large",
    "Error processing render() method of:badge-converged--size-large-rtl",
    "Error processing render() method of:badge-converged--size-extra-large",
    "Error processing render() method of:badge-converged--size-extra-large-rtl",
    "Error processing render() method of:badge-converged--width-constrained",

    "Error processing render() method of:button-converged--size-small-with-long-text-wrapping",
    "Error processing render() method of:button-converged--size-medium-with-long-text-wrapping",
    "Error processing render() method of:button-converged--size-large-with-long-text-wrapping",
    "Error processing render() method of:compoundbutton-converged--size-small-with-long-text-wrapping",
    "Error processing render() method of:compoundbutton-converged--size-medium-with-long-text-wrapping",
    "Error processing render() method of:compoundbutton-converged--size-large-with-long-text-wrapping",
    "Error processing render() method of:menubutton-converged--size-small-with-long-text-wrapping",
    "Error processing render() method of:menubutton-converged--size-medium-with-long-text-wrapping",
    "Error processing render() method of:menubutton-converged--size-large-with-long-text-wrapping",
    "Error processing render() method of:splitbutton-converged--size-small-with-long-text-wrapping",
    "Error processing render() method of:splitbutton-converged--size-medium-with-long-text-wrapping",
    "Error processing render() method of:splitbutton-converged--size-large-with-long-text-wrapping",
    "Error processing render() method of:togglebutton-converged--size-small-with-long-text-wrapping",
    "Error processing render() method of:togglebutton-converged--size-medium-with-long-text-wrapping",
    "Error processing render() method of:togglebutton-converged--size-large-with-long-text-wrapping",

    "Error processing render() method of:card-converged--orientation",

    "Error processing render() method of:fluentprovider-customstylehooks--button-custom-styles",
    "Error processing render() method of:fluentprovider-customstylehooks--compound-button-custom-styles",
    "Error processing render() method of:fluentprovider-customstylehooks--menu-button-custom-styles",
    "Error processing render() method of:fluentprovider-customstylehooks--split-button-custom-styles",
    "Error processing render() method of:fluentprovider-customstylehooks--toggle-button-custom-styles",

    "Error processing render() method of:progressbar-converged--indeterminate-thickness",
    "Error processing render() method of:progressbar-converged--indeterminate-thickness-dark-mode",
    "Error processing render() method of:progressbar-converged--indeterminate-thickness-high-contrast",
    "Error processing render() method of:progressbar-converged--indeterminate-thickness-rtl",

    "Error processing render() method of:skeleton-converged--opaque-skeleton-with-rectangle",
    "Error processing render() method of:skeleton-converged--opaque-skeleton-with-rectangle-high-contrast",
    "Error processing render() method of:skeleton-converged--opaque-skeleton-with-rectangle-dark-mode",
    "Error processing render() method of:skeleton-converged--opaque-skeleton-with-rectangle-rtl",
    "Error processing render() method of:skeleton-converged--opaque-skeleton-with-circle",
    "Error processing render() method of:skeleton-converged--opaque-skeleton-with-circle-high-contrast",
    "Error processing render() method of:skeleton-converged--opaque-skeleton-with-circle-dark-mode",
    "Error processing render() method of:skeleton-converged--opaque-skeleton-with-circle-rtl",
    "Error processing render() method of:skeleton-converged--opaque-skeleton-with-square",
    "Error processing render() method of:skeleton-converged--opaque-skeleton-with-square-high-contrast",
    "Error processing render() method of:skeleton-converged--opaque-skeleton-with-square-dark-mode",
    "Error processing render() method of:skeleton-converged--opaque-skeleton-with-square-rtl",
    "Error processing render() method of:skeleton-converged--translucent-skeleton-with-rectangle",
    "Error processing render() method of:skeleton-converged--translucent-skeleton-with-rectangle-high-contrast",
    "Error processing render() method of:skeleton-converged--translucent-skeleton-with-rectangle-dark-mode",
    "Error processing render() method of:skeleton-converged--translucent-skeleton-with-circle",
    "Error processing render() method of:skeleton-converged--translucent-skeleton-with-circle-high-contrast",
    "Error processing render() method of:skeleton-converged--translucent-skeleton-with-circle-dark-mode",
    "Error processing render() method of:skeleton-converged--translucent-skeleton-with-square",
    "Error processing render() method of:skeleton-converged--translucent-skeleton-with-square-high-contrast",
    "Error processing render() method of:skeleton-converged--translucent-skeleton-with-square-dark-mode",

    "Error processing render() method of:slider-converged--customized-slider",

    "Error processing render() method of:spinbutton-converged--custom-width",
    "Error processing render() method of:spinbutton-converged--custom-width-rtl",
    "Error processing render() method of:spinbutton-converged--custom-width-high-contrast",
    "Error processing render() method of:spinbutton-converged--custom-width-dark-mode",

    "Error processing render() method of:spinner-converged--primary",
    "Error processing render() method of:spinner-converged--primary-high-contrast",
    "Error processing render() method of:spinner-converged--primary-dark-mode",
    "Error processing render() method of:spinner-converged--primary-with-label",
    "Error processing render() method of:spinner-converged--primary-with-label-high-contrast",
    "Error processing render() method of:spinner-converged--primary-with-label-dark-mode",
    "Error processing render() method of:spinner-converged--primary-with-label-rtl",
    "Error processing render() method of:spinner-converged--primary-size",
    "Error processing render() method of:spinner-converged--inverted",
    "Error processing render() method of:spinner-converged--inverted-high-contrast",
    "Error processing render() method of:spinner-converged--inverted-dark-mode",
    "Error processing render() method of:spinner-converged--inverted-with-label",
    "Error processing render() method of:spinner-converged--inverted-with-label-high-contrast",
    "Error processing render() method of:spinner-converged--inverted-with-label-dark-mode",
    "Error processing render() method of:spinner-converged--animation",
    "Error processing render() method of:spinner-converged--animation-rtl",

    "Error processing render() method of:interactiontag-converged--with-icon-box-sizing",

    "Error processing render() method of:tagpicker--default",
    "Error processing render() method of:tagpicker--default-dark-mode",
    "Error processing render() method of:tagpicker--default-high-contrast",
    "Error processing render() method of:tagpicker--default-rtl",
    "Error processing render() method of:tagpicker--default-open",
    "Error processing render() method of:tagpicker--default-open-dark-mode",
    "Error processing render() method of:tagpicker--default-open-high-contrast",
    "Error processing render() method of:tagpicker--default-open-rtl",
    "Error processing render() method of:tagpicker--appearance",
    "Error processing render() method of:tagpicker--appearance-dark-mode",
    "Error processing render() method of:tagpicker--appearance-high-contrast",
    "Error processing render() method of:tagpicker--appearance-rtl",
    "Error processing render() method of:tagpicker--disabled",
    "Error processing render() method of:tagpicker--disabled-dark-mode",
    "Error processing render() method of:tagpicker--disabled-high-contrast",
    "Error processing render() method of:tagpicker--disabled-rtl",
    "Error processing render() method of:tagpicker--expand-icon",
    "Error processing render() method of:tagpicker--expand-icon-dark-mode",
    "Error processing render() method of:tagpicker--expand-icon-high-contrast",
    "Error processing render() method of:tagpicker--expand-icon-rtl",
    "Error processing render() method of:tagpicker--grouped",
    "Error processing render() method of:tagpicker--grouped-dark-mode",
    "Error processing render() method of:tagpicker--grouped-high-contrast",
    "Error processing render() method of:tagpicker--grouped-rtl",
    "Error processing render() method of:tagpicker--secondary-action",
    "Error processing render() method of:tagpicker--secondary-action-dark-mode",
    "Error processing render() method of:tagpicker--secondary-action-high-contrast",
    "Error processing render() method of:tagpicker--secondary-action-rtl",

    "Error processing render() method of:toolbar-converged--far-group",
    "Error processing render() method of:tooltip-converged--basic",
    "Error processing render() method of:tooltip-converged--basic-dark-mode",
    "Error processing render() method of:tooltip-converged--basic-high-contrast",
    "Error processing render() method of:tooltip-converged--inverted",
    "Error processing render() method of:tooltip-converged--inverted-dark-mode",
    "Error processing render() method of:tooltip-converged--with-arrow",
    "Error processing render() method of:tooltip-converged--with-arrow-dark-mode",
    "Error processing render() method of:tooltip-converged--with-arrow-high-contrast",
    "Error processing render() method of:tooltip-converged--inverted-with-arrow",
    "Error processing render() method of:tooltip-converged--inverted-with-arrow-dark-mode",
    "Error processing render() method of:tooltip-converged--text-wrapping",
    "Error processing render() method of:tooltip-converged--overflow-wrap",
    "Error processing render() method of:tooltip-converged--overflow-wrap-with-arrow",

    "Error processing render() method of:tree--expand-icon",
    "Error processing render() method of:tree--expand-icon-dark-mode",
    "Error processing render() method of:tree--expand-icon-high-contrast",
    "Error processing render() method of:tree--expand-icon-rtl",
    "Error processing render() method of:tree--flat",
    "Error processing render() method of:tree--flat-dark-mode",
    "Error processing render() method of:tree--flat-high-contrast",
    "Error processing render() method of:tree--flat-rtl",
    "Error processing render() method of:tree--flat-tree-single-selection",
    "Error processing render() method of:tree--flat-tree-single-selection-dark-mode",
    "Error processing render() method of:tree--flat-tree-single-selection-high-contrast",
    "Error processing render() method of:tree--flat-tree-single-selection-rtl",
    "Error processing render() method of:tree--flat-tree-multi-selection",
    "Error processing render() method of:tree--flat-tree-multi-selection-dark-mode",
    "Error processing render() method of:tree--flat-tree-multi-selection-high-contrast",
    "Error processing render() method of:tree--flat-tree-multi-selection-rtl"

Expected Behavior

VR test stories should be processed without issues

Reproduction

https://uifabric.visualstudio.com/fabricpublic/_build/results?buildId=370698&view=logs&j=d896371a-1583-5fe7-db02-473133ed56b2&t=282e32d3-e76c-5609-8d4f-bd5f29091ecb

Steps to reproduce

  1. yarn nx run vr-tests-react-components:build-storybook
  2. yarn nx run vr-tests-react-components:test-vr
  3. see Steps object is undefined within logs

Are you reporting an Accessibility issue?

no

Suggested severity

Urgent - No workaround and Products/sites are affected

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • The provided reproduction is a minimal reproducible example of the bug.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Hotell Hotell

Labels
Area: Storywright Fluent UI react-components (v9) Status: Blocked Resolution blocked by another issue Status: In PR Storybook Type: Bug 🐛
Projects
None yet
Milestone
No milestone
1 participant
@Hotell