@gitlab/ui 32.43.3 → 32.44.0

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

@@ -40,12 +40,12 @@ describe('GlTokenContainer', () => {
   };
 
   const findTokenByName = (name) => {
-    const tokenWrappers = wrapper.findAllComponents({ ref: 'tokens' });
+    const tokenWrappers = wrapper.findAll('[role=option]');
 
     return tokenWrappers.wrappers.find((tokenWrapper) => tokenWrapper.text() === name);
   };
 
-  const findTokenContainer = () => wrapper.find({ ref: 'tokenContainer' });
+  const findTokenContainer = () => wrapper.findComponent({ ref: 'tokenContainer' });
 
   const blurActiveElement = () => document.activeElement?.blur?.();
 
@@ -173,7 +173,6 @@ describe('GlTokenContainer', () => {
     describe('when escape key is pressed', () => {
       it('fires `cancel-focus` event', async () => {
         await setup(0, keyboard.escape);
-
         expect(wrapper.emitted('cancel-focus')).toBeTruthy();
       });
     });

package/src/components/charts/gauge/gauge.spec.js

@@ -108,7 +108,7 @@ describe('gauge component', () => {
       createComponent({ value: 'not a number' });
 
       return wrapper.vm.$nextTick().then(() => {
-        global.console.error.mockReset();
+        expect(wrapper).toHaveLoggedVueErrors();
         expect(findDetailText()).toBe(placeholder);
       });
     });
@@ -196,7 +196,7 @@ describe('gauge component', () => {
       it('if some of them are invalid values they are skipped', () => {
         createComponent({ thresholds: [undefined, 95, 'a string', NaN, 50, 15, 25] });
 
-        global.console.error.mockReset();
+        expect(wrapper).toHaveLoggedVueErrors();
 
         expect(findAxisColor().length).toBe(3);
       });
@@ -215,7 +215,7 @@ describe('gauge component', () => {
       it('when some values are invalid', () => {
         createComponent({ thresholds: [NaN, 95, undefined, 'a string', 50, 15, 25] });
 
-        global.console.error.mockReset();
+        expect(wrapper).toHaveLoggedVueErrors();
 
         expect(findAxisColor().length).toBe(3);
         expect(findAxisColor()[0]).toEqual([0.5, gaugeSafeHues[0]]);
@@ -235,12 +235,12 @@ describe('gauge component', () => {
     });
 
     describe('when thresholds that are not numbers are set, they will not show on the arc', () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         createComponent({ thresholds: ['not a number', NaN, undefined] });
 
-        return wrapper.vm.$nextTick().then(() => {
-          global.console.error.mockReset();
-        });
+        await wrapper.vm.$nextTick();
+        // eslint-disable-next-line jest/no-standalone-expect
+        expect(wrapper).toHaveLoggedVueErrors();
       });
 
       it('axis has a single color set', () => {

package/src/components/charts/sparkline/sparkline.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import Chart from '../chart/chart.vue';
 import SparklineChart from './sparkline.vue';
 import { waitForAnimationFrame } from '~/utils/test_utils';
@@ -19,14 +19,11 @@ jest.mock('~/directives/resize_observer/resize_observer', () => ({
   },
 }));
 
-const localVue = createLocalVue();
-
 describe('sparkline chart component', () => {
   let wrapper;
   let componentOptions;
   const factory = () => {
     componentOptions = {
-      localVue,
       propsData: {
         data: [[]],
         variant: null,

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

@@ -115,12 +115,9 @@ describe('Friendly wrap component', () => {
     });
 
     // Assert prop validation failed
-    expect(global.console).toHaveLoggedVueErrors();
+    expect(wrapper).toHaveLoggedVueErrors();
 
     // But it still rendered
     expect(wrapper.text()).toBe('');
-
-    // Prevent test failure due to console.error calls
-    global.console.error.mockReset();
   });
 });

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

@@ -1,14 +1,11 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import Intersperse from './intersperse.vue';
 
-const localVue = createLocalVue();
-
 describe('Intersperse Component', () => {
   let wrapper;
 
   const createComponent = (defaultSlot = [], options = {}) => {
     wrapper = shallowMount(Intersperse, {
-      localVue,
       slots: {
         default: defaultSlot,
       },

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

@@ -1,9 +1,8 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import { HoverLoadDirective as hoverLoad } from './hover_load';
 
 describe('hover load directive', () => {
   let wrapper;
-  const localVue = createLocalVue();
   const findTarget = () => wrapper.find('.target');
 
   const createComponent = (handleLoad) => {
@@ -19,7 +18,7 @@ describe('hover load directive', () => {
       template: `<div v-hover-load="handleLoad" class="target"></div>`,
     };
 
-    wrapper = shallowMount(component, { localVue });
+    wrapper = shallowMount(component);
   };
 
   afterEach(() => {
@@ -48,16 +47,6 @@ describe('hover load directive', () => {
     }
   );
 
-  it.each([3, '', undefined, null, false, {}, []])(
-    'throws if the handler is %p instead of a function',
-    (directiveValue) => {
-      // we are going to throw, so we need to suppress error messages in jest output
-      jest.spyOn(global.console, 'error').mockImplementation(() => {});
-
-      expect(() => createComponent(directiveValue)).toThrow(TypeError);
-    }
-  );
-
   it('cleans up the mouseover event when component is destroyed', () => {
     createComponent(jest.fn());
 

package/src/directives/outside/outside.spec.js

@@ -121,9 +121,6 @@ describe('outside directive', () => {
 
       expect(global.console).toHaveLoggedVueErrors();
       expect(document.addEventListener).not.toHaveBeenCalled();
-
-      // Prevent test failure due to console.error calls
-      global.console.error.mockReset();
     });
 
     it('attaches the global listener on first initialisation', async () => {
@@ -212,9 +209,6 @@ describe('outside directive', () => {
         find('outside').trigger('click');
 
         expect(onClick.mock.calls).toEqual([]);
-
-        // Prevent test failure due to console.error calls
-        global.console.error.mockReset();
       }
     );
   });
@@ -313,6 +307,7 @@ describe('outside directive', () => {
         throw new Error('mock error');
       });
 
+      jest.spyOn(global.console, 'error');
       await createComponent({
         methods: {
           onClickThrow,

package/src/directives/resize_observer/resize_observer.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import { GlResizeObserverDirective } from './resize_observer';
 import { useMockResizeObserver } from '~helpers/mock_dom_observer';
 
@@ -6,8 +6,6 @@ describe('resize observer directive', () => {
   const { trigger, observersCount, observesElement } = useMockResizeObserver();
 
   const mockHandleResize = jest.fn();
-
-  const localVue = createLocalVue();
   let wrapper;
 
   const createComponent = ({ template, data = {} } = {}) => {
@@ -26,7 +24,7 @@ describe('resize observer directive', () => {
       },
     };
 
-    wrapper = shallowMount(component, { localVue });
+    wrapper = shallowMount(component);
   };
 
   it('shares one observer between multiple directive instances', () => {
@@ -102,11 +100,6 @@ describe('resize observer directive', () => {
   });
 
   describe('check directive value', () => {
-    afterEach(() => {
-      // we are going to throw, so we need to suppress Vue error messages in jest output
-      global.console.error.mockReset();
-    });
-
     it.each([3, '', undefined, null, false, {}, []])(
       'throws if the handler is %p instead of a function',
       (directiveValue) => {
@@ -123,8 +116,9 @@ describe('resize observer directive', () => {
         };
 
         expect(() => {
-          wrapper = shallowMount(testComponentWithoutHandler, { localVue });
+          wrapper = shallowMount(testComponentWithoutHandler);
         }).toThrow(TypeError);
+        expect(wrapper).toHaveLoggedVueErrors();
       }
     );
   });

package/src/scss/storybook.scss

@@ -12,3 +12,11 @@
 @import 'utilities';
 
 @import 'components';
+
+/**
+ * Custom padding for docs pages. This improves the integration in Pajamas pages.
+ */
+.sbdocs-wrapper {
+  padding-top: $gl-spacing-scale-2 !important;
+  padding-bottom: 0 !important;
+}

package/dist/components/base/avatar/examples/avatar.fallback.example.js

@@ -1,38 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/* script */
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-avatar',{attrs:{"entity-name":"Some Project","shape":"rect"}})};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/avatar/examples/avatar.image.example.js

@@ -1,38 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/* script */
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-avatar',{attrs:{"src":"https://about.gitlab.com/images/press/gitlab-summit-south-africa.jpg"}})};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/avatar/examples/avatar.rect.example.js

@@ -1,38 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/* script */
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-avatar',{attrs:{"src":"https://about.gitlab.com/images/press/gitlab-summit-south-africa.jpg","shape":"rect"}})};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/avatar/examples/avatar.tooltip.example.js

@@ -1,38 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/* script */
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-avatar',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"entity-name":"Some Project","title":"Some Project","shape":"rect"}})};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/avatar/examples/index.js

@@ -1,31 +0,0 @@
-import AvatarProjectFallbackExample from './avatar.fallback.example';
-import AvatarImageExample from './avatar.image.example';
-import AvatarRectExample from './avatar.rect.example';
-import AvatarTooltipExample from './avatar.tooltip.example';
-
-var index = [{
-  name: 'Basic',
-  items: [{
-    id: 'avatar-image',
-    name: 'Default Image',
-    description: 'Avatar with an image',
-    component: AvatarImageExample
-  }, {
-    id: 'avatar-image-rect',
-    name: 'Rectangular Image',
-    description: 'Avatar with a rectangular image',
-    component: AvatarRectExample
-  }, {
-    id: 'avatar-project-fallback',
-    name: 'Project/Group Fallback',
-    description: 'A fallback for projects or groups without an image',
-    component: AvatarProjectFallbackExample
-  }, {
-    id: 'avatar-with-tooltip',
-    name: 'With tooltip',
-    description: 'Avatar that displays a tooltip on hover',
-    component: AvatarTooltipExample
-  }]
-}];
-
-export default index;

package/dist/components/base/avatar_link/examples/avatar.link.example.js

@@ -1,38 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/* script */
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-avatar-link',{attrs:{"target":"blank","href":"https://gitlab.com/gitlab-org/gitlab"}},[_c('gl-avatar-labeled',{attrs:{"entity-name":"GitLab","label":"GitLab User","sub-label":"@gitlab","size":32}})],1)};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/avatar_link/examples/index.js

@@ -1,13 +0,0 @@
-import AvatarLinkExample from './avatar.link.example';
-
-var index = [{
-  name: 'Basic',
-  items: [{
-    id: 'avatar-link',
-    name: 'Avatar Link',
-    description: 'Linked Avatar',
-    component: AvatarLinkExample
-  }]
-}];
-
-export default index;

package/dist/components/base/form/form_input/examples/form_input/form_input.text.example.js

@@ -1,38 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/* script */
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-form-input',{attrs:{"type":"text"}})};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/form/form_input/examples/form_input/form_input.text_disabled.example.js

@@ -1,38 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/* script */
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-form-input',{attrs:{"type":"text","disabled":true,"value":"some text"}})};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/form/form_input/examples/form_input/form_input.text_reactive.example.js

@@ -1,57 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/**
- * This example ensures that browser native input events lead to updating the component state.
- */
-var script = {
-  data() {
-    return {
-      value: ''
-    };
-  },
-
-  mounted() {
-    const inputElement = this.$refs.input.$el;
-    inputElement.value = 'some value';
-    inputElement.dispatchEvent(new Event('input'));
-  }
-
-};
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('gl-form-input',{ref:"input",attrs:{"type":"text"},model:{value:(_vm.value),callback:function ($$v) {_vm.value=$$v;},expression:"value"}}),_vm._v(" "),_c('p',{staticClass:"mt-3"},[_vm._v("The entered value is: "+_vm._s(_vm.value))])],1)};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/form/form_input/examples/form_input/index.js

@@ -1,22 +0,0 @@
-import FormInputTextExample from './form_input.text.example';
-import FormInputTextDisabledExample from './form_input.text_disabled.example';
-import FormInputTextReactiveExample from './form_input.text_reactive.example';
-
-var index = [{
-  name: 'Text Input',
-  items: [{
-    id: 'input-text',
-    name: 'default state',
-    component: FormInputTextExample
-  }, {
-    id: 'input-text-reactive',
-    name: 'with reactive binding',
-    component: FormInputTextReactiveExample
-  }, {
-    id: 'input-text-disabled',
-    name: 'disabled state',
-    component: FormInputTextDisabledExample
-  }]
-}];
-
-export default index;