@eturnity/eturnity_reusable_components 8.7.4--EPDM-12729.4 → 8.7.4

package/src/components/selectedOptions/selectedOptions.spec.js

@@ -1,176 +1,176 @@
-/* eslint-disable */
-import { mount } from '@vue/test-utils'
-import RCSelectedOptions from '@/components/selectedOptions'
-import theme from '@/assets/theme'
-
-jest.mock('@/components/icon/iconCache.mjs', () => ({
-  // need to mock this due to how jest handles import.meta
-  fetchIcon: jest.fn(() => Promise.resolve('close_for_modals,_tool_tips.svg')),
-}))
-
-describe('RCSelectedOptions.vue', () => {
-  const simpleOptionsProps = {
-    optionLimit: 4,
-    numberSelected: 2,
-    selectedLabel: 'selected',
-    noBulkActionsLabel: 'No bulk actions available',
-    optionsList: [
-      {
-        type: 'close',
-        name: 'Close',
-      },
-      {
-        type: 'delete',
-        name: 'Delete',
-        hoverColor: 'red',
-      },
-    ],
-  }
-
-  it('selected options are rendered with correct options', () => {
-    const wrapper = mount(RCSelectedOptions, {
-      props: simpleOptionsProps,
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
-
-    const selectedOptions = wrapper.findComponent(RCSelectedOptions)
-    expect(selectedOptions.exists()).toBe(true)
-  })
-
-  it('should display "No bulk actions available" if there are no options', () => {
-    const wrapper = mount(RCSelectedOptions, {
-      props: {
-        ...simpleOptionsProps,
-        optionsList: [],
-      },
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
-
-    const selectedOptions = wrapper.findComponent(RCSelectedOptions)
-    expect(selectedOptions.exists()).toBe(true)
-
-    const noBulkActions = selectedOptions.find(
-      '[test-data-id="no_bulk_actions"]'
-    )
-    expect(noBulkActions.exists()).toBe(true)
-  })
-
-  it('should not display "•••" option if it is less than the limit of 4', () => {
-    const wrapper = mount(RCSelectedOptions, {
-      props: simpleOptionsProps,
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
-
-    const selectedOptions = wrapper.findComponent(RCSelectedOptions)
-    expect(selectedOptions.exists()).toBe(true)
-
-    //since we have 2 options, and the limit is 4, we should not see "•••" button
-    const moreActionsButton = selectedOptions.find(
-      '[test-data-id="more_actions_button_wrapper"]'
-    )
-    expect(moreActionsButton.exists()).toBe(false)
-  })
-
-  it('should display "•••" option if it is more than the limit of 4 or if there is a component parameter on the options', () => {
-    const wrapper = mount(RCSelectedOptions, {
-      props: {
-        ...simpleOptionsProps,
-        optionsList: [
-          {
-            type: 'close',
-            name: 'Close',
-          },
-          {
-            type: 'delete',
-            name: 'Delete',
-            component: 'set_supplier',
-          },
-        ],
-      },
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
-
-    const selectedOptions = wrapper.findComponent(RCSelectedOptions)
-    expect(selectedOptions.exists()).toBe(true)
-
-    //since we a component parameter, we should see "•••" button
-    const moreActionsButton = selectedOptions.find(
-      '[test-data-id="more_actions_button_wrapper"]'
-    )
-    expect(moreActionsButton.exists()).toBe(true)
-  })
-  it("should display the named slot content when the 'component' parameter is passed", async () => {
-    const wrapper = mount(RCSelectedOptions, {
-      props: {
-        ...simpleOptionsProps,
-        optionsList: [
-          {
-            type: 'close',
-            name: 'Close',
-          },
-          {
-            type: 'delete',
-            name: 'Delete',
-            component: 'set_supplier',
-          },
-        ],
-      },
-      global: {
-        provide: {
-          theme,
-        },
-      },
-      slots: {
-        set_supplier: '<div data-id="set_supplier">set_supplier</div>',
-      },
-    })
-
-    const selectedOptions = wrapper.findComponent(RCSelectedOptions)
-    expect(selectedOptions.exists()).toBe(true)
-
-    //since we a component parameter, we should see "•••" button
-    const moreActionsButton = selectedOptions.find(
-      '[test-data-id="more_actions_button_wrapper"]'
-    )
-    expect(moreActionsButton.exists()).toBe(true)
-
-    //click the more actions button
-    moreActionsButton.trigger('click')
-    selectedOptions.vm.expanded = true
-    selectedOptions.vm.expandedOptions = selectedOptions.props().optionsList
-    expect(selectedOptions.vm.expanded).toBe(true)
-
-    await wrapper.vm.$nextTick()
-
-    //toggle the element with the component parameter
-    const expandedListItems = selectedOptions.findAll(
-      '[test-data-id="expanded_list_item"]'
-    )
-
-    //there should be only one since we have only one option with the component parameter
-    expect(expandedListItems.length).toBe(1)
-    expandedListItems[0].trigger('click')
-
-    await wrapper.vm.$nextTick()
-
-    //check if the named slot content is displayed
-    const setSupplierSlot = wrapper.find('[data-id="set_supplier"]')
-    expect(setSupplierSlot.exists()).toBe(true)
-  })
-})
+/* eslint-disable */
+import { mount } from '@vue/test-utils'
+import RCSelectedOptions from '@/components/selectedOptions'
+import theme from '@/assets/theme'
+
+jest.mock('@/components/icon/iconCache.mjs', () => ({
+  // need to mock this due to how jest handles import.meta
+  fetchIcon: jest.fn(() => Promise.resolve('close_for_modals,_tool_tips.svg')),
+}))
+
+describe('RCSelectedOptions.vue', () => {
+  const simpleOptionsProps = {
+    optionLimit: 4,
+    numberSelected: 2,
+    selectedLabel: 'selected',
+    noBulkActionsLabel: 'No bulk actions available',
+    optionsList: [
+      {
+        type: 'close',
+        name: 'Close',
+      },
+      {
+        type: 'delete',
+        name: 'Delete',
+        hoverColor: 'red',
+      },
+    ],
+  }
+
+  it('selected options are rendered with correct options', () => {
+    const wrapper = mount(RCSelectedOptions, {
+      props: simpleOptionsProps,
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    const selectedOptions = wrapper.findComponent(RCSelectedOptions)
+    expect(selectedOptions.exists()).toBe(true)
+  })
+
+  it('should display "No bulk actions available" if there are no options', () => {
+    const wrapper = mount(RCSelectedOptions, {
+      props: {
+        ...simpleOptionsProps,
+        optionsList: [],
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    const selectedOptions = wrapper.findComponent(RCSelectedOptions)
+    expect(selectedOptions.exists()).toBe(true)
+
+    const noBulkActions = selectedOptions.find(
+      '[test-data-id="no_bulk_actions"]'
+    )
+    expect(noBulkActions.exists()).toBe(true)
+  })
+
+  it('should not display "•••" option if it is less than the limit of 4', () => {
+    const wrapper = mount(RCSelectedOptions, {
+      props: simpleOptionsProps,
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    const selectedOptions = wrapper.findComponent(RCSelectedOptions)
+    expect(selectedOptions.exists()).toBe(true)
+
+    //since we have 2 options, and the limit is 4, we should not see "•••" button
+    const moreActionsButton = selectedOptions.find(
+      '[test-data-id="more_actions_button_wrapper"]'
+    )
+    expect(moreActionsButton.exists()).toBe(false)
+  })
+
+  it('should display "•••" option if it is more than the limit of 4 or if there is a component parameter on the options', () => {
+    const wrapper = mount(RCSelectedOptions, {
+      props: {
+        ...simpleOptionsProps,
+        optionsList: [
+          {
+            type: 'close',
+            name: 'Close',
+          },
+          {
+            type: 'delete',
+            name: 'Delete',
+            component: 'set_supplier',
+          },
+        ],
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    const selectedOptions = wrapper.findComponent(RCSelectedOptions)
+    expect(selectedOptions.exists()).toBe(true)
+
+    //since we a component parameter, we should see "•••" button
+    const moreActionsButton = selectedOptions.find(
+      '[test-data-id="more_actions_button_wrapper"]'
+    )
+    expect(moreActionsButton.exists()).toBe(true)
+  })
+  it("should display the named slot content when the 'component' parameter is passed", async () => {
+    const wrapper = mount(RCSelectedOptions, {
+      props: {
+        ...simpleOptionsProps,
+        optionsList: [
+          {
+            type: 'close',
+            name: 'Close',
+          },
+          {
+            type: 'delete',
+            name: 'Delete',
+            component: 'set_supplier',
+          },
+        ],
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+      slots: {
+        set_supplier: '<div data-id="set_supplier">set_supplier</div>',
+      },
+    })
+
+    const selectedOptions = wrapper.findComponent(RCSelectedOptions)
+    expect(selectedOptions.exists()).toBe(true)
+
+    //since we a component parameter, we should see "•••" button
+    const moreActionsButton = selectedOptions.find(
+      '[test-data-id="more_actions_button_wrapper"]'
+    )
+    expect(moreActionsButton.exists()).toBe(true)
+
+    //click the more actions button
+    moreActionsButton.trigger('click')
+    selectedOptions.vm.expanded = true
+    selectedOptions.vm.expandedOptions = selectedOptions.props().optionsList
+    expect(selectedOptions.vm.expanded).toBe(true)
+
+    await wrapper.vm.$nextTick()
+
+    //toggle the element with the component parameter
+    const expandedListItems = selectedOptions.findAll(
+      '[test-data-id="expanded_list_item"]'
+    )
+
+    //there should be only one since we have only one option with the component parameter
+    expect(expandedListItems.length).toBe(1)
+    expandedListItems[0].trigger('click')
+
+    await wrapper.vm.$nextTick()
+
+    //check if the named slot content is displayed
+    const setSupplierSlot = wrapper.find('[data-id="set_supplier"]')
+    expect(setSupplierSlot.exists()).toBe(true)
+  })
+})

package/src/components/selectedOptions/selectedOptions.stories.js

@@ -1,155 +1,155 @@
-import SelectedOptions from './index.vue'
-
-export default {
-  title: 'Components/SelectedOptions',
-  component: SelectedOptions,
-  tags: ['autodocs'],
-  // argTypes: {}
-}
-
-// How to use in your template
-// import SelectedOptions from "@eturnity/eturnity_reusable_components/src/components/selectedOptions"
-//
-// optionsList = [
-//   {
-//     type: 'close',
-//     name: 'Close'
-//   },
-//   {
-//     type: 'export',
-//     name: 'Export'
-//     ...
-//     add component parameter if we were passing a component to the selected options (see below)
-//     component: 'set_supplier'
-//   },
-//   {
-//     type: 'delete',
-//     name: 'Delete',
-//     hoverColor: 'red' // default is green
-//   }
-// ]
-//
-// @on-${type}="function" should $emit the callback for the 'type' in the optionsList
-//
-// <selected-options
-//   :numberSelected="numberSelected"
-//   :optionsList="optionsList"
-//   @on-close="onCloseFunction()"
-//   @on-export="function()" @on-delete="function()"
-// >
-//   add any custom components here that you want to pass to the expanded options
-//   <template v-slot:set_supplier>
-//     <CustomSelectComponent
-//       :option-list="suppliers"
-//       @set-supplier="checkboxBulkActions('setSupplier', $event)"
-//     />
-//   </template>
-// </SelectedOptions>
-
-export const Default = {
-  render: (args) => ({
-    components: { SelectedOptions },
-    setup() {
-      return { args }
-    },
-    template: '<SelectedOptions v-bind="args"  />',
-  }),
-  args: {
-    optionLimit: 4,
-    selectedLabel: 'selected',
-    noBulkActionsLabel: 'No bulk actions available',
-
-    //selected options count, in this case 5 options are selected
-    numberSelected: 5,
-
-    //show overlay
-    showOverlay: true,
-
-    //expanded options, this will display list of actions in the middle of the screen
-    expanded: false,
-    optionsList: [
-      {
-        type: 'export',
-        name: 'Export',
-      },
-      {
-        type: 'export_page',
-        name: 'Export Page',
-      },
-    ],
-    expandedOptions: [],
-  },
-}
-
-export const Expanded = {
-  render: (args) => ({
-    components: { SelectedOptions },
-    setup() {
-      return { args }
-    },
-    template: `
-    <SelectedOptions v-bind="args">
-      <template v-slot:set_supplier>
-        <div>supplier</div>
-      </template>
-    </SelectedOptions>
-    `,
-  }),
-  args: {
-    ...Default.args,
-    //expanded options, this will display list of actions in the middle of the screen
-    expanded: true,
-
-    //optionsList, to be displayed when expanded is false and this will be filtered based on the optionLimit
-    optionsList: [
-      {
-        type: 'export',
-        name: 'Export',
-      },
-      {
-        type: 'export_page',
-        name: 'Export Page',
-      },
-      {
-        type: 'export_all',
-        name: 'Export All',
-      },
-      {
-        type: 'export_row',
-        name: 'Export Row',
-      },
-      {
-        type: 'set_supplier',
-        name: 'Set Supplier',
-        // add component parameter if we were passing a component to the selected options
-        component: 'set_supplier',
-      },
-    ],
-
-    //duplicate of optionsList, to be displayed when expanded is true
-    expandedOptions: [
-      {
-        type: 'export',
-        name: 'Export',
-      },
-      {
-        type: 'export_page',
-        name: 'Export Page',
-      },
-      {
-        type: 'export_all',
-        name: 'Export All',
-      },
-      {
-        type: 'export_row',
-        name: 'Export Row',
-      },
-      {
-        type: 'set_supplier',
-        name: 'Set Supplier',
-        // add component parameter if we were passing a component to the selected options
-        component: 'set_supplier',
-      },
-    ],
-  },
-}
+import SelectedOptions from './index.vue'
+
+export default {
+  title: 'Components/SelectedOptions',
+  component: SelectedOptions,
+  tags: ['autodocs'],
+  // argTypes: {}
+}
+
+// How to use in your template
+// import SelectedOptions from "@eturnity/eturnity_reusable_components/src/components/selectedOptions"
+//
+// optionsList = [
+//   {
+//     type: 'close',
+//     name: 'Close'
+//   },
+//   {
+//     type: 'export',
+//     name: 'Export'
+//     ...
+//     add component parameter if we were passing a component to the selected options (see below)
+//     component: 'set_supplier'
+//   },
+//   {
+//     type: 'delete',
+//     name: 'Delete',
+//     hoverColor: 'red' // default is green
+//   }
+// ]
+//
+// @on-${type}="function" should $emit the callback for the 'type' in the optionsList
+//
+// <selected-options
+//   :numberSelected="numberSelected"
+//   :optionsList="optionsList"
+//   @on-close="onCloseFunction()"
+//   @on-export="function()" @on-delete="function()"
+// >
+//   add any custom components here that you want to pass to the expanded options
+//   <template v-slot:set_supplier>
+//     <CustomSelectComponent
+//       :option-list="suppliers"
+//       @set-supplier="checkboxBulkActions('setSupplier', $event)"
+//     />
+//   </template>
+// </SelectedOptions>
+
+export const Default = {
+  render: (args) => ({
+    components: { SelectedOptions },
+    setup() {
+      return { args }
+    },
+    template: '<SelectedOptions v-bind="args"  />',
+  }),
+  args: {
+    optionLimit: 4,
+    selectedLabel: 'selected',
+    noBulkActionsLabel: 'No bulk actions available',
+
+    //selected options count, in this case 5 options are selected
+    numberSelected: 5,
+
+    //show overlay
+    showOverlay: true,
+
+    //expanded options, this will display list of actions in the middle of the screen
+    expanded: false,
+    optionsList: [
+      {
+        type: 'export',
+        name: 'Export',
+      },
+      {
+        type: 'export_page',
+        name: 'Export Page',
+      },
+    ],
+    expandedOptions: [],
+  },
+}
+
+export const Expanded = {
+  render: (args) => ({
+    components: { SelectedOptions },
+    setup() {
+      return { args }
+    },
+    template: `
+    <SelectedOptions v-bind="args">
+      <template v-slot:set_supplier>
+        <div>supplier</div>
+      </template>
+    </SelectedOptions>
+    `,
+  }),
+  args: {
+    ...Default.args,
+    //expanded options, this will display list of actions in the middle of the screen
+    expanded: true,
+
+    //optionsList, to be displayed when expanded is false and this will be filtered based on the optionLimit
+    optionsList: [
+      {
+        type: 'export',
+        name: 'Export',
+      },
+      {
+        type: 'export_page',
+        name: 'Export Page',
+      },
+      {
+        type: 'export_all',
+        name: 'Export All',
+      },
+      {
+        type: 'export_row',
+        name: 'Export Row',
+      },
+      {
+        type: 'set_supplier',
+        name: 'Set Supplier',
+        // add component parameter if we were passing a component to the selected options
+        component: 'set_supplier',
+      },
+    ],
+
+    //duplicate of optionsList, to be displayed when expanded is true
+    expandedOptions: [
+      {
+        type: 'export',
+        name: 'Export',
+      },
+      {
+        type: 'export_page',
+        name: 'Export Page',
+      },
+      {
+        type: 'export_all',
+        name: 'Export All',
+      },
+      {
+        type: 'export_row',
+        name: 'Export Row',
+      },
+      {
+        type: 'set_supplier',
+        name: 'Set Supplier',
+        // add component parameter if we were passing a component to the selected options
+        component: 'set_supplier',
+      },
+    ],
+  },
+}