deleteBoardDialog.test.tsx

TLDR

This file is a test file for the DeleteBoardDialog component in the sidebar. It contains two test cases, "Cancel should not submit" and "Delete should submit", which simulate the behavior of clicking the cancel and delete buttons respectively. The file also includes two helper functions, renderTest and TestComponent, which are used to render and test the component.

Methods

renderTest

This function is a helper function used to render the DeleteBoardDialog component for testing purposes. It creates a root portal div, appends it to the document body, and renders the TestComponent within the IntlProvider. It returns the container element.

TestComponent

This function is a React component used within the renderTest function. It uses the useState hook to manage the isDeleted and isOpen state variables. It renders the DeleteBoardDialog component if isOpen is true, passing in the boardTitle, onClose, and onDelete properties.

Classes

None

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

import React, {useState} from 'react'
import {IntlProvider} from 'react-intl'

import userEvent from '@testing-library/user-event'
import {act, render} from '@testing-library/react'

import DeleteBoardDialog from './deleteBoardDialog'

describe('components/sidebar/DeleteBoardDialog', () => {
    it('Cancel should not submit', async () => {
        const container = renderTest()

        const cancelButton = container.querySelector('.dialog .footer button:not(.danger)')
        expect(cancelButton).not.toBeFalsy()
        expect(cancelButton?.textContent).toBe('Cancel')
        await act(async () => userEvent.click(cancelButton as Element))

        expect(container).toMatchSnapshot()
    })

    it('Delete should submit', async () => {
        const container = renderTest()

        const deleteButton = container.querySelector('.dialog .footer button.danger')
        expect(deleteButton).not.toBeFalsy()
        expect(deleteButton?.textContent).toBe('Delete')
        await act(async () => userEvent.click(deleteButton as Element))

        expect(container).toMatchSnapshot()
    })

    function renderTest() {
        const rootPortalDiv = document.createElement('div')
        rootPortalDiv.id = 'focalboard-root-portal'

        const {container} = render(<TestComponent/>, {container: document.body.appendChild(rootPortalDiv)})
        return container
    }

    function TestComponent() {
        const [isDeleted, setDeleted] = useState(false)
        const [isOpen, setOpen] = useState(true)

        return (<IntlProvider locale='en'>
            {isDeleted ? 'deleted' : 'exists'}
            {isOpen &&
            <DeleteBoardDialog
                boardTitle={'Delete'}
                onClose={() => setOpen(false)}
                onDelete={async () => setDeleted(true)}
            />}
        </IntlProvider>)
    }
})