Add browser tests for polymorphic as prop behavior in styled-react components
#6911
Conversation
|
github-actions
bot
requested a deployment
to
storybook-preview-6911
|
👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks! |
github-actions
bot
added
the
integration-tests: recommended
liuliu-dev
added
integration-tests: skipped manually
| describe('@primer/react', () => { | ||
| test('ActionList supports `sx` prop', () => { | ||
| render(<ActionList data-testid="component" sx={{background: 'red'}} />) | ||
| render(<ActionList as="ul" data-testid="component" sx={{background: 'red'}} variant="inset" />) |
There was a problem hiding this comment.
This caught my eye, why do we need to explicitly set ActionList as="ul"?
There was a problem hiding this comment.
Hi @siddharthkp, thanks for the review! Do you mean that we should use as="div" instead of the default ul for ActionList?
There was a problem hiding this comment.
No sorry, I meant why do we need to pass it any as prop? Does it no longer render a <ul> by default?
There was a problem hiding this comment.
The as prop in this test is specifically to catch the polymorphic prop forwarding issue that the pattern in PR #6910 fixes, when you wrap a component with styled(), the as prop can get consumed by styled-components instead of being forwarded to the wrapped component, which causes component specific props to fail to be consumed correctly. That's why we add both as and variant here to test that variant is correctly passed.
There was a problem hiding this comment.
Oh lol, my bad! That is literally what you are testing 😅
Do you mean that we should use as="div" instead of the default ul for ActionList?
This is a very good idea in that case!
…s-for-polymophic-components
…s-for-polymophic-components
liuliu-dev
deleted the
liuliu/add-browser-tests-for-polymophic-components
branch
Adds browser tests to verify that
styled-reactcomponents correctly handle the polymorphicasprop. Ensures styled-components wrappers maintain component behavior when rendering and provides test coverage for component-specific props preservation.Current State
Tests currently fail for several components, reproducing the existing
asprop forwarding issues in styled-react wrappers. PR #6910 should fix these test failures.