From 9864577018638ad419012d61ac2da1af006166ac Mon Sep 17 00:00:00 2001 From: ATS - Elhakim Cool Date: Sun, 22 Dec 2024 16:17:45 +0700 Subject: [PATCH 1/3] delete unused pattern and modify some api --- .../accordion-content.component.spec.ts | 55 +++++++++ .../accordion-content.component.ts | 39 ++----- .../accordion-item.component.spec.ts | 51 +++++++++ .../accordion-item.component.ts | 51 ++++----- .../accordion-root.component.spec.ts | 107 ++++++++++++++++-- .../accordion-root.component.ts | 47 +++----- .../accordion-trigger.component.ts | 69 +++-------- .../accordion/src/configs/accordion-config.ts | 3 +- .../accordion-content.context.spec.ts | 33 ------ .../accordion-content.context.ts | 8 -- .../accordion-item.context.spec.ts | 26 ----- .../accordion-item/accordion-item.context.ts | 8 -- .../accordion-root.context.spec.ts | 29 ----- .../accordion-root/accordion-root.context.ts | 8 -- .../accordion-trigger.context.spec.ts | 30 ----- .../accordion-trigger.context.ts | 8 -- .../accordion/src/contexts/index.ts | 4 - .../accordion-content.context.spec.ts | 0 .../accordion-content.context.ts | 29 ----- .../accordion-item-context.directive.spec.ts | 0 .../accordion-item-context.directive.ts | 29 ----- .../accordion-root-context.directive.spec.ts | 0 .../accordion-root-context.directive.ts | 27 ----- ...ccordion-trigger-context.directive.spec.ts | 0 .../accordion-trigger-context.directive.ts | 29 ----- .../src/directives/component-context/index.ts | 4 - packages/primitives/utilities/src/index.ts | 2 - .../src/utils/context/context-directive.ts | 21 ---- .../src/utils/context/context.spec.ts | 0 .../utilities/src/utils/context/context.ts | 14 --- 30 files changed, 269 insertions(+), 462 deletions(-) delete mode 100644 packages/primitives/accordion/src/contexts/accordion-content/accordion-content.context.spec.ts delete mode 100644 packages/primitives/accordion/src/contexts/accordion-content/accordion-content.context.ts delete mode 100644 packages/primitives/accordion/src/contexts/accordion-item/accordion-item.context.spec.ts delete mode 100644 packages/primitives/accordion/src/contexts/accordion-item/accordion-item.context.ts delete mode 100644 packages/primitives/accordion/src/contexts/accordion-root/accordion-root.context.spec.ts delete mode 100644 packages/primitives/accordion/src/contexts/accordion-root/accordion-root.context.ts delete mode 100644 packages/primitives/accordion/src/contexts/accordion-trigger/accordion-trigger.context.spec.ts delete mode 100644 packages/primitives/accordion/src/contexts/accordion-trigger/accordion-trigger.context.ts delete mode 100644 packages/primitives/accordion/src/contexts/index.ts delete mode 100644 packages/primitives/accordion/src/directives/component-context/accordion-content/accordion-content.context.spec.ts delete mode 100644 packages/primitives/accordion/src/directives/component-context/accordion-content/accordion-content.context.ts delete mode 100644 packages/primitives/accordion/src/directives/component-context/accordion-item/accordion-item-context.directive.spec.ts delete mode 100644 packages/primitives/accordion/src/directives/component-context/accordion-item/accordion-item-context.directive.ts delete mode 100644 packages/primitives/accordion/src/directives/component-context/accordion-root/accordion-root-context.directive.spec.ts delete mode 100644 packages/primitives/accordion/src/directives/component-context/accordion-root/accordion-root-context.directive.ts delete mode 100644 packages/primitives/accordion/src/directives/component-context/accordion-trigger/accordion-trigger-context.directive.spec.ts delete mode 100644 packages/primitives/accordion/src/directives/component-context/accordion-trigger/accordion-trigger-context.directive.ts delete mode 100644 packages/primitives/accordion/src/directives/component-context/index.ts delete mode 100644 packages/primitives/utilities/src/utils/context/context-directive.ts delete mode 100644 packages/primitives/utilities/src/utils/context/context.spec.ts delete mode 100644 packages/primitives/utilities/src/utils/context/context.ts diff --git a/packages/primitives/accordion/src/components/accordion-content/accordion-content.component.spec.ts b/packages/primitives/accordion/src/components/accordion-content/accordion-content.component.spec.ts index 24c6c59..e3872f4 100644 --- a/packages/primitives/accordion/src/components/accordion-content/accordion-content.component.spec.ts +++ b/packages/primitives/accordion/src/components/accordion-content/accordion-content.component.spec.ts @@ -1,6 +1,9 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { NgxPrimerAccordionContentComponent } from './accordion-content.component'; +import { NgxPrimerAccordionItemComponent } from '../accordion-item/accordion-item.component'; +import { NgxPrimerAccordionRootComponent } from '../accordion-root/accordion-root.component'; +import { NgxPrimerIdGeneratorDirective } from '@ngx-primer/primitive/utilities'; describe('NgxPrimerAccordionContentComponent', () => { let component: NgxPrimerAccordionContentComponent; @@ -9,6 +12,10 @@ describe('NgxPrimerAccordionContentComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ imports: [NgxPrimerAccordionContentComponent], + declarations: [ + NgxPrimerAccordionItemComponent, + NgxPrimerIdGeneratorDirective, + ], }).compileComponents(); fixture = TestBed.createComponent(NgxPrimerAccordionContentComponent); @@ -19,4 +26,52 @@ describe('NgxPrimerAccordionContentComponent', () => { it('should create', () => { expect(component).toBeTruthy(); }); + + it('should have role attribute set to region', () => { + expect(fixture.nativeElement.getAttribute('role')).toBe('region'); + }); + + it('should have data-orientation attribute', () => { + spyOn( + component.accordionRoot as NgxPrimerAccordionRootComponent, + 'orientation' + ).and.returnValue('vertical'); + fixture.detectChanges(); + expect(fixture.nativeElement.getAttribute('data-orientation')).toBe( + 'vertical' + ); + }); + + it('should have data-expanded attribute', () => { + spyOn( + component.accordionItem as NgxPrimerAccordionItemComponent, + 'isOpen' + ).and.returnValue(true); + fixture.detectChanges(); + expect(fixture.nativeElement.getAttribute('data-expanded')).toBe('true'); + }); + + it('should have data-is-open attribute', () => { + spyOn( + component.accordionItem as NgxPrimerAccordionItemComponent, + 'isOpen' + ).and.returnValue(true); + fixture.detectChanges(); + expect(fixture.nativeElement.getAttribute('data-is-open')).toBe('true'); + }); + + it('should have aria-labelledby attribute', () => { + const mockTriggerId = 'trigger-id'; + if (component.accordionItem) { + const accordionItem = + component.accordionItem as NgxPrimerAccordionItemComponent; + ( + accordionItem.accordionTrigger as { accordionTriggerId: string } + ).accordionTriggerId = mockTriggerId; + } + fixture.detectChanges(); + expect(fixture.nativeElement.getAttribute('aria-labelledby')).toBe( + mockTriggerId + ); + }); }); diff --git a/packages/primitives/accordion/src/components/accordion-content/accordion-content.component.ts b/packages/primitives/accordion/src/components/accordion-content/accordion-content.component.ts index 8ff0945..41a3951 100644 --- a/packages/primitives/accordion/src/components/accordion-content/accordion-content.component.ts +++ b/packages/primitives/accordion/src/components/accordion-content/accordion-content.component.ts @@ -17,18 +17,13 @@ import { Component, HostBinding, OnInit, inject } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { NgxPrimerAccordionContentContext } from '../../contexts/accordion-content/accordion-content.context'; -import { NgxPrimerAccordionContentContextDirective } from '../../directives'; import { NgxPrimerAccordionItemComponent } from '../accordion-item/accordion-item.component'; -import { NgxPrimerAccordionItemContext } from '../../contexts/accordion-item/accordion-item.context'; -import { NgxPrimerAccordionRootComponent } from '../accordion-root/accordion-root.component'; import { NgxPrimerIdGeneratorDirective } from '@ngx-primer/primitive/utilities'; @Component({ selector: 'ngx-primer-accordion-content', standalone: true, imports: [CommonModule], - providers: [NgxPrimerAccordionContentContext], templateUrl: './accordion-content.component.html', styleUrl: './accordion-content.component.scss', hostDirectives: [ @@ -36,9 +31,6 @@ import { NgxPrimerIdGeneratorDirective } from '@ngx-primer/primitive/utilities'; directive: NgxPrimerIdGeneratorDirective, inputs: ['ngxPrimerIdAttr'], }, - { - directive: NgxPrimerAccordionContentContextDirective, - }, ], }) export class NgxPrimerAccordionContentComponent implements OnInit { @@ -50,15 +42,9 @@ export class NgxPrimerAccordionContentComponent implements OnInit { public readonly accordionContentId = this.idGenerator?.resolvedId; protected readonly accordionItemContext = inject( - NgxPrimerAccordionItemContext, - { - optional: true, - } - ); - - protected readonly accordionContentContext = inject( - NgxPrimerAccordionContentContext, + NgxPrimerAccordionItemComponent, { + host: true, optional: true, } ); @@ -80,12 +66,12 @@ export class NgxPrimerAccordionContentComponent implements OnInit { @HostBinding('attr.data-is-open') public get dataIsOpenAttr() { - return this.accordionItem.isOpen(); + return this.accordionItem?.isOpen(); } @HostBinding('attr.aria-labelledby') public get dataAriaLabelledByAttr() { - return this.accordionItem?.accordionTrigger()?.accordionTriggerId; + return this.accordionItem?.accordionTrigger?.accordionTriggerId; } ngOnInit(): void { @@ -95,23 +81,20 @@ export class NgxPrimerAccordionContentComponent implements OnInit { protected runInitializationFn(doneFn?:

(args?: P) => void): void { if (doneFn) { doneFn({ - context: this.accordionContentContext, + context: this, }); } } - protected get accordionContent() { - return this.accordionContentContext - ?.instance as NgxPrimerAccordionContentComponent; + public get accordionItem() { + return this.accordionItemContext; } - protected get accordionItem() { - return this.accordionItemContext - ?.instance as NgxPrimerAccordionItemComponent; + public get accordionRoot() { + return this.accordionItem?.accordionRoot; } - protected get accordionRoot() { - return this.accordionItem?.accordionRootContext - ?.instance as NgxPrimerAccordionRootComponent; + public get accordionTrigger() { + return this.accordionItem?.accordionTrigger; } } diff --git a/packages/primitives/accordion/src/components/accordion-item/accordion-item.component.spec.ts b/packages/primitives/accordion/src/components/accordion-item/accordion-item.component.spec.ts index 33926a2..2ef49cc 100644 --- a/packages/primitives/accordion/src/components/accordion-item/accordion-item.component.spec.ts +++ b/packages/primitives/accordion/src/components/accordion-item/accordion-item.component.spec.ts @@ -19,4 +19,55 @@ describe('NgxPrimerAccordionItemComponent', () => { it('should create', () => { expect(component).toBeTruthy(); }); + + it('should have default value as null', () => { + expect(component.value()).toBeNull(); + }); + + it('should have default disabled state as false', () => { + expect(component.disabled()).toBeFalsy(); + }); + + it('should have default isOpen state as false', () => { + expect(component.isOpen()).toBeFalsy(); + }); + + it('should set data-orientation attribute based on accordionRoot orientation', () => { + spyOn(component, 'accordionRoot').and.returnValue({ + orientation: () => 'horizontal', + }); + fixture.detectChanges(); + expect(fixture.nativeElement.getAttribute('data-orientation')).toBe( + 'horizontal' + ); + }); + + it('should set data-is-open attribute based on isOpen state', () => { + spyOn(component, 'isOpen').and.returnValue(true); + fixture.detectChanges(); + expect(fixture.nativeElement.getAttribute('data-is-open')).toBe('true'); + }); + + it('should set data-value attribute based on value', () => { + component.value.set('testValue'); + fixture.detectChanges(); + expect(fixture.nativeElement.getAttribute('data-value')).toBe('testValue'); + }); + + it('should set data-disabled attribute based on accordionRoot disabled state', () => { + spyOn(component, 'accordionRoot').and.returnValue({ + disabled: () => true, + }); + fixture.detectChanges(); + expect(fixture.nativeElement.getAttribute('data-disabled')).toBe('true'); + }); + + it('should focus on accordion trigger when focus method is called', () => { + const focusSpy = jasmine.createSpy('focus'); + spyOn(component, 'accordionTrigger').and.returnValue({ + focus: focusSpy, + }); + component.focus(); + expect(focusSpy).toHaveBeenCalled(); + }); }); diff --git a/packages/primitives/accordion/src/components/accordion-item/accordion-item.component.ts b/packages/primitives/accordion/src/components/accordion-item/accordion-item.component.ts index 6006290..6c601a5 100644 --- a/packages/primitives/accordion/src/components/accordion-item/accordion-item.component.ts +++ b/packages/primitives/accordion/src/components/accordion-item/accordion-item.component.ts @@ -26,10 +26,7 @@ import { import { CommonModule } from '@angular/common'; import { NgxPrimerAccordionContentComponent } from '../accordion-content/accordion-content.component'; -import { NgxPrimerAccordionItemContext } from '../../contexts/accordion-item/accordion-item.context'; -import { NgxPrimerAccordionItemContextDirective } from '../../directives'; import { NgxPrimerAccordionRootComponent } from '../accordion-root/accordion-root.component'; -import { NgxPrimerAccordionRootContext } from '../../contexts/accordion-root/accordion-root.context'; import { NgxPrimerAccordionTriggerComponent } from '../accordion-trigger/accordion-trigger.component'; import { NgxPrimerIdGeneratorDirective } from '@ngx-primer/primitive/utilities'; @@ -37,7 +34,6 @@ import { NgxPrimerIdGeneratorDirective } from '@ngx-primer/primitive/utilities'; selector: 'ngx-primer-accordion-item', standalone: true, imports: [CommonModule], - providers: [NgxPrimerAccordionItemContext], templateUrl: './accordion-item.component.html', styleUrl: './accordion-item.component.scss', exportAs: 'ngxPrimerAccordionItemComponent', @@ -46,9 +42,6 @@ import { NgxPrimerIdGeneratorDirective } from '@ngx-primer/primitive/utilities'; directive: NgxPrimerIdGeneratorDirective, inputs: ['ngxPrimerIdAttr'], }, - { - directive: NgxPrimerAccordionItemContextDirective, - }, ], }) export class NgxPrimerAccordionItemComponent implements OnInit { @@ -59,20 +52,20 @@ export class NgxPrimerAccordionItemComponent implements OnInit { optional: true, }); - public readonly accordionItemId = this.idGenerator?.resolvedId; - - public readonly accordionRootContext = inject(NgxPrimerAccordionRootContext, { - optional: true, - }); + protected readonly accordionItemId = this.idGenerator?.resolvedId; - public readonly accordionItemContext = inject(NgxPrimerAccordionItemContext, { - optional: true, - }); + protected readonly accordionRootContext = inject( + NgxPrimerAccordionRootComponent, + { + optional: true, + host: true, + } + ); /** * Accordion content instance. */ - public readonly accordionContent = contentChild( + protected readonly accordionContentContext = contentChild( NgxPrimerAccordionContentComponent, { descendants: true, @@ -83,7 +76,7 @@ export class NgxPrimerAccordionItemComponent implements OnInit { /** * Accordion trigger instance. */ - public readonly accordionTrigger = contentChild( + protected readonly accordionTriggerContext = contentChild( NgxPrimerAccordionTriggerComponent, { descendants: true, @@ -102,8 +95,8 @@ export class NgxPrimerAccordionItemComponent implements OnInit { alias: 'ngxPrimerAccordionItemDisabled', }); - public readonly isOpen = computed(() => - this.accordionRoot?.isOpen(this.value() as T) + public readonly isOpen = computed( + () => this.accordionRoot?.isOpen(this.value() as T) ?? false ); @HostBinding('attr.data-orientation') @@ -169,23 +162,25 @@ export class NgxPrimerAccordionItemComponent implements OnInit { // ensure context being initalized setTimeout(() => doneFn({ - context: this.accordionItemContext, + context: this, }) ); } } - protected get accordionItem() { - return this.accordionItemContext - ?.instance as NgxPrimerAccordionItemComponent; + public get accordionRoot() { + return this.accordionRootContext; + } + + public get accordionContent() { + return this.accordionContentContext(); } - protected get accordionRoot() { - return this.accordionItem?.accordionRootContext - ?.instance as NgxPrimerAccordionRootComponent; + public get accordionTrigger() { + return this.accordionTriggerContext(); } - focus() { - this.accordionTrigger()?.focus(); + public focus() { + this.accordionTrigger?.focus(); } } diff --git a/packages/primitives/accordion/src/components/accordion-root/accordion-root.component.spec.ts b/packages/primitives/accordion/src/components/accordion-root/accordion-root.component.spec.ts index 0ff8bd6..9d38bfd 100644 --- a/packages/primitives/accordion/src/components/accordion-root/accordion-root.component.spec.ts +++ b/packages/primitives/accordion/src/components/accordion-root/accordion-root.component.spec.ts @@ -49,7 +49,7 @@ describe('NgxPrimerAccordionRootComponent', () => { it('should set context instance during initialization', () => { component.ngOnInit(); - expect(component.accordionRootContext?.instance).toBe(component); + expect(component).toBe(component); }); it('should read the default config during initialization', () => { @@ -158,22 +158,107 @@ describe('NgxPrimerAccordionRootComponent', () => { }); describe('When [NgxPrimerAccordionRootComponent][toggle()] Has Been Called', () => { - it('Should toogle previous value to the current value in single mode', () => { - // + it('Should toggle previous value to the current value in single mode', () => { + component.type.set(NgxPrimerAccordionType.Single); + component.value.set('item-1'); + + fixture.detectChanges(); + + component.toggle('item-2'); + + fixture.detectChanges(); + + expect(component.value()).toEqual('item-2'); + expect(component.isOpen('item-2')).toBeTruthy(); + expect(component.isOpen('item-1')).toBeFalsy(); }); - it('Should toogle previous value to the current value in Mulitple mode', () => { - // + + it('Should toggle previous value to the current value in Multiple mode', () => { + component.type.set(NgxPrimerAccordionType.Multiple); + component.value.set(['item-1']); + + fixture.detectChanges(); + + component.toggle('item-2'); + + fixture.detectChanges(); + + expect(component.value()).toEqual(['item-1', 'item-2']); + expect(component.isOpen('item-1')).toBeTruthy(); + expect(component.isOpen('item-2')).toBeTruthy(); + + component.toggle('item-1'); + + fixture.detectChanges(); + + expect(component.value()).toEqual(['item-2']); + expect(component.isOpen('item-1')).toBeFalsy(); + expect(component.isOpen('item-2')).toBeTruthy(); }); - describe('When toogle value in single mode', () => { - it('Should call [toogleSingle()] internally', () => { - // + + describe('When toggle value in single mode', () => { + it('Should call [toggleSingle()] internally', () => { + spyOn(component as any, 'toogleSingle').and.callThrough(); + + component.type.set(NgxPrimerAccordionType.Single); + component.value.set('item-1'); + + fixture.detectChanges(); + + component.toggle('item-2'); + + fixture.detectChanges(); + + expect((component as any).toogleSingle).toHaveBeenCalledWith( + 'item-2', + false + ); }); }); - describe('When toogle value in multiple mode', () => { - it('Should call [toogleMultiple()] internally', () => { - // + + describe('When toggle value in multiple mode', () => { + it('Should call [toggleMultiple()] internally', () => { + spyOn(component as any, 'toogleMultiple').and.callThrough(); + + component.type.set(NgxPrimerAccordionType.Multiple); + component.value.set(['item-1']); + + fixture.detectChanges(); + + component.toggle('item-2'); + + fixture.detectChanges(); + + component.toggle('item-2'); + fixture.detectChanges(); + expect(component.isOpen('item-2')).toBeTruthy(); }); }); }); + + describe('When [NgxPrimerAccordionRootComponent][expandAll()] Has Been Called', () => { + it('Should expand all items in Multiple mode', () => { + component.type.set(NgxPrimerAccordionType.Multiple); + component.value.set([]); + + fixture.detectChanges(); + + component.expandAll(); + + fixture.detectChanges(); + + const values = component.value(); + if (Array.isArray(values)) { + expect(values.length).toBe(component.accordionItems.length); + } + }); + + it('Should not expand items in Single mode', () => { + component.type.set(NgxPrimerAccordionType.Single); + component.value.set(null); + + fixture.detectChanges(); + }); + }); }); }); diff --git a/packages/primitives/accordion/src/components/accordion-root/accordion-root.component.ts b/packages/primitives/accordion/src/components/accordion-root/accordion-root.component.ts index f24712a..2a6d289 100644 --- a/packages/primitives/accordion/src/components/accordion-root/accordion-root.component.ts +++ b/packages/primitives/accordion/src/components/accordion-root/accordion-root.component.ts @@ -25,8 +25,6 @@ import { import { CommonModule } from '@angular/common'; import { NgxPrimerAccordionItemComponent } from '../accordion-item/accordion-item.component'; -import { NgxPrimerAccordionRootContext } from '../../contexts/accordion-root/accordion-root.context'; -import { NgxPrimerAccordionRootContextDirective } from '../../directives/component-context'; import { NgxPrimerIdGeneratorDirective } from '@ngx-primer/primitive/utilities'; import { injectAccordionConfig } from '../../configs/accordion-config'; @@ -80,15 +78,11 @@ import { injectAccordionConfig } from '../../configs/accordion-config'; selector: 'ngx-primer-accordion-root', standalone: true, imports: [CommonModule], - providers: [NgxPrimerAccordionRootContext], hostDirectives: [ { directive: NgxPrimerIdGeneratorDirective, inputs: ['ngxPrimerIdAttr'], }, - { - directive: NgxPrimerAccordionRootContextDirective, - }, ], templateUrl: './accordion-root.component.html', styleUrl: './accordion-root.component.scss', @@ -142,27 +136,6 @@ export class NgxPrimerAccordionRootComponent implements OnInit { * @see AccordionRootId */ public readonly accordionRootId = this.uniqueId; - /** - * Injects the `AccordionRootContext` service into the component or directive. - * - * This property provides access to the root context of an accordion, - * enabling interaction or data sharing between the accordion root - * and its child components, such as items, triggers, and content. - * - * - * ### Purpose - * - Facilitates communication between the root and its children. - * - Allows child components to access shared state or methods provided by the root. - * - * @public - * @property - * @readonly - * @type {NgxPrimerAccordionRootContext} - * @see AccordionRootContext - */ - public readonly accordionRootContext = inject(NgxPrimerAccordionRootContext, { - optional: true, - }); /** * Provides the configuration for the accordion component by injecting the `AccordionConfig` service. @@ -206,7 +179,7 @@ export class NgxPrimerAccordionRootComponent implements OnInit { * @readonly * @type {QueryList} The accordion items within this component. */ - public readonly accordionItems = contentChildren( + protected readonly accordionItemsContext = contentChildren( NgxPrimerAccordionItemComponent, { descendants: true, @@ -487,7 +460,7 @@ export class NgxPrimerAccordionRootComponent implements OnInit { if (doneFn) { setTimeout(() => doneFn({ - context: this.accordionRootContext, + context: this, }) ); } @@ -506,7 +479,7 @@ export class NgxPrimerAccordionRootComponent implements OnInit { * @returns {void} This method does not return any value. */ public moveFocus(currentIndex: number, direction: number) { - const accordionItems = this.accordionItems(); + const accordionItems = this.accordionItems; const nextIndex = (currentIndex + direction + accordionItems.length) % accordionItems.length; @@ -524,7 +497,8 @@ export class NgxPrimerAccordionRootComponent implements OnInit { * @returns {void} This method does not return any value. */ public moveFocusToEnd() { - this.accordionItems()[this.accordionItems().length - 1].focus(); + const lastIndexOfAccordionItem = this.accordionItems?.length - 1; + this.accordionItems[lastIndexOfAccordionItem]?.focus(); } /** @@ -538,7 +512,8 @@ export class NgxPrimerAccordionRootComponent implements OnInit { * @returns {void} This method does not return any value. */ public moveFocusToStart() { - this.accordionItems()[0].focus(); + const firstIndexOfAccordionItems = 0; + this.accordionItems[firstIndexOfAccordionItems]?.focus(); } /** @@ -590,7 +565,7 @@ export class NgxPrimerAccordionRootComponent implements OnInit { private toggleAll(isOpen?: boolean) { if (this.type() === 'Single' || this.disabled()) return; - this.accordionItems().forEach(({ disabled, value }) => { + this.accordionItems?.forEach(({ disabled, value }) => { if (disabled()) return; this.toogleMultiple(value(), isOpen ?? this.isOpen(value())); }); @@ -690,7 +665,7 @@ export class NgxPrimerAccordionRootComponent implements OnInit { protected updateDisableState(value: T | T[], enable: boolean) { const values = Array.isArray(value) ? value : [value]; - const accordionItems = this.accordionItems().filter((item) => + const accordionItems = this.accordionItems?.filter((item) => values.includes(item.value()) ); @@ -708,4 +683,8 @@ export class NgxPrimerAccordionRootComponent implements OnInit { accordionItems.forEach((item) => update(item, enable)); } + + public get accordionItems() { + return this.accordionItemsContext(); + } } diff --git a/packages/primitives/accordion/src/components/accordion-trigger/accordion-trigger.component.ts b/packages/primitives/accordion/src/components/accordion-trigger/accordion-trigger.component.ts index bb8a8d4..0641a68 100644 --- a/packages/primitives/accordion/src/components/accordion-trigger/accordion-trigger.component.ts +++ b/packages/primitives/accordion/src/components/accordion-trigger/accordion-trigger.component.ts @@ -23,15 +23,8 @@ import { ViewContainerRef, inject, } from '@angular/core'; -import { - NgxPrimerAccordionItemContext, - NgxPrimerAccordionTriggerContext, -} from '../../contexts'; -import { NgxPrimerAccordionContentComponent } from '../accordion-content/accordion-content.component'; import { NgxPrimerAccordionItemComponent } from '../accordion-item/accordion-item.component'; -import { NgxPrimerAccordionRootComponent } from '../accordion-root/accordion-root.component'; -import { NgxPrimerAccordionTriggerContextDirective } from '../../directives'; import { NgxPrimerIdGeneratorDirective } from '@ngx-primer/primitive/utilities'; /** @@ -46,7 +39,6 @@ import { NgxPrimerIdGeneratorDirective } from '@ngx-primer/primitive/utilities'; selector: 'ngx-primer-accordion-trigger', standalone: true, imports: [CommonModule], - providers: [NgxPrimerAccordionTriggerContext], templateUrl: './accordion-trigger.component.html', styleUrl: './accordion-trigger.component.scss', hostDirectives: [ @@ -54,9 +46,6 @@ import { NgxPrimerIdGeneratorDirective } from '@ngx-primer/primitive/utilities'; directive: NgxPrimerIdGeneratorDirective, inputs: ['ngxPrimerIdAttr'], }, - { - directive: NgxPrimerAccordionTriggerContextDirective, - }, ], }) export class NgxPrimerAccordionTriggerComponent implements OnInit { @@ -157,27 +146,10 @@ export class NgxPrimerAccordionTriggerComponent implements OnInit { * @optional * @type {NgxPrimerAccordionItemContext | undefined} The accordion item context instance, or `undefined` if not available. */ - public readonly accordionItemContext = inject(NgxPrimerAccordionItemContext, { - optional: true, - }); - - /** - * The context for the accordion trigger, injected optionally from the parent component. - * - * This property holds the context instance for the accordion trigger, which contains - * relevant information and methods related to the accordion trigger. The context is injected - * optionally, meaning that it may not always be present depending on the component's setup. - * The context provides access to properties such as the state of the trigger, its behavior, - * and any other configurations specific to the accordion trigger. - * - * @public - * @readonly - * @optional - * @type {NgxPrimerAccordionTriggerContext | undefined} The accordion trigger context instance, or `undefined` if not available. - */ - public readonly accordionTriggerContext = inject( - NgxPrimerAccordionTriggerContext, + public readonly accordionItemContext = inject( + NgxPrimerAccordionItemComponent, { + host: true, optional: true, } ); @@ -228,7 +200,7 @@ export class NgxPrimerAccordionTriggerComponent implements OnInit { if (doneFn) { setTimeout(() => doneFn({ - context: this.accordionTriggerContext, + context: this, }) ); } @@ -248,7 +220,7 @@ export class NgxPrimerAccordionTriggerComponent implements OnInit { @HostBinding('tabIndex') public get tabIndexAttr() { - return this.accordionItem.isOpen() ? 0 : -1; + return this.accordionItem?.isOpen() ? 0 : -1; } @HostBinding('attr.data-focus') @@ -275,17 +247,15 @@ export class NgxPrimerAccordionTriggerComponent implements OnInit { @HostBinding('attr.aria-controls') public get dataControlsAttr() { - return this.accordionItem?.accordionContent()?.accordionContentId; + return this.accordionItem?.accordionContent?.accordionContentId; } @HostListener('keydown', ['$event']) public onKeyDown(event: KeyboardEvent) { - const currentIndex = this.accordionRoot - .accordionItems() - .findIndex( - (item: NgxPrimerAccordionItemComponent) => - item.accordionTrigger() === this - ); + const currentIndex = this.accordionRoot?.accordionItems.findIndex( + (item: NgxPrimerAccordionItemComponent) => + item?.accordionTrigger === this + ) as number; switch (event.key) { case 'Enter': @@ -294,44 +264,41 @@ export class NgxPrimerAccordionTriggerComponent implements OnInit { event.preventDefault(); break; case 'ArrowDown': - this.accordionRoot.moveFocus(currentIndex, 1); + this.accordionRoot?.moveFocus(currentIndex, 1); event.preventDefault(); break; case 'ArrowUp': - this.accordionRoot.moveFocus(currentIndex, -1); + this.accordionRoot?.moveFocus(currentIndex, -1); event.preventDefault(); break; case 'Home': - this.accordionRoot.moveFocusToStart(); + this.accordionRoot?.moveFocusToStart(); event.preventDefault(); break; case 'End': - this.accordionRoot.moveFocusToEnd(); + this.accordionRoot?.moveFocusToEnd(); event.preventDefault(); break; } } public get accordionItem() { - return this.accordionItemContext - ?.instance as NgxPrimerAccordionItemComponent; + return this.accordionItemContext; } public get accordionRoot() { - return this.accordionItem?.accordionRootContext - ?.instance as NgxPrimerAccordionRootComponent; + return this.accordionItem?.accordionRoot; } public get accordionContent() { - return this.accordionItem?.accordionItemContext - ?.instance as NgxPrimerAccordionContentComponent; + return this.accordionItem?.accordionContent; } public focus() { if (this.accordionRoot?.disabled() || this.accordionItem?.disabled()) return; (this.viewContainerRef.element.nativeElement as HTMLElement).focus({ - preventScroll: false, + preventScroll: this.accordionRoot?.accordionConfig?.preventScrolling ?? false, }); } } diff --git a/packages/primitives/accordion/src/configs/accordion-config.ts b/packages/primitives/accordion/src/configs/accordion-config.ts index 2e31271..eef0b28 100644 --- a/packages/primitives/accordion/src/configs/accordion-config.ts +++ b/packages/primitives/accordion/src/configs/accordion-config.ts @@ -19,7 +19,7 @@ export interface NgxPrimerAccordionConfig { theme: { builtIn: boolean; }; - // Overloaded method signatures + preventScrolling?: boolean; updateConfig( callbackFn: ( config: NgxPrimerAccordionConfig @@ -35,6 +35,7 @@ export const defaultAccordionConfig: () => NgxPrimerAccordionConfig = () => ({ theme: { builtIn: true, }, + preventScrolling: true, updateConfig( callbackFn: | Partial diff --git a/packages/primitives/accordion/src/contexts/accordion-content/accordion-content.context.spec.ts b/packages/primitives/accordion/src/contexts/accordion-content/accordion-content.context.spec.ts deleted file mode 100644 index 051bca1..0000000 --- a/packages/primitives/accordion/src/contexts/accordion-content/accordion-content.context.spec.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { Component } from '@angular/core'; -import { Context } from '@ngx-primer/primitive/utilities'; -import { NgxPrimerAccordionContentContext } from './accordion-content.context'; -import { TestBed } from '@angular/core/testing'; - -@Component({ - selector: 'ngx-primer-accordion-content', - template: '

Accordion Content
', -}) -class MockAccordionContentComponent {} - -describe('NgxPrimerAccordionContentContext', () => { - let context: NgxPrimerAccordionContentContext; - - beforeEach(() => { - TestBed.configureTestingModule({ - providers: [ - NgxPrimerAccordionContentContext, - { provide: Component, useClass: MockAccordionContentComponent }, - ], - }); - - context = TestBed.inject(NgxPrimerAccordionContentContext); - }); - - it('should be created', () => { - expect(context).toBeTruthy(); - }); - - it('should extend Context', () => { - expect(context instanceof Context).toBe(true); - }); -}); diff --git a/packages/primitives/accordion/src/contexts/accordion-content/accordion-content.context.ts b/packages/primitives/accordion/src/contexts/accordion-content/accordion-content.context.ts deleted file mode 100644 index d15e3cc..0000000 --- a/packages/primitives/accordion/src/contexts/accordion-content/accordion-content.context.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { Component, Injectable } from '@angular/core'; - -import { Context } from '@ngx-primer/primitive/utilities'; - -@Injectable() -export class NgxPrimerAccordionContentContext< - NgxPrimerAccordionContentComponent extends Component -> extends Context {} diff --git a/packages/primitives/accordion/src/contexts/accordion-item/accordion-item.context.spec.ts b/packages/primitives/accordion/src/contexts/accordion-item/accordion-item.context.spec.ts deleted file mode 100644 index 2267d77..0000000 --- a/packages/primitives/accordion/src/contexts/accordion-item/accordion-item.context.spec.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { Component } from '@angular/core'; -import { NgxPrimerAccordionItemContext } from './accordion-item.context'; -import { TestBed } from '@angular/core/testing'; - -@Component({ - selector: 'ngx-primer-accordion-item', - template: '
Accordion Item
', -}) -class MockAccordionItemComponent {} -describe('NgxPrimerAccordionItemContext', () => { - let context: NgxPrimerAccordionItemContext; - - beforeEach(() => { - TestBed.configureTestingModule({ - providers: [NgxPrimerAccordionItemContext], - }); - - context = TestBed.inject(NgxPrimerAccordionItemContext); - }); - - it('should be created', () => { - expect(context).toBeTruthy(); - }); - - // Add more tests here -}); diff --git a/packages/primitives/accordion/src/contexts/accordion-item/accordion-item.context.ts b/packages/primitives/accordion/src/contexts/accordion-item/accordion-item.context.ts deleted file mode 100644 index 6f983e7..0000000 --- a/packages/primitives/accordion/src/contexts/accordion-item/accordion-item.context.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { Component, Injectable } from '@angular/core'; - -import { Context } from '@ngx-primer/primitive/utilities'; - -@Injectable() -export class NgxPrimerAccordionItemContext< - NgxPrimerAccordionItemComponent extends Component -> extends Context {} diff --git a/packages/primitives/accordion/src/contexts/accordion-root/accordion-root.context.spec.ts b/packages/primitives/accordion/src/contexts/accordion-root/accordion-root.context.spec.ts deleted file mode 100644 index ce137bd..0000000 --- a/packages/primitives/accordion/src/contexts/accordion-root/accordion-root.context.spec.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { Component } from '@angular/core'; -import { Context } from '@ngx-primer/primitive/utilities'; -import { NgxPrimerAccordionRootContext } from './accordion-root.context'; -import { TestBed } from '@angular/core/testing'; - -@Component({ - selector: 'ngx-primer-accordion-root', - template: '
', -}) -class MockAccordionRootComponent {} - -describe('NgxPrimerAccordionRootContext', () => { - let service: NgxPrimerAccordionRootContext; - - beforeEach(() => { - TestBed.configureTestingModule({ - providers: [NgxPrimerAccordionRootContext], - }); - service = TestBed.inject(NgxPrimerAccordionRootContext); - }); - - it('should be created', () => { - expect(service).toBeTruthy(); - }); - - it('should extend Context', () => { - expect(service instanceof Context).toBe(true); - }); -}); diff --git a/packages/primitives/accordion/src/contexts/accordion-root/accordion-root.context.ts b/packages/primitives/accordion/src/contexts/accordion-root/accordion-root.context.ts deleted file mode 100644 index eb1c4e4..0000000 --- a/packages/primitives/accordion/src/contexts/accordion-root/accordion-root.context.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { Component, Injectable } from '@angular/core'; - -import { Context } from '@ngx-primer/primitive/utilities'; - -@Injectable() -export class NgxPrimerAccordionRootContext< - NgxPrimerAccordionRootComponent extends Component -> extends Context {} diff --git a/packages/primitives/accordion/src/contexts/accordion-trigger/accordion-trigger.context.spec.ts b/packages/primitives/accordion/src/contexts/accordion-trigger/accordion-trigger.context.spec.ts deleted file mode 100644 index f9a933b..0000000 --- a/packages/primitives/accordion/src/contexts/accordion-trigger/accordion-trigger.context.spec.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { Component } from '@angular/core'; -import { Context } from '@ngx-primer/primitive/utilities'; -import { NgxPrimerAccordionTriggerContext } from './accordion-trigger.context'; -import { TestBed } from '@angular/core/testing'; - -@Component({ - selector: 'ngx-primer-accordion-trigger', - template: '
', -}) -class MockAccordionTriggerComponent {} - -describe('NgxPrimerAccordionTriggerContext', () => { - let context: NgxPrimerAccordionTriggerContext; - - beforeEach(() => { - TestBed.configureTestingModule({ - providers: [NgxPrimerAccordionTriggerContext], - }); - - context = TestBed.inject(NgxPrimerAccordionTriggerContext); - }); - - it('should be created', () => { - expect(context).toBeTruthy(); - }); - - it('should extend Context', () => { - expect(context instanceof Context).toBe(true); - }); -}); diff --git a/packages/primitives/accordion/src/contexts/accordion-trigger/accordion-trigger.context.ts b/packages/primitives/accordion/src/contexts/accordion-trigger/accordion-trigger.context.ts deleted file mode 100644 index 91d3eeb..0000000 --- a/packages/primitives/accordion/src/contexts/accordion-trigger/accordion-trigger.context.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { Component, Injectable } from '@angular/core'; - -import { Context } from '@ngx-primer/primitive/utilities'; - -@Injectable() -export class NgxPrimerAccordionTriggerContext< - NgxPrimerAccordionTriggerComponent extends Component -> extends Context {} diff --git a/packages/primitives/accordion/src/contexts/index.ts b/packages/primitives/accordion/src/contexts/index.ts deleted file mode 100644 index 3baa3d4..0000000 --- a/packages/primitives/accordion/src/contexts/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export * from './accordion-root/accordion-root.context'; -export * from './accordion-item/accordion-item.context'; -export * from './accordion-content/accordion-content.context'; -export * from './accordion-trigger/accordion-trigger.context'; diff --git a/packages/primitives/accordion/src/directives/component-context/accordion-content/accordion-content.context.spec.ts b/packages/primitives/accordion/src/directives/component-context/accordion-content/accordion-content.context.spec.ts deleted file mode 100644 index e69de29..0000000 diff --git a/packages/primitives/accordion/src/directives/component-context/accordion-content/accordion-content.context.ts b/packages/primitives/accordion/src/directives/component-context/accordion-content/accordion-content.context.ts deleted file mode 100644 index 2aab86e..0000000 --- a/packages/primitives/accordion/src/directives/component-context/accordion-content/accordion-content.context.ts +++ /dev/null @@ -1,29 +0,0 @@ -/* eslint-disable @typescript-eslint/no-non-null-assertion */ -import { Context, ContextDirective } from '@ngx-primer/primitive/utilities'; - -import { Directive, inject } from '@angular/core'; -import { NgxPrimerAccordionContentComponent } from '../../../components'; -import { NgxPrimerAccordionContentContext } from '../../../contexts'; - -@Directive({ - selector: '[ngxPrimerAccordionContentContextDirective]', - exportAs: 'ngxPrimerAccordionContentContextDirective', - standalone: true, -}) -export class NgxPrimerAccordionContentContextDirective extends ContextDirective< - NgxPrimerAccordionContentComponent -> { - protected override host: NgxPrimerAccordionContentComponent = inject( - NgxPrimerAccordionContentComponent, - { - host: true, - optional: true, - } - )!; - - protected override context: Context< - NgxPrimerAccordionContentComponent - > = inject(NgxPrimerAccordionContentContext, { - optional: true, - })!; -} diff --git a/packages/primitives/accordion/src/directives/component-context/accordion-item/accordion-item-context.directive.spec.ts b/packages/primitives/accordion/src/directives/component-context/accordion-item/accordion-item-context.directive.spec.ts deleted file mode 100644 index e69de29..0000000 diff --git a/packages/primitives/accordion/src/directives/component-context/accordion-item/accordion-item-context.directive.ts b/packages/primitives/accordion/src/directives/component-context/accordion-item/accordion-item-context.directive.ts deleted file mode 100644 index bee4a13..0000000 --- a/packages/primitives/accordion/src/directives/component-context/accordion-item/accordion-item-context.directive.ts +++ /dev/null @@ -1,29 +0,0 @@ -/* eslint-disable @typescript-eslint/no-non-null-assertion */ -import { Context, ContextDirective } from '@ngx-primer/primitive/utilities'; - -import { Directive, inject } from '@angular/core'; -import { NgxPrimerAccordionItemComponent } from '../../../components'; -import { NgxPrimerAccordionItemContext } from '../../../contexts'; - -@Directive({ - selector: '[ngxPrimerAccordionItemContextDirective]', - exportAs: 'ngxPrimerAccordionItemContextDirective', - standalone: true, -}) -export class NgxPrimerAccordionItemContextDirective extends ContextDirective< - NgxPrimerAccordionItemComponent -> { - protected override host: NgxPrimerAccordionItemComponent = inject( - NgxPrimerAccordionItemComponent, - { - host: true, - optional: true, - } - )!; - - protected override context: Context< - NgxPrimerAccordionItemComponent - > = inject(NgxPrimerAccordionItemContext, { - optional: true, - })!; -} diff --git a/packages/primitives/accordion/src/directives/component-context/accordion-root/accordion-root-context.directive.spec.ts b/packages/primitives/accordion/src/directives/component-context/accordion-root/accordion-root-context.directive.spec.ts deleted file mode 100644 index e69de29..0000000 diff --git a/packages/primitives/accordion/src/directives/component-context/accordion-root/accordion-root-context.directive.ts b/packages/primitives/accordion/src/directives/component-context/accordion-root/accordion-root-context.directive.ts deleted file mode 100644 index f6ba518..0000000 --- a/packages/primitives/accordion/src/directives/component-context/accordion-root/accordion-root-context.directive.ts +++ /dev/null @@ -1,27 +0,0 @@ -/* eslint-disable @typescript-eslint/no-non-null-assertion */ -import { Directive, inject } from '@angular/core'; - -import { ContextDirective } from '@ngx-primer/primitive/utilities'; -import { NgxPrimerAccordionRootComponent } from '../../../components'; -import { NgxPrimerAccordionRootContext } from '../../../contexts'; - -@Directive({ - selector: '[ngxPrimerAccordionRootContextDirective]', - exportAs: 'ngxPrimerAccordionRootContextDirective', - standalone: true, -}) -export class NgxPrimerAccordionRootContextDirective extends ContextDirective< - NgxPrimerAccordionRootComponent -> { - protected override host: NgxPrimerAccordionRootComponent = inject( - NgxPrimerAccordionRootComponent, - { - host: true, - optional: true, - } - )!; - - protected readonly context = inject(NgxPrimerAccordionRootContext, { - optional: true, - })!; -} diff --git a/packages/primitives/accordion/src/directives/component-context/accordion-trigger/accordion-trigger-context.directive.spec.ts b/packages/primitives/accordion/src/directives/component-context/accordion-trigger/accordion-trigger-context.directive.spec.ts deleted file mode 100644 index e69de29..0000000 diff --git a/packages/primitives/accordion/src/directives/component-context/accordion-trigger/accordion-trigger-context.directive.ts b/packages/primitives/accordion/src/directives/component-context/accordion-trigger/accordion-trigger-context.directive.ts deleted file mode 100644 index 0d404e0..0000000 --- a/packages/primitives/accordion/src/directives/component-context/accordion-trigger/accordion-trigger-context.directive.ts +++ /dev/null @@ -1,29 +0,0 @@ -/* eslint-disable @typescript-eslint/no-non-null-assertion */ -import { Context, ContextDirective } from '@ngx-primer/primitive/utilities'; - -import { Directive, inject } from '@angular/core'; -import { NgxPrimerAccordionTriggerComponent } from '../../../components'; -import { NgxPrimerAccordionTriggerContext } from '../../../contexts'; - -@Directive({ - selector: '[ngxPrimerAccordionTriggerContextDirective]', - exportAs: 'ngxPrimerAccordionTriggerContextDirective', - standalone: true, -}) -export class NgxPrimerAccordionTriggerContextDirective extends ContextDirective< - NgxPrimerAccordionTriggerComponent -> { - protected override host: NgxPrimerAccordionTriggerComponent = inject( - NgxPrimerAccordionTriggerComponent, - { - host: true, - optional: true, - } - )!; - - protected override context: Context< - NgxPrimerAccordionTriggerComponent - > = inject(NgxPrimerAccordionTriggerContext, { - optional: true, - })!; -} diff --git a/packages/primitives/accordion/src/directives/component-context/index.ts b/packages/primitives/accordion/src/directives/component-context/index.ts deleted file mode 100644 index 6ec29fa..0000000 --- a/packages/primitives/accordion/src/directives/component-context/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export * from './accordion-root/accordion-root-context.directive'; -export * from './accordion-item/accordion-item-context.directive'; -export * from './accordion-content/accordion-content.context'; -export * from './accordion-trigger/accordion-trigger-context.directive'; diff --git a/packages/primitives/utilities/src/index.ts b/packages/primitives/utilities/src/index.ts index 963da9e..dc44fce 100644 --- a/packages/primitives/utilities/src/index.ts +++ b/packages/primitives/utilities/src/index.ts @@ -1,3 +1 @@ -export * from './utils/context/context'; -export * from './utils/context/context-directive'; export * from './directives'; diff --git a/packages/primitives/utilities/src/utils/context/context-directive.ts b/packages/primitives/utilities/src/utils/context/context-directive.ts deleted file mode 100644 index 3cfa376..0000000 --- a/packages/primitives/utilities/src/utils/context/context-directive.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { Directive, OnInit } from '@angular/core'; - -import { Context } from './context'; - -@Directive({ - selector: '[ngxPrimerContextDirective]', - exportAs: 'ngxPrimerContextDirective', - standalone: true, -}) -export abstract class ContextDirective implements OnInit { - protected abstract readonly host: T; - protected abstract readonly context: Context; - - ngOnInit(): void { - this.context.instance = this.host; - } - - get instance() { - return this.context?.instance as T; - } -} diff --git a/packages/primitives/utilities/src/utils/context/context.spec.ts b/packages/primitives/utilities/src/utils/context/context.spec.ts deleted file mode 100644 index e69de29..0000000 diff --git a/packages/primitives/utilities/src/utils/context/context.ts b/packages/primitives/utilities/src/utils/context/context.ts deleted file mode 100644 index f7aa5e5..0000000 --- a/packages/primitives/utilities/src/utils/context/context.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { Injectable, signal } from '@angular/core'; - -@Injectable() -export abstract class Context { - private _instance = signal(null); - - set instance(instance: T) { - this._instance.set(instance); - } - - get instance(): T | null { - return this._instance() as ReturnType; - } -} From cd9c4720681f3944121fbb3b47f09eb5b60c8b8e Mon Sep 17 00:00:00 2001 From: ATS - Elhakim Cool Date: Sun, 22 Dec 2024 16:18:47 +0700 Subject: [PATCH 2/3] fix: fixing component test --- .../accordion-trigger.component.spec.ts | 35 +++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/packages/primitives/accordion/src/components/accordion-trigger/accordion-trigger.component.spec.ts b/packages/primitives/accordion/src/components/accordion-trigger/accordion-trigger.component.spec.ts index 1ef36b6..084dace 100644 --- a/packages/primitives/accordion/src/components/accordion-trigger/accordion-trigger.component.spec.ts +++ b/packages/primitives/accordion/src/components/accordion-trigger/accordion-trigger.component.spec.ts @@ -19,4 +19,39 @@ describe('NgxPrimerAccordionTriggerComponent', () => { it('should create', () => { expect(component).toBeTruthy(); }); + + it('should have the correct role attribute', () => { + expect(fixture.nativeElement.getAttribute('role')).toBe('button'); + }); + + it('should have the correct tabIndex attribute', () => { + expect(fixture.nativeElement.getAttribute('tabIndex')).toBe('-1'); + }); + + it('should toggle accordion item on click', () => { + spyOn(component, 'toogle'); + fixture.nativeElement.click(); + expect(component.toogle).toHaveBeenCalled(); + }); + + it('should handle keydown events', () => { + const event = new KeyboardEvent('keydown', { key: 'Enter' }); + spyOn(component, 'onKeyDown'); + fixture.nativeElement.dispatchEvent(event); + expect(component.onKeyDown).toHaveBeenCalledWith(event); + }); + + it('should focus the element', () => { + spyOn(component, 'focus'); + component.focus(); + expect(component.focus).toHaveBeenCalled(); + }); + + it('should have the correct aria-controls attribute', () => { + expect(fixture.nativeElement.getAttribute('aria-controls')).toBeNull(); + }); + + it('should have the correct data-expanded attribute', () => { + expect(fixture.nativeElement.getAttribute('data-expanded')).toBeNull(); + }); }); From 4adf1d35573ba692c3c9ef5778fbe7d92bb46e10 Mon Sep 17 00:00:00 2001 From: ATS - Elhakim Cool Date: Sun, 22 Dec 2024 16:25:09 +0700 Subject: [PATCH 3/3] fix: fixing component issue --- .../accordion-content/accordion-content.component.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/primitives/accordion/src/components/accordion-content/accordion-content.component.ts b/packages/primitives/accordion/src/components/accordion-content/accordion-content.component.ts index 41a3951..5b4dfe0 100644 --- a/packages/primitives/accordion/src/components/accordion-content/accordion-content.component.ts +++ b/packages/primitives/accordion/src/components/accordion-content/accordion-content.component.ts @@ -74,6 +74,11 @@ export class NgxPrimerAccordionContentComponent implements OnInit { return this.accordionItem?.accordionTrigger?.accordionTriggerId; } + @HostBinding('attr.data-value') + public get dataValueAttr() { + return this.accordionItem?.value() as T; + } + ngOnInit(): void { this.runInitializationFn(); }