@gitlab/ui 80.13.1 → 80.14.0

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

@@ -1,104 +0,0 @@
-import GlButton from '../../base/button/button.vue';
-import GlLink from '../../base/link/link.vue';
-import GlSprintf from './sprintf.vue';
-import readme from './sprintf.md';
-
-const generateProps = ({ message = 'Written by %{author}', placeholders } = {}) => ({
-  message,
-  placeholders,
-});
-
-const makeStory =
-  (options) =>
-  (args, { argTypes }) => ({
-    components: {
-      GlSprintf,
-      GlButton,
-      GlLink,
-    },
-    props: Object.keys(argTypes),
-    ...options,
-  });
-
-export const SentenceWithLink = makeStory({
-  template: `
-    <div class="gl-font-base">
-      <gl-sprintf :message="message" :placeholders="placeholders">
-        <template #link="{ content }">
-          <gl-link href="#" target="_blank">{{ content }}</gl-link>
-        </template>
-      </gl-sprintf>
-    </div>
-  `,
-});
-Object.assign(SentenceWithLink, {
-  args: generateProps({
-    message: 'Click %{linkStart}here%{linkEnd} to reticulate splines.',
-  }),
-  tags: ['skip-visual-test'],
-});
-
-export const SentenceWithLinkWithCustomPlaceholders = makeStory({
-  template: `
-    <div class="gl-font-base">
-      <gl-sprintf :message="message" :placeholders="placeholders">
-        <template #link="{ content }">
-          <gl-link href="#" target="_blank">{{ content }}</gl-link>
-        </template>
-      </gl-sprintf>
-    </div>
-  `,
-});
-Object.assign(SentenceWithLinkWithCustomPlaceholders, {
-  args: generateProps({
-    message: 'Click %{my_custom_start}here%{my_custom_end} to reticulate splines.',
-    placeholders: { link: ['my_custom_start', 'my_custom_end'] },
-  }),
-  tags: ['skip-visual-test'],
-});
-
-export const BasicPlaceholder = makeStory({
-  data: () => ({ authorName: 'Some author' }),
-  template: `
-    <div class="gl-font-base">
-      <gl-sprintf :message="message" :placeholders="placeholders">
-        <template #author>
-          <span class="gl-font-weight-bold">{{ authorName }}</span>
-        </template>
-      </gl-sprintf>
-    </div>
-  `,
-});
-Object.assign(BasicPlaceholder, {
-  args: generateProps(),
-  tags: ['skip-visual-test'],
-});
-
-export const BasicButtonPlaceholder = makeStory({
-  data: () => ({ authorName: 'Some author' }),
-  template: `
-    <div class="gl-font-base">
-      <gl-sprintf :message="message" :placeholders="placeholders">
-        <template #author>
-          <gl-button>{{ authorName }}</gl-button>
-        </template>
-      </gl-sprintf>
-    </div>
-  `,
-});
-Object.assign(BasicButtonPlaceholder, {
-  args: generateProps(),
-  tags: ['skip-visual-test'],
-});
-
-export default {
-  title: 'utilities/sprintf',
-  component: GlSprintf,
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-};

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

@@ -1,125 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { getBinding } from '~helpers/vue_mock_directive';
-import { POSITION } from './constants';
-import Truncate from './truncate.vue';
-
-const removeSpecialChar = (text) => {
-  return text.replace(/‎|\u200E/gi, '');
-};
-
-const positionOptions = Object.values(POSITION);
-
-describe('Truncate component', () => {
-  let wrapper;
-
-  const defaultProps = {
-    text: 'ee/app/assets/javascripts/vue_shared/src/utils_reports/components/utils/index.js',
-  };
-
-  const createComponent = ({ classes, ...props } = {}) => {
-    wrapper = shallowMount(Truncate, {
-      propsData: { ...defaultProps, ...props },
-      attrs: {
-        class: classes,
-      },
-    });
-  };
-
-  describe('All', () => {
-    beforeEach(() => {
-      createComponent();
-    });
-
-    it.each(positionOptions)(
-      '%s truncation: should have title, class, original text',
-      (position) => {
-        createComponent({ position });
-        const element = wrapper.find('span');
-        expect(element.attributes('title')).toBe(defaultProps.text);
-        expect(element.attributes('class')).toBe('gl-truncate');
-        expect(removeSpecialChar(wrapper.text())).toBe(defaultProps.text);
-      }
-    );
-
-    it('should have the default position', () => {
-      expect(wrapper.props('position')).toBe('end');
-    });
-
-    it('disables the tooltip by default', () => {
-      expect(getBinding(wrapper.find('.gl-truncate').element, 'gl-tooltip').value.disabled).toBe(
-        true
-      );
-    });
-  });
-
-  describe('start truncation', () => {
-    beforeEach(() => {
-      createComponent({ position: 'start' });
-    });
-
-    it('should have the truncate-start class', () => {
-      expect(wrapper.find('.gl-truncate-start').exists()).toBe(true);
-    });
-
-    it('should have the special char surrounded', () => {
-      const spanTag = wrapper.findAll('.gl-truncate span').at(0).text();
-
-      expect(spanTag.charAt(0)).toBe('\u200E');
-      expect(spanTag.charAt(spanTag.length - 1)).toBe('\u200E');
-    });
-  });
-
-  describe('middle truncation', () => {
-    let firstSpan;
-    let secondSpan;
-
-    beforeEach(() => {
-      createComponent({ position: 'middle' });
-      firstSpan = wrapper.findAll('.gl-truncate span').at(0);
-      secondSpan = wrapper.findAll('.gl-truncate span').at(1);
-    });
-
-    it('should have appropriate classes applied', () => {
-      expect(firstSpan.classes('gl-truncate-end')).toBe(true);
-      expect(secondSpan.classes('gl-truncate-start')).toBe(true);
-    });
-
-    it('should have the spans positioned correctly', () => {
-      expect(firstSpan.text()).toBe('ee/app/assets/javascripts/vue_shared/src');
-      expect(secondSpan.text()).toBe('‎/utils_reports/components/utils/index.js‎');
-    });
-
-    it('last part should have the special char surrounded', () => {
-      const lastPart = secondSpan.text();
-
-      expect(lastPart.charAt(0)).toBe('\u200E');
-      expect(lastPart.charAt(lastPart.length - 1)).toBe('\u200E');
-    });
-  });
-
-  describe('end truncation', () => {
-    beforeEach(() => {
-      createComponent();
-    });
-
-    it('should not have the special char', () => {
-      expect(wrapper.text()).not.toContain('\u200E');
-    });
-
-    it('should have the truncate-end class', () => {
-      expect(wrapper.find('.gl-truncate-end').exists()).toBe(true);
-    });
-  });
-
-  // This tests a workaround for a subtle Vue 2/3 compiler difference.
-  // See https://github.com/vuejs/core/issues/7909.
-  describe('parent classes', () => {
-    beforeEach(() => {
-      createComponent({ classes: 'test-class' });
-    });
-
-    it('applies classes from parent', () => {
-      expect(wrapper.classes()).toContain('test-class');
-    });
-  });
-});

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

@@ -1,50 +0,0 @@
-import GlTruncate from './truncate.vue';
-import { POSITION } from './constants';
-import readme from './truncate.md';
-
-const template = '<gl-truncate :text="text" :position="position" :with-tooltip="withTooltip" />';
-
-const generateProps = ({
-  text = 'src/thisIs/AVeryLongFilePath/that/needs/to/be/smartly/truncated/from/the/middle/so/we/dont/lose/important/information/here.vue',
-  position = 'middle',
-  withTooltip = false,
-} = {}) => ({
-  text,
-  position,
-  withTooltip,
-});
-
-const Template = (args, { argTypes }) => ({
-  components: {
-    GlTruncate,
-  },
-  props: Object.keys(argTypes),
-  template,
-});
-export const Default = Template.bind({});
-Default.args = generateProps();
-
-export default {
-  title: 'utilities/truncate',
-  component: GlTruncate,
-  tags: ['skip-visual-test'],
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {
-    text: {
-      control: 'text',
-    },
-    position: {
-      options: Object.values(POSITION),
-      control: 'select',
-    },
-    withTooltip: {
-      control: 'boolean',
-    },
-  },
-};

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

@@ -1,150 +0,0 @@
-import { nextTick } from 'vue';
-import { mount } from '@vue/test-utils';
-import { createMockDirective, getBinding } from '~helpers/vue_mock_directive';
-import GlButton from '../../base/button/button.vue';
-import GlTruncateText from './truncate_text.vue';
-
-describe('GlTruncateText', () => {
-  let wrapper;
-
-  const showMoreText = 'Show more text';
-  const showLessText = 'Show less text';
-
-  const findContent = () => wrapper.find('article');
-  const findContentEl = () => findContent().element;
-  const findButton = () => wrapper.findComponent(GlButton);
-
-  const createComponent = (propsData = { showMoreText, showLessText }) => {
-    wrapper = mount(GlTruncateText, {
-      propsData,
-      directives: {
-        GlResizeObserver: createMockDirective('gl-resize-observer'),
-      },
-    });
-  };
-
-  beforeEach(() => {
-    createComponent();
-  });
-
-  describe('when mounted', () => {
-    it('the content has class `gl-truncate-text`', () => {
-      expect(findContentEl().classList).toContain('gl-truncate-text');
-    });
-
-    it('the content has style variables for `lines` and `mobile-lines` with the correct values', () => {
-      const { style } = findContentEl();
-
-      expect(style).toContain('--lines');
-      expect(style.getPropertyValue('--lines')).toBe('3');
-      expect(style).toContain('--mobile-lines');
-      expect(style.getPropertyValue('--mobile-lines')).toBe('10');
-    });
-
-    it('the button is not visible', () => {
-      expect(findButton().exists()).toBe(false);
-    });
-  });
-
-  describe.each`
-    property         | variable
-    ${'lines'}       | ${'--lines'}
-    ${'mobileLines'} | ${'--mobile-lines'}
-  `('when mounted with a value for the $property property', ({ property, variable }) => {
-    const value = 4;
-
-    beforeEach(() => {
-      createComponent({ [property]: value });
-    });
-
-    it(`the ${variable} style variable has the value of the passed ${property} property`, () => {
-      expect(findContentEl().style.getPropertyValue(variable)).toBe(value.toString());
-    });
-  });
-
-  describe('when resizing and the scroll height is smaller than the offset height', () => {
-    beforeEach(() => {
-      getBinding(findContentEl(), 'gl-resize-observer').value({
-        target: { scrollHeight: 10, offsetHeight: 20 },
-      });
-    });
-
-    it('the button remains invisible', () => {
-      expect(findButton().exists()).toBe(false);
-    });
-
-    it('the aria-expanded property is set to `true`', () => {
-      expect(findContent().attributes('aria-expanded')).toBe('true');
-    });
-  });
-
-  describe.each`
-    scrollHeight | offsetHeight | lessOrMore | showMoreVisible | ariaExpanded
-    ${10}        | ${20}        | ${'less'}  | ${false}        | ${'true'}
-    ${20}        | ${10}        | ${'more'}  | ${true}         | ${'false'}
-  `(
-    'when scroll height is $lessOrMore than the offset height',
-    ({ scrollHeight, offsetHeight, showMoreVisible, ariaExpanded }) => {
-      beforeEach(() => {
-        getBinding(findContentEl(), 'gl-resize-observer').value({
-          target: { scrollHeight, offsetHeight },
-        });
-      });
-
-      it(`the show more button should ${showMoreVisible ? 'be' : 'not be'} visible`, () => {
-        expect(findButton().exists()).toBe(showMoreVisible);
-      });
-
-      it('the content contains the "gl-truncate-text" class', () => {
-        expect(findContentEl().classList).toContain('gl-truncate-text');
-      });
-
-      it(`the "aria-expanded" property is set to ${ariaExpanded}`, () => {
-        expect(findContent().attributes('aria-expanded')).toBe(ariaExpanded);
-      });
-    }
-  );
-
-  describe('when resizing and the scroll height is greater than the offset height', () => {
-    beforeEach(() => {
-      getBinding(findContentEl(), 'gl-resize-observer').value({
-        target: { scrollHeight: 20, offsetHeight: 10 },
-      });
-    });
-
-    it('the button text displays the value for the showMoreText property', () => {
-      expect(findButton().text()).toBe(showMoreText);
-    });
-
-    describe('clicking the button', () => {
-      beforeEach(() => {
-        findButton().trigger('click');
-      });
-
-      it('removes the `gl-truncate-text` class on the content', () => {
-        expect(findContentEl().classList).not.toContain('gl-truncate-text');
-      });
-
-      it('the button text displays the value for the showLessText property', () => {
-        expect(findButton().text()).toBe(showLessText);
-      });
-
-      it('the aria-expanded property is set to `true`', () => {
-        expect(findContent().attributes('aria-expanded')).toBe('true');
-      });
-    });
-  });
-
-  it('passes `toggleButtonProps` to toggle button', async () => {
-    const buttonTextClasses = 'foo-bar';
-
-    createComponent({ toggleButtonProps: { buttonTextClasses } });
-
-    getBinding(findContentEl(), 'gl-resize-observer').value({
-      target: { scrollHeight: 20, offsetHeight: 10 },
-    });
-    await nextTick();
-
-    expect(findButton().props('buttonTextClasses')).toBe(buttonTextClasses);
-  });
-});

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

@@ -1,45 +0,0 @@
-import GlTruncateText from './truncate_text.vue';
-import readme from './truncate_text.md';
-
-const generateProps = ({
-  showMoreText = 'Show more',
-  showLessText = 'Show less',
-  lines = 3,
-  mobileLines = 10,
-  toggleButtonProps = {},
-} = {}) => ({
-  showMoreText,
-  showLessText,
-  lines,
-  mobileLines,
-  toggleButtonProps,
-});
-
-const content = () => [...Array(15)].map((_, i) => `line ${i + 1}`).join('\n');
-
-const template = `
-  <gl-truncate-text v-bind="$props">
-    <div class="gl-white-space-pre-line">${content()}</div>
-  </gl-truncate-text>`;
-
-const Template = (args, { argTypes }) => ({
-  components: { GlTruncateText },
-  props: Object.keys(argTypes),
-  template,
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps();
-
-export default {
-  title: 'utilities/truncate-text',
-  component: GlTruncateText,
-  tags: ['skip-visual-test'],
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-};

package/src/directives/hover_load/hover_load.spec.js

@@ -1,64 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { HoverLoadDirective as hoverLoad, DELAY_ON_HOVER } from './hover_load';
-
-jest.useFakeTimers();
-
-describe('hover load directive', () => {
-  let wrapper;
-  const findTarget = () => wrapper.findComponent('.target');
-
-  const createComponent = (handleLoad) => {
-    const component = {
-      directives: {
-        hoverLoad,
-      },
-      data() {
-        return {
-          handleLoad,
-        };
-      },
-      template: `<div v-hover-load="handleLoad" class="target"></div>`,
-    };
-
-    wrapper = shallowMount(component);
-  };
-
-  afterEach(() => {
-    jest.restoreAllMocks();
-  });
-
-  it.each`
-    hoverDuration         | action                | expectedCalls
-    ${DELAY_ON_HOVER}     | ${'triggers'}         | ${1}
-    ${DELAY_ON_HOVER - 1} | ${'does not trigger'} | ${0}
-  `('$action the callback after $hoverDuration ms', ({ hoverDuration, expectedCalls }) => {
-    const mockHandleLoad = jest.fn();
-    createComponent(mockHandleLoad);
-
-    findTarget().trigger('mouseover');
-
-    jest.advanceTimersByTime(hoverDuration);
-
-    findTarget().trigger('mouseout');
-
-    expect(mockHandleLoad).toHaveBeenCalledTimes(expectedCalls);
-
-    if (expectedCalls) {
-      expect(mockHandleLoad).toHaveBeenCalledWith(findTarget().element);
-    }
-  });
-
-  it('cleans up the mouseover event when component is destroyed', () => {
-    createComponent(jest.fn());
-
-    const target = findTarget().vm.$el;
-    jest.spyOn(target, 'removeEventListener');
-    wrapper.destroy();
-
-    expect(target.removeEventListener).toHaveBeenCalledWith(
-      'mouseover',
-      expect.any(Function),
-      true
-    );
-  });
-});

package/src/directives/hover_load/hover_load.stories.js

@@ -1,51 +0,0 @@
-import GlHoverLoadDirective from './hover_load';
-import readme from './hover_load.md';
-
-const directives = {
-  GlHoverLoadDirective,
-};
-
-// eslint-disable-next-line no-script-url
-const generateProps = ({ endpoint = 'some/endpoint' } = {}) => ({
-  endpoint,
-});
-
-export const Default = (_args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  directives,
-  data: () => ({
-    isPreloaded: false,
-  }),
-  methods: {
-    handlePreload() {
-      fetch(this.endpoint);
-      this.isPreloaded = true;
-    },
-  },
-  template: `
-  <div>
-    <a
-      :href="endpoint"
-      v-gl-hover-load="handlePreload"
-    >
-        Hover me to preload
-    </a>
-    
-    <span>(Preloaded: {{isPreloaded}})</span>
-    </div>
-    `,
-});
-Default.args = generateProps();
-
-export default {
-  title: 'directives/hover-load-directive',
-  component: GlHoverLoadDirective,
-  tags: ['skip-visual-test'],
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-};