@gitlab/ui 80.13.0 → 80.13.2

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

@@ -1,58 +0,0 @@
-import GlAvatar from '../avatar/avatar.vue';
-import { tokenVariants } from '../../../utils/constants';
-import GlToken from './token.vue';
-
-import readme from './token.md';
-
-const defaultValue = (prop) => GlToken.props[prop].default;
-
-const generateProps = ({
-  viewOnly = defaultValue('viewOnly'),
-  variant = defaultValue('variant'),
-} = {}) => ({
-  viewOnly,
-  variant,
-});
-
-const Template = (args, { argTypes }) => ({
-  components: { GlToken },
-  props: Object.keys(argTypes),
-  template: `
-    <div class="gl-display-flex">
-      <gl-token :variant="variant" :view-only="viewOnly">Token</gl-token>
-    </div>`,
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps();
-
-export const ViewOnly = Template.bind({});
-ViewOnly.args = generateProps({
-  viewOnly: true,
-});
-
-export const WithAvatar = () => ({
-  components: { GlToken, GlAvatar },
-  template: `
-    <div class="gl-display-flex">
-    <gl-token><gl-avatar src="./img/avatar.png" :size="16" />Token</gl-token>
-    </div>`,
-});
-
-export default {
-  title: 'base/token',
-  component: GlToken,
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {
-    variant: {
-      options: tokenVariants,
-      control: 'select',
-    },
-  },
-};

package/src/components/base/token_selector/helpers.spec.js

@@ -1,40 +0,0 @@
-import { tokensValidator } from './helpers';
-
-describe('tokensValidator', () => {
-  it('returns `true` when all items have an `id` key', () => {
-    const items = [
-      {
-        id: 1,
-        name: 'foo',
-      },
-      {
-        id: 2,
-        name: 'bar',
-      },
-      {
-        id: 3,
-        name: 'baz',
-      },
-    ];
-
-    expect(tokensValidator(items)).toBe(true);
-  });
-
-  it('returns `false` when an item does not have an `id` key', () => {
-    const items = [
-      {
-        name: 'foo',
-      },
-      {
-        id: 2,
-        name: 'bar',
-      },
-      {
-        id: 3,
-        name: 'baz',
-      },
-    ];
-
-    expect(tokensValidator(items)).toBe(false);
-  });
-});

package/src/components/base/token_selector/token_container.spec.js

@@ -1,306 +0,0 @@
-import { mount } from '@vue/test-utils';
-
-import { keyboard } from '~/utils/constants';
-import GlToken from '../token/token.vue';
-import GlTokenContainer from './token_container.vue';
-
-describe('GlTokenContainer', () => {
-  const tokens = [
-    {
-      id: 1,
-      name: 'Vue.js',
-    },
-    {
-      id: 2,
-      name: 'Ruby On Rails',
-    },
-    {
-      id: 3,
-      name: 'GraphQL',
-    },
-    {
-      id: 4,
-      name: 'Redis',
-    },
-  ];
-  const mockedRegisterFocusOnToken = jest.fn();
-  const defaultProps = { tokens, registerFocusOnToken: mockedRegisterFocusOnToken };
-
-  let wrapper;
-
-  const createComponent = (options) => {
-    wrapper = mount(GlTokenContainer, {
-      ...options,
-      propsData: {
-        ...defaultProps,
-        ...(options?.propsData || {}),
-      },
-      attachTo: document.body,
-    });
-  };
-
-  const findTokenByName = (name) => {
-    const tokenWrappers = wrapper.findAll('[role=option]');
-
-    return tokenWrappers.wrappers.find((tokenWrapper) => tokenWrapper.text() === name);
-  };
-
-  const findTokenContainer = () => wrapper.findComponent({ ref: 'tokenContainer' });
-
-  const blurActiveElement = () => document.activeElement?.blur?.();
-
-  afterEach(() => {
-    blurActiveElement();
-  });
-
-  describe('props', () => {
-    describe('tokens', () => {
-      it('renders passed tokens', () => {
-        createComponent();
-
-        expect(wrapper.findAllComponents(GlToken).length).toBe(4);
-      });
-    });
-
-    describe('viewOnly', () => {
-      it('passes viewOnly prop to tokens correctly', () => {
-        createComponent({ propsData: { viewOnly: true } });
-        const tokenWrappers = wrapper.findAllComponents(GlToken);
-
-        expect(tokenWrappers.wrappers.every((token) => token.props('viewOnly'))).toBe(true);
-      });
-    });
-
-    describe('clearing all tokens', () => {
-      const findClearAllButton = () => wrapper.find('[data-testid="clear-all-button"]');
-
-      it('does not render `Clear all` button by default', () => {
-        createComponent();
-
-        expect(findClearAllButton().exists()).toBe(false);
-      });
-
-      it('renders `Clear all` button when `showClearAllButton` prop is true', () => {
-        createComponent({ propsData: { showClearAllButton: true } });
-
-        expect(findClearAllButton().exists()).toBe(true);
-      });
-
-      it('emits `clear-all` event when `Clear all` button is clicked', () => {
-        createComponent({ propsData: { showClearAllButton: true } });
-        findClearAllButton().vm.$emit('click', new MouseEvent('click'));
-
-        expect(wrapper.emitted('clear-all')).toEqual([[]]);
-      });
-    });
-
-    describe('state', () => {
-      describe('when `state` is `false`', () => {
-        it('adds `aria-invalid="true"` attribute`', () => {
-          createComponent({
-            propsData: {
-              state: false,
-            },
-          });
-
-          expect(findTokenContainer().attributes('aria-invalid')).toBe('true');
-        });
-      });
-
-      describe.each`
-        value
-        ${true}
-        ${null}
-      `('when `state` is `$value`', ({ value }) => {
-        it('does not add `aria-invalid` attribute', () => {
-          createComponent({
-            propsData: {
-              state: value,
-            },
-          });
-
-          expect(findTokenContainer().attributes('aria-invalid')).toBeUndefined();
-        });
-      });
-    });
-
-    describe('registerFocusOnToken', () => {
-      it('calls passed method', () => {
-        createComponent();
-
-        expect(mockedRegisterFocusOnToken).toHaveBeenCalled();
-      });
-    });
-  });
-
-  describe('slots', () => {
-    it('renders `token-content` slot', () => {
-      createComponent({
-        scopedSlots: {
-          'token-content': '<span>Token id: {{ props.token.id }}</span>',
-        },
-      });
-
-      const tokenWrappers = wrapper.findAllComponents(GlToken);
-
-      expect(
-        tokenWrappers.wrappers.every(
-          (tokenWrapper, index) => `Token id: ${tokens[index].id}` === tokenWrapper.text()
-        )
-      ).toBe(true);
-    });
-
-    it('renders `text-input` slot', () => {
-      createComponent({
-        slots: {
-          'text-input': '<input id="custom-text-input" type="text" />',
-        },
-      });
-
-      expect(wrapper.find('#custom-text-input').exists()).toBe(true);
-    });
-  });
-
-  describe('closing tokens', () => {
-    beforeEach(() => {
-      createComponent({
-        data() {
-          return {
-            focusedTokenIndex: 0,
-          };
-        },
-      });
-
-      const firstToken = wrapper.findComponent(GlToken);
-      firstToken.vm.$emit('close');
-    });
-
-    it('fires `token-remove` event', () => {
-      expect(wrapper.emitted('token-remove')[0]).toEqual([tokens[0]]);
-    });
-
-    it('cancels token focus', () => {
-      wrapper.findAllComponents({ ref: 'tokens' }).wrappers.forEach((tokenWrapper) => {
-        expect(tokenWrapper.element).not.toHaveFocus();
-      });
-    });
-  });
-
-  describe('keyboard navigation', () => {
-    const setup = async (focusedTokenIndex, key) => {
-      createComponent(
-        {
-          data() {
-            return { focusedTokenIndex };
-          },
-        },
-        true
-      );
-
-      const focusedToken = findTokenByName(tokens[focusedTokenIndex].name);
-
-      await focusedToken.trigger('keydown', { key });
-    };
-
-    describe('when escape key is pressed', () => {
-      it('fires `cancel-focus` event', async () => {
-        await setup(0, keyboard.escape);
-        expect(wrapper.emitted('cancel-focus')).toHaveLength(1);
-      });
-    });
-
-    describe('when backspace/delete key is pressed', () => {
-      const tokenIndex = 2;
-
-      beforeEach(async () => {
-        await setup(tokenIndex, keyboard.backspace);
-      });
-
-      it('fires `token-remove` event', () => {
-        expect(wrapper.emitted('token-remove')[0]).toEqual([tokens[tokenIndex]]);
-      });
-
-      it('focuses on previous token after removing', () => {
-        const expectedFocusedToken = findTokenByName(tokens[tokenIndex - 1].name);
-
-        expect(expectedFocusedToken.element).toHaveFocus();
-      });
-    });
-
-    describe('arrow keys', () => {
-      describe('when left arrow is pressed', () => {
-        it.each`
-          focusedTokenIndex | expectedFocusedTokenIndex | testName
-          ${3}              | ${2}                      | ${'focuses on previous token'}
-          ${0}              | ${3}                      | ${'focuses on last token if there is no previous token'}
-        `('$testName', async ({ focusedTokenIndex, expectedFocusedTokenIndex }) => {
-          await setup(focusedTokenIndex, keyboard.arrowLeft);
-
-          const expectedFocusedToken = findTokenByName(tokens[expectedFocusedTokenIndex].name);
-          expect(expectedFocusedToken.element).toHaveFocus();
-        });
-      });
-
-      describe('when right arrow is pressed', () => {
-        it.each`
-          focusedTokenIndex | expectedFocusedTokenIndex | testName
-          ${0}              | ${1}                      | ${'focuses on next token'}
-          ${3}              | ${0}                      | ${'focuses on first token if there is no next token'}
-        `('$testName', async ({ focusedTokenIndex, expectedFocusedTokenIndex }) => {
-          await setup(focusedTokenIndex, keyboard.arrowRight);
-
-          const expectedFocusedToken = findTokenByName(tokens[expectedFocusedTokenIndex].name);
-          expect(expectedFocusedToken.element).toHaveFocus();
-        });
-      });
-
-      it('focuses on the first token when home key is pressed', async () => {
-        await setup(3, keyboard.home);
-
-        const expectedFocusedToken = findTokenByName(tokens[0].name);
-        expect(expectedFocusedToken.element).toHaveFocus();
-      });
-
-      it('focuses on the last token when end key is pressed', async () => {
-        await setup(0, keyboard.end);
-
-        const expectedFocusedToken = findTokenByName(tokens[3].name);
-        expect(expectedFocusedToken.element).toHaveFocus();
-      });
-
-      it('keeps track of focused token when token is focused by click/tap', async () => {
-        createComponent({});
-
-        const focusedToken = findTokenByName(tokens[3].name);
-
-        await focusedToken.trigger('focus');
-        await focusedToken.trigger('keydown', { key: keyboard.arrowLeft });
-
-        const expectedFocusedToken = findTokenByName(tokens[2].name);
-        expect(expectedFocusedToken.element).toHaveFocus();
-      });
-
-      it('emits the `cancel-focus` event when tab key is pressed without modifiers', async () => {
-        createComponent({});
-
-        const focusedToken = findTokenByName(tokens[0].name);
-
-        await focusedToken.trigger('focus');
-        await focusedToken.trigger('keydown', { key: keyboard.tab });
-
-        expect(wrapper.emitted('cancel-focus')).toEqual([[]]);
-      });
-
-      it('does not emit the `cancel-focus` event when tab key is pressed with modifiers', async () => {
-        createComponent({});
-
-        const focusedToken = findTokenByName(tokens[0].name);
-
-        await focusedToken.trigger('focus');
-        await focusedToken.trigger('keydown', { key: keyboard.tab, shiftKey: true });
-
-        expect(wrapper.emitted('cancel-focus')).toBeUndefined();
-      });
-    });
-  });
-});