@gitlab/ui 80.13.0 → 80.13.2

package/src/components/shared_components/clear_icon_button/clear_icon_button.spec.js

@@ -1,23 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import ClearIconButton from './clear_icon_button.vue';
-
-describe('Clear Icon Button', () => {
-  let wrapper;
-
-  const defaultPropsData = {
-    title: 'Tooltip Text',
-    tooltipContainer: '#divId',
-  };
-
-  const createComponent = (propsData = defaultPropsData) => {
-    wrapper = shallowMount(ClearIconButton, { propsData });
-  };
-
-  beforeEach(() => {
-    createComponent();
-  });
-
-  it('renders successfully', () => {
-    expect(wrapper.element).toMatchSnapshot();
-  });
-});

package/src/components/shared_components/close_button/__snapshots__/close_button.spec.js.snap

@@ -1,12 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Clear Icon Button renders successfully 1`] = `
-<gl-button-stub
-  aria-label="Dismiss"
-  buttontextclasses=""
-  category="tertiary"
-  icon="close"
-  size="small"
-  variant="default"
-/>
-`;

package/src/components/shared_components/close_button/close_button.spec.js

@@ -1,22 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import CloseButton from './close_button.vue';
-
-describe('Clear Icon Button', () => {
-  let wrapper;
-
-  const defaultPropsData = {
-    label: 'Dismiss',
-  };
-
-  const createComponent = (propsData = defaultPropsData) => {
-    wrapper = shallowMount(CloseButton, { propsData });
-  };
-
-  beforeEach(() => {
-    createComponent();
-  });
-
-  it('renders successfully', () => {
-    expect(wrapper.element).toMatchSnapshot();
-  });
-});

package/src/components/utilities/animated_number/animated_number.spec.js

@@ -1,133 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { waitForAnimationFrame } from '~/utils/test_utils';
-import GlAnimatedNumber from './animated_number.vue';
-
-const duration = 2000;
-const ACTION_ANIMATED = 'animated';
-const ACTION_ANIMATING = 'animating';
-
-describe('GlAnimatedNumber', () => {
-  let wrapper;
-
-  const createComponent = ({
-    number = 100,
-    decimalPlaces = 0,
-    useDelimiters = false,
-    animateOnMount = false,
-  } = {}) => {
-    wrapper = shallowMount(GlAnimatedNumber, {
-      propsData: {
-        number,
-        decimalPlaces,
-        useDelimiters,
-        duration,
-        animateOnMount,
-      },
-    });
-  };
-
-  const runOutAnimationTimer = async () => {
-    const {
-      vm: { startTime },
-    } = wrapper;
-
-    wrapper.setData({
-      startTime: startTime - duration,
-    });
-
-    await waitForAnimationFrame();
-  };
-
-  it('renders the component', () => {
-    createComponent();
-
-    expect(wrapper.findComponent(GlAnimatedNumber).exists()).toBe(true);
-  });
-
-  describe('when animateOnMount is false', () => {
-    describe.each`
-      withDecimal | number      | updatedNumber | decimalPlaces | useDelimiters | expectedInitialOnMount | expectedInitialOnUpdate
-      ${false}    | ${100}      | ${200}        | ${0}          | ${false}      | ${'100'}               | ${'200'}
-      ${true}     | ${100.2}    | ${200.2}      | ${1}          | ${false}      | ${'100.2'}             | ${'200.2'}
-      ${true}     | ${100000.2} | ${200000.2}   | ${1}          | ${true}       | ${'100,000.2'}         | ${'200,000.2'}
-    `(
-      'when withDecimal = $withDecimal, useDelimiters = $useDelimiters',
-      ({
-        number,
-        updatedNumber,
-        decimalPlaces,
-        useDelimiters,
-        expectedInitialOnMount,
-        expectedInitialOnUpdate,
-      }) => {
-        beforeEach(() => {
-          createComponent({ number, decimalPlaces, useDelimiters });
-        });
-
-        it('displays the correct number on mount', async () => {
-          await waitForAnimationFrame();
-
-          expect(wrapper.text()).toBe(expectedInitialOnMount);
-        });
-
-        it('displays the correct number when updated', async () => {
-          await waitForAnimationFrame();
-
-          await wrapper.setProps({ number: updatedNumber });
-
-          await runOutAnimationTimer();
-
-          expect(wrapper.text()).toBe(expectedInitialOnUpdate);
-        });
-      }
-    );
-  });
-
-  describe('when animateOnMount is true', () => {
-    describe.each`
-      withDecimal | number      | decimalPlaces | useDelimiters | expectedInitial | expectedEnd
-      ${false}    | ${100}      | ${0}          | ${false}      | ${'0'}          | ${'100'}
-      ${true}     | ${100.2}    | ${1}          | ${false}      | ${'0.0'}        | ${'100.2'}
-      ${true}     | ${100000.2} | ${1}          | ${true}       | ${'0.0'}        | ${'100,000.2'}
-    `(
-      'when withDecimal = $withDecimal, useDelimiters = $useDelimiters',
-      ({ number, decimalPlaces, useDelimiters, expectedInitial, expectedEnd }) => {
-        beforeEach(() => {
-          createComponent({ number, decimalPlaces, useDelimiters, animateOnMount: true });
-        });
-
-        it('displays the correct initial number', () => {
-          expect(wrapper.text()).toBe(expectedInitial);
-        });
-
-        it('displays the correct end number', async () => {
-          await runOutAnimationTimer();
-
-          expect(wrapper.text()).toBe(expectedEnd);
-        });
-      }
-    );
-  });
-
-  describe('animation event emissions', () => {
-    beforeEach(() => {
-      createComponent({ animateOnMount: true });
-    });
-
-    it(`emits ${ACTION_ANIMATING} when the animation starts`, () => {
-      expect(wrapper.emitted(ACTION_ANIMATING)).toHaveLength(1);
-    });
-
-    it(`emits ${ACTION_ANIMATED} when the animation completes`, async () => {
-      expect(wrapper.emitted(ACTION_ANIMATED)).toBeUndefined();
-
-      await waitForAnimationFrame();
-
-      expect(wrapper.emitted(ACTION_ANIMATED)).toBeUndefined();
-
-      await runOutAnimationTimer();
-
-      expect(wrapper.emitted(ACTION_ANIMATED)).toHaveLength(1);
-    });
-  });
-});

package/src/components/utilities/animated_number/animated_number.stories.js

@@ -1,63 +0,0 @@
-import readme from './animated_number.md';
-import GlAnimatedNumber from './animated_number.vue';
-
-const template = `
-  <div>
-    <gl-animated-number :number="updatedNumber" :decimalPlaces="decimalPlaces" :use-delimiters="useDelimiters" :duration="duration" :animateOnMount="animateOnMount"/>
-    <button @click="updateNumber">Update number</button>
-  </div>
-`;
-
-const defaultValue = (prop) => GlAnimatedNumber.props[prop].default;
-
-const generateProps = ({
-  initialNumber = 100,
-  decimalPlaces = defaultValue('decimalPlaces'),
-  useDelimiters = false,
-  duration = 1000,
-  animateOnMount = defaultValue('animateOnMount'),
-} = {}) => ({
-  initialNumber,
-  decimalPlaces,
-  useDelimiters,
-  duration,
-  animateOnMount,
-});
-
-const Template = (args, { argTypes }) => ({
-  components: { GlAnimatedNumber },
-  props: Object.keys(argTypes),
-  template,
-  data() {
-    return {
-      updatedNumber: this.initialNumber,
-    };
-  },
-  methods: {
-    updateNumber() {
-      this.updatedNumber = Math.floor(Math.random() * 100);
-    },
-  },
-});
-
-export const InitialAnimate = Template.bind({});
-InitialAnimate.args = generateProps({
-  animateOnMount: true,
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps();
-
-export default {
-  title: 'utilities/animated-number',
-  component: GlAnimatedNumber,
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {},
-  tags: ['skip-visual-test'],
-};

package/src/components/utilities/friendly_wrap/friendly_wrap.spec.js

@@ -1,123 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import FriendlyWrap from './friendly_wrap.vue';
-
-describe('Friendly wrap component', () => {
-  let wrapper;
-
-  const createComponent = (props) => {
-    wrapper = shallowMount(FriendlyWrap, {
-      propsData: props,
-    });
-  };
-
-  it('wraps text on slashes by default', () => {
-    const text = '/some/file/path';
-    const textWrapped = '/<wbr>some/<wbr>file/<wbr>path';
-    createComponent({
-      text,
-    });
-
-    expect(wrapper.text()).toBe(text);
-    expect(wrapper.html()).toMatch(textWrapped);
-  });
-
-  it('supports backslashes', () => {
-    const text = '\\some\\long\\file\\path';
-    const textWrapped = '\\<wbr>some\\<wbr>long\\<wbr>file\\<wbr>path';
-    createComponent({
-      text,
-      symbols: ['\\'],
-    });
-    expect(wrapper.text()).toBe(text);
-    expect(wrapper.html()).toMatch(textWrapped);
-  });
-
-  it('accepts multiple symbols', () => {
-    const text = 'some;text-that.needs;to-be.wrapped';
-    const textWrapped = 'some;<wbr>text-<wbr>that.<wbr>needs;<wbr>to-<wbr>be.<wbr>wrapped';
-    createComponent({
-      text,
-      symbols: [';', '-', '.'],
-    });
-    expect(wrapper.text()).toBe(text);
-    expect(wrapper.html()).toMatch(textWrapped);
-  });
-
-  it('works with words', () => {
-    const text = 'it goes on and on and on and on';
-    const textWrapped = 'it goes on and<wbr> on and<wbr> on and<wbr> on';
-    createComponent({
-      text,
-      symbols: ['and'],
-    });
-    expect(wrapper.text()).toBe(text);
-    expect(wrapper.html()).toMatch(textWrapped);
-  });
-
-  it(`does not break with sensitive symbols like '<' or 'w' or 'b' or 'r' or '>'`, () => {
-    const text = '< or w or b or r or >';
-    const textWrapped = '&lt;<wbr> or<wbr> w<wbr> or<wbr> b<wbr> or<wbr> r<wbr> or<wbr> &gt;';
-    createComponent({
-      text,
-      symbols: ['<', ...'wbr'.split(''), '>'],
-    });
-
-    expect(wrapper.text()).toBe(text);
-    expect(wrapper.html()).toMatch(textWrapped);
-  });
-
-  it('allows HTML entities as words', () => {
-    const text = 'foo&lt;foo&gt;foo>foo<foo';
-    const textWrapped = 'foo&amp;lt;<wbr>foo&amp;gt;<wbr>foo&gt;foo&lt;foo';
-    createComponent({
-      text,
-      symbols: ['&lt;', '&gt;'],
-    });
-
-    expect(wrapper.text()).toBe(text);
-    expect(wrapper.html()).toMatch(textWrapped);
-  });
-
-  it('escapes text to prevent XSS', () => {
-    const text = '<script>alert(1)</script>';
-    const textWrapped = '&lt;script&gt;alert(1)&lt;/<wbr>script&gt;';
-    createComponent({
-      text,
-    });
-
-    expect(wrapper.text()).toBe(text);
-    expect(wrapper.html()).toMatch(textWrapped);
-  });
-
-  it('does not unnecessarily insert a wbr at the end', () => {
-    const text = '/';
-    createComponent({
-      text,
-    });
-
-    expect(wrapper.text()).toBe(text);
-    expect(wrapper.find('wbr').exists()).toBe(false);
-  });
-
-  it('does not insert unnecessary whitespace', () => {
-    const text = '';
-    createComponent({
-      text,
-    });
-
-    // Cannot use `wrapper.text()`, since that automatically trims whitespace
-    expect(wrapper.element.textContent).toBe(text);
-  });
-
-  it.each([null, undefined])('gracefully handles %p', (text) => {
-    createComponent({
-      text,
-    });
-
-    // Assert prop validation failed
-    expect(wrapper).toHaveLoggedVueErrors();
-
-    // But it still rendered
-    expect(wrapper.text()).toBe('');
-  });
-});

package/src/components/utilities/friendly_wrap/friendly_wrap.stories.js

@@ -1,56 +0,0 @@
-import GlFriendlyWrap from './friendly_wrap.vue';
-import readme from './friendly_wrap.md';
-
-const components = {
-  GlFriendlyWrap,
-};
-
-const defaultValue = (prop) => GlFriendlyWrap.props[prop].default;
-
-const generateProps = ({ text = '', symbols = defaultValue('symbols')() } = {}) => ({
-  text,
-  symbols,
-});
-
-const makeStory =
-  (options = {}) =>
-  (args, { argTypes }) => ({
-    components,
-    props: Object.keys(argTypes),
-    ...options,
-  });
-
-export const Default = makeStory({
-  template: `<gl-friendly-wrap :text="text" :symbols="symbols" />`,
-});
-Default.args = generateProps({
-  text: '/lorem/ipsum/dolor/sit/amet/consectetur/adipiscing/elit/Aenean/tincidunt/urna/ac/tellus/cursus/laoreet/aenean/blandit/erat/vel/est/maximus/porta/Sed/id/nunc/non/sapien/cursus/ullamcorper',
-});
-
-export const BreakWord = makeStory({
-  template: `<gl-friendly-wrap :text="text" :symbols="symbols" />`,
-});
-BreakWord.args = generateProps({
-  text: 'LoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitamet',
-  symbols: ['dolor'],
-});
-
-export const MultipleSymbols = makeStory({
-  template: `<gl-friendly-wrap :text="text" :symbols="symbols" />`,
-});
-MultipleSymbols.args = generateProps({
-  text: 'LoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitamet',
-  symbols: ['e', 'o'],
-});
-
-export default {
-  title: 'utilities/friendly-wrap',
-  component: GlFriendlyWrap,
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-};

package/src/components/utilities/intersection_observer/intersection_observer.spec.js

@@ -1,116 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { useMockIntersectionObserver } from '~/utils/use_mock_intersection_observer';
-import GlIntersectionObserver from './intersection_observer.vue';
-
-const TEST_SLOT = '<p>Hello world! Lorem ipsum.</p>';
-const ENTRY_INTERSECTING = { ratio: 0.75, isIntersecting: true };
-const ENTRY_NOT_INTERSECTING = { ratio: 0, isIntersecting: false };
-const TEST_OPTIONS = {};
-
-describe('IntersectionObserver', () => {
-  let wrapper;
-  let allWrappers;
-  const { getInstances, trigger } = useMockIntersectionObserver();
-
-  const hasPrivateProps = (obj) => Object.keys(obj).some((x) => x.startsWith('$_gl_'));
-  const triggerIntersectionObserver = (entry) => {
-    trigger(getInstances()[0], null, { entry });
-  };
-  const createComponent = (props = {}) => {
-    wrapper = shallowMount(GlIntersectionObserver, {
-      propsData: {
-        ...props,
-      },
-      slots: {
-        default: TEST_SLOT,
-      },
-    });
-    allWrappers.push(wrapper);
-  };
-
-  beforeEach(() => {
-    allWrappers = [];
-  });
-
-  afterEach(() => {
-    allWrappers.forEach((x) => x.destroy());
-    allWrappers = null;
-    wrapper = null;
-
-    // Clear memoization for test determinism
-    GlIntersectionObserver.getObserver.cache.clear();
-  });
-
-  describe('with default', () => {
-    beforeEach(() => {
-      createComponent();
-    });
-
-    it('renders slot', () => {
-      expect(wrapper.html()).toContain(TEST_SLOT);
-    });
-
-    it('creates 1 intersection observer', () => {
-      expect(getInstances()).toHaveLength(1);
-    });
-
-    it('adds some private props to element', () => {
-      expect(hasPrivateProps(wrapper.vm.$el)).toBe(true);
-    });
-
-    describe('when destroyed', () => {
-      beforeEach(() => {
-        wrapper.destroy();
-      });
-
-      it('clears private props on element', () => {
-        expect(hasPrivateProps(wrapper.vm.$el)).toBe(false);
-      });
-
-      it('stops observing on element', () => {
-        triggerIntersectionObserver(ENTRY_INTERSECTING);
-
-        expect(wrapper.emitted()).toEqual({});
-      });
-    });
-  });
-
-  describe('with 2 instances', () => {
-    beforeEach(() => {
-      createComponent();
-      createComponent();
-    });
-
-    it('creates 1 IntersectionObserver', () => {
-      expect(getInstances()).toHaveLength(1);
-    });
-
-    it.each`
-      desc                       | entry                     | event
-      ${'with interesecting'}    | ${ENTRY_INTERSECTING}     | ${'appear'}
-      ${'without interesecting'} | ${ENTRY_NOT_INTERSECTING} | ${'disappear'}
-    `('when triggered $desc, emits events', ({ entry, event }) => {
-      const createExpectation = ({ element }) => ({
-        [event]: [[]],
-        update: [[{ ...entry, target: element }]],
-      });
-
-      triggerIntersectionObserver(entry);
-
-      expect(allWrappers).toHaveLength(2);
-      // eslint-disable-next-line unicorn/no-array-callback-reference
-      expect(allWrappers.map((x) => x.emitted())).toEqual(allWrappers.map(createExpectation));
-    });
-  });
-
-  describe('with 2 instances with different options', () => {
-    beforeEach(() => {
-      createComponent();
-      createComponent({ options: TEST_OPTIONS });
-    });
-
-    it('creates 2 IntersectionObservers', () => {
-      expect(getInstances()).toHaveLength(2);
-    });
-  });
-});