@gitlab/ui 80.13.0 → 80.13.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [80.13.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v80.13.0...v80.13.1) (2024-05-24)
+
+
+### Bug Fixes
+
+* **GlFilteredSearch:** set initial state when value is updated to empty array ([19eb8fa](https://gitlab.com/gitlab-org/gitlab-ui/commit/19eb8fa4fe075597a6b938d1f8f019ae9a10e70b))
+
 # [80.13.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v80.12.0...v80.13.0) (2024-05-22)
 
 

package/dist/components/base/filtered_search/filtered_search.js

@@ -226,8 +226,9 @@ var script = {
     },
     value: {
       handler(newValue, oldValue) {
-        if (newValue.length && !isEqual(newValue, oldValue)) {
-          this.applyNewValue(cloneDeep(newValue));
+        if (!isEqual(newValue, oldValue)) {
+          const value = newValue.length ? newValue : initialState();
+          this.applyNewValue(cloneDeep(value));
         }
       },
       deep: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "80.13.0",
+  "version": "80.13.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -39,7 +39,8 @@
     "storybook-static": "yarn storybook-prep && storybook build -c .storybook -o storybook",
     "pretest:unit": "yarn build-tokens",
     "test": "run-s test:unit test:visual",
-    "test:integration": "NODE_ENV=test start-server-and-test start http://${STORYBOOK_HOST:-localhost}:9001/iframe.html 'yarn cy:run && yarn cy:edge && yarn cy:a11y'",
+    "test:integration": "yarn run test:integration:server 'yarn cy:run && yarn cy:edge && yarn cy:a11y'",
+    "test:integration:server": "NODE_ENV=test server-test http://${STORYBOOK_HOST:-localhost}:9001/iframe.html",
     "test:unit": "NODE_ENV=test jest",
     "test:unit:watch": "yarn test:unit --watch",
     "test:unit:debug": "NODE_ENV=test node --inspect node_modules/.bin/jest --testPathIgnorePatterns storyshot.spec.js --watch --runInBand",
@@ -103,6 +104,7 @@
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "6.1.0",
     "@gitlab/svgs": "3.99.0",
+    "@jest/test-sequencer": "^29.7.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
@@ -113,7 +115,7 @@
     "@storybook/addon-viewport": "^7.6.19",
     "@storybook/builder-webpack5": "^7.6.19",
     "@storybook/test": "^7.6.19",
-    "@storybook/test-runner": "0.18.0",
+    "@storybook/test-runner": "0.18.1",
     "@storybook/theming": "^7.6.19",
     "@storybook/vue": "^7.6.17",
     "@storybook/vue-webpack5": "^7.6.17",

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

@@ -1,3 +1,4 @@
+import { userEvent, within, waitFor, expect } from '@storybook/test';
 import GlFormGroup from '../form/form_group/form_group.vue';
 import { datepickerWidthOptionsMap } from '../../../utils/constants';
 import { disableControls } from '../../../utils/stories_utils';
@@ -29,9 +30,16 @@ export const Default = (_args, { argTypes }) => ({
       pickerValue: defaultDate,
     };
   },
-  template: `<gl-datepicker :max-date="maxDate" :min-date="minDate" :start-opened="true" v-model="pickerValue" />`,
+  template: `<gl-datepicker :max-date="maxDate" :min-date="minDate" v-model="pickerValue" />`,
 });
 Default.args = generateProps();
+Default.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const button = canvas.getByRole('button', { name: 'Open datepicker' });
+  await userEvent.click(button);
+  await waitFor(() => expect(button).toHaveFocus());
+  await waitFor(() => expect(within(canvasElement).getByRole('grid')).toBeVisible());
+};
 
 export const CustomTrigger = (_args, { argTypes }) => ({
   ...defaults,

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

@@ -888,4 +888,21 @@ describe('Filtered search integration tests', () => {
       { data: '' },
     ]);
   });
+
+  it('updates tokens list when empty value is passed dynamically', async () => {
+    mountComponent({ value: ['one'] });
+    await nextTick();
+
+    expect(wrapper.findAllComponents(GlFilteredSearchTerm)).toHaveLength(2);
+
+    await wrapper.setProps({
+      value: [],
+    });
+
+    const termComponents = wrapper.findAllComponents(GlFilteredSearchTerm).wrappers;
+    expect(termComponents).toHaveLength(1);
+    expect(termComponents.map((termComponent) => termComponent.props('value'))).toEqual([
+      { data: '' },
+    ]);
+  });
 });

package/src/components/base/filtered_search/filtered_search.vue

@@ -237,8 +237,9 @@ export default {
     },
     value: {
       handler(newValue, oldValue) {
-        if (newValue.length && !isEqual(newValue, oldValue)) {
-          this.applyNewValue(cloneDeep(newValue));
+        if (!isEqual(newValue, oldValue)) {
+          const value = newValue.length ? newValue : initialState();
+          this.applyNewValue(cloneDeep(value));
         }
       },
       deep: true,

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

@@ -74,6 +74,7 @@ WithObjectValue.play = async ({ canvasElement }) => {
   await waitFor(() =>
     expect(within(document).getByRole('menuitem', { name: '1 giraffe' })).toBeVisible()
   );
+  await waitFor(() => expect(searchbox).toHaveFocus());
 };
 
 export const WithActions = (args, { argTypes }) => ({
@@ -99,6 +100,7 @@ WithActions.play = async ({ canvasElement }) => {
   await waitFor(() =>
     expect(within(document).getByRole('menuitem', { name: 'dog' })).toBeVisible()
   );
+  await waitFor(() => expect(searchbox).toHaveFocus());
 };
 
 export default {

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

@@ -1,9 +1,19 @@
+import { userEvent, within, waitFor, expect } from '@storybook/test';
 import { GlModalDirective } from '../../../directives/modal';
 import GlButton from '../button/button.vue';
 import { variantOptionsWithNoDefault } from '../../../utils/constants';
 import GlModal from './modal.vue';
 import readme from './modal.md';
 
+const play =
+  (expectFinalState = () => Promise.resolve()) =>
+  async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole('button');
+    await userEvent.click(button);
+    await expectFinalState();
+  };
+
 const generateTemplate = ({ props = {}, slots = {} } = {}) => {
   const extraProps = Object.entries(props)
     .map(([key, value]) => `:${key}="${value}"`)
@@ -27,7 +37,6 @@ const generateTemplate = ({ props = {}, slots = {} } = {}) => {
         :action-primary="{text: 'Okay'}"
         :action-secondary="{text: 'Discard Changes'}"
         :action-cancel="{text: 'Cancel'}"
-        :visible="$options.viewMode !== 'docs'"
         :scrollable="scrollable"
         :no-focus-on-show="noFocusOnShow"
         modal-id="test-modal-id"
@@ -74,12 +83,26 @@ const generateProps = ({
 
 export const Default = Template.bind({});
 Default.args = generateProps();
+Default.play = play(() =>
+  waitFor(() =>
+    expect(
+      within(within(document).getByRole('dialog')).getByRole('button', { name: 'Cancel' })
+    ).toHaveFocus()
+  )
+);
 
 export const WithScrollingContent = Template.bind({});
 WithScrollingContent.args = generateProps({
   contentPagraphs: 100,
   scrollable: true,
 });
+WithScrollingContent.play = play(() =>
+  waitFor(() =>
+    expect(
+      within(within(document).getByRole('dialog')).getByRole('button', { name: 'Cancel' })
+    ).toHaveFocus()
+  )
+);
 
 export const WithAHeader = (args, { argTypes, viewMode }) => ({
   components: { GlModal, GlButton },
@@ -93,6 +116,13 @@ export const WithAHeader = (args, { argTypes, viewMode }) => ({
   viewMode,
 });
 WithAHeader.args = generateProps();
+WithAHeader.play = play(() =>
+  waitFor(() =>
+    expect(
+      within(within(document).getByRole('dialog')).getByRole('button', { name: 'Cancel' })
+    ).toHaveFocus()
+  )
+);
 
 export const WithoutAFooter = (args, { argTypes, viewMode }) => ({
   components: { GlModal, GlButton },
@@ -104,11 +134,19 @@ export const WithoutAFooter = (args, { argTypes, viewMode }) => ({
   viewMode,
 });
 WithoutAFooter.args = generateProps();
+WithoutAFooter.play = play(() =>
+  waitFor(() =>
+    expect(
+      within(within(document).getByRole('dialog')).getByRole('button', { name: 'Close' })
+    ).toHaveFocus()
+  )
+);
 
 export const WithoutFocus = Template.bind({});
 WithoutFocus.args = generateProps({
   noFocusOnShow: true,
 });
+WithoutFocus.play = play();
 
 export default {
   title: 'base/modal',

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

@@ -12,6 +12,7 @@ const play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
   const button = canvas.getByRole('button');
   await userEvent.click(button);
+  await waitFor(() => expect(within(canvasElement).getByRole('button')).toHaveFocus());
   await waitFor(() => expect(within(document).getByRole('status')).toBeVisible());
 };
 

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

@@ -27,6 +27,7 @@ const play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
   const button = canvas.getByRole('button');
   await userEvent.click(button);
+  await waitFor(() => expect(button).toHaveFocus());
   await waitFor(() => expect(within(document).getByRole('tooltip')).toBeVisible());
 };