@gitlab/ui 73.0.0 → 73.1.0

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.1.0",
   "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/experimental/duo/chat/duo_chat.spec.js

@@ -76,6 +76,7 @@ describe('GlDuoChat', () => {
   const findChatConversations = () => wrapper.findAllComponents(DuoChatConversation);
   const findCustomLoader = () => wrapper.findComponent(DuoChatLoader);
   const findError = () => wrapper.find('[data-testid="chat-error"]');
+  const findHeader = () => wrapper.find('[data-testid="chat-header"]');
   const findFooter = () => wrapper.find('[data-testid="chat-footer"]');
   const findPromptForm = () => wrapper.find('[data-testid="chat-prompt-form"]');
   const findGeneratedByAI = () => wrapper.find('[data-testid="chat-legal-warning"]');
@@ -224,6 +225,18 @@ describe('GlDuoChat', () => {
         expect(findBadge().props('type')).toBe(expectedProp);
       }
     );
+
+    describe('showHeader', () => {
+      it.each`
+        desc                 | showHeader   | shouldRender
+        ${'renders'}         | ${undefined} | ${true}
+        ${'does not render'} | ${false}     | ${false}
+        ${'renders'}         | ${true}      | ${true}
+      `('$desc the header when  showHeader is "$showHeader"', ({ showHeader, shouldRender }) => {
+        createComponent({ propsData: { showHeader } });
+        expect(findHeader().exists()).toBe(shouldRender);
+      });
+    });
   });
 
   describe('chat', () => {

package/src/components/experimental/duo/chat/duo_chat.stories.js

@@ -47,6 +47,7 @@ const generateProps = ({
   badgeHelpPageUrl = defaultValue('badgeHelpPageUrl'),
   badgeType = defaultValue('badgeType'),
   toolName = defaultValue('toolName'),
+  showHeader = defaultValue('showHeader'),
 } = {}) => ({
   title,
   messages,
@@ -58,6 +59,7 @@ const generateProps = ({
   badgeType,
   toolName,
   slashCommands,
+  showHeader,
 });
 
 export const Default = (args, { argTypes }) => ({
@@ -78,6 +80,7 @@ export const Default = (args, { argTypes }) => ({
       :badge-help-page-url="badgeHelpPageUrl"
       :badge-type="badgeType"
       :tool-name="toolName"
+      :show-header="showHeader"
     />`,
 });
 Default.args = generateProps({
@@ -172,6 +175,7 @@ export const Interactive = (args, { argTypes }) => ({
       :badge-help-page-url="badgeHelpPageUrl"
       :badge-type="badgeType"
       :tool-name="toolName"
+      :show-header="showHeader"
       @send-chat-prompt="onSendChatPrompt"
       @chat-hidden="onChatHidden"
     />
@@ -197,7 +201,8 @@ export const Slots = (args, { argTypes }) => ({
         :predefined-prompts="predefinedPrompts"
         :badge-help-page-url="badgeHelpPageUrl"
         :badge-type="badgeType"
-        :tool-name="toolName">
+        :tool-name="toolName"
+        :show-header="showHeader">
 
         <template #hero>
 <pre class="code-block rounded code highlight gl-border-b gl-rounded-0! gl-mb-0 gl-overflow-y-auto solarized-light" style="max-height: 20rem; overflow-y: auto;">

package/src/components/experimental/duo/chat/duo_chat.vue

@@ -149,6 +149,14 @@ export default {
       default: () => [],
       validator: slashCommandsValidator,
     },
+    /**
+     * Whether the header should be displayed.
+     */
+    showHeader: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   data() {
     return {
@@ -327,7 +335,11 @@ export default {
     data-testid="chat-component"
     @scroll="handleScrollingTrottled"
   >
-    <header class="gl-drawer-header gl-drawer-header-sticky gl-z-index-200 gl-p-0! gl-border-b-0">
+    <header
+      v-if="showHeader"
+      data-testid="chat-header"
+      class="gl-drawer-header gl-drawer-header-sticky gl-z-index-200 gl-p-0! gl-border-b-0"
+    >
       <div
         class="drawer-title gl-display-flex gl-justify-content-start gl-align-items-center gl-p-5"
       >

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 },
+    },
+  ]);