feat(Tabs): implementa la componente dei Tab

ref #47

e2e/src/tabs/tabs.e2e-spec.ts

@@ -0,0 +1,108 @@
+import { ButtonPage } from './tabs.po';
+
+describe('Button', () => {
+  let page: ButtonPage;
+
+  beforeEach(async() => {
+    page = new ButtonPage();
+    await page.go();
+  });
+
+  it('dovrebbe essere visualizzato il primo tab', async () => {
+    const firstTabShown = await page.isNthTabContentShown(1);
+    const secondTabShown = await page.isNthTabContentShown(2);
+    const thirdTabShown = await page.isNthTabContentShown(3);
+    const fourthTabShown = await page.isNthTabContentShown(4);
+
+    expect(firstTabShown).toBeTruthy();
+    expect(secondTabShown).toBeFalsy();
+    expect(thirdTabShown).toBeFalsy();
+    expect(fourthTabShown).toBeFalsy();
+  });
+
+  it('dovrebbe cambiare il contenuto visualizzato al click su un altro tab', async () => {
+    await page.clickNthTab(3);
+
+    const firstTabShown = await page.isNthTabContentShown(1);
+    const secondTabShown = await page.isNthTabContentShown(2);
+    const thirdTabShown = await page.isNthTabContentShown(3);
+    const fourthTabShown = await page.isNthTabContentShown(4);
+
+    expect(firstTabShown).toBeFalsy();
+    expect(secondTabShown).toBeFalsy();
+    expect(thirdTabShown).toBeTruthy();
+    expect(fourthTabShown).toBeFalsy();
+  });
+
+  it('non dovrebbe cambiare il contenuto se si clicca su un tab disabilitato', async () => {
+
+    let firstTabShown = await page.isNthTabContentShown(1);
+    let fourthTabShown = await page.isNthTabContentShown(4);
+
+    expect(firstTabShown).toBeTruthy();
+    expect(fourthTabShown).toBeFalsy();
+
+    await page.clickDisabledCheckbox();
+    await page.clickNthTab(4);
+
+    firstTabShown = await page.isNthTabContentShown(1);
+    fourthTabShown = await page.isNthTabContentShown(4);
+
+    expect(firstTabShown).toBeTruthy();
+    expect(fourthTabShown).toBeFalsy();
+  });
+
+  it('dovrebbe selezionare un nuovo tab aggiunto solo se specificato esplicitamente', async () => {
+    expect(page.getDynamicTabGroupNumberOfTabs()).toBe(3);
+
+    let firstTabShown = await page.isNthDynamicTabContentShown(1);
+
+    expect(firstTabShown).toBeTruthy();
+
+    // faccio click per aggiungere un tab senza che questo venga selezionato
+    await page.clickAddButton();
+
+    expect(page.getDynamicTabGroupNumberOfTabs()).toBe(4);
+
+    firstTabShown = await page.isNthDynamicTabContentShown(1);
+    let fourthTabShown = await page.isNthDynamicTabContentShown(4);
+
+    expect(firstTabShown).toBeTruthy();
+    expect(fourthTabShown).toBeFalsy();
+
+    // faccio click per aggiungere un tab e selezionarlo
+    await page.clickSelectAfterAddingCheckbox();
+    await page.clickAddButton();
+
+    expect(page.getDynamicTabGroupNumberOfTabs()).toBe(5);
+
+    fourthTabShown = await page.isNthDynamicTabContentShown(4);
+    const fifthTabShown = await page.isNthDynamicTabContentShown(5);
+
+    expect(fourthTabShown).toBeFalsy();
+    expect(fifthTabShown).toBeTruthy();
+  });
+
+  it('dovrebbe cancellare correttamente un tab e selezionare quello successivo se presente, altrimenti quello precedente', async () => {
+    expect(page.getDynamicTabGroupNumberOfTabs()).toBe(3);
+
+    await page.clickNthDynamicTab(2);
+    await page.clickNthDynamicTabRemoveButton(2);
+
+    expect(page.getDynamicTabGroupNumberOfTabs()).toBe(2);
+
+    const secondTabShown = await page.isNthDynamicTabContentShown(2);
+
+    expect(secondTabShown).toBeTruthy();
+
+    await page.clickNthDynamicTab(2);
+    await page.clickNthDynamicTabRemoveButton(2);
+
+    expect(page.getDynamicTabGroupNumberOfTabs()).toBe(1);
+
+    const firstTabShown = await page.isNthDynamicTabContentShown(1);
+
+    expect(firstTabShown).toBeTruthy();
+  });
+
+});

e2e/src/tabs/tabs.po.ts

@@ -0,0 +1,135 @@
+import { browser, by, element } from 'protractor';
+
+export class ButtonPage {
+  private readonly BUTTON_URL = '/#/componenti/tabs';
+  private readonly ID_EXAMPLE_TAB = 'tabs-examples-tab';
+
+  private readonly ID_CHECKBOX_DARKTHEME = this.getLabelForAttribute('checkbox-0');
+  private readonly ID_CHECKBOX_DISABLE = this.getLabelForAttribute('checkbox-1');
+  private readonly ID_CHECKBOX_PILL = this.getLabelForAttribute('checkbox-2');
+  private readonly ID_CHECKBOX_SELECT_AFTER_ADDING = this.getLabelForAttribute('checkbox-3');
+
+  private readonly ID_TAB_CONTENT_1 = 'it-tab-content-0-0';
+  private readonly ID_TAB_CONTENT_2 = 'it-tab-content-0-1';
+  private readonly ID_TAB_CONTENT_3 = 'it-tab-content-0-2';
+  private readonly ID_TAB_CONTENT_4 = 'it-tab-content-0-3';
+
+  private readonly ID_TAB_1 = 'it-tab-label-0-0';
+  private readonly ID_TAB_2 = 'it-tab-label-0-1';
+  private readonly ID_TAB_3 = 'it-tab-label-0-2';
+  private readonly ID_TAB_4 = 'it-tab-label-0-3';
+
+  private readonly ID_ADD_BUTTON = 'button-0';
+
+  private getLabelForAttribute(attr: string) {
+    return `[for="${attr}"]`;
+  }
+
+  private getTabIdByNumber(n: number) {
+    switch (n) {
+      case 1:
+        return this.ID_TAB_1;
+      case 2:
+        return this.ID_TAB_2;
+      case 3:
+        return this.ID_TAB_3;
+      case 4:
+        return this.ID_TAB_4;
+      default:
+        return null;
+    }
+  }
+
+  private getTabContentIdByNumber(n: number) {
+    switch (n) {
+      case 1:
+        return this.ID_TAB_CONTENT_1;
+      case 2:
+        return this.ID_TAB_CONTENT_2;
+      case 3:
+        return this.ID_TAB_CONTENT_3;
+      case 4:
+        return this.ID_TAB_CONTENT_4;
+      default:
+        return null;
+    }
+  }
+
+  private async getDynamicTabIdByNumber(n: number) {
+    const index = n - 1;
+    const tabs = await element.all(by.css('.dynamic-tab-group .nav-link'));
+    return tabs[index].getAttribute('id');
+  }
+
+  private async getDynamicTabContentIdByNumber(n: number) {
+    const index = n - 1;
+    const tabs = await element.all(by.css('.dynamic-tab-group .tab-pane'));
+    return tabs[index].getAttribute('id');
+  }
+
+  async go() {
+    await browser.get(this.BUTTON_URL);
+    await element(by.id(this.ID_EXAMPLE_TAB)).click();
+    return await browser.sleep(500);
+  }
+
+  async clickElement(id: string) {
+    await element(by.css(id)).click();
+  }
+
+  async clickDarkThemeCheckbox() {
+    await this.clickElement(this.ID_CHECKBOX_DARKTHEME);
+  }
+
+  async clickDisabledCheckbox() {
+    await this.clickElement(this.ID_CHECKBOX_DISABLE);
+  }
+
+  async clickPillCheckbox() {
+    await this.clickElement(this.ID_CHECKBOX_PILL);
+  }
+
+  async clickSelectAfterAddingCheckbox() {
+    await this.clickElement(this.ID_CHECKBOX_SELECT_AFTER_ADDING);
+  }
+
+  async clickAddButton() {
+    await this.clickElement(`#${this.ID_ADD_BUTTON}`);
+  }
+
+  async isNthTabContentShown(n: number) {
+    const idTab = this.getTabContentIdByNumber(n);
+    const classes = await this.getElementClasses(idTab);
+    return classes.includes('show') && classes.includes('active');
+  }
+
+  async isNthDynamicTabContentShown(n: number) {
+    const idTab = await this.getDynamicTabContentIdByNumber(n);
+    const classes = await this.getElementClasses(idTab);
+    return classes.includes('show') && classes.includes('active');
+  }
+
+  async clickNthTab(n: number) {
+    await this.clickElement('#' + this.getTabIdByNumber(n));
+  }
+
+  async getDynamicTabGroupNumberOfTabs() {
+    const tabs = await element.all(by.css('.dynamic-tab-group .nav-item'));
+    return tabs.length;
+  }
+
+  async clickNthDynamicTab(n: number) {
+    const idTab = await this.getDynamicTabIdByNumber(n);
+    await this.clickElement(`#${idTab}`);
+  }
+
+  async clickNthDynamicTabRemoveButton(n: number) {
+    const idTab = await this.getDynamicTabContentIdByNumber(n);
+    await this.clickElement(`#${idTab} button`);
+  }
+
+  private async getElementClasses(id: string) {
+    const classAttribute = await element(by.id(id)).getAttribute('class');
+    return classAttribute.split(' ');
+  }
+}

projects/design-angular-kit/src/lib/design-angular-kit.module.ts

@@ -10,6 +10,8 @@ import { TooltipDirective } from './tooltip/tooltip.directive';
 import { TooltipComponent } from './tooltip/tooltip.component';
 import { ButtonComponent } from './button/button.component';
 import { BadgeDirective } from './badge/badge.directive';
+import { TabGroupComponent } from './tabs/tab-group.component';
+import { TabComponent } from './tabs/tab.component';
 
 @NgModule({
   imports: [
@@ -22,6 +24,8 @@ import { BadgeDirective } from './badge/badge.directive';
     RadioGroupDirective,
     RadioButtonComponent,
     BadgeDirective,
+    TabGroupComponent,
+    TabComponent,
     ProgressBarComponent,
     ButtonComponent,
     TooltipDirective,
@@ -33,6 +37,8 @@ import { BadgeDirective } from './badge/badge.directive';
     RadioGroupDirective,
     RadioButtonComponent,
     BadgeDirective,
+    TabGroupComponent,
+    TabComponent,
     ProgressBarComponent,
     ButtonComponent,
     TooltipDirective

projects/design-angular-kit/src/lib/tabs/tab-group.component.html

@@ -0,0 +1,29 @@
+<ul class="nav" [ngClass]="{'nav-dark': dark, 'nav-tabs': !pill, 'nav-pills mb-3': pill}" role="tablist">
+
+  <li class="nav-item" *ngFor="let tab of _tabs; let i = index">
+    <a
+      href="#"
+      role="tab"
+      [attr.aria-controls]="_getTabContentId(i)"
+      [attr.aria-selected]="selectedIndex == i"
+      [attr.aria-label]="tab.ariaLabel || null"
+      [attr.aria-labelledby]="(!tab.ariaLabel && tab.ariaLabelledby) ? tab.ariaLabelledby : null"
+      [ngClass]="{ 'nav-link': true, 'active': selectedIndex == i, 'disabled': tab.disabled }"
+      [id]="_getTabLabelId(i)"
+      (click)="_handleClick($event, i)">
+      <i *ngIf="tab.icon" class="it-ico-lg d-block text-center" [ngClass]="tab.icon"></i>
+      {{tab.label}}
+    </a>
+  </li>
+</ul>
+<div class="tab-content">
+  <ng-container *ngFor="let tab of _tabs; let i = index">
+    <div
+      [ngClass]="{ 'tab-pane p-3': true, 'show active': selectedIndex == i }"
+      [id]="_getTabContentId(i)"
+      role="tabpanel"
+      [attr.aria-labelledby]="_getTabLabelId(i)">
+      <ng-container *ngTemplateOutlet="tab._implicitContent"></ng-container>
+    </div>
+  </ng-container>
+</div>