@ouestfrance/sipa-bms-ui 7.14.1

package/src/components/table/BmsTableFilters.spec.ts

@@ -0,0 +1,494 @@
+import BmsTableFilters from '@/components/table/BmsTableFilters.vue';
+import { field } from '@/plugins/field';
+import { mount } from '@vue/test-utils';
+import { Filter } from '@/models';
+import BmsInputText from '../form/BmsInputText.vue';
+import BmsSelect from '../form/BmsSelect.vue';
+import { BmsButton, BmsIconButton, BmsModal } from '@/index';
+import { useRoute } from 'vue-router';
+import { nextTick } from 'vue';
+
+vi.mock('vue-router', () => ({
+  useRoute: vi.fn(),
+}));
+
+vi.mock('uuid', () => ({
+  v4: () => 'uuid',
+}));
+
+vi.mock('@vueuse/core', async () => {
+  const actual = await vi.importActual('@vueuse/core');
+  return {
+    ...(actual as any),
+    useMouseInElement: () => ({
+      isOutside: () => false,
+    }),
+  };
+});
+
+const intersectionObserverMock = () => ({
+  observe: () => null,
+});
+
+const factory = (
+  props: { modelValue: Filter[]; canSaveFilters?: boolean } = {
+    modelValue: [],
+    canSaveFilters: false,
+  },
+) => {
+  return mount(BmsTableFilters, {
+    global: {
+      plugins: [field],
+      stubs: {
+        teleport: true,
+      },
+    },
+    props,
+  });
+};
+
+describe('BmsTableFilters', () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+    (useRoute as any).mockImplementation(() => ({ path: 'path' }));
+    window.IntersectionObserver = vi
+      .fn()
+      .mockImplementation(intersectionObserverMock);
+  });
+  describe('getFilterComponent', () => {
+    it('should add BmsInputText element for input type', () => {
+      const wrapper = factory({
+        modelValue: [
+          {
+            key: 'key',
+            label: 'label',
+            type: 'input',
+          },
+        ],
+      });
+      expect(wrapper.findComponent(BmsInputText)).toBeTruthy();
+    });
+    it('should add BmsSelect element for select type', () => {
+      const wrapper = factory({
+        modelValue: [
+          {
+            key: 'key',
+            label: 'label',
+            type: 'select',
+            selectOptions: [
+              {
+                label: 'label1',
+                value: 'value1',
+              },
+              {
+                label: 'label2',
+                value: 'value2',
+              },
+            ],
+          },
+        ],
+      });
+      expect(wrapper.findComponent(BmsSelect)).toBeTruthy();
+      expect(wrapper.findAll('li').length).toEqual(3);
+    });
+    it('should add BmsSelect element for boolean type', () => {
+      const wrapper = factory({
+        modelValue: [
+          {
+            key: 'key',
+            label: 'label',
+            type: 'boolean',
+          },
+        ],
+      });
+      expect(wrapper.findComponent(BmsSelect)).toBeTruthy();
+      expect(wrapper.findAll('li').length).toEqual(3);
+    });
+  });
+  describe('transformValueForComponent', () => {
+    it('should set default BmsInputText element for input type', () => {
+      const wrapper = factory({
+        modelValue: [
+          {
+            key: 'key',
+            label: 'label',
+            type: 'input',
+          },
+        ],
+      });
+      expect(wrapper.findComponent(BmsInputText)).toBeTruthy();
+      expect(wrapper.findComponent(BmsInputText).props().modelValue).toEqual(
+        '',
+      );
+    });
+    it('should set value for BmsInputText element for input type if given', () => {
+      const wrapper = factory({
+        modelValue: [
+          {
+            key: 'key',
+            label: 'label',
+            type: 'input',
+            value: 'inputValue',
+          },
+        ],
+      });
+      expect(wrapper.findComponent(BmsInputText)).toBeTruthy();
+      expect(wrapper.findComponent(BmsInputText).props().modelValue).toEqual(
+        'inputValue',
+      );
+    });
+    it('should set default BmsSelect element for select type', () => {
+      const wrapper = factory({
+        modelValue: [
+          {
+            key: 'key',
+            label: 'label',
+            type: 'select',
+            selectOptions: [
+              {
+                label: 'label1',
+                value: 'value1',
+              },
+              {
+                label: 'label2',
+                value: 'value2',
+              },
+            ],
+          },
+        ],
+      });
+      expect(wrapper.findComponent(BmsSelect)).toBeTruthy();
+      expect(wrapper.findComponent(BmsSelect).props().modelValue).toEqual(
+        'null',
+      );
+    });
+    it('should set value for BmsSelect element for select type if given', () => {
+      const wrapper = factory({
+        modelValue: [
+          {
+            key: 'key',
+            label: 'label',
+            type: 'select',
+            value: 'value1',
+            selectOptions: [
+              {
+                label: 'label1',
+                value: 'value1',
+              },
+              {
+                label: 'label2',
+                value: 'value2',
+              },
+            ],
+          },
+        ],
+      });
+      expect(wrapper.findComponent(BmsSelect)).toBeTruthy();
+      expect(wrapper.findComponent(BmsSelect).props().modelValue).toEqual(
+        'value1',
+      );
+    });
+    it('should set default BmsSelect element for boolean type', () => {
+      const wrapper = factory({
+        modelValue: [
+          {
+            key: 'key',
+            label: 'label',
+            type: 'boolean',
+          },
+        ],
+      });
+      expect(wrapper.findComponent(BmsSelect)).toBeTruthy();
+      expect(wrapper.findComponent(BmsSelect).props().modelValue).toEqual(
+        'null',
+      );
+    });
+    it('should set value for BmsSelect element for boolean type if given', () => {
+      const wrapper = factory({
+        modelValue: [
+          {
+            key: 'key',
+            label: 'label',
+            type: 'boolean',
+            value: false,
+          },
+        ],
+      });
+      expect(wrapper.findComponent(BmsSelect)).toBeTruthy();
+      expect(wrapper.findComponent(BmsSelect).props().modelValue).toEqual(
+        'false',
+      );
+    });
+  });
+  describe('emit event', () => {
+    it('should emit event when BmsInputText is changed', () => {
+      const wrapper = factory({
+        modelValue: [
+          {
+            key: 'key',
+            label: 'label',
+            type: 'input',
+          },
+        ],
+      });
+      const input = wrapper.find('input');
+      expect(input).toBeTruthy();
+      input.element.value = 'val1';
+      input.trigger('input');
+      expect(wrapper.emitted()['update:modelValue'][0]).toEqual([
+        [
+          {
+            key: 'key',
+            label: 'label',
+            type: 'input',
+            value: 'val1',
+          },
+        ],
+      ]);
+    });
+    it('should emit event when BmsSelect is changed for boolean input', async () => {
+      const wrapper = factory({
+        modelValue: [
+          {
+            key: 'key',
+            label: 'label',
+            type: 'boolean',
+          },
+        ],
+      });
+      const option = wrapper.find('[data-testid="true"]');
+      expect(option).toBeTruthy();
+      await option.trigger('click');
+      expect(wrapper.emitted()['update:modelValue'][0]).toEqual([
+        [
+          {
+            key: 'key',
+            label: 'label',
+            type: 'boolean',
+            value: true,
+          },
+        ],
+      ]);
+    });
+    it('should emit event when BmsSelect is changed for boolean input', async () => {
+      const wrapper = factory({
+        modelValue: [
+          {
+            key: 'key',
+            label: 'label',
+            type: 'select',
+            selectOptions: [
+              {
+                label: 'label1',
+                value: 'value1',
+              },
+              {
+                label: 'label2',
+                value: 'value2',
+              },
+            ],
+          },
+        ],
+      });
+      const option = wrapper.find('[data-testid="value1"]');
+      expect(option).toBeTruthy();
+      await option.trigger('click');
+      expect(wrapper.emitted()['update:modelValue'][0]).toEqual([
+        [
+          {
+            key: 'key',
+            label: 'label',
+            type: 'select',
+            value: 'value1',
+            selectOptions: [
+              {
+                label: 'label1',
+                value: 'value1',
+              },
+              {
+                label: 'label2',
+                value: 'value2',
+              },
+            ],
+          },
+        ],
+      ]);
+    });
+  });
+  describe('save', () => {
+    it('should not have the save button visible by default', async () => {
+      const wrapper = factory({
+        modelValue: [
+          {
+            key: 'key',
+            label: 'label',
+            type: 'boolean',
+            value: false,
+          },
+          {
+            key: 'key2',
+            label: 'label',
+            type: 'input',
+            value: 'val1',
+          },
+          {
+            key: 'key3',
+            label: 'label',
+            type: 'select',
+            value: 'value1',
+            selectOptions: [
+              {
+                label: 'label1',
+                value: 'value1',
+              },
+              {
+                label: 'label2',
+                value: 'value2',
+              },
+            ],
+          },
+        ],
+      });
+      expect(wrapper.find('.save').exists()).toEqual(false);
+    });
+    it('should have the save button visible of can save filters', async () => {
+      const wrapper = factory({
+        modelValue: [
+          {
+            key: 'key',
+            label: 'label',
+            type: 'boolean',
+            value: false,
+          },
+          {
+            key: 'key2',
+            label: 'label',
+            type: 'input',
+            value: 'val1',
+          },
+          {
+            key: 'key3',
+            label: 'label',
+            type: 'select',
+            value: 'value1',
+            selectOptions: [
+              {
+                label: 'label1',
+                value: 'value1',
+              },
+              {
+                label: 'label2',
+                value: 'value2',
+              },
+            ],
+          },
+        ],
+        canSaveFilters: true,
+      });
+      expect(wrapper.find('.save').exists()).toEqual(true);
+    });
+    it('should open modal on save click', async () => {
+      const wrapper = factory({
+        modelValue: [
+          {
+            key: 'key',
+            label: 'label',
+            type: 'boolean',
+            value: false,
+          },
+          {
+            key: 'key2',
+            label: 'label',
+            type: 'input',
+            value: 'val1',
+          },
+          {
+            key: 'key3',
+            label: 'label',
+            type: 'select',
+            value: 'value1',
+            selectOptions: [
+              {
+                label: 'label1',
+                value: 'value1',
+              },
+              {
+                label: 'label2',
+                value: 'value2',
+              },
+            ],
+          },
+        ],
+        canSaveFilters: true,
+      });
+      const saveButton = wrapper.findComponent(BmsIconButton);
+      await saveButton.get('button').trigger('click');
+      expect(wrapper.find('.ui-modal').exists()).toBeTruthy();
+    });
+    it('should emit event when filter is saved', async () => {
+      const wrapper = factory({
+        modelValue: [
+          {
+            key: 'key',
+            label: 'label',
+            type: 'boolean',
+            value: false,
+          },
+          {
+            key: 'key2',
+            label: 'label',
+            type: 'input',
+            value: 'val1',
+          },
+          {
+            key: 'key3',
+            label: 'label',
+            type: 'select',
+            value: 'value1',
+            selectOptions: [
+              {
+                label: 'label1',
+                value: 'value1',
+              },
+              {
+                label: 'label2',
+                value: 'value2',
+              },
+            ],
+          },
+        ],
+        canSaveFilters: true,
+      });
+      const saveButton = wrapper.findComponent(BmsIconButton);
+      await saveButton.get('button').trigger('click');
+      const modal = wrapper.findComponent(BmsModal);
+      const textInput = modal.get('input');
+      textInput.setValue('filter name');
+      const submitButton = modal.findAllComponents(BmsButton)[1];
+      await submitButton.trigger('click');
+      expect(wrapper.emitted()['saveFilter'][0]).toEqual([
+        {
+          id: 'uuid',
+          route: 'path',
+          name: 'filter name',
+          filters: [
+            {
+              target: 'key',
+              value: false,
+            },
+            {
+              target: 'key2',
+              value: 'val1',
+            },
+            {
+              target: 'key3',
+              value: 'value1',
+            },
+          ],
+        },
+      ]);
+      await nextTick();
+      expect(wrapper.find('.ui-modal').exists()).toBeFalsy();
+    });
+  });
+});

package/src/components/table/BmsTableFilters.stories.js

@@ -0,0 +1,114 @@
+import BmsTableFilters from '@/components/table/BmsTableFilters.vue';
+
+export default {
+  title: 'Composants/table/TableFilters',
+  component: BmsTableFilters,
+  argTypes: {},
+};
+
+const Template = (args) => ({
+  components: {
+    BmsTableFilters,
+  },
+  setup() {
+    return { args };
+  },
+  // And then the `args` are bound to your component with `v-bind="args"`
+  template: `
+  <BmsTableFilters v-bind="args" />
+  `,
+});
+
+export const Empty = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Empty.args = {
+  modelValue: [],
+};
+
+export const withFiltersDefault = Template.bind({});
+withFiltersDefault.args = {
+  canSaveFilters: true,
+  modelValue: [
+    {
+      label: 'Input',
+      key: 'key1',
+      type: 'input',
+    },
+    {
+      label: 'Select',
+      key: 'key1',
+      type: 'select',
+      selectOptions: [
+        {
+          label: 'option1',
+          value: 'option1',
+        },
+        {
+          label: 'option2',
+          value: 'option2',
+        },
+      ],
+    },
+    {
+      label: 'Boolean',
+      key: 'key3',
+      type: 'boolean',
+    },
+    {
+      label: 'Between Text',
+      key: 'key4',
+      type: 'betweenNumber',
+    },
+  ],
+};
+
+export const withFiltersSet = Template.bind({});
+withFiltersSet.args = {
+  canSaveFilters: true,
+  modelValue: [
+    {
+      label: 'Input',
+      key: 'key1',
+      type: 'input',
+      value: 'value',
+    },
+    {
+      label: 'Select',
+      key: 'key1',
+      type: 'select',
+      value: 'option1',
+      selectOptions: [
+        {
+          label: 'option1',
+          value: 'option1',
+        },
+        {
+          label: 'option2',
+          value: 'option2',
+        },
+      ],
+    },
+    {
+      label: 'Boolean',
+      key: 'key3',
+      type: 'boolean',
+      value: false,
+    },
+    {
+      label: 'Between Date',
+      key: 'key4',
+      type: 'betweenDate',
+      inputType: 'date',
+      valueFrom: '2009-06-21',
+      valueTo: '2024-06-21',
+    },
+    {
+      label: 'Between Date Time',
+      key: 'key4',
+      type: 'betweenDate',
+      inputType: 'datetime-local',
+      valueFrom: '2009-06-21 23:50',
+      valueTo: '2024-06-21 12:46',
+    },
+  ],
+};