feat(collapse): add PO, e2e tests and au-collapse class (#1069)

core-bootstrap/src/components/collapse/collapse.ts

@@ -209,6 +209,9 @@ export function createCollapse(config?: PropsConfig<CollapseProps>): CollapseWid
 					attributes: {
 						id: computed(() => id$() || undefined),
 					},
+					classNames: {
+						'au-collapse': true,
+					},
 				})),
 			),
 		},

e2e/collapse/collapse.e2e-spec.ts

@@ -0,0 +1,31 @@
+import {CollapsePO} from '@agnos-ui/page-objects';
+import {expect, test} from '../fixture';
+import {CollapseDemoPO} from '../demo-po/collapse.po';
+import {assign} from 'common/utils';
+import type {PromiseValue} from 'e2e/utils';
+
+type State = PromiseValue<ReturnType<CollapsePO['state']>>;
+
+test.describe(`Collapse tests`, () => {
+	test(`Default collapse`, async ({page}) => {
+		const collapseDemoPO = new CollapseDemoPO(page);
+		const collapsePO = new CollapsePO(page, 0);
+
+		await page.goto('#/collapse/default');
+		await collapseDemoPO.locatorRoot.waitFor();
+
+		const expectedState: State = {
+			rootClasses: ['au-collapse', 'collapse', 'show'],
+		};
+		expect(await collapsePO.state()).toStrictEqual(expectedState);
+
+		await collapseDemoPO.locatorToggleCollapseButton.click();
+		await collapsePO.locatorRoot.waitFor({state: 'hidden'});
+
+		expect(await collapsePO.state()).toStrictEqual(
+			assign(expectedState, {
+				rootClasses: ['au-collapse', 'collapse'],
+			}),
+		);
+	});
+});

e2e/demo-po/collapse.po.ts

@@ -0,0 +1,20 @@
+import {BasePO} from '@agnos-ui/base-po';
+import type {Locator} from '@playwright/test';
+
+export class CollapseDemoPO extends BasePO {
+	override getComponentSelector(): string {
+		return '.container';
+	}
+
+	get locatorToggleCollapseButton(): Locator {
+		return this.locatorRoot.getByRole('button', {name: /toggle/i});
+	}
+
+	async defaultCollapseDemoState() {
+		return await this.locatorRoot.evaluate((rootNode: HTMLElement) => {
+			return {
+				page: +rootNode.querySelector('#defaultPage')!.textContent!,
+			};
+		});
+	}
+}

e2e/samplesMarkup.singlebrowser-e2e-spec.ts-snapshots/bootstrap-collapse-default.html

@@ -12,7 +12,7 @@
 			"Toggle collapse"
 		</button>
 		<div
-		 class="collapse show"
+		 class="au-collapse collapse show"
 		 id="rewritten-id-1"
 		>
 			<div

e2e/samplesMarkup.singlebrowser-e2e-spec.ts-snapshots/bootstrap-collapse-playground.html

@@ -4,7 +4,7 @@
 	 id="root"
 	>
 		<div
-		 class="collapse show"
+		 class="au-collapse collapse show"
 		>
 			"Visible content"
 		</div>

page-objects/lib/collapse.po.ts

@@ -0,0 +1,21 @@
+import {BasePO} from '@agnos-ui/base-po';
+
+export const collapseSelectors = {
+	rootComponent: '.au-collapse',
+};
+
+export class CollapsePO extends BasePO {
+	selectors = structuredClone(collapseSelectors);
+
+	override getComponentSelector(): string {
+		return this.selectors.rootComponent;
+	}
+
+	async state() {
+		return this.locatorRoot.evaluate((rootNode: HTMLElement, _selectors) => {
+			return {
+				rootClasses: rootNode.className.trim().split(' ').sort(),
+			};
+		}, this.selectors);
+	}
+}

page-objects/lib/index.ts

@@ -8,3 +8,4 @@ export * from './progressbar.po';
 export * from './slider.po';
 export * from './toast.po';
 export * from './tree.po';
+export * from './collapse.po';