boardSelector.test.tsx

TLDR

This file contains the test cases for the BoardSelector component. It tests the rendering of the component with different scenarios, such as rendering without start searching, rendering with no results, rendering with some results, and unmounting the component when the escape button is pressed.

Methods

There are no methods in this file.

Classes

There is one class in this file:

BoardSelector

The BoardSelector component is responsible for rendering a board selector. It interacts with the SearchLinkableBoards API to search for and display linkable boards. The component receives data from the Redux store to determine the current team, language, and link to channel. It uses the Provider component from react-redux to provide the Redux store to its child components. The component also includes event handlers for keydown events, specifically for the Escape key, to unmount the component.

// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.

import React from 'react'
import {Provider as ReduxProvider} from 'react-redux'
import {render, screen, act, fireEvent} from '@testing-library/react'
import {mocked} from 'jest-mock'

import userEvent from '@testing-library/user-event'

import octoClient from '../../../../webapp/src/octoClient'
import {mockStateStore} from '../../../../webapp/src/testUtils'
import {createBoard} from '../../../../webapp/src/blocks/board'
import {wrapIntl} from '../../../../webapp/src/testUtils'

import BoardSelector from './boardSelector'

jest.mock('../../../../webapp/src/octoClient')
const mockedOctoClient = mocked(octoClient, true)

const wait = (ms: number) => {
    return new Promise<void>((resolve) => {
        setTimeout(resolve, ms)
    })
}

describe('components/boardSelector', () => {
    const team = {
        id: 'team-id',
        name: 'team',
        display_name: 'Team name',
    }
    const state = {
        teams: {
            allTeams: [team],
            current: team,
            currentId: team.id,
        },
        language: {
            value: 'en',
        },
        boards: {
            linkToChannel: 'channel-id',
        },
    }

    it('renders without start searching', async () => {
        const store = mockStateStore([], state)
        const {container} = render(wrapIntl(
            <ReduxProvider store={store}>
                <BoardSelector/>
            </ReduxProvider>
        ))
        expect(container).toMatchSnapshot()
    })

    it('renders with no results', async () => {
        mockedOctoClient.searchLinkableBoards.mockResolvedValueOnce([])

        const store = mockStateStore([], state)
        const {container} = render(wrapIntl(
            <ReduxProvider store={store}>
                <BoardSelector/>
            </ReduxProvider>
        ))

        await act(async () => {
            const inputElement = screen.getByPlaceholderText('Search for boards')
            await userEvent.type(inputElement, 'test')
            await wait(300)
        })

        expect(container).toMatchSnapshot()
    })

    it('renders with some results', async () => {
        mockedOctoClient.searchLinkableBoards.mockResolvedValueOnce([createBoard(), createBoard(), createBoard()])

        const store = mockStateStore([], state)
        const {container} = render(wrapIntl(
            <ReduxProvider store={store}>
                <BoardSelector/>
            </ReduxProvider>
        ))

        await act(async () => {
            const inputElement = screen.getByPlaceholderText('Search for boards')
            await userEvent.type(inputElement, 'test')
            await wait(300)
        })

        expect(container).toMatchSnapshot()
    })

    it("escape button should unmount the component", () => {
        mockedOctoClient.searchLinkableBoards.mockResolvedValueOnce([])

        const store = mockStateStore([], state)
        const origDispatch = store.dispatch
        store.dispatch = jest.fn(origDispatch)
        const {container, getByText} = render(wrapIntl(
            <ReduxProvider store={store}>
                <BoardSelector/>
            </ReduxProvider>
        ))

        expect(getByText(/Link boards/i)).not.toBeNull()

        expect(store.dispatch).toHaveBeenCalledTimes(0)

        fireEvent.keyDown(getByText(/Link boards/i), {
            key: "Escape",
            code: "Escape",
            keyCode: 27,
            charCode: 27
        })

        expect(store.dispatch).toHaveBeenCalledTimes(2)
        expect(container).toMatchSnapshot()
    })
})