Skip to content
This repository has been archived by the owner on Dec 17, 2024. It is now read-only.

Commit

Permalink
Accordion tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@mattsharkey
mattsharkey committed Feb 1, 2024
1 parent 0f80984 commit 2f71fb8
Show file tree
Hide file tree
Showing 10 changed files with 504 additions and 93 deletions.
26 changes: 3 additions & 23 deletions src/il-accordion/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,29 +9,9 @@ Each section of an accordion contains 2 parts:

The `il-accordion` element contains 1 or more `il-panel` components, each of which defines its corresponding `header`.

```html
<il-accordion>
<il-panel>
<h3 slot="header">Student Services</h3>
<div>

<!-- ...content of "Student Services" panel... -->

</div>
</il-panel>
<il-panel>
<h3 slot="header">Faculty Services</h3>
<div>

<!-- ...content of "Faculty Services" panel... -->

</div>
</il-panel>

<!-- ...additional panels... -->

</il-accordion>
```
<object class="sample" type="text/html" data="samples/accordion-with-three-panels.html">
An accordion with three panels
</object>

## Limiting the number of expanded panels

Expand Down
81 changes: 79 additions & 2 deletions src/il-accordion/il-accordion.spec.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,80 @@
import { test } from '@playwright/test';
import { test, expect } from '@playwright/test';

test('accordion test', () => test.fail());
const apgAccordionPattern = "https://www.w3.org/WAI/ARIA/apg/patterns/accordion/";

test('clicking on the header of a collapsed panel expands the panel', async ({ page }) => {
await page.goto('il-accordion/samples/accordion-with-three-panels.html');
await page.getByText('Alumni', { exact: true }).click();
await expect(page.getByText('Learn about some notable LAS alumni')).toBeVisible();
})
test('clicking on the header of an expanded panel collapses the panel', async ({ page }) => {
await page.goto('il-accordion/samples/accordion-with-expanded-panel.html');
await page.getByText('Alumni', { exact: true }).click();
await expect(page.getByText('Learn about some notable LAS alumni')).not.toBeVisible();
})
test.describe('when a header has focus', () => {
test.describe('and its panel is collapsed', () => {
test('pressing enter expands the panel', async ({ page }) => {
await page.goto('il-accordion/samples/accordion-with-three-panels.html');
await page.getByText('Alumni', { exact: true }).focus();
await page.keyboard.press('Enter');
await expect(page.getByText('Learn about some notable LAS alumni')).toBeVisible();
})
test('pressing space expands the panel', async ({ page }) => {
await page.goto('il-accordion/samples/accordion-with-three-panels.html');
await page.getByText('Alumni', { exact: true }).focus();
await page.keyboard.press('Space');
await expect(page.getByText('Learn about some notable LAS alumni')).toBeVisible();
})
})
test.describe('and its panel is expanded', () => {
test('pressing enter collapses the panel', async ({ page }) => {
await page.goto('il-accordion/samples/accordion-with-expanded-panel.html');
await page.getByText('Alumni', { exact: true }).focus();
await page.keyboard.press('Enter');
await expect(page.getByText('Learn about some notable LAS alumni')).not.toBeVisible();
})
test('pressing space collapses the panel', async ({ page }) => {
await page.goto('il-accordion/samples/accordion-with-expanded-panel.html');
await page.getByText('Alumni', { exact: true }).focus();
await page.keyboard.press('Space');
await expect(page.getByText('Learn about some notable LAS alumni')).not.toBeVisible();
})
})
});
test.describe('when a header has focus and it is not the first panel header', () => {
test.describe('and the previous panel is collapsed', () => {
test('pressing shift+tab moves focus to the header of the previous panel', async ({ page }) => {
await page.goto('il-accordion/samples/accordion-with-three-panels.html');
await page.getByText('Faculty', { exact: true }).focus();
await page.keyboard.press('Shift+Tab');
await expect(page.getByText('Alumni', { exact: true })).toBeFocused();
})
})
test.describe('and the previous panel is expanded', () => {
test('pressing shift+tab moves focus to the last link in the previous panel', async ({ page }) => {
await page.goto('il-accordion/samples/accordion-with-expanded-panel.html');
await page.getByText('Faculty', { exact: true }).focus();
await page.keyboard.press('Shift+Tab');
await expect(page.getByText('Learn about some notable LAS alumni')).toBeFocused();
})
})
});
test.describe('when a header has focus and it is not the last panel header', () => {
test.describe('and its panel is collapsed', () => {
test('pressing tab moves focus to the header of the next panel', async ({ page }) => {
await page.goto('il-accordion/samples/accordion-with-three-panels.html');
await page.getByText('Faculty', { exact: true }).focus();
await page.keyboard.press('Tab');
await expect(page.getByText('Students', { exact: true })).toBeFocused();
})
})
test.describe('and its panel is expanded', () => {
test('pressing tab moves focus to the first link in the panel', async ({ page }) => {
await page.goto('il-accordion/samples/accordion-with-expanded-panel.html');
await page.getByText('Alumni', { exact: true }).focus();
await page.keyboard.press('Tab');
await expect(page.getByText('Learn about some notable LAS alumni')).toBeFocused();
})
})
});
53 changes: 53 additions & 0 deletions src/il-accordion/samples/accordion-with-expanded-panel.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<il-accordion>
<il-panel data-il-state="expanded">
<h3 slot="header">Alumni</h3>
<div>
<ul>
<li>More than 183,000 accomplished alumni including seven Nobel Laureates and nine Pulitzer Prize winners</li>
<li>LAS alumni live in all 50 states, the District of Columbia, and Puerto Rico as well as 141 other countries</li>
<li><a href="https://las.illinois.edu/about/alumni">Learn about some notable LAS alumni</a></li>
</ul>
</div>
</il-panel>
<il-panel>
<h3 slot="header">Faculty</h3>
<div>
<ul>
<li>More than 600 tenure system faculty members; 31.4% of the 1,911 tenure system faculty on campus</li>
<ul>
<li>38% female</li>
<li>15% from underrepresented groups</li>
</ul>
<li>9 current American Academy of Arts & Sciences members</li>
<li>9 National Academy of Science members</li>
<li>9 Guggenheim Fellowship recipients since 2015</li>
<li>2 current National Academy of Engineering members</li>
<li>2 National Academy of Medicine Members</li>
</ul>
</div>
</il-panel>
<il-panel>
<h3 slot="header">Students</h3>
<div>
<ul>
<li>More than 14,750 students—26% of all students on campus</li>
<ul>
<li>11,000+ undergraduates; more than 2,600 graduate students</li>
</ul>
<li>Undergraduates
<ul>
<li>74% in state, 26% out of state</li>
<li>16% international</li>
<li>24% from underrepresented groups</li>
<li>2,257 first-year students and 459 transfer students in Fall 2022; 22.5% are first-generation college students</li>
</ul>
<li>94% of 2021-22 graduates secured a first destination soon after graduating with an average salary of $74,705. Learn more on the Illini Success website.</li>
</ul>
<p>To learn more about the students of LAS, visit our <a href="https://las.illinois.edu/about/studentstats/">student statistics page</a>.</p>
</div>
</il-panel>
</il-accordion>

<!-- Taken from https://las.illinois.edu/about/facts -->


53 changes: 53 additions & 0 deletions src/il-accordion/samples/accordion-with-three-panels.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<il-accordion>
<il-panel>
<h3 slot="header">Alumni</h3>
<div>
<ul>
<li>More than 183,000 accomplished alumni including seven Nobel Laureates and nine Pulitzer Prize winners</li>
<li>LAS alumni live in all 50 states, the District of Columbia, and Puerto Rico as well as 141 other countries</li>
<li><a href="https://las.illinois.edu/about/alumni">Learn about some notable LAS alumni</a></li>
</ul>
</div>
</il-panel>
<il-panel>
<h3 slot="header">Faculty</h3>
<div>
<ul>
<li>More than 600 tenure system faculty members; 31.4% of the 1,911 tenure system faculty on campus</li>
<ul>
<li>38% female</li>
<li>15% from underrepresented groups</li>
</ul>
<li>9 current American Academy of Arts & Sciences members</li>
<li>9 National Academy of Science members</li>
<li>9 Guggenheim Fellowship recipients since 2015</li>
<li>2 current National Academy of Engineering members</li>
<li>2 National Academy of Medicine Members</li>
</ul>
</div>
</il-panel>
<il-panel>
<h3 slot="header">Students</h3>
<div>
<ul>
<li>More than 14,750 students—26% of all students on campus</li>
<ul>
<li>11,000+ undergraduates; more than 2,600 graduate students</li>
</ul>
<li>Undergraduates
<ul>
<li>74% in state, 26% out of state</li>
<li>16% international</li>
<li>24% from underrepresented groups</li>
<li>2,257 first-year students and 459 transfer students in Fall 2022; 22.5% are first-generation college students</li>
</ul>
<li>94% of 2021-22 graduates secured a first destination soon after graduating with an average salary of $74,705. Learn more on the Illini Success website.</li>
</ul>
<p>To learn more about the students of LAS, visit our <a href="https://las.illinois.edu/about/studentstats/">student statistics page</a>.</p>
</div>
</il-panel>
</il-accordion>

<!-- Taken from https://las.illinois.edu/about/facts -->


Loading

0 comments on commit 2f71fb8

Please sign in to comment.