Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

fix(test): remove component.get usages (#17723)

Browse source
This commit is contained in:
Pavel Feldman 2022-09-29 19:18:26 -08:00 committed by GitHub
parent 083fb4401c
commit 6e839ff404
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
docs/src/testing-library-js.md
View file

@ -27,7 +27,7 @@ If you use DOM Testing Library in the browser (for example, you bundle end-to-en
| `expect(screen.getByLabelText('Password')).toHaveValue('secret')` | `await expect(component.getByLabelText('Password')).toHaveValue('secret')` | | `expect(screen.getByLabelText('Password')).toHaveValue('secret')` | `await expect(component.getByLabelText('Password')).toHaveValue('secret')` |
| `screen.findByText('...')` | `component.getByText('...')` | | `screen.findByText('...')` | `component.getByText('...')` |
| `screen.getByTestId('...')` | `component.getByTestId('...')` | | `screen.getByTestId('...')` | `component.getByTestId('...')` |
| `screen.queryByPlaceholderText('...')` | `component.get('[placeholder="..."]')` | | `screen.queryByPlaceholderText('...')` | `component.locator('[placeholder="..."]')` |
| `screen.getByRole('button', { pressed: true })` | `component.getByRole('button', { pressed: true })`| | `screen.getByRole('button', { pressed: true })` | `component.getByRole('button', { pressed: true })`|
## Example ## Example

20
packages/html-reporter/src/headerView.spec.tsx
View file

@ -29,11 +29,11 @@ test('should render counters', async ({ mount }) => {
ok: false, ok: false,
duration: 100000 duration: 100000
}} filterText='' setFilterText={() => {}}></HeaderView>); }} filterText='' setFilterText={() => {}}></HeaderView>);
await expect(component.get('a', { hasText: 'All' }).get('.counter')).toHaveText('100'); await expect(component.locator('a', { hasText: 'All' }).locator('.counter')).toHaveText('100');
await expect(component.get('a', { hasText: 'Passed' }).get('.counter')).toHaveText('42'); await expect(component.locator('a', { hasText: 'Passed' }).locator('.counter')).toHaveText('42');
await expect(component.get('a', { hasText: 'Failed' }).get('.counter')).toHaveText('31'); await expect(component.locator('a', { hasText: 'Failed' }).locator('.counter')).toHaveText('31');
await expect(component.get('a', { hasText: 'Flaky' }).get('.counter')).toHaveText('17'); await expect(component.locator('a', { hasText: 'Flaky' }).locator('.counter')).toHaveText('17');
await expect(component.get('a', { hasText: 'Skipped' }).get('.counter')).toHaveText('10'); await expect(component.locator('a', { hasText: 'Skipped' }).locator('.counter')).toHaveText('10');
}); });
test('should toggle filters', async ({ page, mount: mount }) => { test('should toggle filters', async ({ page, mount: mount }) => {
@ -51,14 +51,14 @@ test('should toggle filters', async ({ page, mount: mount }) => {
filterText='' filterText=''
setFilterText={(filterText: string) => filters.push(filterText)}> setFilterText={(filterText: string) => filters.push(filterText)}>
</HeaderView>); </HeaderView>);
await component.get('a', { hasText: 'All' }).click(); await component.locator('a', { hasText: 'All' }).click();
await component.get('a', { hasText: 'Passed' }).click(); await component.locator('a', { hasText: 'Passed' }).click();
await expect(page).toHaveURL(/#\?q=s:passed/); await expect(page).toHaveURL(/#\?q=s:passed/);
await component.get('a', { hasText: 'Failed' }).click(); await component.locator('a', { hasText: 'Failed' }).click();
await expect(page).toHaveURL(/#\?q=s:failed/); await expect(page).toHaveURL(/#\?q=s:failed/);
await component.get('a', { hasText: 'Flaky' }).click(); await component.locator('a', { hasText: 'Flaky' }).click();
await expect(page).toHaveURL(/#\?q=s:flaky/); await expect(page).toHaveURL(/#\?q=s:flaky/);
await component.get('a', { hasText: 'Skipped' }).click(); await component.locator('a', { hasText: 'Skipped' }).click();
await expect(page).toHaveURL(/#\?q=s:skipped/); await expect(page).toHaveURL(/#\?q=s:skipped/);
expect(filters).toEqual(['', 's:passed', 's:failed', 's:flaky', 's:skipped']); expect(filters).toEqual(['', 's:passed', 's:failed', 's:flaky', 's:skipped']);
}); });

16
packages/html-reporter/src/imageDiffView.spec.tsx
View file

@ -37,7 +37,7 @@ const imageDiff: ImageDiff = {
test('should render links', async ({ mount }) => { test('should render links', async ({ mount }) => {
const component = await mount(<ImageDiffView key='image-diff' imageDiff={imageDiff}></ImageDiffView>); const component = await mount(<ImageDiffView key='image-diff' imageDiff={imageDiff}></ImageDiffView>);
await expect(component.get('a')).toHaveText([ await expect(component.locator('a')).toHaveText([
'screenshot-actual.png', 'screenshot-actual.png',
'screenshot-expected.png', 'screenshot-expected.png',
'screenshot-diff.png', 'screenshot-diff.png',
@ -46,11 +46,11 @@ test('should render links', async ({ mount }) => {
test('should show actual by default', async ({ mount }) => { test('should show actual by default', async ({ mount }) => {
const component = await mount(<ImageDiffView key='image-diff' imageDiff={imageDiff}></ImageDiffView>); const component = await mount(<ImageDiffView key='image-diff' imageDiff={imageDiff}></ImageDiffView>);
const sliderElement = component.get('data-testid=test-result-image-mismatch-grip'); const sliderElement = component.locator('data-testid=test-result-image-mismatch-grip');
await expect.poll(() => sliderElement.evaluate(e => e.style.left), 'Actual slider is on the right').toBe('611px'); await expect.poll(() => sliderElement.evaluate(e => e.style.left), 'Actual slider is on the right').toBe('611px');
const images = component.get('img'); const images = component.locator('img');
const imageCount = await component.get('img').count(); const imageCount = await component.locator('img').count();
for (let i = 0; i < imageCount; ++i) { for (let i = 0; i < imageCount; ++i) {
const image = images.nth(i); const image = images.nth(i);
const box = await image.boundingBox(); const box = await image.boundingBox();
@ -61,11 +61,11 @@ test('should show actual by default', async ({ mount }) => {
test('should switch to expected', async ({ mount }) => { test('should switch to expected', async ({ mount }) => {
const component = await mount(<ImageDiffView key='image-diff' imageDiff={imageDiff}></ImageDiffView>); const component = await mount(<ImageDiffView key='image-diff' imageDiff={imageDiff}></ImageDiffView>);
await component.getByText('Expected', { exact: true }).click(); await component.getByText('Expected', { exact: true }).click();
const sliderElement = component.get('data-testid=test-result-image-mismatch-grip'); const sliderElement = component.locator('data-testid=test-result-image-mismatch-grip');
await expect.poll(() => sliderElement.evaluate(e => e.style.left), 'Expected slider is on the left').toBe('371px'); await expect.poll(() => sliderElement.evaluate(e => e.style.left), 'Expected slider is on the left').toBe('371px');
const images = component.get('img'); const images = component.locator('img');
const imageCount = await component.get('img').count(); const imageCount = await component.locator('img').count();
for (let i = 0; i < imageCount; ++i) { for (let i = 0; i < imageCount; ++i) {
const image = images.nth(i); const image = images.nth(i);
const box = await image.boundingBox(); const box = await image.boundingBox();
@ -77,7 +77,7 @@ test('should switch to diff', async ({ mount }) => {
const component = await mount(<ImageDiffView key='image-diff' imageDiff={imageDiff}></ImageDiffView>); const component = await mount(<ImageDiffView key='image-diff' imageDiff={imageDiff}></ImageDiffView>);
await component.getByText('Diff', { exact: true }).click(); await component.getByText('Diff', { exact: true }).click();
const image = component.get('img'); const image = component.locator('img');
const box = await image.boundingBox(); const box = await image.boundingBox();
expect(box).toEqual({ x: 400, y: 80, width: 200, height: 200 }); expect(box).toEqual({ x: 400, y: 80, width: 200, height: 200 });
}); });