@eturnity/eturnity_reusable_components 9.25.17 → 9.28.1

package/src/components/inputs/textAreaInput/TextAreaInput.stories.js

@@ -1,127 +1,131 @@
+import { ref, watch } from 'vue'
 import TextAreaInput from './index.vue'
 
+// To use:
+// import TextAreaInput from '@eturnity/eturnity_reusable_components/src/components/inputs/textAreaInput'
+// <text-area-input
+//   placeholder="Comments"
+//   :value="form.note"
+//   label="Question 5"
+//   row-height="4"
+//   :is-error="false"
+//   error-text="This field is required"
+//   @input-change="onInputChange($event)"
+// />
+
 export default {
   title: 'Components/Inputs/TextAreaInput',
   component: TextAreaInput,
-  // argTypes: {},
+  tags: ['autodocs'],
+  argTypes: {
+    value: { control: 'text' },
+    placeholder: { control: 'text' },
+    label: { control: 'text' },
+    rowHeight: { control: 'text' },
+    fontSize: { control: 'text' },
+    inputWidth: { control: 'text' },
+    resize: {
+      control: 'inline-radio',
+      options: ['none', 'both', 'horizontal', 'vertical'],
+    },
+    alignItems: {
+      control: 'inline-radio',
+      options: ['horizontal', 'vertical'],
+    },
+    appTheme: { control: 'inline-radio', options: ['light', 'dark'] },
+    isDisabled: { control: 'boolean' },
+    isError: { control: 'boolean' },
+    errorText: { control: 'text' },
+    infoTextMessage: { control: 'text' },
+    isRequiredLabel: { control: 'boolean' },
+  },
 }
 
-const Template = (args, { argTypes }) => ({
-  // Components used in your story `template` are defined in the `components` object
+const Template = (args) => ({
   components: { TextAreaInput },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  props: Object.keys(argTypes),
-  template: '<text-area-input v-bind="$props" />',
-
-  // import TextAreaInput from "@eturnity/eturnity_reusable_components/src/components/inputs/textAreaInput"
-  // To use:
-  // <text-area-input
-  //     placeholder="Comments"
-  //     @input-change="onInputChange({ value: $event, type: 'note' })"
-  //     :value="form.note"
-  //     rowHeight="4" //optional
-  //     :isError="false"
-  //     :errorText="$gettext('field_required')"
-  //     infoTextMessage="My info message"
-  //     label="Question 5"
-  //     alignItems="horizontal" // horizontal, vertical
-  //     :isDisabled="true"
-  // />
+  setup() {
+    const model = ref(args.value)
+    watch(
+      () => args.value,
+      (v) => {
+        model.value = v
+      }
+    )
+    return { args, model }
+  },
+  template: `
+    <div style="padding: 16px;">
+      <TextAreaInput v-bind="args" :value="model" @input-change="model = $event" />
+    </div>
+  `,
 })
 
-export const Default = Template.bind({})
-Default.args = {
+const baseArgs = {
   placeholder: 'Enter a comment',
-  isDisabled: false,
   rowHeight: '2',
-  isError: false,
-  errorText: 'This field is required',
-  infoTextMessage: '',
-  label: '',
   value: '',
   alignItems: 'vertical',
   inputWidth: '350px',
 }
 
+export const Default = Template.bind({})
+Default.args = {
+  ...baseArgs,
+}
+
 export const Disabled = Template.bind({})
 Disabled.args = {
-  placeholder: 'Enter a comment',
+  ...baseArgs,
   isDisabled: true,
-  rowHeight: '2',
-  isError: false,
-  errorText: 'This field is required',
-  infoTextMessage: '',
-  label: '',
-  value: '',
-  alignItems: 'vertical',
-  inputWidth: '350px',
+  value: 'Cannot edit this',
 }
 
 export const Error = Template.bind({})
 Error.args = {
-  placeholder: 'Enter a comment',
-  isDisabled: false,
-  rowHeight: '2',
+  ...baseArgs,
   isError: true,
   errorText: 'This field is required',
-  infoTextMessage: '',
-  label: '',
-  value: '',
-  alignItems: 'vertical',
-  inputWidth: '350px',
 }
 
 export const WithLabel = Template.bind({})
 WithLabel.args = {
-  placeholder: 'Enter a comment',
-  isDisabled: false,
-  rowHeight: '2',
-  isError: false,
-  errorText: 'This field is required',
-  infoTextMessage: 'Here is some information',
+  ...baseArgs,
   label: 'Description',
+  infoTextMessage: 'Here is some information',
   value: 'Here is my description!',
-  alignItems: 'vertical',
-  inputWidth: '350px',
 }
 
 export const HorizontalLabel = Template.bind({})
 HorizontalLabel.args = {
-  placeholder: 'Enter a comment',
-  isDisabled: false,
-  rowHeight: '2',
-  isError: false,
-  errorText: 'This field is required',
-  infoTextMessage: 'Here is some information',
+  ...baseArgs,
   label: 'Description',
+  infoTextMessage: 'Here is some information',
   value: 'Here is my description!',
   alignItems: 'horizontal',
-  inputWidth: '350px',
+}
+
+export const RequiredLabel = Template.bind({})
+RequiredLabel.args = {
+  ...baseArgs,
+  label: 'Description',
+  isRequiredLabel: true,
 }
 
 export const LargerTextArea = Template.bind({})
 LargerTextArea.args = {
-  placeholder: 'Enter a comment',
-  isDisabled: false,
-  rowHeight: '5',
-  isError: false,
-  errorText: 'This field is required',
-  infoTextMessage: 'Here is some information',
+  ...baseArgs,
   label: 'Description',
+  rowHeight: '5',
   value: 'Here is my description!',
-  alignItems: 'vertical',
+  inputWidth: null,
 }
 
 export const LargerFontSize = Template.bind({})
 LargerFontSize.args = {
-  placeholder: 'Enter a comment',
-  isDisabled: false,
+  ...baseArgs,
+  label: 'Description',
   rowHeight: '5',
   fontSize: '24px',
-  isError: false,
-  errorText: 'This field is required',
-  infoTextMessage: 'Here is some information',
-  label: 'Description',
   value: 'Here is my description!',
-  alignItems: 'vertical',
+  inputWidth: null,
 }

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

@@ -0,0 +1,90 @@
+/* eslint-disable */
+import { mount } from '@vue/test-utils'
+import TextAreaInput from '@/components/inputs/textAreaInput'
+import InfoText from '@/components/infoText'
+
+// InfoText renders an icon; the real iconCache.mjs uses import.meta.
+jest.mock('@/components/icon/iconCache.mjs', () => ({
+  fetchIcon: jest.fn(() => Promise.resolve('mocked-icon-url.svg')),
+}))
+
+describe('TextAreaInput', () => {
+  const mountTextArea = (props = {}) =>
+    mount(TextAreaInput, { props: { value: '', ...props } })
+
+  it('renders a textarea with the value, placeholder and row height', () => {
+    const textarea = mountTextArea({
+      value: 'Hello',
+      placeholder: 'Enter a comment',
+      rowHeight: '5',
+    }).find('textarea')
+
+    expect(textarea.element.value).toBe('Hello')
+    expect(textarea.attributes('placeholder')).toBe('Enter a comment')
+    expect(textarea.attributes('rows')).toBe('5')
+  })
+
+  it('emits input-change with the new value when typing', async () => {
+    const wrapper = mountTextArea()
+
+    await wrapper.find('textarea').setValue('new text')
+
+    expect(wrapper.emitted('input-change')).toHaveLength(1)
+    expect(wrapper.emitted('input-change')[0]).toEqual(['new text'])
+  })
+
+  it('does not emit input-change when disabled', async () => {
+    const wrapper = mountTextArea({ isDisabled: true })
+    const textarea = wrapper.find('textarea')
+
+    expect(textarea.attributes('disabled')).toBeDefined()
+    await textarea.setValue('blocked')
+
+    expect(wrapper.emitted('input-change')).toBeUndefined()
+  })
+
+  it('emits input-blur and input-focus with the current value', async () => {
+    const wrapper = mountTextArea({ value: 'abc' })
+    const textarea = wrapper.find('textarea')
+
+    await textarea.trigger('focus')
+    await textarea.trigger('blur')
+
+    expect(wrapper.emitted('input-focus')[0]).toEqual(['abc'])
+    expect(wrapper.emitted('input-blur')[0]).toEqual(['abc'])
+  })
+
+  it('renders the label with the required star', () => {
+    const wrapper = mountTextArea({ label: 'Description', isRequiredLabel: true })
+    expect(wrapper.text()).toContain('Description')
+    expect(wrapper.text()).toContain('*')
+  })
+
+  it('renders the info text only when a message is provided', () => {
+    expect(
+      mountTextArea({ label: 'Description' }).findComponent(InfoText).exists()
+    ).toBe(false)
+    expect(
+      mountTextArea({ label: 'Description', infoTextMessage: 'Some hint' })
+        .findComponent(InfoText)
+        .exists()
+    ).toBe(true)
+  })
+
+  it('shows the error text only when isError is set', () => {
+    expect(mountTextArea({ errorText: 'Required' }).text()).not.toContain(
+      'Required'
+    )
+    expect(
+      mountTextArea({ isError: true, errorText: 'Required' }).text()
+    ).toContain('Required')
+  })
+
+  it('prefers inputDataId over dataId for the textarea data-id', () => {
+    const textarea = mountTextArea({
+      inputDataId: 'note_input',
+      dataId: 'fallback',
+    }).find('textarea')
+    expect(textarea.attributes('data-id')).toBe('note_input')
+  })
+})

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',
+}