Conversation
|
|
| description: 'https://github.com/ionic-team/ionic-framework/issues/25446', | ||
| }); | ||
|
|
||
| const breadcrumbs = page.locator('#color'); |
There was a problem hiding this comment.
Is it possible to use a unit test here instead of an e2e test?
It looks like we only need to check the output in the DOM, and unit tests run much faster than e2e tests.
You could do something like this:
it('should have color attribute', async () => {
const page = await newSpecPage({
components: [Breadcrumb, Breadcrumbs],
html: `
<ion-breadcrumbs color="danger">
<ion-breadcrumb>First</ion-breadcrumb>
</ion-breadcrumbs>
`
});
const breadcrumbs = page.body.querySelector('ion-breadcrumbs');
expect(breadcrumbs.hasAttribute('color')).toBe(true);
});We use Stencil's unit testing library: https://stenciljs.com/docs/unit-testing
There was a problem hiding this comment.
Should be able to place this in src/components/breadcrumbs/test/breadrumbs.spec.ts
liamdebeasi
left a comment
liamdebeasi
left a comment
There was a problem hiding this comment.
A couple small changes, but otherwise this looks great. Thanks for taking care of this!
| <h1>Color: Primary</h1> | ||
|
|
||
| <ion-breadcrumbs color="primary"> | ||
| <ion-breadcrumbs id="color" color="primary"> |
There was a problem hiding this comment.
Good catch, thank you!
| test.beforeEach(async ({ page }) => { | ||
| await page.goto('/src/components/breadcrumbs/test/basic'); | ||
| }); | ||
|
|
||
| test('should not have visual regressions', async ({ page }) => { |
There was a problem hiding this comment.
Can we revert this if it's not needed?
2 participants
Pull request checklist
Please check if your PR fulfills the following requirements:
ionic-docsrepo, in a separate PR. See the contributing guide for details.npm run build) was run locally and any changes were pushednpm run lint) has passed locally and any fixes were made for failuresPull request type
Please check the type of change your PR introduces:
What is the current behavior?
The test was only running for Vue.
Issue URL: N/A (requested via comment)
What is the new behavior?
Does this introduce a breaking change?
Other information
N/A