diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/tabs/properties/tabs-table-properties.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/tabs/properties/tabs-table-properties.component.html index 4142665a2..a0065616a 100644 --- a/projects/dxc-ngx-cdk-site/src/app/components/examples/tabs/properties/tabs-table-properties.component.html +++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/tabs/properties/tabs-table-properties.component.html @@ -15,6 +15,11 @@ 0 The index of the active tab. + + defaultActiveTabIndex: number + + Initially active tab, only when it is uncontrolled. + iconPosition: 'top' | 'left' 'left' diff --git a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/tabs-preview/tabs-preview.component.html b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/tabs-preview/tabs-preview.component.html index 6be60d2c3..3b2c11787 100644 --- a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/tabs-preview/tabs-preview.component.html +++ b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/tabs-preview/tabs-preview.component.html @@ -1,6 +1,6 @@
- + @@ -8,9 +8,22 @@ - - - + + + - + - + - + = new EventEmitter(); diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-tabs/dxc-tabs.component.spec.ts b/projects/dxc-ngx-cdk/src/lib/dxc-tabs/dxc-tabs.component.spec.ts index 0c5b020ba..135e01dfc 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-tabs/dxc-tabs.component.spec.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-tabs/dxc-tabs.component.spec.ts @@ -1,6 +1,5 @@ import { render, fireEvent } from "@testing-library/angular"; import { screen } from "@testing-library/dom"; -import { DxcTabsComponent } from "./dxc-tabs.component"; import { DxcTabsModule } from "./dxc-tabs.module"; import { BrowserDynamicTestingModule, @@ -16,7 +15,7 @@ TestBed.initTestEnvironment( describe("DxcTabs tests", () => { test("should render dxc-tabs", async () => { const tabs = await render( - ` + ` @@ -33,9 +32,41 @@ describe("DxcTabs tests", () => { expect(tabs.getByText("Tab3")).toBeTruthy(); }); + test("should render dxc-tabs with default value", async () => { + const clickFunction = jest.fn(); + const tabs = await render( + ` + + + + `, + { + componentProperties: { clickFunction }, + imports: [DxcTabsModule], + excludeComponentDeclaration: true, + } + ); + tabs.detectChanges(); + const arrTabs = screen.getAllByRole("tab"); + expect(arrTabs[0].getAttribute("aria-selected")).toBe("false"); + expect(arrTabs[1].getAttribute("aria-selected")).toBe("false"); + expect(arrTabs[2].getAttribute("aria-selected")).toBe("true"); + expect(tabs.getByText("Tab1")).toBeTruthy(); + expect(tabs.getByText("Tab2")).toBeTruthy(); + expect(tabs.getByText("Tab3")).toBeTruthy(); + + const tab1 = screen.getByText("Tab1"); + fireEvent.click(tab1); + tabs.detectChanges(); + expect(clickFunction).toHaveBeenCalledWith(0); + expect(arrTabs[0].getAttribute("aria-selected")).toBe("true"); + expect(arrTabs[1].getAttribute("aria-selected")).toBe("false"); + expect(arrTabs[2].getAttribute("aria-selected")).toBe("false"); + }); + test("should render dxc-badge", async () => { const tabs = await render( - ` + ` @@ -54,7 +85,7 @@ describe("DxcTabs tests", () => { test("should render uncontrolled tabs", async () => { const clickFunction = jest.fn(); const tabs = await render( - ` + ` @@ -80,7 +111,7 @@ describe("DxcTabs tests", () => { test("should render controlled tabs", async () => { const clickFunction = jest.fn(); const tabs = await render( - ` + ` @@ -92,14 +123,24 @@ describe("DxcTabs tests", () => { } ); tabs.detectChanges(); + const arrTabs = screen.getAllByRole("tab"); + expect(arrTabs[0].getAttribute("aria-selected")).toBe("true"); + expect(arrTabs[1].getAttribute("aria-selected")).toBe("false"); + expect(arrTabs[2].getAttribute("aria-selected")).toBe("false"); const tab2 = screen.getByText("Tab2"); const tab3 = screen.getByText("Tab3"); fireEvent.click(tab2); tabs.detectChanges(); expect(clickFunction).toHaveBeenCalledWith(1); + expect(arrTabs[0].getAttribute("aria-selected")).toBe("false"); + expect(arrTabs[1].getAttribute("aria-selected")).toBe("true"); + expect(arrTabs[2].getAttribute("aria-selected")).toBe("false"); tabs.detectChanges(); fireEvent.click(tab3); tabs.detectChanges(); expect(clickFunction).toHaveBeenCalledWith(2); + expect(arrTabs[0].getAttribute("aria-selected")).toBe("false"); + expect(arrTabs[1].getAttribute("aria-selected")).toBe("false"); + expect(arrTabs[2].getAttribute("aria-selected")).toBe("true"); }); }); diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-tabs/dxc-tabs.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-tabs/dxc-tabs.component.ts index 91af98aa8..b042676ce 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-tabs/dxc-tabs.component.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-tabs/dxc-tabs.component.ts @@ -53,6 +53,18 @@ export class DxcTabsComponent implements OnChanges { } private _activeTabIndex = 0; + /** + * Initially active tab, only when it is uncontrolled + */ + @Input() + get defaultActiveTabIndex(): number { + return this._defaultActiveTabIndex; + } + set defaultActiveTabIndex(value: number) { + this._defaultActiveTabIndex = coerceNumberProperty(value); + } + private _defaultActiveTabIndex = 0; + /** * Position of icons in tabs. */ @@ -98,7 +110,6 @@ export class DxcTabsComponent implements OnChanges { if (this.tabs && this.tabs.length > 0) { this.generateTabs(); } - const inputs = Object.keys(changes).reduce((result, item) => { result[item] = changes[item].currentValue; return result; @@ -109,6 +120,9 @@ export class DxcTabsComponent implements OnChanges { ngOnInit() { this.service.iconPosition.next(this.iconPosition || "left"); + this.activeTabIndex = this.defaultActiveTabIndex + ? this.defaultActiveTabIndex + : this.activeTabIndex; this.renderedActiveTabIndex = this.activeTabIndex; this.className = `${this.getDynamicStyle(this.defaultInputs.getValue())}`; } diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-tabs/dxc-tabs.types.ts b/projects/dxc-ngx-cdk/src/lib/dxc-tabs/dxc-tabs.types.ts index 82765c554..6c08ac528 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-tabs/dxc-tabs.types.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-tabs/dxc-tabs.types.ts @@ -18,4 +18,5 @@ export interface TabsProperties { activeTabIndex?: number; iconPosition?: "top" | "left"; margin?: Space | Spacing; + defaultActiveTabIndex?: number; }