@gitlab/ui 80.13.1 → 80.14.0

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

@@ -1,192 +0,0 @@
-import { nextTick } from 'vue';
-import { shallowMount, mount } from '@vue/test-utils';
-import { BTable } from 'bootstrap-vue';
-import { logWarning } from '../../../utils/utils';
-import { waitForAnimationFrame } from '../../../utils/test_utils';
-import { glTableLiteWarning } from './constants';
-import Table from './table.vue';
-
-jest.mock('../../../utils/utils', () => ({
-  isDev: () => true,
-  logWarning: jest.fn(),
-}));
-
-describe('GlTable', () => {
-  let wrapper;
-
-  const slotsTemplate = {
-    empty: `
-      <p>Placeholder empty text</p>`,
-  };
-
-  const factory = ({ mountFn = shallowMount, props = {}, scopedSlots = {} } = {}) => {
-    wrapper = mountFn(Table, {
-      scopedSlots,
-      propsData: props,
-    });
-  };
-
-  const findBTable = () => wrapper.findComponent(BTable);
-  const findColHeaderAt = (index) => findBTable().find('thead').findAll('th').at(index);
-  const findFirstColHeader = () => findColHeaderAt(0);
-  const findSortIconForHeaderAt = (index) =>
-    findColHeaderAt(index).find('[data-testid="sort-icon"]');
-
-  afterEach(() => {
-    logWarning.mockClear();
-  });
-
-  it('should log a warning when not given any props or slots which qualifies for the usage of GlTable', async () => {
-    factory();
-    await waitForAnimationFrame();
-
-    expect(logWarning).toHaveBeenCalledWith(glTableLiteWarning, wrapper.element);
-  });
-
-  it('should not log a warning when given a prop which qualifies for the usage of GlTable', async () => {
-    factory({ props: { busy: true } });
-    await waitForAnimationFrame();
-
-    expect(logWarning).not.toHaveBeenCalled();
-  });
-
-  it('should not log a warning when given a slot which qualifies for the usage of GlTable', async () => {
-    factory({ scopedSlots: slotsTemplate });
-    await waitForAnimationFrame();
-
-    expect(logWarning).not.toHaveBeenCalled();
-  });
-
-  it('adds gl-table class to tableClass prop', () => {
-    factory({ props: { tableClass: 'test-class' } });
-
-    expect(findBTable().props().tableClass).toEqual(['gl-table', 'test-class', null]);
-  });
-
-  it('adds sticky header class to tableClass prop', () => {
-    factory({ props: { stickyHeader: true } });
-
-    expect(findBTable().props().tableClass).toEqual([
-      'gl-table',
-      undefined,
-      'gl-table--sticky-header',
-    ]);
-  });
-
-  it('adds gl-table fields to table prop', () => {
-    const fields = ['name', 'age'];
-
-    factory({ props: { fields } });
-
-    expect(wrapper.props('fields')).toEqual(fields);
-    expect(findBTable().props('fields')).toEqual(fields);
-  });
-
-  describe('sortable columns', () => {
-    const fields = [
-      {
-        key: 'name',
-        label: 'Name column',
-        sortable: true,
-      },
-      {
-        key: 'age',
-        label: 'Age column',
-        sortable: true,
-      },
-      {
-        key: 'email',
-        label: 'Email column',
-        sortable: false,
-      },
-    ];
-
-    describe('without custom slots', () => {
-      beforeEach(() => {
-        factory({ mountFn: mount, props: { fields } });
-      });
-
-      it('sets the correct column label', () => {
-        expect(findFirstColHeader().text()).toMatch(fields[0].label);
-      });
-
-      it('renders the ascending sort icon', async () => {
-        findFirstColHeader().trigger('click');
-        await nextTick();
-
-        const headerText = findFirstColHeader().text();
-
-        expect(headerText).toContain('↑');
-      });
-
-      it('renders the descending sort icon', async () => {
-        findFirstColHeader().trigger('click');
-        findFirstColHeader().trigger('click');
-        await nextTick();
-        const headerText = findFirstColHeader().text();
-
-        expect(headerText).toContain('↓');
-      });
-
-      it('sets initial sorting column using the sortBy property', () => {
-        factory({ mountFn: mount, props: { fields, sortBy: 'age' } });
-
-        expect(findSortIconForHeaderAt(0).classes()).toContain('gl-display-none');
-        expect(findSortIconForHeaderAt(1).classes()).not.toContain('gl-display-none');
-      });
-
-      it('sets initial sorting direction using the sortDesc property', () => {
-        factory({
-          mountFn: mount,
-          props: { fields, sortBy: 'age', sortDesc: true },
-        });
-
-        expect(findColHeaderAt(1).text()).toContain('↓');
-      });
-
-      it('does not render sort icon for non-sortable columns', () => {
-        expect(findSortIconForHeaderAt(2).exists()).toBe(false);
-      });
-
-      describe('changing the active sort column', () => {
-        it('hides sorting icon in previous active sort column', async () => {
-          await findColHeaderAt(0).trigger('click');
-
-          expect(findSortIconForHeaderAt(0).classes()).not.toContain('gl-display-none');
-          expect(findSortIconForHeaderAt(1).classes()).toContain('gl-display-none');
-
-          await findColHeaderAt(1).trigger('click');
-
-          expect(findSortIconForHeaderAt(0).classes()).toContain('gl-display-none');
-          expect(findSortIconForHeaderAt(1).classes()).not.toContain('gl-display-none');
-        });
-      });
-    });
-
-    describe('when headers are customized via slots', () => {
-      const customSlotContent = 'customSlotContent';
-
-      beforeEach(() => {
-        factory({
-          mountFn: mount,
-          props: {
-            fields,
-          },
-          scopedSlots: {
-            'head(name)': `<div>${customSlotContent}</div>`,
-          },
-        });
-      });
-
-      it('renders the ascending sort icon alongside the custom slot content', async () => {
-        findFirstColHeader().trigger('click');
-        await nextTick();
-
-        const headerText = findFirstColHeader().text();
-
-        expect(headerText).toContain('↑');
-        expect(headerText).toContain(customSlotContent);
-      });
-    });
-  });
-});

package/src/components/base/table/table.stories.js

@@ -1,186 +0,0 @@
-import GlFormInput from '../form/form_input/form_input.vue';
-import GlTable from './table.vue';
-import readme from './table.md';
-
-const components = { GlTable };
-
-const tableItems = [
-  {
-    column_one: 'test',
-    col_2: 'ABC',
-    col_three: 1234,
-  },
-  {
-    column_one: 'test2',
-    col_2: 'DEF',
-    col_three: 5678,
-  },
-  {
-    column_one: 'test3',
-    col_2: 'GHI',
-    col_three: 9101,
-  },
-];
-
-const generateProps = ({
-  stickyHeader = false,
-  fixed = false,
-  footClone = false,
-  stacked = false,
-  caption = '',
-} = {}) => ({
-  stickyHeader,
-  fixed,
-  footClone,
-  stacked,
-  caption,
-});
-
-export const Default = (args, { argTypes }) => ({
-  components,
-  props: Object.keys(argTypes),
-  template: `
-  <gl-table
-    :sticky-header="stickyHeader"
-    :items="$options.items"
-    :fields="$options.fields"
-    :fixed="fixed"
-    :stacked="stacked"
-    :foot-clone="footClone"
-    sort-by="col_three"
-    sort-desc
-    no-sort-reset
-    sort-direction="desc"
-    hover
-    selectable
-    selected-variant="primary"
-  >
-    <template v-if="caption" #table-caption>
-      {{ caption }}
-    </template>
-  </gl-table>
-`,
-  fields: [
-    {
-      key: 'column_one',
-      label: 'First column',
-      variant: 'secondary',
-      sortable: true,
-      isRowHeader: false,
-    },
-    {
-      key: 'col_2',
-      label: 'Second column',
-      formatter: (value) => value,
-    },
-    {
-      key: 'col_three',
-      sortable: true,
-      label: 'Third column',
-      formatter: (value) => value,
-      thClass: 'gl-text-right',
-      tdClass: 'gl-text-right',
-    },
-  ],
-  items: tableItems,
-});
-Default.args = generateProps();
-
-export const Empty = (args, { argTypes }) => ({
-  components,
-  props: Object.keys(argTypes),
-  template: `
-      <gl-table show-empty />
-    `,
-});
-Empty.parameters = { controls: { disable: true } };
-
-export const WithFilter = (args, { argTypes }) => ({
-  components: { ...components, GlFormInput },
-  props: Object.keys(argTypes),
-  template: `<div class="gl-line-height-normal">
-      <gl-form-input v-model="filter" placeholder="Type to search" />
-      <br />
-      <gl-table
-              :sticky-header="stickyHeader"
-              :items="$options.items"
-              :fields="$options.fields"
-              :filter=filter
-              :fixed="fixed"
-              :stacked="stacked"
-              :foot-clone="footClone"
-              hover
-              selectable
-              selected-variant="primary"
-          />
-      </div>`,
-  items: tableItems,
-  data() {
-    return {
-      filter: null,
-    };
-  },
-});
-WithFilter.args = generateProps();
-
-export const WithStickyHeader = (args, { argTypes }) => ({
-  components: { ...components, GlFormInput },
-  props: Object.keys(argTypes),
-  template: `<div class="gl-line-height-normal">
-      <gl-form-input v-model="filter" placeholder="Type to search" />
-      <br />
-      <gl-table
-              :sticky-header="stickyHeader"
-              :items="$options.items"
-              :fields="$options.fields"
-              :filter=filter
-              :fixed="fixed"
-              :stacked="stacked"
-              :foot-clone="footClone"
-              hover
-              selectable
-              selected-variant="primary"
-          />
-      </div>`,
-  items: [
-    ...tableItems,
-    ...tableItems,
-    ...tableItems,
-    ...tableItems,
-    ...tableItems,
-    ...tableItems,
-    ...tableItems,
-    ...tableItems,
-    ...tableItems,
-    ...tableItems,
-  ],
-  data() {
-    return {
-      filter: null,
-    };
-  },
-});
-WithStickyHeader.args = generateProps({ stickyHeader: true });
-
-export default {
-  title: 'base/table/table',
-  component: GlTable,
-  parameters: {
-    bootstrapComponent: 'b-table',
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {
-    stacked: {
-      options: ['sm', 'md', 'lg', 'xl', true, false],
-      control: 'select',
-    },
-    stickyHeader: {
-      options: [false, true],
-      control: 'boolean',
-    },
-  },
-};

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

@@ -1,40 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { BTableLite } from 'bootstrap-vue';
-import GlTableLite from './table_lite.vue';
-
-describe('GlTableLite', () => {
-  let wrapper;
-
-  const factory = (propsData) => {
-    wrapper = shallowMount(GlTableLite, {
-      propsData,
-    });
-  };
-
-  const findBTableLite = () => wrapper.findComponent(BTableLite);
-
-  it('adds gl-table class to tableClass prop', () => {
-    factory({ tableClass: 'test-class' });
-
-    expect(findBTableLite().props().tableClass).toEqual(['gl-table', 'test-class', null]);
-  });
-
-  it('adds sticky header class to tableClass prop', () => {
-    factory({ stickyHeader: true });
-
-    expect(findBTableLite().props().tableClass).toEqual([
-      'gl-table',
-      undefined,
-      'gl-table--sticky-header',
-    ]);
-  });
-
-  it('adds gl-table fields to table prop', () => {
-    const fields = ['name', 'age'];
-
-    factory({ fields });
-
-    expect(wrapper.props('fields')).toEqual(fields);
-    expect(findBTableLite().props('fields')).toEqual(fields);
-  });
-});

package/src/components/base/table_lite/table_lite.stories.js

@@ -1,74 +0,0 @@
-import readme from './table_lite.md';
-import GlTableLite from './table_lite.vue';
-
-const fieldsMock = [
-  {
-    key: 'column_one',
-    label: 'First column',
-    thClass: 'w-60p',
-    tdClass: 'table-col',
-  },
-  {
-    key: 'column_two',
-    label: 'Second column',
-    thClass: 'w-60p',
-    tdClass: 'table-col',
-  },
-];
-
-const tableItemsMock = [
-  {
-    column_one: 'test',
-    column_two: 1234,
-  },
-  {
-    column_one: 'test2',
-    column_two: 5678,
-  },
-  {
-    column_one: 'test3',
-    column_two: 9101,
-  },
-];
-
-const generateProps = ({
-  stickyHeader = false,
-  items = tableItemsMock,
-  fields = fieldsMock,
-} = {}) => ({
-  stickyHeader,
-  items,
-  fields,
-});
-
-const Template = (args, { argTypes }) => ({
-  components: { GlTableLite },
-  props: Object.keys(argTypes),
-  template: `
-    <gl-table-lite
-    :sticky-header="stickyHeader"
-    :items="items"
-    :fields="fields" />
-  `,
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps();
-
-export default {
-  title: 'base/table/table_lite',
-  component: GlTableLite,
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {
-    stickyHeader: {
-      options: [false, true],
-      control: 'boolean',
-    },
-  },
-};

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

@@ -1,34 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { BTab } from 'bootstrap-vue';
-import { DEFAULT_TAB_TITLE_LINK_CLASS } from '../constants';
-import GlTab from './tab.vue';
-
-describe('Tab component', () => {
-  let wrapper;
-
-  const createComponent = (options) => {
-    wrapper = shallowMount(GlTab, {
-      ...options,
-    });
-  };
-
-  it.each`
-    titleLinkClass                  | expectedProp
-    ${''}                           | ${`${DEFAULT_TAB_TITLE_LINK_CLASS}`}
-    ${'additional-class'}           | ${`additional-class ${DEFAULT_TAB_TITLE_LINK_CLASS}`}
-    ${['additional-class']}         | ${['additional-class', DEFAULT_TAB_TITLE_LINK_CLASS]}
-    ${{ 'additional-class': true }} | ${{ 'additional-class': true, 'gl-tab-nav-item': true }}
-    ${undefined}                    | ${DEFAULT_TAB_TITLE_LINK_CLASS}
-  `(
-    'computed title link class is $expectedProp when titleLinkClass is $titleLinkClass',
-    ({ titleLinkClass, expectedProp }) => {
-      createComponent({
-        propsData: {
-          titleLinkClass,
-        },
-      });
-
-      expect(wrapper.findComponent(BTab).props('titleLinkClass')).toStrictEqual(expectedProp);
-    }
-  );
-});