modal.test.tsx

TLDR

This file contains a set of test cases for the Modal component. The tests include checking if the component renders correctly, if it closes when the close button is clicked, and if it renders at different positions.

Methods

There are no methods in this file.

Classes

Modal

The Modal class represents a reusable component that displays a modal dialog. It accepts the following props:

• onClose: a function that will be called when the modal is closed.

The Modal class is used in the test cases to render the modal component with different configurations and test various scenarios.

// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import {render, screen} from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import React from 'react'

import {mockDOM, wrapDNDIntl} from '../testUtils'

import Modal from './modal'

describe('components/modal', () => {
    beforeAll(mockDOM)
    beforeEach(jest.clearAllMocks)
    test('should match snapshot', () => {
        const {container} = render(wrapDNDIntl(
            <Modal
                onClose={jest.fn()}
            >
                <div id='test'/>
            </Modal>,
        ))
        expect(container).toMatchSnapshot()
    })
    test('return Modal and close', () => {
        const onMockedClose = jest.fn()
        render(wrapDNDIntl(
            <Modal
                onClose={onMockedClose}
            >
                <div id='test'/>
            </Modal>,
        ))
        const buttonClose = screen.getByRole('button', {name: 'Close'})
        userEvent.click(buttonClose)
        expect(onMockedClose).toBeCalledTimes(1)
    })
    test('return Modal on position top', () => {
        const {container} = render(wrapDNDIntl(
            <Modal
                position={'top'}
                onClose={jest.fn()}
            >
                <div id='test'/>
            </Modal>,
        ))
        expect(container).toMatchSnapshot()
    })

    test('return Modal on position bottom', () => {
        const {container} = render(wrapDNDIntl(
            <Modal
                position={'bottom'}
                onClose={jest.fn()}
            >
                <div id='test'/>
            </Modal>,
        ))
        expect(container).toMatchSnapshot()
    })

    test('return Modal on position bottom-right', () => {
        const {container} = render(wrapDNDIntl(
            <Modal
                position={'bottom-right'}
                onClose={jest.fn()}
            >
                <div id='test'/>
            </Modal>,
        ))
        expect(container).toMatchSnapshot()
    })
})