Navbar.spec.tsx

import Navbar from 'components/Navbar/Navbar'
import { mount } from 'enzyme'
import React from 'react'
import { Provider } from 'react-redux'
import { BrowserRouter } from 'react-router-dom'
import { createMockEcolyoStore } from 'tests/__mocks__/store'

describe('Navbar component', () => {
  it('should be rendered correctly with 5 navlink', () => {
    const store = createMockEcolyoStore()
    const wrapper = mount(
      <Provider store={store}>
        <BrowserRouter>
          <Navbar />
        </BrowserRouter>
      </Provider>
    )
    expect(wrapper.find('NavLink')).toHaveLength(5)
  })

  it('should be rendered correctly with notifications', () => {
    const store = createMockEcolyoStore({
      global: {
        challengeExplorationNotification: true,
        challengeActionNotification: false,
        challengeDuelNotification: false,
        analysisNotification: true,
      },
    })
    const wrapper = mount(
      <Provider store={store}>
        <BrowserRouter>
          <Navbar />
        </BrowserRouter>
      </Provider>
    )
    expect(wrapper.find('.nb-notif').first().text()).toEqual('1')
    expect(wrapper.find('.nb-notif').last().text()).toEqual('1')
  })

  it('should be rendered correctly without notifications', () => {
    const store = createMockEcolyoStore({
      global: {
        challengeExplorationNotification: false,
        challengeActionNotification: false,
        challengeDuelNotification: false,
        analysisNotification: false,
      },
    })
    const wrapper = mount(
      <Provider store={store}>
        <BrowserRouter>
          <Navbar />
        </BrowserRouter>
      </Provider>
    )
    expect(wrapper.find('.nb-notif').exists()).toBeFalsy()
  })
})