From 66074dd9b9684d3afdc3855e959ea705d7a3d784 Mon Sep 17 00:00:00 2001
From: Valentin Nelu Ifrim <valentin.ifrim@amadeus.com>
Date: Mon, 30 Oct 2023 13:48:49 +0100
Subject: [PATCH] feat(accordion): default value for destroy on hide changed to
match ngb
---
core/lib/accordion.spec.ts | 2 +-
core/lib/accordion.ts | 2 +-
e2e/accordion/accordion.e2e-spec.ts | 91 ++++++++++++++-----
.../accordion-customheaders.html | 33 -------
.../accordion-default.html | 22 -----
.../accordion-playground.html | 22 -----
.../accordion-togglepanels.html | 22 -----
7 files changed, 72 insertions(+), 122 deletions(-)
diff --git a/core/lib/accordion.spec.ts b/core/lib/accordion.spec.ts
index 81d95ddf91..448124c02f 100644
--- a/core/lib/accordion.spec.ts
+++ b/core/lib/accordion.spec.ts
@@ -259,7 +259,7 @@ describe(`Accordion`, () => {
});
test(`should have correct value for shouldBeInDOM`, () => {
- const i = accordion.api.registerItem({props: {itemDestroyOnHide: true, itemVisible: true}});
+ const i = accordion.api.registerItem({props: {itemVisible: true}});
expect(i.state$().shouldBeInDOM).toBe(true);
i.api.collapse();
expect(i.state$().shouldBeInDOM).toBe(false);
diff --git a/core/lib/accordion.ts b/core/lib/accordion.ts
index c8938243eb..16ef38903b 100644
--- a/core/lib/accordion.ts
+++ b/core/lib/accordion.ts
@@ -379,7 +379,7 @@ const defaultAccordionConfig: AccordionProps = {
onHidden: noop,
className: '',
itemId: '',
- itemDestroyOnHide: false,
+ itemDestroyOnHide: true,
itemDisabled: false,
itemVisible: false,
itemAnimation: true,
diff --git a/e2e/accordion/accordion.e2e-spec.ts b/e2e/accordion/accordion.e2e-spec.ts
index 8abc13955e..a82be9c4ea 100644
--- a/e2e/accordion/accordion.e2e-spec.ts
+++ b/e2e/accordion/accordion.e2e-spec.ts
@@ -5,8 +5,15 @@ import {AccordionTogglePanels} from '../demo-po/accordion.po';
type PromiseValue<T> = T extends Promise<infer U> ? U : never;
type State = PromiseValue<ReturnType<AccordionPO['state']>>;
+function updateAccordionState(state: State, index: number, expanded: boolean) {
+ state.items[index].expanded = expanded ? 'true' : 'false';
+ state.items[index].isInDOM = expanded;
+ state.items[index].collapseId = expanded ? `${state.items[index].id}-collapse` : undefined;
+ state.items[index].labeledBy = expanded ? `${state.items[index].id}-toggle` : undefined;
+}
+
test.describe.parallel(`Accordion tests`, () => {
- test(`Default accordion behaviour`, async ({page}) => {
+ test(`Default accordion behavior`, async ({page}) => {
await page.goto('#/accordion/default');
const accordionPO = new AccordionPO(page, 0);
@@ -27,23 +34,23 @@ test.describe.parallel(`Accordion tests`, () => {
{
classes: ['accordion-item'],
id: itemsIds[1]!,
- isInDOM: true,
- collapseId: `${itemsIds[1]!}-collapse`,
+ isInDOM: false,
+ collapseId: undefined,
buttonId: `${itemsIds[1]!}-toggle`,
expanded: 'false',
disabled: 'false',
- labeledBy: `${itemsIds[1]!}-toggle`,
+ labeledBy: undefined,
buttonControls: `${itemsIds[1]!}-collapse`,
},
{
classes: ['accordion-item'],
id: itemsIds[2]!,
- isInDOM: true,
- collapseId: `${itemsIds[2]!}-collapse`,
+ isInDOM: false,
+ collapseId: undefined,
buttonId: `${itemsIds[2]!}-toggle`,
expanded: 'false',
disabled: 'true',
- labeledBy: `${itemsIds[2]!}-toggle`,
+ labeledBy: undefined,
buttonControls: `${itemsIds[2]!}-collapse`,
},
],
@@ -55,8 +62,8 @@ test.describe.parallel(`Accordion tests`, () => {
await accordionPO.locatorAccordionHeaders.nth(1).click();
await accordionPO.locatorAccordionHeaders.nth(2).click();
- expectedState.items[0].expanded = 'false';
- expectedState.items[1].expanded = 'true';
+ updateAccordionState(expectedState, 0, false);
+ updateAccordionState(expectedState, 1, true);
await expect.poll(() => accordionPO.state()).toEqual(expectedState);
});
test(`Toggle Panels`, async ({page}) => {
@@ -70,23 +77,23 @@ test.describe.parallel(`Accordion tests`, () => {
{
classes: ['accordion-item'],
id: itemsIds[0]!,
- isInDOM: true,
- collapseId: `${itemsIds[0]!}-collapse`,
+ isInDOM: false,
+ collapseId: undefined,
buttonId: `${itemsIds[0]!}-toggle`,
expanded: 'false',
disabled: 'false',
- labeledBy: `${itemsIds[0]!}-toggle`,
+ labeledBy: undefined,
buttonControls: `${itemsIds[0]!}-collapse`,
},
{
classes: ['accordion-item'],
id: itemsIds[1]!,
- isInDOM: true,
- collapseId: `${itemsIds[1]!}-collapse`,
+ isInDOM: false,
+ collapseId: undefined,
buttonId: `${itemsIds[1]!}-toggle`,
expanded: 'false',
disabled: 'false',
- labeledBy: `${itemsIds[1]!}-toggle`,
+ labeledBy: undefined,
buttonControls: `${itemsIds[1]!}-collapse`,
},
],
@@ -94,19 +101,61 @@ test.describe.parallel(`Accordion tests`, () => {
};
await expect.poll(() => accordionPO.state()).toEqual(expectedState);
await accordionDemoPO.locatorToggleFirst().click();
- expectedState.items[0].expanded = 'true';
+ updateAccordionState(expectedState, 0, true);
await expect.poll(() => accordionPO.state()).toEqual(expectedState);
await accordionDemoPO.locatorToggleFirst().click();
await accordionDemoPO.locatorToggleSecond().click();
- expectedState.items[0].expanded = 'false';
- expectedState.items[1].expanded = 'true';
+ updateAccordionState(expectedState, 0, false);
+ updateAccordionState(expectedState, 1, true);
await expect.poll(() => accordionPO.state()).toEqual(expectedState);
await accordionDemoPO.locatorExpandAll().click();
- expectedState.items[0].expanded = 'true';
+ updateAccordionState(expectedState, 0, true);
await expect.poll(() => accordionPO.state()).toEqual(expectedState);
await accordionDemoPO.locatorCollapseAll().click();
- expectedState.items[0].expanded = 'false';
- expectedState.items[1].expanded = 'false';
+ updateAccordionState(expectedState, 0, false);
+ updateAccordionState(expectedState, 1, false);
+ await expect.poll(() => accordionPO.state()).toEqual(expectedState);
+ });
+
+ test(`Playground accordion behavior no destroy on hide`, async ({page}) => {
+ await page.goto('#/accordion/playground#{"config":{"itemDestroyOnHide":false}}');
+ const accordionPO = new AccordionPO(page, 0);
+
+ const itemsIds = await Promise.all((await accordionPO.locatorAccordionItems.all()).map((item) => item.getAttribute('id')));
+ const expectedState: State = {
+ items: [
+ {
+ classes: ['accordion-item'],
+ id: itemsIds[0]!,
+ isInDOM: true,
+ collapseId: `${itemsIds[0]!}-collapse`,
+ buttonId: `${itemsIds[0]!}-toggle`,
+ expanded: 'false',
+ disabled: 'false',
+ labeledBy: `${itemsIds[0]!}-toggle`,
+ buttonControls: `${itemsIds[0]!}-collapse`,
+ },
+ {
+ classes: ['accordion-item'],
+ id: itemsIds[1]!,
+ isInDOM: true,
+ collapseId: `${itemsIds[1]!}-collapse`,
+ buttonId: `${itemsIds[1]!}-toggle`,
+ expanded: 'false',
+ disabled: 'false',
+ labeledBy: `${itemsIds[1]!}-toggle`,
+ buttonControls: `${itemsIds[1]!}-collapse`,
+ },
+ ],
+ rootClasses: ['accordion'],
+ };
+ await expect.poll(() => accordionPO.state()).toEqual(expectedState);
+ //We are using the 'header' since if we would use the 'buttons' wouldn't be possible to click on the disabled one
+ await accordionPO.locatorAccordionHeaders.nth(0).click();
+ await accordionPO.locatorAccordionHeaders.nth(1).click();
+
+ expectedState.items[0].expanded = 'true';
+ expectedState.items[1].expanded = 'true';
await expect.poll(() => accordionPO.state()).toEqual(expectedState);
});
});
diff --git a/e2e/samplesMarkup.e2e-spec.ts-snapshots/accordion-customheaders.html b/e2e/samplesMarkup.e2e-spec.ts-snapshots/accordion-customheaders.html
index f6593f9c79..ddb7886d35 100644
--- a/e2e/samplesMarkup.e2e-spec.ts-snapshots/accordion-customheaders.html
+++ b/e2e/samplesMarkup.e2e-spec.ts-snapshots/accordion-customheaders.html
@@ -33,17 +33,6 @@
"Toggle first"
</button>
</div>
- <div
- aria-labelledby="rewritten-id-3"
- class="accordion-collapse collapse"
- id="rewritten-id-2"
- >
- <div
- class="accordion-body"
- >
- "Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS."
- </div>
- </div>
</div>
<div
class="accordion-item"
@@ -84,17 +73,6 @@
</button>
</div>
</div>
- <div
- aria-labelledby="rewritten-id-6"
- class="accordion-collapse collapse"
- id="rewritten-id-5"
- >
- <div
- class="accordion-body"
- >
- "Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS."
- </div>
- </div>
</div>
<div
class="accordion-item"
@@ -116,17 +94,6 @@
"Third panel"
</button>
</div>
- <div
- aria-labelledby="rewritten-id-9"
- class="accordion-collapse collapse"
- id="rewritten-id-8"
- >
- <div
- class="accordion-body"
- >
- "Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS."
- </div>
- </div>
</div>
</div>
</div>
diff --git a/e2e/samplesMarkup.e2e-spec.ts-snapshots/accordion-default.html b/e2e/samplesMarkup.e2e-spec.ts-snapshots/accordion-default.html
index a2c9a8dd46..4653835ddd 100644
--- a/e2e/samplesMarkup.e2e-spec.ts-snapshots/accordion-default.html
+++ b/e2e/samplesMarkup.e2e-spec.ts-snapshots/accordion-default.html
@@ -62,17 +62,6 @@
</span>
</button>
</h2>
- <div
- aria-labelledby="rewritten-id-6"
- class="accordion-collapse collapse"
- id="rewritten-id-5"
- >
- <div
- class="accordion-body"
- >
- "Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS."
- </div>
- </div>
</div>
<div
class="accordion-item"
@@ -93,17 +82,6 @@
"Disabled"
</button>
</h2>
- <div
- aria-labelledby="rewritten-id-9"
- class="accordion-collapse collapse"
- id="rewritten-id-8"
- >
- <div
- class="accordion-body"
- >
- "Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS."
- </div>
- </div>
</div>
</div>
</div>
diff --git a/e2e/samplesMarkup.e2e-spec.ts-snapshots/accordion-playground.html b/e2e/samplesMarkup.e2e-spec.ts-snapshots/accordion-playground.html
index 1acba64b83..75c9ed6477 100644
--- a/e2e/samplesMarkup.e2e-spec.ts-snapshots/accordion-playground.html
+++ b/e2e/samplesMarkup.e2e-spec.ts-snapshots/accordion-playground.html
@@ -26,17 +26,6 @@
"Header 1"
</button>
</h2>
- <div
- aria-labelledby="rewritten-id-3"
- class="accordion-collapse collapse"
- id="rewritten-id-2"
- >
- <div
- class="accordion-body"
- >
- "Body 1"
- </div>
- </div>
</div>
<div
class="accordion-item"
@@ -56,17 +45,6 @@
"Header 2"
</button>
</h2>
- <div
- aria-labelledby="rewritten-id-6"
- class="accordion-collapse collapse"
- id="rewritten-id-5"
- >
- <div
- class="accordion-body"
- >
- "Body 2"
- </div>
- </div>
</div>
</div>
</div>
diff --git a/e2e/samplesMarkup.e2e-spec.ts-snapshots/accordion-togglepanels.html b/e2e/samplesMarkup.e2e-spec.ts-snapshots/accordion-togglepanels.html
index 4255778a8e..7bd1794fc4 100644
--- a/e2e/samplesMarkup.e2e-spec.ts-snapshots/accordion-togglepanels.html
+++ b/e2e/samplesMarkup.e2e-spec.ts-snapshots/accordion-togglepanels.html
@@ -26,17 +26,6 @@
"First panel"
</button>
</h2>
- <div
- aria-labelledby="first-toggle"
- class="accordion-collapse collapse"
- id="first-collapse"
- >
- <div
- class="accordion-body"
- >
- "Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS."
- </div>
- </div>
</div>
<div
class="accordion-item"
@@ -56,17 +45,6 @@
"Second panel"
</button>
</h2>
- <div
- aria-labelledby="second-toggle"
- class="accordion-collapse collapse"
- id="second-collapse"
- >
- <div
- class="accordion-body"
- >
- "Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS."
- </div>
- </div>
</div>
</div>
<hr />