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

Chromatic: Fix flaky chromatic tests caused by the next/image component loading #23433

Merged
merged 2 commits into from
Jul 21, 2023
Merged

Chromatic: Fix flaky chromatic tests caused by the next/image component loading #23433

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e0bd462
Fix flaky e2e tests caused by the next/image component loading
valentinpalkovic Jul 13, 2023
457adfe
Merge branch 'next' into valentin/fix-flaky-e2e-tests
valentinpalkovic Jul 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 6 additions & 35 deletions code/frameworks/nextjs/template/stories/Image.stories.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,10 @@ export const Lazy = {
width: 50,
height: 50,
},
parameters: {
// ignoring in Chromatic to avoid inconsistent snapshots since the image is sometimes not loaded in time
chromatic: { disableSnapshot: true },
},
decorators: [
(Story) => (
<>
Expand All @@ -69,50 +73,17 @@ export const Lazy = {
</>
),
],
loaders: [
async () => {
// make sure we start at the top to test the scrolling into view functionality every time the story renders
// eslint-disable-next-line no-undef
window.scrollTo({ top: 0 });
await new Promise((res) => {
setTimeout(res, 16);
});
return {};
},
],
play: async ({ canvasElement, step }) => {
await step('scroll image into view', () => {
canvasElement.scrollIntoView(false);
});
await step('wait for images to load', async () => {
await waitFor(waitForImagesToLoad);
});
},
};

export const Eager = {
...Lazy,
parameters: {
// ignoring in Chromatic to avoid inconsistent snapshots since the image is sometimes not loaded in time
chromatic: { disableSnapshot: true },
nextjs: {
image: {
loading: 'eager',
},
},
},
};

async function waitForImagesToLoad() {
// eslint-disable-next-line no-undef
const images = Array.from(document.getElementsByTagName('img'));

await Promise.all(
images.map((image) => {
if (image.complete) {
return Promise.resolve();
}
return new Promise((resolve) => {
image.addEventListener('load', resolve);
});
})
);
}
5 changes: 5 additions & 0 deletions code/frameworks/nextjs/template/stories_nextjs-default-js/ImageLegacy.stories.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,4 +28,9 @@ export const BlurredAbsolutePlaceholder = {
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAABP5JREFUWEeNlwtz2zgMhEGKsv/k9XFp82xe11763yOJVGcXC4m2czM3GYa0E2s/LACSTi+vv1czM/7CvPpqxY/ejPeS3khmFiPHOiVLHKaZi4ux4j18GpMlS6cALupEQBCKQM4BdnGzjIcJgs//QBxAPQAem55f3yL4PWJIdyCyhlMfPdYZot0cwj3Ayg/5JwHA13paen7pADphxr/n5VI8JQsHCCGQ3gVGLLsxQ3h/LYSn5383B05rwNOws3Z576LOTOduvwfrOd5FtVat4akx0uPTrw8BNuUz23vLsY7hmg7i4ipqM2saiAdruNuirh4ff0bNdb3Qy3vkvfAQwrkHoDxTTZtDCOKrC1bMEkdnsQh/PLyetOGHkXeRAgQAQ84efQcBdUhvFofoulpdm9WGGTA+AJEe7l+i37a2c371tCFKs5zzJjxQNBMi1im7OCudP2aNghJuzZaGdSMEZjpwf/t0UgNdg9DOyLGLnY0BUHlzwVtNDkgEQhBeKkb1tUDgQrq7frwAiIJi5BKAeIFgHk5mOpPzvgltOfcoK0Rrs7lWHwsgqtXarK3N0u23h5Ne8+3Cqxn5RYSMfHCAMgDAx4CBWlA9RAGw0GA/ol0gvFB4WjAvBAFUa83SzdUdAbYMqp28uHpxCRefxwAYhksAFBlthxCiXig+zT4TYqkC+Hq7OdAfJv8lPpZiZShWBBIuRP+jspDb2lwcDkzz7OLzbO/zvAHAoXTz5eYMQL0t2yHAiCFcfPY1QDwNFylA5bPoFpsV9fsEiMl8dhcc4PP1CYD3drYcBYdIKQrx0cbRxd2JHSDcQ297/vvoZ5smRC+AyV2AQ+nm03evge08Tyy4jGqXzWWEoIvTgXHU38pWiNgH4ixB/ukAcy/xycXfp4kwdAAAt399W+OCgMjxILQacxvRQ3gEwHgKUIr/rz53CuDFNyP/Eob4+/vEWkBq6AAA/HIi62n/Lk67Q7wDYQ0UpQB7hc54T4E6gACLTYxeAwB0YKZL6U4ATEGIBwCs7qPfQJCCHkCnoK50noJKcXcAojsEAJZZKXhgCoziGKxqWV8IMNp4kP2aC+oB0TMFvhGxDQHQfIPhDrilwKOm/YCZASAHfgBABQjr3f7CyAkA0cPB03AQULRhKd4xAIjzHymo2Gp7gN0FAMAVOoA2fPz03a9ssh/RM7Iz8QKIzYF9HyB0XEZ1xJ4DzNoDOAfAslhDDTyjDfv8A2AcBeCiu/jBHQEgxnYW6Kp6BlCVAkQM8VnieF2Xyr0ivXy+XvsCzKOihwNHCCryw8HrQXVB8dgFeRfAVQiXjMbIIgXINQYB2H7Kf5wF/2Ar7h0AgKKGuAP4zOjhzlkLbpcRXKRZhNUjxG6HIQDOjN47gCn4+fWW3xVS9urPESEEwwHMo9IhAGxS2ISiA1iEnQOoA4hXRAwItp7WzL9Ow18ESJaw/ar4NgeOR49cAHCAnaH8swBhv+6CBGjeBSxEOUAI7HyKHkD4O9xKb3/feQouAI4uLBciHRRHmgbfA7h/xFc9AngNBADthvii1sMOiPwDAFeyt6s7FSFS4PmnA1v0vQvqDqQKAAPE/weAUuEgsj8c+H11Twdw/AKANXA82EDr5cJBEEzB3oI4Mb0AdR3nNw8vQnegWuvqAABwJFJEBwDgNdA7IOs3gL0LhuJdwBY8c4BfNnDdVgooHiOqn/b7JoSW/QODjTHXhU7hMQAAAABJRU5ErkJggg==',
placeholder: 'blur',
},
parameters: {
// ignoring in Chromatic to avoid inconsistent snapshots
// given that the switch from blur to image is quite fast
chromatic: { disableSnapshot: true },
},
};