tabs.spec.ts

/**
 * @license
 * Copyright Google LLC All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://angular.dev/license
 */

import {
  TabInputs,
  TabPattern,
  TabListInputs,
  TabListPattern,
  TabPanelInputs,
  TabPanelPattern,
} from './tabs';
import {signal, SignalLike, WritableSignalLike} from '../behaviors/signal-like/signal-like';
import {createKeyboardEvent} from '@angular/cdk/testing/private';
import {ModifierKeys} from '@angular/cdk/testing';

// Converts the SignalLike type to WritableSignalLike type for controlling test inputs.
type WritableSignalOverrides<O> = {
  [K in keyof O as O[K] extends SignalLike<any> ? K : never]: O[K] extends SignalLike<infer T>
    ? WritableSignalLike<T>
    : never;
};

type TestTabListInputs = TabListInputs & WritableSignalOverrides<TabListInputs>;
type TestTabInputs = TabInputs & WritableSignalOverrides<TabInputs>;
type TestTabPanelInputs = TabPanelInputs & WritableSignalOverrides<TabPanelInputs>;

const up = (mods?: ModifierKeys) => createKeyboardEvent('keydown', 38, 'ArrowUp', mods);
const down = (mods?: ModifierKeys) => createKeyboardEvent('keydown', 40, 'ArrowDown', mods);
const left = (mods?: ModifierKeys) => createKeyboardEvent('keydown', 37, 'ArrowLeft', mods);
const right = (mods?: ModifierKeys) => createKeyboardEvent('keydown', 39, 'ArrowRight', mods);
const home = (mods?: ModifierKeys) => createKeyboardEvent('keydown', 36, 'Home', mods);
const end = (mods?: ModifierKeys) => createKeyboardEvent('keydown', 35, 'End', mods);
const space = (mods?: ModifierKeys) => createKeyboardEvent('keydown', 32, ' ', mods);
const enter = (mods?: ModifierKeys) => createKeyboardEvent('keydown', 13, 'Enter', mods);

function createTabElement(): HTMLElement {
  const element = document.createElement('div');
  element.role = 'tab';
  return element;
}

describe('Tabs Pattern', () => {
  let tabListInputs: TestTabListInputs;
  let tabListPattern: TabListPattern;
  let tabInputs: TestTabInputs[];
  let tabPatterns: TabPattern[];
  let tabPanelInputs: TestTabPanelInputs[];
  let tabPanelPatterns: TabPanelPattern[];

  beforeEach(() => {
    // Initiate TabListPattern.
    tabListInputs = {
      orientation: signal('horizontal'),
      wrap: signal(true),
      textDirection: signal('ltr'),
      selectionMode: signal('follow'),
      focusMode: signal('roving'),
      disabled: signal(false),
      activeItem: signal(undefined),
      softDisabled: signal(true),
      items: signal([]),
      element: signal(document.createElement('div')),
      selectedTab: signal(undefined),
    };
    tabListPattern = new TabListPattern(tabListInputs);

    // Initiate a list of TabPatterns.
    tabInputs = [
      {
        tabList: signal(tabListPattern),
        tabPanel: signal(undefined),
        id: signal('tab-1-id'),
        element: signal(createTabElement()),
        disabled: signal(false),
      },
      {
        tabList: signal(tabListPattern),
        tabPanel: signal(undefined),
        id: signal('tab-2-id'),
        element: signal(createTabElement()),
        disabled: signal(false),
      },
      {
        tabList: signal(tabListPattern),
        tabPanel: signal(undefined),
        id: signal('tab-3-id'),
        element: signal(createTabElement()),
        disabled: signal(false),
      },
    ];
    tabPatterns = [
      new TabPattern(tabInputs[0]),
      new TabPattern(tabInputs[1]),
      new TabPattern(tabInputs[2]),
    ];

    // Initiate a list of TabPanelPatterns.
    tabPanelInputs = [
      {
        id: signal('tabpanel-1-id'),
        tab: signal(undefined),
      },
      {
        id: signal('tabpanel-2-id'),
        tab: signal(undefined),
      },
      {
        id: signal('tabpanel-3-id'),
        tab: signal(undefined),
      },
    ];
    tabPanelPatterns = [
      new TabPanelPattern(tabPanelInputs[0]),
      new TabPanelPattern(tabPanelInputs[1]),
      new TabPanelPattern(tabPanelInputs[2]),
    ];

    // Binding between tabs and tabpanels.
    tabInputs[0].tabPanel.set(tabPanelPatterns[0]);
    tabInputs[1].tabPanel.set(tabPanelPatterns[1]);
    tabInputs[2].tabPanel.set(tabPanelPatterns[2]);
    tabPanelInputs[0].tab.set(tabPatterns[0]);
    tabPanelInputs[1].tab.set(tabPatterns[1]);
    tabPanelInputs[2].tab.set(tabPatterns[2]);
    tabListInputs.items.set(tabPatterns);
    tabListInputs.activeItem.set(tabPatterns[0]);
  });

  describe('TabListPattern', () => {
    describe('#open', () => {
      it('should open a tab with value', () => {
        expect(tabListPattern.selectedTab()).toBeUndefined();
        tabListPattern.open(tabPatterns[0]);
        expect(tabListPattern.selectedTab()!).toBe(tabPatterns[0]);
      });

      it('should open a tab with tab pattern instance', () => {
        expect(tabListPattern.selectedTab()).toBeUndefined();
        tabListPattern.open(tabPatterns[0]);
        expect(tabListPattern.selectedTab()).toBe(tabPatterns[0]);
      });

      it('should open the active tab', () => {
        expect(tabListPattern.selectedTab()).toBeUndefined();
        expect(tabListPattern.activeTab()).toBe(tabPatterns[0]);
        tabListPattern.open();
        expect(tabListPattern.selectedTab()).toBe(tabPatterns[0]);
      });
    });

    describe('#setDefaultState', () => {
      it('should not set activeIndex if there are no tabs', () => {
        tabListInputs.items.set([]);
        tabListInputs.activeItem.set(tabPatterns[10]);
        tabListPattern.setDefaultState();
        expect(tabListInputs.activeItem()).toBe(tabPatterns[10]);
      });

      it('should not set activeIndex if no tabs are focusable', () => {
        tabListInputs.softDisabled.set(false);
        tabInputs.forEach(input => input.disabled.set(true));
        tabListInputs.activeItem.set(tabPatterns[10]);
        tabListPattern.setDefaultState();
        expect(tabListInputs.activeItem()).toBe(tabPatterns[10]);
      });

      it('should set activeIndex to the first focusable tab if no tabs are selected', () => {
        tabListInputs.softDisabled.set(false);
        tabListInputs.activeItem.set(tabPatterns[2]);
        tabListPattern.selectedTab.set(undefined);
        tabInputs[0].disabled.set(true);
        tabListPattern.setDefaultState();
        expect(tabListInputs.activeItem()).toBe(tabPatterns[1]);
      });

      it('should set activeIndex to the first focusable and selected tab', () => {
        tabListInputs.activeItem.set(tabPatterns[0]);
        tabListPattern.selectedTab.set(tabPatterns[2]);
        tabListPattern.setDefaultState();
        expect(tabListInputs.activeItem()).toBe(tabPatterns[2]);
      });

      it('should set activeIndex to the first focusable tab when the selected tab is not focusable', () => {
        tabListInputs.softDisabled.set(false);
        tabListPattern.selectedTab.set(tabPatterns[1]);
        tabInputs[1].disabled.set(true);
        tabListPattern.setDefaultState();
        expect(tabListInputs.activeItem()).toBe(tabPatterns[0]);
      });
    });

    describe('Keyboard Navigation', () => {
      it('does not handle keyboard event if a tablist is disabled.', () => {
        expect(tabPatterns[1].active()).toBeFalse();
        tabListInputs.disabled.set(true);
        tabListPattern.onKeydown(right());
        expect(tabPatterns[1].active()).toBeFalse();
      });

      it('skips the disabled tab when `softDisabled` is set to false.', () => {
        tabListInputs.softDisabled.set(false);
        tabInputs[1].disabled.set(true);
        tabListPattern.onKeydown(right());
        expect(tabPatterns[0].active()).toBeFalse();
        expect(tabPatterns[1].active()).toBeFalse();
        expect(tabPatterns[2].active()).toBeTrue();
      });

      it('does not skip the disabled tab when `softDisabled` is set to true.', () => {
        tabInputs[1].disabled.set(true);
        tabListPattern.onKeydown(right());
        expect(tabPatterns[0].active()).toBeFalse();
        expect(tabPatterns[1].active()).toBeTrue();
        expect(tabPatterns[2].active()).toBeFalse();
      });

      it('selects a tab by focus if `selectionMode` is "follow".', () => {
        tabListPattern.onKeydown(space());
        expect(tabPatterns[0].selected()).toBeTrue();
        expect(tabPatterns[1].selected()).toBeFalse();
        tabListPattern.onKeydown(right());
        expect(tabPatterns[0].selected()).toBeFalse();
        expect(tabPatterns[1].selected()).toBeTrue();
      });

      it('selects a tab by enter key if `selectionMode` is "explicit".', () => {
        tabListInputs.selectionMode.set('explicit');
        tabListPattern.onKeydown(space());
        expect(tabPatterns[0].selected()).toBeTrue();
        expect(tabPatterns[1].selected()).toBeFalse();
        tabListPattern.onKeydown(right());
        expect(tabPatterns[0].selected()).toBeTrue();
        expect(tabPatterns[1].selected()).toBeFalse();
        tabListPattern.onKeydown(enter());
        expect(tabPatterns[0].selected()).toBeFalse();
        expect(tabPatterns[1].selected()).toBeTrue();
      });

      it('selects a tab by space key if `selectionMode` is "explicit".', () => {
        tabListInputs.selectionMode.set('explicit');
        tabListPattern.onKeydown(space());
        expect(tabPatterns[0].selected()).toBeTrue();
        expect(tabPatterns[1].selected()).toBeFalse();
        tabListPattern.onKeydown(right());
        expect(tabPatterns[0].selected()).toBeTrue();
        expect(tabPatterns[1].selected()).toBeFalse();
        tabListPattern.onKeydown(space());
        expect(tabPatterns[0].selected()).toBeFalse();
        expect(tabPatterns[1].selected()).toBeTrue();
      });

      it('uses left key to navigate to the previous tab when `orientation` is set to "horizontal".', () => {
        tabListInputs.activeItem.set(tabPatterns[1]);
        expect(tabPatterns[1].active()).toBeTrue();
        tabListPattern.onKeydown(left());
        expect(tabPatterns[0].active()).toBeTrue();
      });

      it('uses right key to navigate to the next tab when `orientation` is set to "horizontal".', () => {
        tabListInputs.activeItem.set(tabPatterns[1]);
        expect(tabPatterns[1].active()).toBeTrue();
        tabListPattern.onKeydown(right());
        expect(tabPatterns[2].active()).toBeTrue();
      });

      it('uses up key to navigate to the previous tab when `orientation` is set to "vertical".', () => {
        tabListInputs.orientation.set('vertical');
        tabListInputs.activeItem.set(tabPatterns[1]);
        expect(tabPatterns[1].active()).toBeTrue();
        tabListPattern.onKeydown(up());
        expect(tabPatterns[0].active()).toBeTrue();
      });

      it('uses down key to navigate to the next tab when `orientation` is set to "vertical".', () => {
        tabListInputs.orientation.set('vertical');
        tabListInputs.activeItem.set(tabPatterns[1]);
        expect(tabPatterns[1].active()).toBeTrue();
        tabListPattern.onKeydown(down());
        expect(tabPatterns[2].active()).toBeTrue();
      });

      it('uses home key to navigate to the first tab.', () => {
        tabListInputs.activeItem.set(tabPatterns[1]);
        expect(tabPatterns[1].active()).toBeTrue();
        tabListPattern.onKeydown(home());
        expect(tabPatterns[0].active()).toBeTrue();
      });

      it('uses end key to navigate to the last tab.', () => {
        tabListInputs.activeItem.set(tabPatterns[1]);
        expect(tabPatterns[1].active()).toBeTrue();
        tabListPattern.onKeydown(end());
        expect(tabPatterns[2].active()).toBeTrue();
      });

      it('moves to the last tab from first tab when navigating to the previous tab if `wrap` is set to true', () => {
        expect(tabPatterns[0].active()).toBeTrue();
        tabListPattern.onKeydown(left());
        expect(tabPatterns[2].active()).toBeTrue();
      });

      it('moves to the first tab from last tab when navigating to the next tab if `wrap` is set to true', () => {
        tabListPattern.onKeydown(end());
        expect(tabPatterns[2].active()).toBeTrue();
        tabListPattern.onKeydown(right());
        expect(tabPatterns[0].active()).toBeTrue();
      });

      it('stays on the first tab when navigating to the previous tab if `wrap` is set to false', () => {
        tabListInputs.wrap.set(false);
        expect(tabPatterns[0].active()).toBeTrue();
        tabListPattern.onKeydown(left());
        expect(tabPatterns[0].active()).toBeTrue();
      });

      it('stays on the last tab when navigating to the next tab if `wrap` is set to false', () => {
        tabListInputs.wrap.set(false);
        tabListPattern.onKeydown(end());
        expect(tabPatterns[2].active()).toBeTrue();
        tabListPattern.onKeydown(right());
        expect(tabPatterns[2].active()).toBeTrue();
      });

      it('changes the navigation direction with `rtl` mode.', () => {
        tabListInputs.textDirection.set('rtl');
        tabListInputs.activeItem.set(tabPatterns[1]);
        tabListPattern.onKeydown(left());
        expect(tabPatterns[2].active()).toBeTrue();
      });
    });
  });

  describe('TabPattern', () => {
    it('gets a controlled tabpanel id from a tab', () => {
      expect(tabPanelPatterns[0].id()).toBe('tabpanel-1-id');
      expect(tabPatterns[0].controls()).toBe('tabpanel-1-id');
      expect(tabPanelPatterns[1].id()).toBe('tabpanel-2-id');
      expect(tabPatterns[1].controls()).toBe('tabpanel-2-id');
      expect(tabPanelPatterns[2].id()).toBe('tabpanel-3-id');
      expect(tabPatterns[2].controls()).toBe('tabpanel-3-id');
    });

    describe('#open', () => {
      it('should open the current tab', () => {
        expect(tabListPattern.selectedTab()).toBeUndefined();
        tabPatterns[0].open();
        expect(tabListPattern.selectedTab()).toBe(tabPatterns[0]);
      });
    });
  });

  describe('TabPanelPattern', () => {
    it('should set a tabpanel to be not hidden if a tab is opened', () => {
      tabPatterns[0].open();
      expect(tabPatterns[0].selected()).toBeTrue();
      expect(tabPanelPatterns[0].hidden()).toBeFalse();
    });

    it('sets a tabpanel to be hidden if a tab is not opened', () => {
      expect(tabPatterns[1].selected()).toBeFalse();
      expect(tabPanelPatterns[1].hidden()).toBeTrue();
    });

    it('should set a tabpanel tab index to 0 if the tab is opened', () => {
      tabPatterns[0].open();
      expect(tabPatterns[0].tabIndex()).toBe(0);
    });

    it('should set a tabpanel tab index to -1 if the tab is not opened', () => {
      tabPatterns[0].open();
      expect(tabPatterns[1].tabIndex()).toBe(-1);
      expect(tabPatterns[2].tabIndex()).toBe(-1);
    });

    it('should set a tabpanel aria-labelledby pointing to its tab id', () => {
      expect(tabPanelPatterns[0].labelledBy()).toBe('tab-1-id');
      expect(tabPanelPatterns[1].labelledBy()).toBe('tab-2-id');
      expect(tabPanelPatterns[2].labelledBy()).toBe('tab-3-id');
    });
  });
});