@gitlab/ui 73.0.0 → 73.0.1

package/dist/utils/play_utils.js

@@ -0,0 +1,11 @@
+import { userEvent } from '@storybook/testing-library';
+
+const triggerBlurEvent = async () => userEvent.pointer([{
+  keys: '[MouseLeft]',
+  coords: {
+    x: 0,
+    y: 0
+  }
+}]);
+
+export { triggerBlurEvent };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "73.0.0",
+  "version": "73.0.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -107,9 +107,12 @@
     "@storybook/addon-a11y": "7.6.10",
     "@storybook/addon-docs": "7.6.10",
     "@storybook/addon-essentials": "7.6.10",
+    "@storybook/addon-interactions": "7.6.10",
     "@storybook/addon-viewport": "7.6.10",
     "@storybook/builder-webpack5": "7.6.10",
+    "@storybook/jest": "0.2.3",
     "@storybook/test-runner": "0.16.0",
+    "@storybook/testing-library": "0.2.2",
     "@storybook/theming": "7.6.10",
     "@storybook/vue": "7.6.10",
     "@storybook/vue-webpack5": "7.6.10",

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

@@ -1,4 +1,6 @@
 import last from 'lodash/last';
+import { userEvent, within, waitFor } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
 import GlLoadingIcon from '../loading_icon/loading_icon.vue';
 import GlIcon from '../icon/icon.vue';
 import GlToken from '../token/token.vue';
@@ -451,9 +453,6 @@ export const WithHistoryItems = () => ({
       return typeof val === 'string';
     },
   },
-  mounted() {
-    this.$nextTick(() => this.$el.querySelector('.gl-dropdown-toggle').click());
-  },
   template: `
     <div>
       {{ value }}
@@ -471,6 +470,14 @@ export const WithHistoryItems = () => ({
     </div>
   `,
 });
+WithHistoryItems.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const button = canvas.getByRole('button', { name: 'Toggle history' });
+  await userEvent.click(button);
+  await waitFor(() =>
+    expect(within(document).getByRole('menu', { name: 'Toggle history' })).toBeVisible()
+  );
+};
 
 export const WithFriendlyText = () => ({
   components,

package/src/components/base/filtered_search/filtered_search_suggestion_list.stories.js

@@ -1,3 +1,4 @@
+import { userEvent, within } from '@storybook/testing-library';
 import GlFilteredSearchSuggestionList from './filtered_search_suggestion_list.vue';
 import GlFilteredSearchSuggestion from './filtered_search_suggestion.vue';
 import { provide } from './common_story_options';
@@ -20,9 +21,6 @@ export const Default = () => ({
       );
     },
   },
-  mounted() {
-    this.$refs.suggestions.nextItem();
-  },
   template: `
       <div>
         <button @click="$refs.suggestions.prevItem()">prev</button>
@@ -36,6 +34,11 @@ export const Default = () => ({
       </div>
     `,
 });
+Default.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const button = canvas.getByRole('button', { name: 'next' });
+  await userEvent.click(button);
+};
 
 export default {
   title: 'base/filtered-search/suggestion-list',

package/src/components/base/filtered_search/filtered_search_term.stories.js

@@ -1,5 +1,6 @@
 import PortalVue from 'portal-vue';
 import Vue from 'vue';
+import { triggerBlurEvent } from '../../../utils/play_utils';
 import { provide } from './common_story_options';
 import readme from './filtered_search_term.md';
 import GlFilteredSearchTerm from './filtered_search_term.vue';
@@ -26,9 +27,6 @@ export const Default = (_args, { argTypes }) => ({
       availableTokens,
     };
   },
-  mounted() {
-    this.$nextTick(() => document.activeElement.blur());
-  },
   template: `
       <div>
         <div> {{ value.data }} </div>
@@ -47,6 +45,7 @@ export const Default = (_args, { argTypes }) => ({
     `,
 });
 Default.args = generateProps();
+Default.play = triggerBlurEvent;
 
 export default {
   title: 'base/filtered-search/term',

package/src/components/base/filtered_search/filtered_search_token.stories.js

@@ -1,5 +1,6 @@
 import PortalVue from 'portal-vue';
 import Vue from 'vue';
+import { triggerBlurEvent } from '../../../utils/play_utils';
 import GlIcon from '../icon/icon.vue';
 import GlDatepicker from '../datepicker/datepicker.vue';
 import { provide } from './common_story_options';
@@ -30,11 +31,6 @@ export const Default = (args, { argTypes }) => ({
       },
     };
   },
-  mounted() {
-    this.$nextTick(() => {
-      document.activeElement.blur();
-    });
-  },
   template: `
     <div>
       <div> {{ value }} </div>
@@ -58,6 +54,7 @@ export const Default = (args, { argTypes }) => ({
   `,
 });
 Default.args = generateProps();
+Default.play = triggerBlurEvent;
 
 // eslint-disable-next-line no-unused-vars
 export const WithCustomOperatorsOptions = (args, { argTypes }) => ({
@@ -80,11 +77,6 @@ export const WithCustomOperatorsOptions = (args, { argTypes }) => ({
       },
     };
   },
-  mounted() {
-    this.$nextTick(() => {
-      document.activeElement.blur();
-    });
-  },
   template: `
     <div>
       <div> {{ value }} </div>
@@ -108,6 +100,7 @@ export const WithCustomOperatorsOptions = (args, { argTypes }) => ({
   `,
 });
 WithCustomOperatorsOptions.args = generateProps();
+WithCustomOperatorsOptions.play = triggerBlurEvent;
 
 // eslint-disable-next-line no-unused-vars
 export const WithStaticOptions = (args, { argTypes }) => ({
@@ -130,11 +123,6 @@ export const WithStaticOptions = (args, { argTypes }) => ({
       },
     };
   },
-  mounted() {
-    this.$nextTick(() => {
-      document.activeElement.blur();
-    });
-  },
   template: `
     <div>
       <div> {{ value }} </div>
@@ -153,6 +141,7 @@ export const WithStaticOptions = (args, { argTypes }) => ({
   `,
 });
 WithStaticOptions.args = generateProps();
+WithStaticOptions.play = triggerBlurEvent;
 
 // eslint-disable-next-line no-unused-vars
 export const WithDataSegmentInputAttributes = (args, { argTypes }) => ({
@@ -178,11 +167,6 @@ export const WithDataSegmentInputAttributes = (args, { argTypes }) => ({
       },
     };
   },
-  mounted() {
-    this.$nextTick(() => {
-      document.activeElement.blur();
-    });
-  },
   template: `
     <div>
       <div> {{ value }} </div>
@@ -200,6 +184,7 @@ export const WithDataSegmentInputAttributes = (args, { argTypes }) => ({
   `,
 });
 WithDataSegmentInputAttributes.args = generateProps();
+WithDataSegmentInputAttributes.play = triggerBlurEvent;
 
 export default {
   title: 'base/filtered-search/token',

package/src/components/base/filtered_search/filtered_search_token_segment.stories.js

@@ -1,5 +1,6 @@
 import PortalVue from 'portal-vue';
 import Vue from 'vue';
+import { triggerBlurEvent } from '../../../utils/play_utils';
 import GlFilteredSearchSuggestion from './filtered_search_suggestion.vue';
 import { provide } from './common_story_options';
 import readme from './filtered_search_token_segment.md';
@@ -38,9 +39,6 @@ export const Default = (args, { argTypes }) => ({
       value: 'demo1',
     };
   },
-  mounted() {
-    this.$nextTick(() => document.activeElement.blur());
-  },
   template: `
     <div>
       <div>v-model value: {{ value }} </div>
@@ -63,6 +61,7 @@ export const Default = (args, { argTypes }) => ({
   `,
 });
 Default.args = generateProps();
+Default.play = triggerBlurEvent;
 
 // eslint-disable-next-line no-unused-vars
 export const WithStaticOptions = (args, { argTypes }) => ({
@@ -77,9 +76,6 @@ export const WithStaticOptions = (args, { argTypes }) => ({
       staticOptions,
     };
   },
-  mounted() {
-    this.$nextTick(() => document.activeElement.blur());
-  },
   template: `
     <div>
       <div>v-model value: {{ value }} </div>
@@ -99,6 +95,7 @@ export const WithStaticOptions = (args, { argTypes }) => ({
   `,
 });
 WithStaticOptions.args = generateProps();
+WithStaticOptions.play = triggerBlurEvent;
 
 export default {
   title: 'base/filtered-search/token-segment',

package/src/components/base/form/form_combobox/form_combobox.stories.js

@@ -1,3 +1,5 @@
+import { userEvent, within, waitFor } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
 import { makeContainer } from '../../../../utils/story_decorators/container';
 import { stringTokenList, labelText, objectTokenList, actionsList } from './constants';
 import readme from './form_combobox.md';
@@ -41,12 +43,9 @@ Default.args = generateProps();
 export const WithObjectValue = (args, { argTypes }) => ({
   components: { GlFormCombobox },
   props: Object.keys(argTypes),
-  mounted() {
-    this.$nextTick(() => this.$refs.combobox.openSuggestions(objectTokenList));
-  },
   data: () => {
     return {
-      value: ' ',
+      value: '',
     };
   },
   template: `
@@ -68,25 +67,40 @@ export const WithObjectValue = (args, { argTypes }) => ({
 });
 WithObjectValue.args = generateProps({ tokenList: objectTokenList, matchValueToAttr: 'title' });
 WithObjectValue.decorators = [makeContainer({ height: '370px' })];
+WithObjectValue.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const searchbox = canvas.getByRole('searchbox');
+  userEvent.type(searchbox, 'g');
+
+  await waitFor(() =>
+    expect(within(document).getByRole('menuitem', { name: '1 giraffe' })).toBeVisible()
+  );
+};
 
 export const WithActions = (args, { argTypes }) => ({
   components: { GlFormCombobox },
   props: Object.keys(argTypes),
-  mounted() {
-    this.$nextTick(() => this.$refs.combobox.openSuggestions(['dog']));
-  },
+  template,
   data: () => {
     return {
-      value: 'dog',
+      value: '',
     };
   },
-  template,
 });
 WithActions.args = generateProps({
   tokenList: stringTokenList,
   actionList: actionsList,
 });
 WithActions.decorators = [makeContainer({ height: '180px' })];
+WithActions.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const searchbox = canvas.getByRole('searchbox');
+  userEvent.type(searchbox, 'dog');
+
+  await waitFor(() =>
+    expect(within(document).getByRole('menuitem', { name: 'dog' })).toBeVisible()
+  );
+};
 
 export default {
   title: 'base/form/form-combobox',

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

@@ -1,3 +1,5 @@
+import { userEvent, within, waitFor } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
 import { makeContainer } from '../../../utils/story_decorators/container';
 import GlSorting from './sorting.vue';
 import readme from './sorting.md';
@@ -44,9 +46,6 @@ const template = `
 const Template = (args) => ({
   components,
   props: Object.keys(args),
-  mounted() {
-    this.$nextTick(() => this.$el.querySelector('button').click());
-  },
   template,
 });
 
@@ -72,6 +71,12 @@ Object.assign(Default, {
   }),
   parameters: {},
 });
+Default.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const button = canvas.getByTestId('base-dropdown-toggle');
+  await userEvent.click(button);
+  await waitFor(() => expect(canvas.getByRole('listbox')).toBeVisible());
+};
 
 export default {
   title: 'base/sorting',

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

@@ -1,3 +1,5 @@
+import { userEvent, within, waitFor } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
 import Vue from 'vue';
 import GlButton from '../button/button.vue';
 import GlToast from './toast';
@@ -7,6 +9,13 @@ Vue.use(GlToast);
 
 const components = { GlToast, GlButton };
 
+const play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const button = canvas.getByRole('button');
+  await userEvent.click(button);
+  await waitFor(() => expect(within(document).getByRole('status')).toBeVisible());
+};
+
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components,
@@ -19,12 +28,10 @@ const Template = (args, { argTypes }) => ({
       this.$toast.show('This is the default toast.');
     },
   },
-  mounted() {
-    this.showToast();
-  },
 });
 
 export const Default = Template.bind({});
+Default.play = play;
 
 export const WithActions = () => ({
   components,
@@ -42,10 +49,8 @@ export const WithActions = () => ({
       });
     },
   },
-  mounted() {
-    this.showToast();
-  },
 });
+WithActions.play = play;
 
 export const WithLongContent = () => ({
   components,
@@ -66,10 +71,8 @@ export const WithLongContent = () => ({
       );
     },
   },
-  mounted() {
-    this.showToast();
-  },
 });
+WithLongContent.play = play;
 
 export default {
   title: 'base/toast',

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

@@ -1,3 +1,5 @@
+import { userEvent, within, waitFor } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
 import readme from './token_selector.md';
 import GlTokenSelector from './token_selector.vue';
 
@@ -45,9 +47,6 @@ const Template = (args, { argTypes }) => ({
   components: { GlTokenSelector },
   props: Object.keys(argTypes),
   template,
-  mounted() {
-    document.querySelector('.gl-token-selector input[type="text"]').focus();
-  },
   data() {
     return {
       filteredDropdownItems: [],
@@ -90,6 +89,12 @@ const Template = (args, { argTypes }) => ({
 export const Default = Template.bind({});
 Default.tags = ['skip-visual-test'];
 Default.args = generateProps();
+Default.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const button = canvas.getByRole('textbox');
+  await userEvent.click(button);
+  await waitFor(() => expect(canvas.getByRole('menu')).toBeVisible());
+};
 
 export default {
   title: 'base/token_selector',

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

@@ -1,3 +1,5 @@
+import { userEvent, within, waitFor } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
 import { GlTooltipDirective } from '../../../directives/tooltip';
 import GlButton from '../button/button.vue';
 import GlTooltip from './tooltip.vue';
@@ -19,31 +21,39 @@ function makeTooltip(modifier = '') {
       </gl-button>
     </div>
   `,
-    mounted() {
-      this.$nextTick(() => this.$el.querySelector('button').focus());
-    },
   };
 }
 
+const play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const button = canvas.getByRole('button');
+  await userEvent.click(button);
+  await waitFor(() => expect(within(document).getByRole('tooltip')).toBeVisible());
+};
+
 export const TopDefault = (args, argTypes) => ({
   ...makeTooltip(),
   props: Object.keys(argTypes),
 });
+TopDefault.play = play;
 
 export const Right = (args, argTypes) => ({
   ...makeTooltip('.right'),
   props: Object.keys(argTypes),
 });
+Right.play = play;
 
 export const Bottom = (args, argTypes) => ({
   ...makeTooltip('.bottom'),
   props: Object.keys(argTypes),
 });
+Bottom.play = play;
 
 export const Left = (args, argTypes) => ({
   ...makeTooltip('.left'),
   props: Object.keys(argTypes),
 });
+Left.play = play;
 
 // A default export contains higher-level info about the component and the stories' settings.
 export default {

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

@@ -1,4 +1,3 @@
-import { setStoryTimeout } from '../../../utils/test_utils';
 import readme from './animated_number.md';
 import GlAnimatedNumber from './animated_number.vue';
 
@@ -31,26 +30,14 @@ const Template = (args, { argTypes }) => ({
   template,
   data() {
     return {
-      isLoading: false,
-      loadTimer: null,
       updatedNumber: this.initialNumber,
     };
   },
   methods: {
-    loadView() {
-      clearTimeout(this.loadTimer);
-      this.isLoading = true;
-      this.loadTimer = setStoryTimeout(() => {
-        this.isLoading = false;
-      }, 1500);
-    },
     updateNumber() {
       this.updatedNumber = Math.floor(Math.random() * 100);
     },
   },
-  mounted() {
-    this.loadView();
-  },
 });
 
 export const InitialAnimate = Template.bind({});

package/src/scss/utilities.scss

@@ -8957,12 +8957,12 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   margin-bottom: $gl-mb-heading !important;
 }
 
-.gl-heading-0{
+.gl-heading-display{
   @include gl-heading-scale-800;
   margin-bottom: $gl-mb-heading-display;
 }
 
-.gl-heading-0\!{
+.gl-heading-display\!{
   @include gl-heading-scale-800;
   margin-bottom: $gl-mb-heading-display !important;
 }

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

@@ -97,7 +97,7 @@
   margin-bottom: $gl-mb-heading;
 }
 
-@mixin gl-heading-0 {
+@mixin gl-heading-display {
   @include gl-heading-scale-800;
   margin-bottom: $gl-mb-heading-display;
 }

package/src/utils/play_utils.js

@@ -0,0 +1,9 @@
+import { userEvent } from '@storybook/testing-library';
+
+export const triggerBlurEvent = async () =>
+  userEvent.pointer([
+    {
+      keys: '[MouseLeft]',
+      coords: { x: 0, y: 0 },
+    },
+  ]);