@gitlab/ui 80.13.1 → 80.14.0

package/src/components/base/tabs/tabs/scrollable_tabs.spec.js

@@ -1,260 +0,0 @@
-import { mount } from '@vue/test-utils';
-import range from 'lodash/range';
-import mapValues from 'lodash/mapValues';
-import { useMockResizeObserver } from '~helpers/mock_dom_observer';
-import GlTab from '../tab/tab.vue';
-import GlScrollableTabs from './scrollable_tabs.vue';
-import GlTabs from './tabs.vue';
-
-const { NAV_CLASS } = GlScrollableTabs;
-const TEST_WIDTH = 600;
-// Just a little more than double so we can test when going all the way to the right
-const TEST_NAV_WIDTH = 1500;
-const TEST_ACTION = {
-  text: 'Lorem ipsum',
-};
-const TEST_DEFAULT_PROPS = {
-  contentClass: 'gl-test-content-class',
-  navClass: 'gl-test-nav-class',
-};
-
-describe('GlScrollableTabs', () => {
-  let wrapper;
-  let inputSpy;
-
-  const { trigger } = useMockResizeObserver();
-
-  beforeEach(() => {
-    Element.prototype.scrollTo = jest.fn().mockImplementation(function scrollTo({ left }) {
-      this.scrollLeft = left;
-      this.dispatchEvent(new Event('scroll'));
-    });
-    inputSpy = jest.fn();
-  });
-
-  const findScrollRightButton = () => wrapper.find('[aria-label="Scroll right"]');
-  const findScrollLeftButton = () => wrapper.find('[aria-label="Scroll left"]');
-  const findNav = () => wrapper.find(`.${NAV_CLASS}`);
-
-  const setNavScrollWidth = async (width = 0) => {
-    const nav = findNav();
-    Object.defineProperty(nav.element, 'scrollWidth', {
-      get() {
-        return width;
-      },
-    });
-
-    // It's not great we're forcing an update, but this is one of the things we
-    // are listening to.
-    wrapper.vm.$forceUpdate();
-
-    await wrapper.vm.$nextTick();
-  };
-
-  const createComponent = async (props = {}, { tabsCount = 5 } = {}) => {
-    wrapper = mount(GlScrollableTabs, {
-      // Component actually passes props through so we have to set attrs
-      attrs: {
-        ...TEST_DEFAULT_PROPS,
-        ...props,
-      },
-      slots: {
-        default: {
-          template: `<div><gl-tab v-for="tab in tabs" :key="tab.key" :title="tab.title">{{ tab.content }}</gl-tab></div>`,
-        },
-      },
-      stubs: {
-        'gl-tab': GlTab,
-      },
-      mocks: {
-        tabs: range(tabsCount).map((i) => ({
-          key: i.toString(),
-          title: `Lorem ${i}`,
-          content: `(${i}) Lorem ipsum dolar sit...`,
-        })),
-      },
-      listeners: {
-        input: inputSpy,
-      },
-    });
-
-    await wrapper.vm.$nextTick();
-
-    trigger(wrapper.element, { entry: { contentRect: { width: TEST_WIDTH } } });
-
-    await wrapper.vm.$nextTick();
-  };
-
-  describe('with default', () => {
-    beforeEach(async () => {
-      await createComponent();
-    });
-
-    it('passes props through', () => {
-      expect(NAV_CLASS).toBe('gl-scrollable-tabs-nav');
-      expect(wrapper.findComponent(GlTabs).props()).toMatchObject({
-        ...TEST_DEFAULT_PROPS,
-        navClass: [NAV_CLASS, TEST_DEFAULT_PROPS.navClass],
-      });
-    });
-
-    it('passes listeners through', async () => {
-      const secondTab = wrapper.findAll('[role="tab"]').wrappers[1];
-      await secondTab.trigger('click');
-
-      expect(inputSpy).toHaveBeenCalledWith(1);
-    });
-
-    it.each`
-      side       | finder
-      ${'right'} | ${findScrollRightButton}
-      ${'left'}  | ${findScrollLeftButton}
-    `('hides $side button', ({ finder }) => {
-      const button = finder();
-
-      expect(button.isVisible()).toBe(false);
-    });
-  });
-
-  describe('with array as nav-class', () => {
-    const navClass = ['test', 'test2'];
-
-    beforeEach(async () => {
-      await createComponent({ navClass });
-    });
-
-    it('spreads the navClass array', () => {
-      expect(wrapper.findComponent(GlTabs).props()).toMatchObject({
-        navClass: [NAV_CLASS, ...navClass],
-      });
-    });
-  });
-
-  describe('with action props', () => {
-    // Let's make sure we reference the same props in act + assertion
-    const ACTION_PROPS = {
-      actionPrimary: TEST_ACTION,
-      actionSecondary: TEST_ACTION,
-      actionTertiary: TEST_ACTION,
-    };
-
-    beforeEach(async () => {
-      await createComponent(ACTION_PROPS);
-    });
-
-    it('ignores actions', () => {
-      expect(wrapper.findComponent(GlTabs).props()).toMatchObject(
-        mapValues(ACTION_PROPS, () => null)
-      );
-    });
-  });
-
-  describe('with nav overflow', () => {
-    beforeEach(async () => {
-      await createComponent();
-      await setNavScrollWidth(TEST_NAV_WIDTH);
-    });
-
-    it('shows right button', () => {
-      expect(findScrollRightButton().isVisible()).toBe(true);
-    });
-
-    it('hides left button', () => {
-      expect(findScrollLeftButton().isVisible()).toBe(false);
-    });
-
-    describe.each([
-      [
-        'right clicked',
-        {
-          buttons: [findScrollRightButton],
-          showsRight: true,
-          showsLeft: true,
-          scrollLeft: TEST_WIDTH,
-          scrollToCalls: [
-            [
-              {
-                behavior: 'smooth',
-                left: TEST_WIDTH,
-              },
-            ],
-          ],
-        },
-      ],
-      [
-        'right clicked then left clicked',
-        {
-          buttons: [findScrollRightButton, findScrollLeftButton],
-          showsRight: true,
-          showsLeft: false,
-          scrollLeft: 0,
-          scrollToCalls: [
-            [
-              {
-                behavior: 'smooth',
-                left: TEST_WIDTH,
-              },
-            ],
-            [
-              {
-                behavior: 'smooth',
-                left: 0,
-              },
-            ],
-          ],
-        },
-      ],
-      [
-        'right clicked all the way',
-        {
-          buttons: [findScrollRightButton, findScrollRightButton],
-          showsRight: false,
-          showsLeft: true,
-          scrollLeft: TEST_NAV_WIDTH - TEST_WIDTH,
-          scrollToCalls: [
-            [
-              {
-                behavior: 'smooth',
-                left: TEST_WIDTH,
-              },
-            ],
-            [
-              {
-                behavior: 'smooth',
-                left: TEST_NAV_WIDTH - TEST_WIDTH,
-              },
-            ],
-          ],
-        },
-      ],
-    ])('with %s', (desc, { buttons, showsRight, showsLeft, scrollLeft, scrollToCalls }) => {
-      beforeEach(async () => {
-        await buttons.reduce(
-          (acc, findButton) =>
-            acc.then(() => {
-              findButton().trigger('click');
-
-              return wrapper.vm.$nextTick();
-            }),
-          Promise.resolve()
-        );
-      });
-
-      it(`right button isVisible=${showsRight}`, () => {
-        expect(findScrollRightButton().isVisible()).toBe(showsRight);
-      });
-
-      it(`left button isVisible=${showsLeft}`, () => {
-        expect(findScrollLeftButton().isVisible()).toBe(showsLeft);
-      });
-
-      it('updates nav scrollLeft', () => {
-        expect(findNav().element.scrollLeft).toBe(scrollLeft);
-      });
-
-      it('calls scrollTo', () => {
-        expect(Element.prototype.scrollTo.mock.calls).toEqual(scrollToCalls);
-      });
-    });
-  });
-});

package/src/components/base/tabs/tabs/tabs.spec.js

@@ -1,366 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { nextTick } from 'vue';
-import GlButton from '../../button/button.vue';
-import { tabsButtonDefaults } from '../../../../utils/constants';
-import GlTab from '../tab/tab.vue';
-import GlTabs from './tabs.vue';
-
-const getActionButtonProp = ({ type, text = `${type} action!` }) => ({
-  [`action${type}`]: {
-    text,
-  },
-});
-
-describe('tabs component', () => {
-  let wrapper;
-
-  const buildTabs = ({ props = {}, mountFn = mount, options = {} } = {}) => {
-    wrapper = mountFn(GlTabs, {
-      propsData: {
-        ...props,
-      },
-      components: { GlTab },
-      slots: {
-        default: `
-          <gl-tab title="First">
-            first tab content
-          </gl-tab>
-          <gl-tab title="Second">
-            second tab content
-          </gl-tab>
-          <gl-tab title="Third" query-param-value="third">
-            second tab content
-          </gl-tab>
-        `,
-      },
-      ...options,
-    });
-  };
-
-  const findNav = () => wrapper.find('.gl-tabs-nav');
-  const findContent = () => wrapper.find('.gl-tab-content');
-  const findActiveTab = () => wrapper.find('[role="tab"][aria-selected="true"]');
-  const findTabByText = (text) =>
-    wrapper.findAll('[role="tab"]').wrappers.find((tabWrapper) => tabWrapper.text() === text);
-
-  describe('default', () => {
-    it('the active tab should be styled', async () => {
-      buildTabs();
-
-      await nextTick();
-
-      expect(findActiveTab().classes()).toContain('gl-tab-nav-item-active');
-    });
-  });
-
-  describe('nav', () => {
-    it('should have class "gl-tabs-nav"', () => {
-      buildTabs();
-      expect(findNav().exists()).toBe(true);
-    });
-
-    it.each`
-      type        | navClass
-      ${'string'} | ${'my-nav-class my-nav-class-2'}
-      ${'array'}  | ${['my-nav-class', 'my-nav-class-2']}
-      ${'object'} | ${{ 'my-nav-class': true, 'my-nav-class-2': true }}
-    `('should have custom $type classes', ({ navClass }) => {
-      buildTabs({ props: { navClass } });
-
-      expect(findNav().classes('my-nav-class')).toBe(true);
-      expect(findNav().classes('my-nav-class-2')).toBe(true);
-    });
-  });
-
-  describe('content', () => {
-    it('should have class "gl-tab-content"', () => {
-      buildTabs();
-      expect(findContent().exists()).toBe(true);
-    });
-
-    it.each`
-      type        | contentClass
-      ${'string'} | ${'my-class my-class-2'}
-      ${'array'}  | ${['my-class', 'my-class-2']}
-      ${'object'} | ${{ 'my-class': true, 'my-class-2': true }}
-    `('should have custom $type classes', ({ contentClass }) => {
-      buildTabs({ props: { contentClass } });
-
-      expect(findContent().classes('my-class')).toBe(true);
-      expect(findContent().classes('my-class-2')).toBe(true);
-    });
-  });
-
-  describe('actions buttons', () => {
-    describe('when no actions are provided', () => {
-      it('does not render the actions tabs', () => {
-        buildTabs();
-
-        expect(wrapper.find('[data-testid="actions-tabs-start"').exists()).toBe(false);
-        expect(wrapper.find('[data-testid="actions-tabs-end"').exists()).toBe(false);
-      });
-
-      it('renders BV tabs slots', async () => {
-        buildTabs({
-          options: {
-            slots: {
-              'tabs-start': `<div class="tabs-start-slot"></div>`,
-              'tabs-end': `<div class="tabs-end-slot"></div>`,
-            },
-          },
-        });
-
-        expect(wrapper.find('.tabs-start-slot').exists()).toBe(true);
-        expect(wrapper.find('.tabs-end-slot').exists()).toBe(true);
-      });
-    });
-
-    describe('when the actions are provided', () => {
-      describe.each`
-        buttonType
-        ${'Primary'}
-        ${'Secondary'}
-        ${'Tertiary'}
-      `('renders the $buttonType action buttons', ({ buttonType }) => {
-        beforeEach(() => {
-          const props = getActionButtonProp({ type: buttonType });
-          buildTabs({ props });
-        });
-
-        it('renders two of a kind', () => {
-          expect(wrapper.findAllComponents(GlButton)).toHaveLength(2);
-        });
-
-        it('passes the correct defaults attributes', () => {
-          const testId = `action-${buttonType.toLowerCase()}`;
-
-          expect(wrapper.find(`[data-testid="${testId}"]`).exists()).toBe(true);
-          expect(wrapper.find(`[data-testid="${testId}"]`).props()).toMatchObject(
-            tabsButtonDefaults[`action${buttonType}`]
-          );
-        });
-      });
-
-      it('correctly passes the props to the button', () => {
-        buildTabs({
-          props: {
-            actionPrimary: {
-              text: 'A button!',
-              attributes: {
-                variant: 'success',
-                category: 'primary',
-              },
-            },
-          },
-        });
-
-        expect(wrapper.findComponent(GlButton).props()).toMatchObject({
-          variant: 'success',
-          category: 'primary',
-        });
-      });
-
-      it.each`
-        buttonType
-        ${'Primary'}
-        ${'Secondary'}
-        ${'Tertiary'}
-      `('emits the $buttonType event when clicked', async ({ buttonType }) => {
-        const testId = `action-${buttonType.toLowerCase()}`;
-        const props = getActionButtonProp({ type: buttonType });
-
-        buildTabs({ props });
-        wrapper.find(`[data-testid="${testId}"]`).vm.$emit('click');
-        await wrapper.vm.$nextTick();
-
-        expect(wrapper.emitted(`${buttonType.toLowerCase()}`).length).toBe(1);
-      });
-
-      it('only renders action buttons', () => {
-        buildTabs({
-          props: {
-            actionPrimary: {
-              text: 'Primary action!',
-            },
-          },
-          options: {
-            slots: {
-              'tabs-start': `<div class="tabs-start-slot"></div>`,
-              'tabs-end': `<div class="tabs-end-slot"></div>`,
-            },
-          },
-        });
-
-        expect(wrapper.find('.tabs-start-slot').exists()).toBe(false);
-        expect(wrapper.find('.tabs-end-slot').exists()).toBe(false);
-      });
-    });
-  });
-
-  describe('`syncActiveTabWithQueryParams` prop', () => {
-    describe('when set to `true`', () => {
-      jest.spyOn(window.history, 'pushState');
-
-      beforeEach(() => {
-        delete window.location;
-        window.location = new URL('https://localhost');
-      });
-
-      afterEach(() => {
-        window.history.pushState.mockClear();
-      });
-
-      describe.each`
-        queryParamName | queryString           | expectedActiveTabText | expectedActiveTabIndex
-        ${undefined}   | ${'?tab=1'}           | ${'Second'}           | ${1}
-        ${undefined}   | ${'?tab=third'}       | ${'Third'}            | ${2}
-        ${undefined}   | ${'?tab=2'}           | ${'First'}            | ${0}
-        ${'activeTab'} | ${'?activeTab=third'} | ${'Third'}            | ${2}
-        ${undefined}   | ${''}                 | ${'First'}            | ${0}
-        ${undefined}   | ${'?activeTab=forth'} | ${'First'}            | ${0}
-      `(
-        'when `queryParamName` prop is $queryParamName and query string is $queryString',
-        ({ queryParamName, queryString, expectedActiveTabText, expectedActiveTabIndex }) => {
-          it('sets active tab based on query string when component is mounted', async () => {
-            window.location.search = queryString;
-
-            buildTabs({
-              props: { syncActiveTabWithQueryParams: true, queryParamName },
-            });
-
-            await nextTick();
-            await nextTick();
-
-            expect(findActiveTab().text()).toBe(expectedActiveTabText);
-
-            // `input` event should only be fired if the active tab changes.
-            if (expectedActiveTabIndex > 0) {
-              expect(wrapper.emitted('input')[1]).toEqual([expectedActiveTabIndex]);
-            } else {
-              expect(wrapper.emitted('input')[1]).toBeUndefined();
-            }
-          });
-        }
-      );
-
-      describe('when active tab is changed', () => {
-        describe.each`
-          queryParamName | tabTitleToActivate | expectedQueryString
-          ${undefined}   | ${'Second'}        | ${'/?foo-bar=baz&tab=1'}
-          ${undefined}   | ${'Third'}         | ${'/?foo-bar=baz&tab=third'}
-          ${'activeTab'} | ${'Second'}        | ${'/?foo-bar=baz&activeTab=1'}
-        `(
-          'when `queryParamName` prop is $queryParamName and "$tabTitleToActivate" tab is activated',
-          ({ queryParamName, tabTitleToActivate, expectedQueryString }) => {
-            beforeEach(() => {
-              window.location.search = '?foo-bar=baz';
-            });
-
-            it(`sets query string to ${expectedQueryString}`, async () => {
-              buildTabs({
-                props: { syncActiveTabWithQueryParams: true, queryParamName },
-              });
-
-              await nextTick();
-              await findTabByText(tabTitleToActivate).trigger('click');
-
-              expect(window.history.pushState).toHaveBeenCalledWith({}, '', expectedQueryString);
-              expect(window.history.pushState).toHaveBeenCalledTimes(1);
-            });
-          }
-        );
-      });
-
-      describe('when `popstate` event is fired', () => {
-        beforeEach(async () => {
-          buildTabs({
-            props: { syncActiveTabWithQueryParams: true },
-          });
-
-          await nextTick();
-
-          window.location.search = '?tab=1';
-          window.dispatchEvent(new PopStateEvent('popstate', {}));
-        });
-
-        it('updates active tab based on query string', () => {
-          expect(findActiveTab().text()).toBe('Second');
-        });
-
-        it('does not call `window.history.pushState`', () => {
-          expect(window.history.pushState).not.toHaveBeenCalled();
-        });
-      });
-
-      describe('when `value` prop is changed', () => {
-        it('updates active tab and query string', async () => {
-          buildTabs({
-            props: { syncActiveTabWithQueryParams: true, value: 0 },
-          });
-
-          await nextTick();
-
-          expect(findActiveTab().text()).toBe('First');
-
-          await wrapper.setProps({ value: 1 });
-
-          expect(findActiveTab().text()).toBe('Second');
-          expect(window.history.pushState).toHaveBeenCalledWith({}, '', '/?tab=1');
-        });
-      });
-
-      describe('when component is mounted', () => {
-        it('emits `input` event', async () => {
-          window.location.search = '?tab=1';
-
-          buildTabs({
-            props: { syncActiveTabWithQueryParams: true },
-          });
-
-          await nextTick();
-          await nextTick();
-
-          expect(wrapper.emitted().input.pop()).toEqual([1]);
-        });
-      });
-    });
-
-    describe('when set to `false`', () => {
-      describe('when component is mounted', () => {
-        it('emits `input` event', async () => {
-          buildTabs();
-
-          await nextTick();
-
-          expect(wrapper.emitted('input')[0]).toEqual([0]);
-        });
-      });
-
-      describe('when tab is changed', () => {
-        it('emits `input` event', async () => {
-          buildTabs();
-
-          await nextTick();
-          await findTabByText('Second').trigger('click');
-
-          expect(wrapper.emitted('input')[1]).toEqual([1]);
-        });
-      });
-
-      describe('when `value` prop is changed', () => {
-        it('updates active tab', async () => {
-          buildTabs();
-
-          await nextTick();
-
-          expect(findActiveTab().text()).toBe('First');
-
-          await wrapper.setProps({ value: 1 });
-
-          expect(findActiveTab().text()).toBe('Second');
-          expect(window.history.pushState).not.toHaveBeenCalled();
-        });
-      });
-    });
-  });
-});