-
Notifications
You must be signed in to change notification settings - Fork 7
Refactoring/miscellaneous jest to playwright #636
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
Merged
Merged
Changes from all commits
Commits
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,67 @@ | ||
import React from 'react'; | ||
import { | ||
expect, | ||
test, | ||
} from '@playwright/experimental-ct-react'; | ||
import { | ||
mixPropTests, | ||
propTests, | ||
} from '../../../../tests/playwright'; | ||
import { BadgeForTest } from './Badge.story'; | ||
import { labelPropTest } from './_propTests/labelPropTest'; | ||
import { priorityPropTest } from './_propTests/priorityPropTest'; | ||
|
||
test.describe('Badge', () => { | ||
test.describe('visual', () => { | ||
[ | ||
...propTests.defaultComponentPropTest, | ||
...labelPropTest, | ||
...mixPropTests([ | ||
[ | ||
...propTests.feedbackColorPropTest, | ||
...propTests.neutralColorPropTest, | ||
], | ||
priorityPropTest, | ||
]), | ||
].forEach(({ | ||
name, | ||
onBeforeTest, | ||
onBeforeSnapshot, | ||
props, | ||
}) => { | ||
test(name, async ({ | ||
mount, | ||
page, | ||
}) => { | ||
if (onBeforeTest) { | ||
await onBeforeTest(page); | ||
} | ||
|
||
const component = await mount( | ||
<BadgeForTest | ||
{...props} | ||
/>, | ||
); | ||
|
||
if (onBeforeSnapshot) { | ||
await onBeforeSnapshot(page, component); | ||
} | ||
|
||
const screenshot = await component.screenshot(); | ||
expect(screenshot).toMatchSnapshot(); | ||
}); | ||
}); | ||
}); | ||
|
||
test.describe('non-visual', () => { | ||
test('id', async ({ mount }) => { | ||
const component = await mount( | ||
<BadgeForTest | ||
id="test-id" | ||
/>, | ||
); | ||
|
||
await expect(component).toHaveAttribute('id', 'test-id'); | ||
}); | ||
}); | ||
}); |
Binary file added
BIN
+1.56 KB
...ts/Badge-visual-color-string-danger-priority-string-filled-1-chromium-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+1.6 KB
...s/Badge-visual-color-string-danger-priority-string-outline-1-chromium-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+1.47 KB
...hots/Badge-visual-color-string-dark-priority-string-filled-1-chromium-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+1.58 KB
...ots/Badge-visual-color-string-dark-priority-string-outline-1-chromium-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+1.5 KB
...hots/Badge-visual-color-string-help-priority-string-filled-1-chromium-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+1.4 KB
...ots/Badge-visual-color-string-help-priority-string-outline-1-chromium-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+1.56 KB
...hots/Badge-visual-color-string-info-priority-string-filled-1-chromium-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+1.59 KB
...ots/Badge-visual-color-string-info-priority-string-outline-1-chromium-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+1.4 KB
...ots/Badge-visual-color-string-light-priority-string-filled-1-chromium-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+817 Bytes
...ts/Badge-visual-color-string-light-priority-string-outline-1-chromium-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+1.37 KB
...hots/Badge-visual-color-string-note-priority-string-filled-1-chromium-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+1.55 KB
...ots/Badge-visual-color-string-note-priority-string-outline-1-chromium-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+1.62 KB
...s/Badge-visual-color-string-success-priority-string-filled-1-chromium-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+1.67 KB
.../Badge-visual-color-string-success-priority-string-outline-1-chromium-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+1.5 KB
...s/Badge-visual-color-string-warning-priority-string-filled-1-chromium-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+1.5 KB
.../Badge-visual-color-string-warning-priority-string-outline-1-chromium-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+1.37 KB
...ec.tsx-snapshots/Badge-visual-defaultComponentProps-object-1-chromium-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+4.05 KB
...__/Badge.spec.tsx-snapshots/Badge-visual-label-string-long-1-chromium-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import React from 'react'; | ||
import type { HTMLAttributes } from 'react'; | ||
import { Badge } from '..'; | ||
|
||
// Types for story component will be improved when we have full TypeScript support | ||
type BadgeForTestProps = HTMLAttributes<HTMLDivElement>; | ||
|
||
export const BadgeForTest = ({ | ||
...props | ||
}: BadgeForTestProps) => ( | ||
<Badge label="Badge label" {...props} /> | ||
); |
This file was deleted.
Oops, something went wrong.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
import { propTests } from '../../../../../tests/playwright'; | ||
import type { PropTests } from '../../../../../tests/playwright/types'; | ||
|
||
export const labelPropTest: PropTests = [ | ||
...propTests.labelPropTest.filter((test) => typeof test.props?.label === 'string'), | ||
]; |
10 changes: 10 additions & 0 deletions
10
src/components/Badge/__tests__/_propTests/priorityPropTest.ts
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import { propTests } from '../../../../../tests/playwright'; | ||
import type { PropTests } from '../../../../../tests/playwright/types'; | ||
|
||
const subsetOfValues = [ | ||
'filled', | ||
'outline', | ||
]; | ||
|
||
export const priorityPropTest: PropTests = propTests.priorityPropTest | ||
.filter(({ props }) => subsetOfValues.includes(props.priority as string)); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,142 @@ | ||
import React from 'react'; | ||
import { | ||
expect, | ||
test, | ||
} from '@playwright/experimental-ct-react'; | ||
import { | ||
mixPropTests, | ||
propTests, | ||
} from '../../../../tests/playwright'; | ||
import { | ||
CadForTest, | ||
CadWithScrollableForTest, | ||
CardOnlyWithBodyForTest, | ||
} from './Card.story'; | ||
import { densePropTest } from './_propTests/densePropTest'; | ||
|
||
test.describe('Card', () => { | ||
test.describe('visual', () => { | ||
[ | ||
...propTests.defaultComponentPropTest, | ||
...densePropTest, | ||
...mixPropTests([ | ||
propTests.disabledPropTest, | ||
propTests.feedbackColorPropTest, | ||
]), | ||
...propTests.raisedPropTest, | ||
].forEach(({ | ||
name, | ||
onBeforeTest, | ||
onBeforeSnapshot, | ||
props, | ||
}) => { | ||
test(name, async ({ | ||
mount, | ||
page, | ||
}) => { | ||
if (onBeforeTest) { | ||
await onBeforeTest(page); | ||
} | ||
|
||
const component = await mount( | ||
<CadForTest | ||
{...props} | ||
/>, | ||
); | ||
|
||
if (onBeforeSnapshot) { | ||
await onBeforeSnapshot(page, component); | ||
} | ||
|
||
const screenshot = await component.screenshot(); | ||
expect(screenshot).toMatchSnapshot(); | ||
}); | ||
}); | ||
|
||
test.describe('composition', () => { | ||
/** | ||
* Card with body and footer is omitted from composition section, because | ||
* it is included in base visual tests. | ||
*/ | ||
test.describe('onlyBody', () => { | ||
[ | ||
...propTests.defaultComponentPropTest, | ||
].forEach(({ | ||
name, | ||
onBeforeTest, | ||
onBeforeSnapshot, | ||
props, | ||
}) => { | ||
test(name, async ({ | ||
mount, | ||
page, | ||
}) => { | ||
if (onBeforeTest) { | ||
await onBeforeTest(page); | ||
} | ||
|
||
const component = await mount( | ||
<CardOnlyWithBodyForTest | ||
{...props} | ||
/>, | ||
); | ||
|
||
if (onBeforeSnapshot) { | ||
await onBeforeSnapshot(page, component); | ||
} | ||
|
||
const screenshot = await component.screenshot({ animations: 'disabled' }); | ||
expect(screenshot).toMatchSnapshot(); | ||
}); | ||
}); | ||
}); | ||
|
||
test.describe('scrollView', () => { | ||
[ | ||
...propTests.defaultComponentPropTest, | ||
].forEach(({ | ||
name, | ||
onBeforeTest, | ||
onBeforeSnapshot, | ||
props, | ||
}) => { | ||
test(name, async ({ | ||
mount, | ||
page, | ||
}) => { | ||
if (onBeforeTest) { | ||
await onBeforeTest(page); | ||
} | ||
|
||
const component = await mount( | ||
<CadWithScrollableForTest | ||
{...props} | ||
/>, | ||
); | ||
|
||
if (onBeforeSnapshot) { | ||
await onBeforeSnapshot(page, component); | ||
} | ||
|
||
const screenshot = await component.screenshot({ animations: 'disabled' }); | ||
expect(screenshot).toMatchSnapshot(); | ||
}); | ||
}); | ||
}); | ||
}); | ||
}); | ||
|
||
test.describe('non-visual', () => { | ||
test('id', async ({ mount }) => { | ||
const id = 'test-id'; | ||
|
||
const component = await mount( | ||
<CadForTest | ||
id={id} | ||
/>, | ||
); | ||
|
||
await expect(component.locator(`div[id=${id}]`)).toHaveAttribute('id', id); | ||
}); | ||
}); | ||
}); |
Binary file added
BIN
+4.01 KB
...d-visual-composition-onlyBody-defaultComponentProps-object-1-chromium-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+58 KB
...visual-composition-scrollView-defaultComponentProps-object-1-chromium-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+6.51 KB
...pec.tsx-snapshots/Card-visual-defaultComponentProps-object-1-chromium-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+6.61 KB
...__/Card.spec.tsx-snapshots/Card-visual-dense-boolean-false-1-chromium-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+6.25 KB
...s__/Card.spec.tsx-snapshots/Card-visual-dense-boolean-true-1-chromium-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+6.75 KB
...ots/Card-visual-disabled-boolean-false-color-string-danger-1-chromium-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+6.71 KB
...shots/Card-visual-disabled-boolean-false-color-string-help-1-chromium-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+6.74 KB
...shots/Card-visual-disabled-boolean-false-color-string-info-1-chromium-linux.png
Oops, something went wrong.
Binary file added
BIN
+6.61 KB
...shots/Card-visual-disabled-boolean-false-color-string-note-1-chromium-linux.png
Oops, something went wrong.
Binary file added
BIN
+6.78 KB
...ts/Card-visual-disabled-boolean-false-color-string-success-1-chromium-linux.png
Oops, something went wrong.
Binary file added
BIN
+6.58 KB
...ts/Card-visual-disabled-boolean-false-color-string-warning-1-chromium-linux.png
Oops, something went wrong.
Binary file added
BIN
+6.4 KB
...hots/Card-visual-disabled-boolean-true-color-string-danger-1-chromium-linux.png
Oops, something went wrong.
Binary file added
BIN
+6.3 KB
...pshots/Card-visual-disabled-boolean-true-color-string-help-1-chromium-linux.png
Oops, something went wrong.
Binary file added
BIN
+6.42 KB
...pshots/Card-visual-disabled-boolean-true-color-string-info-1-chromium-linux.png
Oops, something went wrong.
Binary file added
BIN
+6.38 KB
...pshots/Card-visual-disabled-boolean-true-color-string-note-1-chromium-linux.png
Oops, something went wrong.
Binary file added
BIN
+6.45 KB
...ots/Card-visual-disabled-boolean-true-color-string-success-1-chromium-linux.png
Oops, something went wrong.
Binary file added
BIN
+6.35 KB
...ots/Card-visual-disabled-boolean-true-color-string-warning-1-chromium-linux.png
Oops, something went wrong.
Binary file added
BIN
+6.51 KB
..._/Card.spec.tsx-snapshots/Card-visual-raised-boolean-false-1-chromium-linux.png
Oops, something went wrong.
Binary file added
BIN
+7.32 KB
...__/Card.spec.tsx-snapshots/Card-visual-raised-boolean-true-1-chromium-linux.png
Oops, something went wrong.
Binary file added
BIN
+58 KB
...pshots/Card-visual-scrollView-defaultComponentProps-object-1-chromium-linux.png
Oops, something went wrong.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,83 @@ | ||
import React from 'react'; | ||
import type { HTMLAttributes } from 'react'; | ||
import { | ||
Card, | ||
CardBody, | ||
CardFooter, | ||
} from '..'; | ||
import { TextLink } from '../../TextLink'; | ||
import { Button } from '../../Button'; | ||
import { ScrollView } from '../../ScrollView'; | ||
|
||
// Types for story component will be improved when we have full TypeScript support | ||
type CardForTestProps = HTMLAttributes<HTMLDivElement>; | ||
|
||
export const CadForTest = ({ | ||
...props | ||
}: CardForTestProps) => ( | ||
<div style={{ padding: '20px' }}> | ||
<Card {...props}> | ||
<CardBody> | ||
This is a card body. | ||
<TextLink href="/" label="This is a link" /> | ||
</CardBody> | ||
<CardFooter> | ||
<Button label="Footer button" /> | ||
</CardFooter> | ||
</Card> | ||
</div> | ||
); | ||
|
||
export const CadWithScrollableForTest = ({ | ||
...props | ||
}: CardForTestProps) => ( | ||
<div | ||
style={{ | ||
display: 'flex', | ||
height: '400px', | ||
padding: '20px', | ||
width: '500px', | ||
}} | ||
> | ||
<Card {...props}> | ||
<ScrollView arrows> | ||
<CardBody id="card-body"> | ||
Hello! I'm scrollable card. | ||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo | ||
ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis | ||
dis parturient montes, nascetur ridiculus mus. Donec quam felis, | ||
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa | ||
quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, | ||
arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. | ||
Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras | ||
dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend | ||
tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, | ||
enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. | ||
Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean | ||
imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper | ||
ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus | ||
eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing | ||
sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, | ||
hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. | ||
<TextLink href="/" label="This is a link" /> | ||
</CardBody> | ||
</ScrollView> | ||
<CardFooter> | ||
<Button label="Footer button" /> | ||
</CardFooter> | ||
</Card> | ||
</div> | ||
); | ||
|
||
export const CardOnlyWithBodyForTest = ({ | ||
...props | ||
}: CardForTestProps) => ( | ||
<div style={{ padding: '20px' }}> | ||
<Card {...props}> | ||
<CardBody> | ||
This is a card body. | ||
<TextLink href="/" label="This is a link" /> | ||
</CardBody> | ||
</Card> | ||
</div> | ||
); |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.