@swrve/navigation/src/navigation/__tests__/Navigation.spec.js

Swrve Navigation Components

import React from 'react'
import { NavLink } from 'react-router-dom'
import renderer from 'react-test-renderer'
import { MemoryRouter } from 'react-router'
import { shallow } from 'enzyme'

import Navigation from '../Navigation'
import NavListItem from '../../navListItem/NavListItem'
import NavItem from '../../navItem/NavItem'
import NavGroup from '../../navGroup/NavGroup'

describe('<Navigation/>', () => {
  let wrapper, groupItems

  const menuItems = [
    {
      label: 'Dashboard',
      key: 'dashboard-1',
      to: '',
      theme: 'primary-100',
      icon: 'dashboard',
      subItems: [
        {
          label: 'Analytics',
          key: 'campaigns-1',
          to: '/analytics',
          groupStart: true
        },
        {
          label: 'User lifecycle Start',
          key: 'user-lifecycle-start',
          to: '/lifecycle',
          groupEnd: true
        }
      ]
    },
    {
      label: 'Help Center',
      key: 'help-center',
      href: 'https://docs.swrve.com',
      external: true,
      theme: 'royalBlue-100',
      icon: 'docs',
      subItems: []
    }
  ]

  const defaultProps = {
    linkType: NavLink,
    collapsed: false
  }

  beforeEach(() => {
    wrapper = shallow(
      <Navigation {...defaultProps}>
        {({ generateMenu, ...props }) => generateMenu({ items: menuItems, ...props })}
      </Navigation>
    )
    groupItems = wrapper.find('NavGroup')
  })

  it('should generate nav container', () => {
    expect(wrapper.is('ul')).toBeTruthy()
    expect(wrapper.prop('data-automation')).toEqual('side-nav')
  })

  it('should contain NavGroup', () => {
    expect(groupItems).toHaveLength(1)
    expect(groupItems.children()).toHaveLength(2)
    expect(groupItems.props().collapsed).toEqual(false)
  })

  it('should display list items in NavGroup correctly', () => {
    expect(
      groupItems
        .find('NavItem')
        .first()
        .props().buttonStyle
    ).toEqual('sw-secondary-nav')
  })

  it('should display group items correctly', () => {
    const listItems = groupItems.find('NavListItem')
    expect(listItems.first().hasClass('group-start')).toBeTruthy()
    expect(listItems.last().hasClass('group-end')).toBeTruthy()
  })

  it('should contain NavItem', () => {
    expect(wrapper.find('NavItem')).toHaveLength(3)
  })

  describe('with Children', () => {
    it('should also accept children to render nav', () => {
      expect(
        renderer
          .create(
            <MemoryRouter initialEntries={['/']}>
              <Navigation linkType={NavLink}>
                {({ linkType, collapsed, getListProps }) => (
                  <ul {...getListProps()}>
                    <NavGroup
                      label="Nav Group"
                      icon="campaigns"
                      theme="secondary-100"
                      collapsed={collapsed}
                      automation="campaigns"
                    >
                      <NavListItem automation="analytics">
                        <NavItem label="Analytics" linkType={linkType} to="/analytics" />
                      </NavListItem>
                    </NavGroup>
                    <NavListItem automation="manage">
                      <NavItem label="Manage" linkType={linkType} to="/manage" />
                    </NavListItem>
                  </ul>
                )}
              </Navigation>
            </MemoryRouter>
          )
          .toJSON()
      ).toMatchSnapshot()
    })
  })
})