@eturnity/eturnity_reusable_components 9.28.1 → 9.28.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "9.28.1",
+  "version": "9.28.2",
   "files": [
     "dist",
     "src"

package/src/components/inputs/toggle/Toggle.stories.js

@@ -1,77 +1,116 @@
+import { ref } from 'vue'
 import Toggle from './index.vue'
+import theme from '@/assets/theme'
+
+// import Toggle from "@eturnity/eturnity_reusable_components/src/components/inputs/toggle"
+// To use:
+// <toggle
+//   @on-toggle-change="onInputChange($event)"
+//   :isChecked="toggleValue" // Boolean
+//   label="My Label Text"
+//   toggleColor="red"
+//   size="small" // small, medium
+//   backgroundColor="blue"
+//   labelAlign="right"
+//   fontColor="black"
+//   :disabled="true"
+//   infoTextMessage="My info message"
+// />
 
 export default {
   title: 'Components/Inputs/Toggle',
   component: Toggle,
-  // argTypes: {},
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    isChecked: { control: 'boolean' },
+    label: { control: 'text' },
+    size: { control: 'select', options: ['small', 'medium'] },
+    labelAlign: { control: 'select', options: ['left', 'right'] },
+    toggleColor: { control: 'color' },
+    backgroundColor: { control: 'color' },
+    fontColor: { control: 'color' },
+    disabled: { control: 'boolean' },
+    isRequiredLabel: { control: 'boolean' },
+    infoTextMessage: { control: 'text' },
+  },
 }
 
-const Template = (args, { argTypes }) => ({
-  // Components used in your story `template` are defined in the `components` object
+const Template = (args) => ({
   components: { Toggle },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  props: Object.keys(argTypes),
-  template: '<toggle v-bind="$props" />',
-
-  // import Toggle from "@eturnity/eturnity_reusable_components/src/components/inputs/toggle"
-  //To use:
-  // <toggle
-  //   @on-toggle-change="onInputChange($event)"
-  //   :isChecked="toggleValue" // Boolean
-  //   label="My Label Text"
-  //   toggleColor="red"
-  //   size="small" // small, medium
-  //   backgroundColor="blue"
-  //   labelAlign="right"
-  //   fontColor="black"
-  //   :disabled="true"
-  // />
+  setup() {
+    const isChecked = ref(args.isChecked)
+    return { args, isChecked }
+  },
+  template: `
+    <div data-test-id="toggle-story" style="padding: 16px; min-width: 240px;">
+      <Toggle
+        v-bind="args"
+        :isChecked="isChecked"
+        @on-toggle-change="isChecked = $event"
+      />
+      <p style="margin-top: 12px; font-size: 12px; color: #666;">isChecked: {{ isChecked }}</p>
+    </div>
+  `,
+  provide: {
+    theme,
+  },
 })
 
 export const Default = Template.bind({})
 Default.args = {
   isChecked: true,
-  size: 'small', // "small" or "medium"
+  size: 'small',
   disabled: false,
 }
 
 export const Medium = Template.bind({})
 Medium.args = {
-  isChecked: true,
-  size: 'medium', // "small" or "medium"
-  disabled: false,
+  ...Default.args,
+  size: 'medium',
 }
 
 export const CustomColor = Template.bind({})
 CustomColor.args = {
-  isChecked: true,
-  size: 'small', // "small" or "medium"
-  disabled: false,
+  ...Default.args,
   toggleColor: 'red',
   backgroundColor: 'blue',
 }
 
 export const LabelLeft = Template.bind({})
 LabelLeft.args = {
-  isChecked: true,
-  size: 'small', // "small" or "medium"
+  ...Default.args,
   label: 'My Label Text',
-  disabled: false,
   labelAlign: 'left',
 }
 
 export const LabelRight = Template.bind({})
 LabelRight.args = {
-  isChecked: true,
-  size: 'small', // "small" or "medium"
+  ...Default.args,
   label: 'My Label Text',
-  disabled: false,
   labelAlign: 'right',
 }
 
+export const WithInfoText = Template.bind({})
+WithInfoText.args = {
+  ...Default.args,
+  label: 'My Label Text',
+  infoTextMessage: 'Applies to this location only.',
+}
+
+export const Required = Template.bind({})
+Required.args = {
+  ...Default.args,
+  label: 'My Label Text',
+  labelAlign: 'left',
+  isRequiredLabel: true,
+}
+
 export const Disabled = Template.bind({})
 Disabled.args = {
+  ...Default.args,
   isChecked: false,
-  size: 'small', // "small" or "medium"
   disabled: true,
 }

package/src/components/inputs/toggle/toggle.spec.js

@@ -1,102 +1,141 @@
 /* eslint-disable */
 import { mount } from '@vue/test-utils'
 import RCToggle from '@/components/inputs/toggle'
-import theme from '@/assets/theme'
+
+// `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.
 
 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')),
 }))
 
-describe('RCToggle.vue', () => {
-  it('toggle is rendered and emits correct payload on change', async () => {
-    const wrapper = mount(RCToggle, {
-      props: { isChecked: true, label: 'Test label', disabled: false },
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
-    const toggleWrapper = wrapper.find('[data-test-id="toggle_wrapper"]')
+describe('RCToggle', () => {
+  const mountToggle = (props = {}) =>
+    mount(RCToggle, { props: { isChecked: false, ...props } })
 
-    // check that the element exists
+  it('renders the toggle and reflects the checked state', () => {
+    const wrapper = mountToggle({ isChecked: true })
+    const toggleWrapper = wrapper.find('[data-test-id="toggle_wrapper"]')
     expect(toggleWrapper.exists()).toBe(true)
     expect(toggleWrapper.attributes('checked')).toBe('true')
+  })
+
+  it('reflects the unchecked state', () => {
+    const wrapper = mountToggle({ isChecked: false })
+    const toggleWrapper = wrapper.find('[data-test-id="toggle_wrapper"]')
+    expect(toggleWrapper.attributes('checked')).toBe('false')
+  })
 
-    // Log attributes to see what is rendered (commented out just for reference)
-    // console.log('attributes', toggleWrapper.attributes())
-    // console.log('All of the Toggles' attributes', wrapper.vm)
+  it('emits on-toggle-change with the negated value when clicked', async () => {
+    const wrapper = mountToggle({ isChecked: true })
+    await wrapper.find('[data-test-id="page_wrapper"]').trigger('click')
 
-    // Test the label
-    expect(wrapper.text()).toContain('Test label')
+    const emitted = wrapper.emitted('on-toggle-change')
+    expect(emitted).toHaveLength(1)
+    expect(emitted[0]).toEqual([false])
+  })
 
-    // Test the click
+  it('emits on-toggle-change when the space key is pressed', async () => {
+    const wrapper = mountToggle({ isChecked: false })
+    await wrapper
+      .find('[data-test-id="toggle_wrapper"]')
+      .trigger('keydown.space')
+
+    const emitted = wrapper.emitted('on-toggle-change')
+    expect(emitted).toHaveLength(1)
+    expect(emitted[0]).toEqual([true])
+  })
+
+  it('does not emit when disabled and clicked', async () => {
+    const wrapper = mountToggle({ isChecked: false, disabled: true })
+    await wrapper.find('[data-test-id="page_wrapper"]').trigger('click')
+
+    expect(wrapper.emitted('on-toggle-change')).toBeUndefined()
+  })
+
+  it('toggles back and forth across successive clicks', async () => {
+    const wrapper = mountToggle({ isChecked: false })
     const pageWrapper = wrapper.find('[data-test-id="page_wrapper"]')
+
     await pageWrapper.trigger('click')
-    expect(wrapper.emitted('on-toggle-change')).toBeTruthy()
-    const emittedEvent = wrapper.emitted('on-toggle-change')
-    // To inspect emitted events:
-    // console.log('Emitted events', wrapper.emitted())
-    expect(emittedEvent).toHaveLength(1) // Check if the event was emitted exactly once
-    // Check the payload of the event
-    expect(emittedEvent[0]).toEqual([false])
-  }),
-    it('toggle disabled does not emit anything', async () => {
-      const wrapper = mount(RCToggle, {
-        props: { isChecked: false, disabled: true },
-        global: {
-          provide: {
-            theme,
-          },
-        },
-      })
-      const toggleWrapper = wrapper.find('[data-test-id="toggle_wrapper"]')
-      expect(toggleWrapper.attributes('checked')).toBe('false')
-
-      // Test the click
-      const pageWrapper = wrapper.find('[data-test-id="page_wrapper"]')
-      await pageWrapper.trigger('click')
-
-      // Inspect emitted events
-      const emittedEvents = wrapper.emitted('on-toggle-change')
-
-      // Verify that no events were emitted
-      expect(emittedEvents).toBeUndefined() // No event should be emitted
-    }),
-    it('should toggle back and forth on multiple clicks', async () => {
-      const wrapper = mount(RCToggle, {
-        props: { isChecked: false, disabled: false },
-        global: {
-          provide: {
-            theme,
-          },
-        },
+    await wrapper.setProps({ isChecked: true })
+    await pageWrapper.trigger('click')
+    await wrapper.setProps({ isChecked: false })
+    await pageWrapper.trigger('click')
+
+    const emitted = wrapper.emitted('on-toggle-change')
+    expect(emitted).toHaveLength(3)
+    expect(emitted[0]).toEqual([true])
+    expect(emitted[1]).toEqual([false])
+    expect(emitted[2]).toEqual([true])
+  })
+
+  it('renders no label container when no label is provided', () => {
+    const wrapper = mountToggle()
+    expect(wrapper.find('[data-test-id="label_left_container"]').exists()).toBe(
+      false
+    )
+    expect(wrapper.find('[data-test-id="label_right_container"]').exists()).toBe(
+      false
+    )
+  })
+
+  it('renders the label on the right by default', () => {
+    const wrapper = mountToggle({ label: 'My Label' })
+    expect(wrapper.find('[data-test-id="label_right_container"]').exists()).toBe(
+      true
+    )
+    expect(wrapper.find('[data-test-id="label_left_container"]').exists()).toBe(
+      false
+    )
+    expect(wrapper.text()).toContain('My Label')
+  })
+
+  it('renders the label on the left when labelAlign is "left"', () => {
+    const wrapper = mountToggle({ label: 'My Label', labelAlign: 'left' })
+    expect(wrapper.find('[data-test-id="label_left_container"]').exists()).toBe(
+      true
+    )
+    expect(wrapper.find('[data-test-id="label_right_container"]').exists()).toBe(
+      false
+    )
+  })
+
+  it('renders the info text only when infoTextMessage is provided', () => {
+    expect(
+      mountToggle({ label: 'My Label', labelAlign: 'left' })
+        .find('[data-test-id="infoText_container"]')
+        .exists()
+    ).toBe(false)
+
+    expect(
+      mountToggle({
+        label: 'My Label',
+        labelAlign: 'left',
+        infoTextMessage: 'Some info',
       })
-      const toggleWrapper = wrapper.find('[data-test-id="toggle_wrapper"]')
-      // Initial state
-      expect(toggleWrapper.attributes('checked')).toBe('false')
-
-      // Trigger click and check events
-      const pageWrapper = wrapper.find('[data-test-id="page_wrapper"]')
-      await pageWrapper.trigger('click')
-      let emittedEvent = wrapper.emitted('on-toggle-change')
-      expect(emittedEvent).toBeTruthy() // Ensure that the event was emitted
-      expect(emittedEvent).toHaveLength(1) // Ensure that only one event was emitted
-      expect(emittedEvent[0]).toEqual([true]) // Check the payload of the first click
-      await wrapper.setProps({ isChecked: true }) // manually update the props
-
-      // Trigger click again and check events
-      await pageWrapper.trigger('click')
-      emittedEvent = wrapper.emitted('on-toggle-change')
-      expect(emittedEvent).toHaveLength(2) // Ensure that the event count has increased
-      expect(emittedEvent[1]).toEqual([false]) // Check the payload of the second click
-      await wrapper.setProps({ isChecked: false }) // manually update the props
-
-      // Trigger click again and check events
-      await pageWrapper.trigger('click')
-      emittedEvent = wrapper.emitted('on-toggle-change')
-      expect(emittedEvent).toHaveLength(3) // Ensure that the event count has increased
-      expect(emittedEvent[2]).toEqual([true]) // Check the payload of the third click
+        .find('[data-test-id="infoText_container"]')
+        .exists()
+    ).toBe(true)
+  })
+
+  it('renders the required star only when isRequiredLabel is true', () => {
+    const withStar = mountToggle({
+      label: 'My Label',
+      labelAlign: 'left',
+      isRequiredLabel: true,
     })
+    expect(withStar.text()).toContain('*')
+
+    const withoutStar = mountToggle({ label: 'My Label', labelAlign: 'left' })
+    expect(withoutStar.text()).not.toContain('*')
+  })
+
+  it('exposes dataId and dataQaId as data attributes', () => {
+    const wrapper = mountToggle({ dataId: 'my_toggle', dataQaId: 'qa_toggle' })
+    expect(wrapper.find('[data-id="my_toggle"]').exists()).toBe(true)
+    expect(wrapper.find('[data-qa-id="qa_toggle"]').exists()).toBe(true)
+  })
 })

package/src/components/label/label.spec.js

@@ -0,0 +1,55 @@
+/* eslint-disable */
+import { mount } from '@vue/test-utils'
+import Label from '@/components/label'
+
+// `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.
+
+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')),
+}))
+
+describe('Label', () => {
+  const mountLabel = (props = {}, slot = 'My label') =>
+    mount(Label, { props, slots: { default: slot } })
+
+  it('renders the default slot content', () => {
+    const wrapper = mountLabel({}, 'Project name')
+    expect(wrapper.text()).toContain('Project name')
+  })
+
+  it('renders the required star only when isRequiredLabel is true', () => {
+    expect(mountLabel({ isRequiredLabel: true }).text()).toContain('*')
+    expect(mountLabel({ isRequiredLabel: false }).text()).not.toContain('*')
+  })
+
+  it('renders the optional label only when labelOptional is true', () => {
+    expect(mountLabel({ labelOptional: true }).text()).toContain('(optional)')
+    expect(mountLabel({ labelOptional: false }).text()).not.toContain(
+      '(optional)'
+    )
+  })
+
+  it('renders the info text only when infoTextMessage is provided', () => {
+    expect(
+      mountLabel().find('[data-test-id="infoText_container"]').exists()
+    ).toBe(false)
+
+    expect(
+      mountLabel({ infoTextMessage: 'Some info' })
+        .find('[data-test-id="infoText_container"]')
+        .exists()
+    ).toBe(true)
+  })
+
+  it('renders both the required star and the optional label together', () => {
+    const text = mountLabel({
+      isRequiredLabel: true,
+      labelOptional: true,
+    }).text()
+    expect(text).toContain('*')
+    expect(text).toContain('(optional)')
+  })
+})

package/src/components/label/label.stories.js

@@ -16,6 +16,7 @@ export default {
     labelOptional: { control: 'boolean' },
     infoTextMessage: { control: 'text' },
     infoTextAlign: { control: 'select', options: ['left', 'right'] },
+    appTheme: { control: 'select', options: ['light', 'dark'] },
   },
 }
 
@@ -67,3 +68,38 @@ HorizontalLayout.args = {
   slotLabel: 'Budget (CHF)',
   labelAlign: 'horizontal',
 }
+
+export const CustomFontStyle = Template.bind({})
+CustomFontStyle.args = {
+  ...Default.args,
+  slotLabel: 'Section heading',
+  fontSize: '20px',
+  labelFontColor: 'green',
+}
+
+const DarkTemplate = (args) => ({
+  components: { LabelText },
+  setup() {
+    return { args }
+  },
+  template: `
+    <div
+      data-test-id="label-story"
+      style="padding: 16px; max-width: 420px; background: #1f1f1f;"
+    >
+      <LabelText v-bind="args">
+        {{ args.slotLabel }}
+      </LabelText>
+    </div>
+  `,
+  provide: {
+    theme,
+  },
+})
+
+export const DarkTheme = DarkTemplate.bind({})
+DarkTheme.args = {
+  ...Default.args,
+  slotLabel: 'Project name',
+  appTheme: 'dark',
+}

package/src/components/markerItem/markerItem.spec.js

@@ -0,0 +1,46 @@
+/* eslint-disable */
+import { mount } from '@vue/test-utils'
+import MarkerItem from '@/components/markerItem'
+
+// `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.
+
+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')),
+}))
+
+describe('MarkerItem', () => {
+  const mountMarker = (props = {}) =>
+    mount(MarkerItem, { props: { label: 'Marker', ...props } })
+
+  it('renders the label text', () => {
+    const wrapper = mountMarker({ label: 'Highlights' })
+    expect(wrapper.text()).toContain('Highlights')
+  })
+
+  it('exposes the label as the span title attribute', () => {
+    const wrapper = mountMarker({ label: 'Highlights' })
+    expect(wrapper.find('span').attributes('title')).toBe('Highlights')
+  })
+
+  it('renders an icon only when iconName is provided', () => {
+    expect(
+      mountMarker({ iconName: 'House' })
+        .find('[data-test-id="icon_wrapper"]')
+        .exists()
+    ).toBe(true)
+
+    expect(
+      mountMarker().find('[data-test-id="icon_wrapper"]').exists()
+    ).toBe(false)
+  })
+
+  it('passes the iconName through to the Icon component', () => {
+    const wrapper = mountMarker({ iconName: 'House' })
+    expect(wrapper.findComponent({ name: 'EturnityIcon' }).exists()).toBe(true)
+    // EturnityIcon forwards `name` to the inner Icon, which declares it as a prop
+    expect(wrapper.findComponent({ name: 'Icon' }).props('name')).toBe('House')
+  })
+})

package/src/components/markerItem/markerItem.stories.js

@@ -44,3 +44,10 @@ TextOnly.args = {
   label: 'No icon variant',
   cursor: 'default',
 }
+
+export const CustomColor = Template.bind({})
+CustomColor.args = {
+  label: 'On hold',
+  backgroundColor: '#ab5348',
+  cursor: 'default',
+}

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)
+  })
+})