@gitlab/ui 46.1.0 → 47.0.0

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

@@ -125,17 +125,19 @@ describe('search box by click component', () => {
 
     it('displays disabled history dropdown', () => {
       expect(wrapper.findComponent({ ref: 'historyDropdown' }).exists()).toBe(true);
-      expect(wrapper.findComponent({ ref: 'historyDropdown' }).attributes('disabled')).toBe('true');
+      expect(
+        wrapper.findComponent({ ref: 'historyDropdown' }).attributes('disabled')
+      ).toBeDefined();
     });
 
     it('displays disabled input', () => {
       expect(wrapper.findComponent({ ref: 'input' }).exists()).toBe(true);
-      expect(wrapper.findComponent({ ref: 'input' }).attributes('disabled')).toBe('true');
+      expect(wrapper.findComponent({ ref: 'input' }).attributes('disabled')).toBeDefined();
     });
 
     it('displays disabled search button', () => {
       expect(findSearchButton().exists()).toBe(true);
-      expect(findSearchButton().attributes('disabled')).toBe('true');
+      expect(findSearchButton().attributes('disabled')).toBeDefined();
     });
 
     it('does not render clear icon even with value', () => {
@@ -146,9 +148,8 @@ describe('search box by click component', () => {
   it('emits submit event when Enter key is pressed', async () => {
     createComponent({ value: 'some-input' });
 
-    wrapper.findComponent(GlFormInput).vm.$emit('keydown', { type: 'key', keyCode: 13 });
+    await wrapper.findComponent(GlFormInput).trigger('keydown.enter');
 
-    await wrapper.vm.$nextTick();
     expect(wrapper.emitted('submit')[0]).toEqual(['some-input']);
   });
 

package/src/components/base/search_box_by_click/search_box_by_click.vue

@@ -258,7 +258,7 @@ export default {
         :disabled="disabled"
         @focus="isFocused = true"
         @blur="isFocused = false"
-        @keydown.enter="search(currentValue)"
+        @keydown.enter.native="search(currentValue)"
       />
     </slot>
     <gl-clear-icon-button

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

@@ -1,9 +1,7 @@
 import { mount } from '@vue/test-utils';
 import GlDropdown from '../dropdown/dropdown.vue';
-import GlDropdownItem from '../dropdown/dropdown_item.vue';
 import GlIcon from '../icon/icon.vue';
 import GlSorting from './sorting.vue';
-import GlSortingItem from './sorting_item.vue';
 
 describe('sorting component', () => {
   let wrapper;
@@ -22,25 +20,10 @@ describe('sorting component', () => {
 
   const createComponent = (propsData) => {
     wrapper = mount(GlSorting, {
-      attachTo: document.body,
-      components: {
-        GlSortingItem,
-      },
-      slots: {
-        default: [
-          '<gl-sorting-item :active="true">First item</gl-sorting-item>',
-          '<gl-sorting-item>Second item</gl-sorting-item>',
-          '<gl-sorting-item>Third item</gl-sorting-item>',
-        ],
-      },
       propsData: {
         ...defaultProps,
         ...propsData,
       },
-      stubs: {
-        GlSortingItem,
-        GlDropdownItem,
-      },
     });
   };
 

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

@@ -1,4 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
+import { BTab } from 'bootstrap-vue';
 import { DEFAULT_TAB_TITLE_LINK_CLASS } from '../constants';
 import GlTab from './tab.vue';
 
@@ -27,9 +28,7 @@ describe('Tab component', () => {
         },
       });
 
-      expect(wrapper.html()).toBe(
-        `<b-tab-stub tag="div" title="" titlelinkclass="${expectedProp}"></b-tab-stub>`
-      );
+      expect(wrapper.findComponent(BTab).props('titleLinkClass')).toStrictEqual(expectedProp);
     }
   );
 });

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

@@ -58,7 +58,9 @@ describe('GlScrollableTabs', () => {
         ...props,
       },
       slots: {
-        default: `<gl-tab v-for="tab in tabs" :key="tab.key" :title="tab.title">{{ tab.content }}</gl-tab>`,
+        default: {
+          template: `<div><gl-tab v-for="tab in tabs" :key="tab.key" :title="tab.title">{{ tab.content }}</gl-tab></div>`,
+        },
       },
       stubs: {
         'gl-tab': GlTab,

package/src/components/charts/column/column.vue

@@ -96,7 +96,7 @@ export default {
     barSeries() {
       return this.bars.map(({ name, data }, index) => {
         const color = colorFromDefaultPalette(index);
-        return generateBarSeries({ stack: this.groupBy, name, data, color });
+        return generateBarSeries({ name, data, color });
       });
     },
     lineSeries() {

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

@@ -47,7 +47,7 @@ describe('IntersectionObserver', () => {
     });
 
     it('renders slot', () => {
-      expect(wrapper.element.innerHTML).toEqual(TEST_SLOT);
+      expect(wrapper.html()).toContain(TEST_SLOT);
     });
 
     it('creates 1 intersection observer', () => {

package/src/components/utilities/intersperse/intersperse.vue

@@ -7,7 +7,7 @@ import filter from 'lodash/fp/filter';
 import { intersperse, insert } from '../../../utils/data_utils';
 
 const containsWhitespaceOnly = (vNode) => vNode.text.trim() === '';
-const isTag = (vNode) => vNode.tag !== undefined;
+const isTag = (vNode) => typeof vNode.tag === 'string';
 const filterWhitespaceNodes = filter((vNode) => isTag(vNode) || !containsWhitespaceOnly(vNode));
 
 const insertAfterSecondLastItem = insert(-1);

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

@@ -89,11 +89,7 @@ describe('sprintf component', () => {
     });
 
     it('should work with a default slot', () => {
-      createComponent(
-        `<sprintf message="Written by %{default}">
-           <template>Author</template>
-         </sprintf>`
-      );
+      createComponent(`<sprintf message="Written by %{default}">Author</sprintf>`);
 
       expect(wrapper.element.innerHTML).toBe('Written by Author');
     });

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

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { createMockDirective, getBinding } from '~helpers/vue_mock_directive';
+import { getBinding } from '~helpers/vue_mock_directive';
 import { POSITION } from './constants';
 import Truncate from './truncate.vue';
 
@@ -17,10 +17,9 @@ describe('Truncate component', () => {
   };
 
   const createComponent = (props) => {
-    wrapper = shallowMount(
-      { extends: Truncate, directives: { GlTooltip: createMockDirective('gl-tooltip') } },
-      { propsData: { ...defaultProps, ...props } }
-    );
+    wrapper = shallowMount(Truncate, {
+      propsData: { ...defaultProps, ...props },
+    });
   };
 
   describe('All', () => {

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

@@ -5,7 +5,7 @@ jest.useFakeTimers();
 
 describe('hover load directive', () => {
   let wrapper;
-  const findTarget = () => wrapper.find('.target');
+  const findTarget = () => wrapper.findComponent('.target');
 
   const createComponent = (handleLoad) => {
     const component = {

package/src/directives/safe_link/safe_link.spec.js

@@ -17,20 +17,18 @@ describe('safe link directive', () => {
     mountFn = shallowMount,
   } = {}) => {
     const component = {
+      props: {
+        href: { type: String },
+        safeLinkConfig: { type: Object },
+      },
       directives: {
         SafeLink: SafeLinkDirective,
       },
       components,
-      data() {
-        return {
-          href,
-          safeLinkConfig,
-        };
-      },
       template,
     };
 
-    wrapper = mountFn(component);
+    wrapper = mountFn(component, { propsData: { href, safeLinkConfig } });
   };
 
   describe('default', () => {
@@ -64,7 +62,7 @@ describe('safe link directive', () => {
   describe('valid urls', () => {
     const validUrls = [...absoluteUrls, ...relativeUrls, ...encodedJavaScriptUrls];
     /* Note:
-    /* Encoded JavaScript URLs are safe urls in Vue context, since 
+    /* Encoded JavaScript URLs are safe urls in Vue context, since
     /* Vue attribute bindings are also automatically escaped
     /* https://vuejs.org/v2/guide/security.html#Injecting-URLs
     */
@@ -99,13 +97,13 @@ describe('safe link directive', () => {
       expect(wrapper.attributes('href')).toBe('about:blank');
 
       // set href to a valid url
-      wrapper.setData({ href: 'https://gitlab.com' });
-      await Vue.nextTick();
+      await wrapper.setProps({ href: 'https://gitlab.com' });
       expect(wrapper.attributes('href')).toBe('https://gitlab.com');
 
       // set href to back to an invalid url
-      wrapper.setData({ href: javascriptUrls[1] });
+      await wrapper.setProps({ href: javascriptUrls[1] });
       await Vue.nextTick();
+
       expect(wrapper.attributes('href')).toBe('about:blank');
     });
 
@@ -123,12 +121,12 @@ describe('safe link directive', () => {
         expect(wrapper.attributes('href')).toBe(url);
 
         // set href to a valid url
-        wrapper.setData({ href: 'https://gitlab.com' });
+        await wrapper.setProps({ href: 'https://gitlab.com' });
         await Vue.nextTick();
         expect(wrapper.attributes('href')).toBe('https://gitlab.com');
 
         // set href to back to an invalid url
-        wrapper.setData({ href: url });
+        await wrapper.setProps({ href: url });
         await Vue.nextTick();
         expect(wrapper.attributes('href')).toBe(url);
       });

package/src/scss/utilities.scss

@@ -6633,12 +6633,12 @@
   }
 }
 .gl-sm-pr-2 {
-  @include gl-media-breakpoint-down(sm) {
+  @include gl-media-breakpoint-up(sm) {
   padding-right: $gl-spacing-scale-2;
   }
 }
 .gl-sm-pr-2\! {
-  @include gl-media-breakpoint-down(sm) {
+  @include gl-media-breakpoint-up(sm) {
   padding-right: $gl-spacing-scale-2 !important;
   }
 }
@@ -6762,16 +6762,6 @@
   padding-right: $gl-spacing-scale-1 !important;
   }
 }
-.gl-md-pr-2 {
-  @include gl-media-breakpoint-up(md) {
-  padding-right: $gl-spacing-scale-2;
-  }
-}
-.gl-md-pr-2\! {
-  @include gl-media-breakpoint-up(md) {
-  padding-right: $gl-spacing-scale-2 !important;
-  }
-}
 .gl-md-pr-3 {
   @include gl-media-breakpoint-up(md) {
   padding-right: $gl-spacing-scale-3;

package/src/scss/utility-mixins/spacing.scss

@@ -1061,8 +1061,7 @@
 */
 
 @mixin gl-sm-pr-2 {
-  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
-  @include gl-media-breakpoint-down(sm) {
+  @include gl-media-breakpoint-up(sm) {
     @include gl-pr-2;
   }
 }
@@ -1143,12 +1142,6 @@
   }
 }
 
-@mixin gl-md-pr-2 {
-  @include gl-media-breakpoint-up(md) {
-    @include gl-pr-2;
-  }
-}
-
 @mixin gl-md-pr-3 {
   @include gl-media-breakpoint-up(md) {
     @include gl-pr-3;