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.

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

feat: screenshot testing #838

Merged
merged 3 commits into from
Mar 7, 2024
Merged

feat: screenshot testing #838

merged 3 commits into from
Mar 7, 2024

Conversation

niktverd
Copy link
Contributor

No description provided.

@gravity-ui-bot
Copy link
Contributor

gravity-ui-bot commented Feb 28, 2024

Playwright Test Component is ready.

@gravity-ui-bot
Copy link
Contributor

Preview is ready.

NasgulNexus
NasgulNexus previously approved these changes Feb 29, 2024
@@ -123,6 +129,8 @@
"@gravity-ui/stylelint-config": "^1.0.0",
"@gravity-ui/tsconfig": "^1.0.0",
"@gravity-ui/uikit": "^5.12.2",
"@playwright/experimental-ct-react": "^1.38.1",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

will it work if we move it to devDependencies?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok

3. Writing a test:

> NOTE:
> Add `defaultDelay` between mounting and testing routine in every test. It is necessary because of animation in our package.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe here we can say that await defaultDelay(); it is possible solution to test animated components if they present? Because we could switch animation off and I think in this case we won't need this option

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok

await defaultDelay();

// capture the screenshot
await expectScreenshot();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

didn't get how this example is related to light and dark themes?

Copy link
Contributor Author

@niktverd niktverd Mar 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the fixture expectScreenshot inside itself makes all the arrangements to screenshot in different themes

@@ -0,0 +1,3 @@
// Import styles, initialize component theme here.
// import '../src/common.css';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove line 2?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like Malevich, maybe we should add screenshot tests for components with visual presentation?)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok

/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
trace: 'on-first-retry',
headless: true,
/* Port to use for Playwright component endpoint. */
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this comment is redundant

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fyi: the image is broken

import type {PlaywrightFixture} from './types';

export const defaultDelayFixture: PlaywrightFixture<() => Promise<void>> = async ({page}, use) => {
const defaultDelay = async () => await page.waitForTimeout(DEFAULT_MOUNT_TEST_DELAY);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we use smth like this?

await page.waitForLoadState('load');

waiting for load event can be more robust technique for a waiting for a page to load

@niktverd niktverd merged commit 47f1b73 into main Mar 7, 2024
4 checks passed
@niktverd niktverd deleted the screenshot_tests branch March 7, 2024 17:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants