Add interaction tests for pagelayout sticky #2241
Conversation
|
Maybe add a wait Remove wait times
pksjce
force-pushed
the
pk/sticky-tests
branch
from
fb9e208
to
a571916
Compare
size-limit report 📦
|
|
@colebemis - This https://github.com/primer/react/runs/7892938558?check_suite_focus=true is where the tests will run on CI. Unfortunately it looks for tests in all stories. |
| const testId = `paragraph${i}` | ||
| return ( | ||
| <Box key={i} as="p" sx={{margin: 0}}> | ||
| <span data-testid={testId}> |
There was a problem hiding this comment.
Just adding some test ids to grab blocks
|
|
||
| // fireEvent alternative? | ||
| const storyWindow = await canvas.getByTestId('story-window') | ||
| await fireEvent.scroll(storyWindow, {top: 600}) |
There was a problem hiding this comment.
They don't yet have a descriptive name feature. However, storybook 7.0.0 is going to support sections within interaction tests I believe!
There was a problem hiding this comment.
Ahh cool! I'll remove this then, and we can try later when available.
| import {expect} from '@storybook/jest' | ||
| import {setTimeout} from 'timers/promises' |
There was a problem hiding this comment.
removed it in the next commit
| CustomStickyHeader.play = async ({canvasElement}: {canvasElement: HTMLElement}) => { | ||
| const canvas = within(canvasElement) | ||
| const contentToScroll = await canvas.getByTestId('content3') | ||
| contentToScroll.scrollIntoView() |
There was a problem hiding this comment.
Do you need to scroll twice? The fireEvent.scroll below would be ideal. I would fix my tests to work on that if it works for you.
There was a problem hiding this comment.
No it doesn't work :( This is what I mean here Maybe I am missing something?
Because the fireEvent.scroll didn't work I included contentToScroll. I'll give another go today and let you know if I make it work.
There was a problem hiding this comment.
Yeah! I had the same experience. It would have been so much better if fireEvent scroll worked in this case.Maybe we aren't using the scrollcontainer effectively?
There was a problem hiding this comment.
I tried it again but no luck 😢 I agree, I think it is about the scroll container. I tried the outer box, the page layout content as scroll containers but none of them are scrollable. (el.scrollHeight-el.clientHight is 0) and I tried giving auto overflow but that doesn't seem to work either. I'll remove this fireEvent for now and maybe down the track, it will be possible to do with user events from SB.
Describe your changes here.
Add a couple of interactive tests
To test this, check PageLayout/interactions.stories
Taking over from #2224
Merge checklist
Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.