-
Notifications
You must be signed in to change notification settings - Fork 601
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
42 changed files
with
2,514 additions
and
3,993 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
File renamed without changes.
1 change: 0 additions & 1 deletion
1
packages/web-components/fast-foundation/.storybook/package.json
This file was deleted.
Oops, something went wrong.
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
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
140 changes: 55 additions & 85 deletions
140
packages/web-components/fast-foundation/src/accordion-item/accordion-item.pw.spec.ts
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,118 +1,88 @@ | ||
| import type { Locator, Page } from "@playwright/test"; | ||
| import { expect, test } from "@playwright/test"; | ||
| import { fixtureURL } from "../__test__/helpers.js"; | ||
| import type { FASTAccordionItem } from "./accordion-item.js"; | ||
|
|
||
| test.describe("Accordion item", () => { | ||
| test("should set an `aria-level` to the heading when provided", async ({ page }) => { | ||
| await page.goto( | ||
| fixtureURL("accordion-item--accordion-item", { | ||
| headinglevel: 4, | ||
| }) | ||
| ); | ||
| test.describe("States, Attributes, and Properties", () => { | ||
| let page: Page; | ||
| let element: Locator; | ||
| let heading: Locator; | ||
|
|
||
| const element = page.locator("fast-accordion-item"); | ||
| test.beforeAll(async ({ browser }) => { | ||
| page = await browser.newPage(); | ||
|
|
||
| await expect(element).toHaveJSProperty("headinglevel", 4); | ||
| element = page.locator("fast-accordion-item"); | ||
|
|
||
| const heading = element.locator(`[role="heading"]`); | ||
| heading = page.locator(`[role="heading"]`); | ||
|
|
||
| await expect(heading).toHaveAttribute("aria-level", "4"); | ||
| }); | ||
|
|
||
| test("should set a default heading level of 2 when NOT provided a `headinglevel`", async ({ | ||
| page, | ||
| }) => { | ||
| await page.goto(fixtureURL("accordion-item--accordion-item")); | ||
|
|
||
| const element = page.locator("fast-accordion-item"); | ||
|
|
||
| await expect(element).toHaveJSProperty("headinglevel", 2); | ||
|
|
||
| const heading = page.locator(`[role="heading"]`); | ||
|
|
||
| await expect(heading).toHaveAttribute("aria-level", "2"); | ||
| }); | ||
| await page.goto(fixtureURL("accordion-item--accordion-item")); | ||
| }); | ||
|
|
||
| test("should set `aria-expanded` value to false on the internal button when expanded is undefined", async ({ | ||
| page, | ||
| }) => { | ||
| await page.goto(fixtureURL("accordion-item--accordion-item")); | ||
| test.afterAll(async () => { | ||
| await page.close(); | ||
| }); | ||
|
|
||
| const element = page.locator("fast-accordion-item button"); | ||
| test("should set a default heading level of 2 when `headinglevel` is not provided", async () => { | ||
| await expect(element).not.hasAttribute("headinglevel"); | ||
|
|
||
| await expect(element).toHaveAttribute("aria-expanded", "false"); | ||
| }); | ||
| await expect(element).toHaveJSProperty("headinglevel", 2); | ||
| }); | ||
|
|
||
| test.describe("when not expanded", () => { | ||
| test("should NOT have a class of `expanded`", async ({ page }) => { | ||
| await page.goto( | ||
| fixtureURL("accordion-item--accordion-item", { | ||
| expanded: false, | ||
| }) | ||
| ); | ||
| test("should set the `aria-level` attribute on the internal heading element equal to the heading level", async () => { | ||
| await expect(heading).toHaveAttribute("aria-level", "2"); | ||
|
|
||
| const element = page.locator("fast-accordion-item"); | ||
| await element.evaluate<void, FASTAccordionItem>(node => { | ||
| node.headinglevel = 3; | ||
| }); | ||
|
|
||
| await expect(element).not.toHaveClass("expanded"); | ||
| await expect(heading).toHaveAttribute("aria-level", "3"); | ||
| }); | ||
|
|
||
| test("should set `aria-expanded` value to false on the internal button", async ({ | ||
| page, | ||
| }) => { | ||
| await page.goto( | ||
| fixtureURL("accordion-item--accordion-item", { | ||
| expanded: false, | ||
| }) | ||
| ); | ||
|
|
||
| const element = page.locator("fast-accordion-item button"); | ||
| test("should NOT have a class of `expanded` when the `expanded` property is false", async () => { | ||
| await element.evaluate<void, FASTAccordionItem>(node => { | ||
| node.expanded = false; | ||
| }); | ||
|
|
||
| await expect(element).toHaveAttribute("aria-expanded", "false"); | ||
| await expect(element).not.toHaveClass(/expanded/); | ||
| }); | ||
| }); | ||
|
|
||
| test.describe("when expanded", () => { | ||
| test("should have a class of `expanded`", async ({ page }) => { | ||
| await page.goto( | ||
| fixtureURL("accordion-item--accordion-item", { | ||
| expanded: true, | ||
| }) | ||
| ); | ||
|
|
||
| const element = page.locator("fast-accordion-item"); | ||
| test("should have a class of `expanded` when the `expanded` property is true", async () => { | ||
| await element.evaluate<void, FASTAccordionItem>(node => { | ||
| node.expanded = true; | ||
| }); | ||
|
|
||
| await expect(element).toHaveClass("expanded"); | ||
| await expect(element).toHaveClass(/expanded/); | ||
| }); | ||
|
|
||
| test("should set `aria-expanded` value to true on the internal button", async ({ | ||
| page, | ||
| }) => { | ||
| await page.goto( | ||
| fixtureURL("accordion-item--accordion-item", { | ||
| expanded: true, | ||
| }) | ||
| ); | ||
| test("should set `aria-expanded` property on the internal control equal to the `expanded` property", async () => { | ||
| const button = element.locator("button"); | ||
|
|
||
| const element = page.locator("fast-accordion-item button"); | ||
| await element.evaluate<void, FASTAccordionItem>(node => { | ||
| node.expanded = true; | ||
| }); | ||
|
|
||
| await expect(element).toHaveAttribute("aria-expanded", "true"); | ||
| }); | ||
| }); | ||
| await expect(button).toHaveAttribute("aria-expanded", "true"); | ||
|
|
||
| test("should set internal properties to match the id when provided", async ({ | ||
| page, | ||
| }) => { | ||
| const id = "testId"; | ||
| await element.evaluate<void, FASTAccordionItem>(node => { | ||
| node.expanded = false; | ||
| }); | ||
|
|
||
| await page.goto(fixtureURL("accordion-item--accordion-item", { id })); | ||
| await expect(button).toHaveAttribute("aria-expanded", "false"); | ||
| }); | ||
|
|
||
| const element = page.locator("fast-accordion-item"); | ||
| test("should set internal properties to match the id when provided", async () => { | ||
| await element.evaluate<void, FASTAccordionItem>(node => { | ||
| node.id = "testId"; | ||
| }); | ||
|
|
||
| const region = element.locator(`[role="region"]`); | ||
| const region = element.locator(`[role="region"]`); | ||
|
|
||
| await expect(region).toHaveAttribute("aria-labelledby", id); | ||
| await expect(region).toHaveAttribute("aria-labelledby", "testId"); | ||
|
|
||
| const button = element.locator("button"); | ||
| const button = element.locator("button"); | ||
|
|
||
| await expect(button).toHaveId(id); | ||
| await expect(button).toHaveId("testId"); | ||
| }); | ||
| }); | ||
| }); |
92 changes: 52 additions & 40 deletions
92
packages/web-components/fast-foundation/src/anchor/anchor.pw.spec.ts
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,47 +1,59 @@ | ||
| import { spinalCase } from "@microsoft/fast-web-utilities"; | ||
| import { expect, test } from "@playwright/test"; | ||
| import type { Locator, Page } from "@playwright/test"; | ||
| import { fixtureURL } from "../__test__/helpers.js"; | ||
|
|
||
| test.describe("Anchor", () => { | ||
| test.describe("should set the attribute on the internal anchor", () => { | ||
| const attributes = { | ||
| href: "href", | ||
| ping: "ping", | ||
| hreflang: "en-GB", | ||
| referrerpolicy: "no-referrer", | ||
| rel: "external", | ||
| target: "_blank", | ||
| type: "foo", | ||
| ariaAtomic: "true", | ||
| ariaBusy: "false", | ||
| ariaControls: "testId", | ||
| ariaCurrent: "page", | ||
| ariaDescribedby: "testId", | ||
| ariaDetails: "testId", | ||
| ariaDisabled: "true", | ||
| ariaErrormessage: "test", | ||
| ariaExpanded: "true", | ||
| ariaFlowto: "testId", | ||
| ariaHaspopup: "true", | ||
| ariaHidden: "true", | ||
| ariaInvalid: "spelling", | ||
| ariaKeyshortcuts: "F4", | ||
| ariaLabel: "foo", | ||
| ariaLabelledby: "testId", | ||
| ariaLive: "polite", | ||
| ariaOwns: "testId", | ||
| ariaRelevant: "removals", | ||
| ariaRoledescription: "slide", | ||
| }; | ||
|
|
||
| Object.entries(attributes).forEach(([key, value]) => { | ||
| test(key, async ({ page }) => { | ||
| await page.goto(fixtureURL("anchor--anchor", { [key]: value })); | ||
|
|
||
| const anchor = page.locator("fast-anchor a"); | ||
|
|
||
| await expect(anchor).toHaveAttribute(spinalCase(key), `${value}`); | ||
| }); | ||
| }); | ||
| let page: Page; | ||
| let element: Locator; | ||
|
|
||
| test.beforeAll(async ({ browser }) => { | ||
| page = await browser.newPage(); | ||
|
|
||
| element = page.locator("fast-anchor"); | ||
|
|
||
| await page.goto(fixtureURL("anchor", attributes)); | ||
| }); | ||
|
|
||
| test.afterAll(async () => { | ||
| await page.close(); | ||
| }); | ||
|
|
||
| const attributes = { | ||
| href: "href", | ||
| ping: "ping", | ||
| hreflang: "en-GB", | ||
| referrerpolicy: "no-referrer", | ||
| rel: "external", | ||
| target: "_blank", | ||
| type: "foo", | ||
| ariaAtomic: "true", | ||
| ariaBusy: "false", | ||
| ariaControls: "testId", | ||
| ariaCurrent: "page", | ||
| ariaDescribedby: "testId", | ||
| ariaDetails: "testId", | ||
| ariaDisabled: "true", | ||
| ariaErrormessage: "test", | ||
| ariaExpanded: "true", | ||
| ariaFlowto: "testId", | ||
| ariaHaspopup: "true", | ||
| ariaHidden: "true", | ||
| ariaInvalid: "spelling", | ||
| ariaKeyshortcuts: "F4", | ||
| ariaLabel: "foo", | ||
| ariaLabelledby: "testId", | ||
| ariaLive: "polite", | ||
| ariaOwns: "testId", | ||
| ariaRelevant: "removals", | ||
| ariaRoledescription: "slide", | ||
| }; | ||
|
|
||
| for (const [attribute, value] of Object.entries(attributes)) { | ||
| const attributeSpinalCase = spinalCase(attribute); | ||
|
|
||
| test(`should set the \`${attributeSpinalCase}\` attribute to \`${value}\` on the internal control`, async () => { | ||
| await expect(element).toHaveAttribute(attributeSpinalCase, `${value}`); | ||
| }); | ||
| } | ||
| }); |
Oops, something went wrong.