Navbar.spec.tsx

import { render, screen } from '@testing-library/react'
import Navbar from 'components/Navbar/Navbar'
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()
    render(
      <Provider store={store}>
        <BrowserRouter>
          <Navbar />
        </BrowserRouter>
      </Provider>
    )
    expect(screen.getAllByRole('link').length).toBe(5)
  })

  it('should be rendered correctly with notifications', () => {
    const store = createMockEcolyoStore({
      global: {
        challengeExplorationNotification: true,
        challengeActionNotification: false,
        challengeDuelNotification: false,
        analysisNotification: true,
      },
    })
    const { container } = render(
      <Provider store={store}>
        <BrowserRouter>
          <Navbar />
        </BrowserRouter>
      </Provider>
    )
    const notifElements = container.getElementsByClassName('nb-notif')
    expect(notifElements.length).toBe(2)
  })

  it('should be rendered correctly without notifications', () => {
    const store = createMockEcolyoStore({
      global: {
        challengeExplorationNotification: false,
        challengeActionNotification: false,
        challengeDuelNotification: false,
        analysisNotification: false,
      },
    })
    const { container } = render(
      <Provider store={store}>
        <BrowserRouter>
          <Navbar />
        </BrowserRouter>
      </Provider>
    )
    const notifElements = container.getElementsByClassName('nb-notif')
    expect(notifElements.length).toBe(0)
  })
})