This repository has been archived by the owner on Apr 8, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(core-progress-test): use setContent
- Loading branch information
Showing
2 changed files
with
165 additions
and
103 deletions.
There are no files selected for viewing
This file contains 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
This file contains 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 |
|---|---|---|
| @@ -1,91 +1,171 @@ | ||
| import { test, expect } from '@playwright/test'; | ||
| import { test, expect, Locator } from '@playwright/test'; | ||
|
|
||
| test('sets up correctly', async ({ page }) => { | ||
| await page.goto('./core-progress/core-progress.spec.html') | ||
| const lienarProgress = page.getByText('Linear Progress').locator('core-progress') | ||
| await expect(lienarProgress).toBeAttached() | ||
| await expect(lienarProgress).toHaveAttribute('role', 'img') | ||
| await expect(lienarProgress).toHaveAttribute('type', 'linear') | ||
| await expect(lienarProgress).toHaveAttribute('aria-label', '0%') | ||
| }) | ||
|
|
||
| test('updates linear progress label correctly', async ({ page }) => { | ||
| await page.goto('./core-progress/core-progress.spec.html') | ||
| const linearProgress = page.getByText('Linear Progress').locator('core-progress') | ||
| await expect(linearProgress).toBeAttached() | ||
| await expect(linearProgress).toHaveAttribute('aria-label', '0%') | ||
|
|
||
| // Update to 50% and assert | ||
| await linearProgress.evaluate(node => node.setAttribute('value', '.5')) | ||
| await expect(linearProgress).toHaveAttribute('aria-label', '50%') | ||
|
|
||
| // Update to 100% and assert | ||
| await linearProgress.evaluate(node => node.setAttribute('value', '1')) | ||
| await expect(linearProgress).toHaveAttribute('aria-label', '100%') | ||
| }) | ||
|
|
||
| test('updates radial progress label correctly', async ({ page }) => { | ||
| await page.goto('./core-progress/core-progress.spec.html') | ||
| const radialProgress = await page.getByText('Radial Progress').locator('core-progress') | ||
| await expect(radialProgress).toBeAttached() | ||
| await expect(radialProgress).toHaveAttribute('aria-label', '0%') | ||
|
|
||
| // Update to 50% and assert | ||
| await radialProgress.evaluate(node => node.setAttribute('value', '.5')) | ||
| await expect(radialProgress).toHaveAttribute('aria-label', '50%') | ||
|
|
||
| // Update to 100% and assert | ||
| await radialProgress.evaluate(node => node.setAttribute('value', '1')) | ||
| await expect(radialProgress).toHaveAttribute('aria-label', '100%') | ||
| }) | ||
| test.describe('core-progress', () => { | ||
| let coreProgress: Locator | ||
|
|
||
| test('updates label from indeterminate value', async ({ page }) => { | ||
| await page.goto('./core-progress/core-progress.spec.html') | ||
|
|
||
| const lienarProgress = page.getByText('Linear Progress').locator('core-progress') | ||
| await lienarProgress.evaluate(node => node.setAttribute("value", "Loading...")) | ||
| await expect(lienarProgress).toHaveAttribute('aria-label', 'Loading...') | ||
|
|
||
| const radialProgress = page.getByText('Radial Progress').locator('core-progress') | ||
| await radialProgress.evaluate(node => node.setAttribute("value", "Loading...")) | ||
| await expect(radialProgress).toHaveAttribute('aria-label', 'Loading...') | ||
| }) | ||
|
|
||
| test('calculates percentage relative to max', async ({ page }) => { | ||
| await page.goto('./core-progress/core-progress.spec.html') | ||
|
|
||
| const lienarProgress = page.getByText('Linear Progress').locator('core-progress') | ||
| test.beforeEach(async ({ page }) => { | ||
| await page.goto('./core-progress/core-progress.spec.html') | ||
| coreProgress = page.getByTestId('core-progress') | ||
| }) | ||
|
|
||
| await lienarProgress.evaluate(node => node.setAttribute('value', '0.5')) | ||
| await expect(lienarProgress).toHaveAttribute('aria-label', '50%') | ||
|
|
||
| await lienarProgress.evaluate(node => node.setAttribute('max', '10')) | ||
| await expect(lienarProgress).toHaveAttribute('aria-label', '5%') | ||
|
|
||
| await lienarProgress.evaluate(node => node.setAttribute('max', '100')) | ||
| await expect(lienarProgress).toHaveAttribute('aria-label', '1%') | ||
| }) | ||
|
|
||
| test('does not trigger change event on max', async ({ page }) => { | ||
| await page.goto('./core-progress/core-progress.spec.html') | ||
| const lienarProgress = page.getByText('Linear Progress').locator('core-progress') | ||
| const changedElement = page.getByTestId('change-event-result') | ||
| await lienarProgress.evaluate(node => node.setAttribute('max', '10')) | ||
| await expect(changedElement).toBeEmpty() | ||
| test('sets up correctly', async ({ page }) => { | ||
| await page.setContent(` | ||
| <label> | ||
| Linear Progress | ||
| <span class="my-track"> | ||
| <core-progress data-testid="core-progress"></core-progress> | ||
| </span> | ||
| </label> | ||
| `) | ||
| await expect(coreProgress).toBeAttached() | ||
| await expect(coreProgress).toHaveAttribute('role', 'img') | ||
| await expect(coreProgress).toHaveAttribute('type', 'linear') | ||
| await expect(coreProgress).toHaveAttribute('aria-label', '0%') | ||
| }) | ||
|
|
||
| test('updates linear progress label correctly', async ({ page }) => { | ||
| await page.setContent(` | ||
| <label> | ||
| Linear Progress | ||
| <span class="my-track"> | ||
| <core-progress data-testid="core-progress"></core-progress> | ||
| </span> | ||
| </label> | ||
| `) | ||
| await expect(coreProgress).toBeAttached() | ||
| await expect(coreProgress).toHaveAttribute('aria-label', '0%') | ||
|
|
||
| // Update to 50% and assert | ||
| await coreProgress.evaluate(node => node.setAttribute('value', '.5')) | ||
| await expect(coreProgress).toHaveAttribute('aria-label', '50%') | ||
|
|
||
| // Update to 100% and assert | ||
| await coreProgress.evaluate(node => node.setAttribute('value', '1')) | ||
| await expect(coreProgress).toHaveAttribute('aria-label', '100%') | ||
| }) | ||
|
|
||
| test('updates radial progress label correctly', async ({ page }) => { | ||
| await page.setContent(` | ||
| <label> | ||
| Radial Progress | ||
| <span style="display: block; width: 40px"> | ||
| <core-progress class="my-radial" data-testid="core-progress" type="radial"></core-progress> | ||
| </span> | ||
| </label> | ||
| `) | ||
| await expect(coreProgress).toBeAttached() | ||
| await expect(coreProgress).toHaveAttribute('aria-label', '0%') | ||
|
|
||
| // Update to 50% and assert | ||
| await coreProgress.evaluate(node => node.setAttribute('value', '.5')) | ||
| await expect(coreProgress).toHaveAttribute('aria-label', '50%') | ||
|
|
||
| // Update to 100% and assert | ||
| await coreProgress.evaluate(node => node.setAttribute('value', '1')) | ||
| await expect(coreProgress).toHaveAttribute('aria-label', '100%') | ||
| }) | ||
|
|
||
| test('updates label from indeterminate value', async ({ page }) => { | ||
|
|
||
| await page.setContent(` | ||
| <label> | ||
| Linear Progress | ||
| <span class="my-track"> | ||
| <core-progress data-testid="core-progress"></core-progress> | ||
| </span> | ||
| </label> | ||
| `) | ||
| await coreProgress.evaluate(node => node.setAttribute("value", "Loading...")) | ||
| await expect(coreProgress).toHaveAttribute('aria-label', 'Loading...') | ||
|
|
||
| await page.setContent(` | ||
| <label> | ||
| Radial Progress | ||
| <span style="display: block; width: 40px"> | ||
| <core-progress class="my-radial" data-testid="core-progress" type="radial"></core-progress> | ||
| </span> | ||
| </label> | ||
| `) | ||
| await coreProgress.evaluate(node => node.setAttribute("value", "Loading...")) | ||
| await expect(coreProgress).toHaveAttribute('aria-label', 'Loading...') | ||
| }) | ||
|
|
||
| test('calculates percentage relative to max', async ({ page }) => { | ||
|
|
||
| await page.setContent(` | ||
| <label> | ||
| Linear Progress | ||
| <span class="my-track"> | ||
| <core-progress data-testid="core-progress"></core-progress> | ||
| </span> | ||
| </label> | ||
| `) | ||
|
|
||
| await coreProgress.evaluate(node => node.setAttribute('value', '0.5')) | ||
| await expect(coreProgress).toHaveAttribute('aria-label', '50%') | ||
|
|
||
| await coreProgress.evaluate(node => node.setAttribute('max', '10')) | ||
| await expect(coreProgress).toHaveAttribute('aria-label', '5%') | ||
|
|
||
| await coreProgress.evaluate(node => node.setAttribute('max', '100')) | ||
| await expect(coreProgress).toHaveAttribute('aria-label', '1%') | ||
| }) | ||
|
|
||
| test.describe('change event', () => { | ||
| let numChangeEvents | ||
| test.beforeEach(async ({ page }) => { | ||
| numChangeEvents = 0 | ||
| page.exposeFunction('captureChangeEvent', () => numChangeEvents += 1) | ||
| }) | ||
|
|
||
| test('does not trigger change event on max', async ({ page }) => { | ||
| await page.setContent(` | ||
| <label> | ||
| Linear Progress | ||
| <span class="my-track"> | ||
| <core-progress id="core-progress" data-testid="core-progress"></core-progress> | ||
| </span> | ||
| </label> | ||
| `) | ||
| await page.addScriptTag({ content: ` | ||
| document.getElementById("core-progress").addEventListener('change', window.captureChangeEvent) | ||
| `}) | ||
| await coreProgress.evaluate(node => node.setAttribute('max', '10')) | ||
| expect(numChangeEvents).toBe(0) | ||
| }) | ||
|
|
||
| test('triggers change event on value', async ({ page }) => { | ||
| await page.setContent(` | ||
| <label> | ||
| Linear Progress | ||
| <span class="my-track"> | ||
| <core-progress id="core-progress" data-testid="core-progress"></core-progress> | ||
| </span> | ||
| </label> | ||
| `) | ||
| await page.addScriptTag({ content: ` | ||
| document.getElementById("core-progress").addEventListener('change', window.captureChangeEvent) | ||
| `}) | ||
| await coreProgress.evaluate(node => node.setAttribute('value', '.5')) | ||
| expect(numChangeEvents).toBe(1) | ||
| }) | ||
|
|
||
| test('triggers change event on indeterminate value', async ({ page }) => { | ||
| await page.setContent(` | ||
| <label> | ||
| Linear Progress | ||
| <span class="my-track"> | ||
| <core-progress id="core-progress" data-testid="core-progress"></core-progress> | ||
| </span> | ||
| </label> | ||
| `) | ||
| await page.addScriptTag({ content: ` | ||
| document.getElementById("core-progress").addEventListener('change', window.captureChangeEvent) | ||
| `}) | ||
| await coreProgress.evaluate(node => node.setAttribute('value', 'Loading...')) | ||
| expect(numChangeEvents).toBe(1) | ||
| }) | ||
| }) | ||
| }) | ||
|
|
||
| test('triggers change event on value', async ({ page }) => { | ||
| await page.goto('./core-progress/core-progress.spec.html') | ||
| const lienarProgress = page.getByText('Linear Progress').locator('core-progress') | ||
| const changedElement = page.getByTestId('change-event-result') | ||
| await lienarProgress.evaluate(node => node.setAttribute('value', '.5')) | ||
| await expect(changedElement).not.toBeEmpty() | ||
| }) | ||
|
|
||
| test('triggers change event on indeterminate value', async ({ page }) => { | ||
| await page.goto('./core-progress/core-progress.spec.html') | ||
| const lienarProgress = page.getByText('Linear Progress').locator('core-progress') | ||
| const changedElement = page.getByTestId('change-event-result') | ||
| await lienarProgress.evaluate(node => node.setAttribute('value', 'Loading...')) | ||
| await expect(changedElement).not.toBeEmpty() | ||
| }) |