Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into 3460-button-loading
Browse files Browse the repository at this point in the history
powellkerry authored Jan 8, 2025
2 parents 998d664 + 71639e2 commit ef7bff5
Showing 3 changed files with 95 additions and 0 deletions.
5 changes: 5 additions & 0 deletions packages/web-components/src/components.d.ts
Original file line number Diff line number Diff line change
@@ -2060,6 +2060,7 @@ export interface VaTextareaCustomEvent<T> extends CustomEvent<T> {
declare global {
interface HTMLVaAccordionElementEventMap {
"component-library-analytics": any;
"accordionExpandCollapseAll": any;
}
/**
* @componentName Accordion
@@ -3222,6 +3223,10 @@ declare namespace LocalJSX {
* If `true`, doesn't fire the CustomEvent which can be used for analytics tracking.
*/
"disableAnalytics"?: boolean;
/**
* The event will fire when the Expand/Collapse All button is clicked. It will emit the status of the accordion items as either "allOpen" or "allClosed".
*/
"onAccordionExpandCollapseAll"?: (event: VaAccordionCustomEvent<any>) => void;
/**
* The event used to track usage of the component. This is emitted when an accordion item is toggled and disableAnalytics is not true.
*/
Original file line number Diff line number Diff line change
@@ -120,6 +120,62 @@ describe('va-accordion', () => {
expect(accordionItems[1].getAttribute('aria-expanded')).toEqual('true');
});

it('fires accordionExpandCollapseAll event when `Expand all +` button is triggered', async () => {
const page = await newE2EPage();
await page.setContent(`
<va-accordion>
<va-accordion-item header="First item">Some content</va-accordion-item>
<va-accordion-item header="Second item">Some more content</va-accordion-item>
</va-accordion>`);

const analyticsSpy = await page.spyOnEvent('accordionExpandCollapseAll');
const expandCollapseButton = await page.find('va-accordion >>> button');

// Click to trigger expand of all accordion items collectively
await expandCollapseButton.click();

expect(analyticsSpy).toHaveReceivedEventTimes(1);
});

it('accordionExpandCollapseAll event status says `allOpen` when all are expanded', async () => {
const page = await newE2EPage();
await page.setContent(`
<va-accordion>
<va-accordion-item header="First item">Some content</va-accordion-item>
<va-accordion-item header="Second item">Some more content</va-accordion-item>
</va-accordion>`);

const analyticsSpy = await page.spyOnEvent('accordionExpandCollapseAll');
const expandCollapseButton = await page.find('va-accordion >>> button');

// Click to trigger expand of all accordion items collectively
await expandCollapseButton.click(); // open all
;
expect(analyticsSpy).toHaveReceivedEventDetail({
status: 'allOpen',
});
});

it('accordionExpandCollapseAll event status says `allClosed` when all are closed', async () => {
const page = await newE2EPage();
await page.setContent(`
<va-accordion>
<va-accordion-item header="First item">Some content</va-accordion-item>
<va-accordion-item header="Second item">Some more content</va-accordion-item>
</va-accordion>`);

const analyticsSpy = await page.spyOnEvent('accordionExpandCollapseAll');
const expandCollapseButton = await page.find('va-accordion >>> button');

// Click to trigger expand of all accordion items collectively
await expandCollapseButton.click(); // open all
await expandCollapseButton.click(); // close all

expect(analyticsSpy).toHaveReceivedEventDetail({
status: 'allClosed',
});
});

it('collapses all items when `Collapse All -` button is triggered', async () => {
const page = await newE2EPage();
await page.setContent(`
@@ -140,6 +196,26 @@ describe('va-accordion', () => {
expect(accordionItems[1].getAttribute('aria-expanded')).toEqual('false');
});

it('fires accordionExpandCollapseAll event when `Collapse All -` button is clicked', async () => {
const page = await newE2EPage();
await page.setContent(`
<va-accordion>
<va-accordion-item header="First item">Some content</va-accordion-item>
<va-accordion-item header="Second item">Some more content</va-accordion-item>
</va-accordion>`);

const analyticsSpy = await page.spyOnEvent('accordionExpandCollapseAll');
const expandCollapseButton = await page.find('va-accordion >>> button');
const accordionItems = await page.findAll('va-accordion-item >>> button');
// Click to expand both accordion items manually
await accordionItems[0].click();
await accordionItems[1].click();
// Click to trigger collapse of all accordion items collectively
await expandCollapseButton.click();

expect(analyticsSpy).toHaveReceivedEventTimes(1);
});

it('tracks which accordions are opened', async () => {
const page = await newE2EPage();
await page.setContent(`
Original file line number Diff line number Diff line change
@@ -85,6 +85,16 @@ export class VaAccordion {
})
componentLibraryAnalytics: EventEmitter;

/**
* The event will fire when the Expand/Collapse All button is clicked. It will
* emit the status of the accordion items as either "allOpen" or "allClosed".
*/
@Event({
composed: true,
bubbles: true,
})
accordionExpandCollapseAll: EventEmitter;

@Listen('accordionItemToggled')
itemToggledHandler(event: CustomEvent) {
// eslint-disable-next-line i18next/no-literal-string
@@ -164,6 +174,10 @@ export class VaAccordion {
// Expand or Collapse All Function for Button Click
private expandCollapseAll = (expanded: boolean) => {
this.expanded = expanded;

const value = expanded ? 'allOpen' : 'allClosed';
this.accordionExpandCollapseAll.emit({ status: value });

getSlottedNodes(this.el, 'va-accordion-item').forEach(
(item: HTMLElement) => {
item.setAttribute('open', `${expanded}`);

0 comments on commit ef7bff5

Please sign in to comment.