@eturnity/eturnity_reusable_components 9.28.0 → 9.28.2

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

@@ -10,7 +10,11 @@ export default {
     docs: {
       description: {
         component:
-          'Low-level modal shell: backdrop, centered container, optional close control, loading state, and a default slot for any body content. Parent handles layout and actions inside the slot. Emits `on-close` when the close button is used or Escape is pressed (if `closeOnEscape` is true).',
+          'Low-level modal shell: backdrop, centered container, optional ' +
+          'close control, loading state, and a default slot for any body ' +
+          'content. Parent handles layout and actions inside the slot. Emits ' +
+          '`on-close` when the close button is used or Escape is pressed ' +
+          '(if `closeOnEscape` is true).',
       },
     },
   },
@@ -21,7 +25,8 @@ export default {
     },
     isLoading: {
       control: 'boolean',
-      description: 'Shows a large spinner and hides slot content and close button',
+      description:
+        'Shows a large spinner and hides slot content and close button',
     },
     hideClose: {
       control: 'boolean',
@@ -55,7 +60,8 @@ export default {
     },
     addPaddingTop: {
       control: 'boolean',
-      description: 'Adds top padding to the overlay (e.g. clear a fixed header)',
+      description:
+        'Adds top padding to the overlay (e.g. clear a fixed header)',
     },
     disableDefaultMediaQuery: {
       control: 'boolean',
@@ -131,7 +137,8 @@ export const WithoutCloseButton = {
   parameters: {
     docs: {
       description: {
-        story: 'Use when the user must complete an action in the slot (e.g. explicit Save/Cancel inside the body).',
+        story:
+          'Use when the user must complete an action in the slot (e.g. explicit Save/Cancel inside the body).',
       },
     },
   },
@@ -156,7 +163,8 @@ export const InsetNotFullScreen = {
   parameters: {
     docs: {
       description: {
-        story: 'Overlay does not cover the full viewport; useful when embedding preview areas need visible context.',
+        story:
+          'Overlay does not cover the full viewport; useful when embedding preview areas need visible context.',
       },
     },
   },
@@ -219,7 +227,8 @@ export const WithTopPadding = {
   parameters: {
     docs: {
       description: {
-        story: 'Extra top padding on the overlay when a fixed app bar occupies the top of the screen.',
+        story:
+          'Extra top padding on the overlay when a fixed app bar occupies the top of the screen.',
       },
     },
   },
@@ -285,7 +294,8 @@ export const InteractiveOpenAndClose = {
   parameters: {
     docs: {
       description: {
-        story: 'Minimal host page with local `isOpen` state to demonstrate open/close behaviour.',
+        story:
+          'Minimal host page with local `isOpen` state to demonstrate open/close behaviour.',
       },
     },
   },

package/src/components/navigationTabs/navigationTabs.spec.js

@@ -0,0 +1,95 @@
+/* eslint-disable */
+import { mount } from '@vue/test-utils'
+import NavigationTabs from '@/components/navigationTabs'
+
+// `theme` and `$gettext` are provided globally by jest.setup.js, so specs do
+// not need to re-provide them. See the canonical example at
+// src/components/buttons/closeButton/closeButton.spec.js.
+//
+// The component renders only styled-components (no data-test-id hooks) and must
+// not be changed, so the tab elements are selected structurally: the root
+// wrapper holds one Tab div per item followed by a trailing BottomLine div.
+
+jest.mock('@/components/icon/iconCache.mjs', () => ({
+  // need to mock this due to how jest handles import.meta
+  fetchIcon: jest.fn(() => Promise.resolve('mocked-icon-url.svg')),
+}))
+
+const tabsData = [
+  { id: 1, slug: 'overview', label: 'Overview' },
+  {
+    id: 2,
+    slug: 'billing',
+    label: 'Billing',
+    labelInfoText: 'Invoices and payment methods',
+    labelInfoAlign: 'left',
+  },
+  { id: 3, slug: 'users', label: 'Users', isDisabled: true },
+]
+
+describe('NavigationTabs', () => {
+  const mountTabs = (props = {}) =>
+    mount(NavigationTabs, {
+      props: {
+        tabsData,
+        activeTab: 'billing',
+        tabKey: 'slug',
+        tabLabel: 'label',
+        ...props,
+      },
+    })
+
+  // The Tab divs are every direct child of the root except the trailing
+  // BottomLine div.
+  const getTabs = (wrapper) => {
+    const tabEls = Array.from(wrapper.element.children).slice(0, -1)
+    return wrapper.findAll('div').filter((d) => tabEls.includes(d.element))
+  }
+
+  it('renders one tab per item with its label', () => {
+    const wrapper = mountTabs()
+    const tabs = getTabs(wrapper)
+    expect(tabs).toHaveLength(tabsData.length)
+    expect(wrapper.text()).toContain('Overview')
+    expect(wrapper.text()).toContain('Billing')
+    expect(wrapper.text()).toContain('Users')
+  })
+
+  it('emits tab-click with the tabKey value when isIndexKey is false', async () => {
+    const wrapper = mountTabs()
+    const tabs = getTabs(wrapper)
+
+    await tabs[0].trigger('click')
+    await tabs[2].trigger('click')
+
+    const emitted = wrapper.emitted('tab-click')
+    expect(emitted).toHaveLength(2)
+    expect(emitted[0]).toEqual(['overview'])
+    expect(emitted[1]).toEqual(['users'])
+  })
+
+  it('emits tab-click with the index when isIndexKey is true', async () => {
+    const wrapper = mountTabs({ activeTab: 0, isIndexKey: true })
+    const tabs = getTabs(wrapper)
+
+    await tabs[2].trigger('click')
+
+    const emitted = wrapper.emitted('tab-click')
+    expect(emitted).toHaveLength(1)
+    expect(emitted[0]).toEqual([2])
+  })
+
+  it('styles the active tab differently from an inactive tab', () => {
+    const wrapper = mountTabs()
+    const tabs = getTabs(wrapper)
+    // activeTab is 'billing' (index 1); its generated class must differ from an
+    // inactive tab's class.
+    expect(tabs[1].classes()).not.toEqual(tabs[0].classes())
+  })
+
+  it('renders info text only for tabs that provide labelInfoText', () => {
+    const wrapper = mountTabs()
+    const infoTexts = wrapper.findAll('[data-test-id="infoText_container"]')
+    expect(infoTexts).toHaveLength(1)
+  })
+})

package/src/components/sideMenu/sideMenu.spec.js

@@ -0,0 +1,109 @@
+import { mount } from '@vue/test-utils'
+import SideMenu from '@/components/sideMenu'
+import Spinner from '@/components/spinner'
+
+jest.mock('@/components/icon/iconCache.mjs', () => ({
+  // need to mock this due to how jest handles import.meta
+  fetchIcon: jest.fn(() => Promise.resolve('mocked-icon-url.svg')),
+}))
+
+const tabsData = [
+  { key: 'dashboard', label: 'Dashboard', icon: 'house' },
+  { key: 'projects', label: 'Projects', icon: 'house' },
+  {
+    key: 'settings',
+    label: 'Settings',
+    icon: 'gear',
+    children: [
+      { key: 'general', label: 'General' },
+      { key: 'billing', label: 'Billing' },
+    ],
+  },
+]
+
+const mountMenu = (props = {}) =>
+  mount(SideMenu, {
+    props: { tabsData, activeTab: 'dashboard', ...props },
+  })
+
+const item = (wrapper, key) =>
+  wrapper.find(`[data-id="sub_menu_settings_${key}"]`)
+
+describe('sideMenu/index.vue', () => {
+  it('shows a spinner and no menu items while tabsData is empty', () => {
+    const wrapper = mount(SideMenu, {
+      props: { tabsData: [], activeTab: 'dashboard' },
+    })
+
+    expect(wrapper.findComponent(Spinner).exists()).toBe(true)
+    expect(item(wrapper, 'dashboard').exists()).toBe(false)
+  })
+
+  it('renders a menu item with its label for each flat tab', () => {
+    const wrapper = mountMenu()
+
+    expect(item(wrapper, 'dashboard').exists()).toBe(true)
+    expect(item(wrapper, 'dashboard').text()).toContain('Dashboard')
+    expect(item(wrapper, 'projects').text()).toContain('Projects')
+  })
+
+  it('marks the active tab with data-active="true"', () => {
+    const wrapper = mountMenu({ activeTab: 'projects' })
+
+    expect(item(wrapper, 'projects').attributes('data-active')).toBe('true')
+    expect(item(wrapper, 'dashboard').attributes('data-active')).toBe('false')
+  })
+
+  it('emits tab-click with the activeKey when a flat item is clicked', async () => {
+    const wrapper = mountMenu()
+
+    await item(wrapper, 'projects').trigger('click')
+
+    expect(wrapper.emitted('tab-click')).toHaveLength(1)
+    expect(wrapper.emitted('tab-click')[0]).toEqual([{ activeKey: 'projects' }])
+  })
+
+  it('hides nested children until the parent is expanded', async () => {
+    const wrapper = mountMenu()
+
+    expect(item(wrapper, 'general').exists()).toBe(false)
+
+    await item(wrapper, 'settings').trigger('click')
+    expect(item(wrapper, 'general').exists()).toBe(true)
+    expect(item(wrapper, 'billing').exists()).toBe(true)
+
+    // clicking the parent again collapses it
+    await item(wrapper, 'settings').trigger('click')
+    expect(item(wrapper, 'general').exists()).toBe(false)
+  })
+
+  it('emits tab-click with activeKey and parentKey when a child is clicked', async () => {
+    const wrapper = mountMenu()
+
+    await item(wrapper, 'settings').trigger('click')
+    await item(wrapper, 'general').trigger('click')
+
+    expect(wrapper.emitted('tab-click')[0]).toEqual([
+      { activeKey: 'general', parentKey: 'settings' },
+    ])
+  })
+
+  it('renders the logout button and app version, and emits on-logout on click', async () => {
+    const wrapper = mountMenu({ hasLogout: true, appVersion: 'v1.2.3' })
+
+    const logout = wrapper.find('[data-id="button_settings_logout"]')
+    expect(logout.exists()).toBe(true)
+    expect(wrapper.text()).toContain('v1.2.3')
+
+    await logout.trigger('click')
+    expect(wrapper.emitted('on-logout')).toHaveLength(1)
+  })
+
+  it('hides the logout section when hasLogout is false', () => {
+    const wrapper = mountMenu({ hasLogout: false })
+
+    expect(wrapper.find('[data-id="button_settings_logout"]').exists()).toBe(
+      false
+    )
+  })
+})

package/src/components/sideMenu/sideMenu.stories.js

@@ -7,6 +7,19 @@ const flatMenu = [
   { key: 'settings', label: 'Settings', icon: 'House' },
 ]
 
+const nestedMenu = [
+  { key: 'dashboard', label: 'Dashboard', icon: 'House' },
+  {
+    key: 'settings',
+    label: 'Settings',
+    icon: 'House',
+    children: [
+      { key: 'general', label: 'General' },
+      { key: 'billing', label: 'Billing' },
+    ],
+  },
+]
+
 export default {
   title: 'Components/Navigation/SideMenu',
   component: SideMenu,
@@ -51,3 +64,33 @@ SecondActive.args = {
   ...FlatItems.args,
   activeTab: 'projects',
 }
+
+// A collapsible parent item — click "Settings" to expand its children.
+export const NestedItems = Template.bind({})
+NestedItems.args = {
+  tabsData: nestedMenu,
+  activeTab: 'general',
+  activeParentTab: 'settings',
+  hasLogout: false,
+  appVersion: 'Storybook',
+}
+
+// Bottom section with the logout button and the app version.
+export const WithLogout = Template.bind({})
+WithLogout.args = {
+  tabsData: flatMenu,
+  activeTab: 'dashboard',
+  activeParentTab: null,
+  hasLogout: true,
+  appVersion: 'v1.2.3',
+}
+
+// While tabsData is empty the menu shows a loading spinner.
+export const Loading = Template.bind({})
+Loading.args = {
+  tabsData: [],
+  activeTab: 'dashboard',
+  activeParentTab: null,
+  hasLogout: false,
+  appVersion: 'Storybook',
+}