propertyMenu.test.tsx

TLDR

This file contains test cases for the PropertyMenu component. It tests various behaviors of the component, including displaying the type of property, handling delete event, handling name change event, handling type change event, handling name and type change event, and matching snapshot.

Methods

None

Classes

Class PropertyMenu

The PropertyMenu class is a React component that is responsible for rendering a menu for a property. It takes several props including propertyId, propertyName, propertyType, onTypeAndNameChanged, and onDelete. The component is used to display the type of the property, handle delete event, handle name change event, handle type change event, handle name and type change event, and match snapshot.

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

import React from 'react'
import {fireEvent, render} from '@testing-library/react'
import '@testing-library/jest-dom'

import {wrapIntl} from '../testUtils'
import propsRegistry from '../properties'

import PropertyMenu from './propertyMenu'

describe('widgets/PropertyMenu', () => {
    beforeEach(() => {
        // Quick fix to disregard console error when unmounting a component
        console.error = jest.fn()
        document.execCommand = jest.fn()
    })

    test('should display the type of property', () => {
        const callback = jest.fn()
        const component = wrapIntl(
            <PropertyMenu
                propertyId={'id'}
                propertyName={'email of a person'}
                propertyType={propsRegistry.get('email')}
                onTypeAndNameChanged={callback}
                onDelete={callback}
            />,
        )
        const {getByText} = render(component)
        expect(getByText('Type: Email')).toBeVisible()
    })

    test('handles delete event', () => {
        const callback = jest.fn()
        const component = wrapIntl(
            <PropertyMenu
                propertyId={'id'}
                propertyName={'email of a person'}
                propertyType={propsRegistry.get('email')}
                onTypeAndNameChanged={callback}
                onDelete={callback}
            />,
        )
        const {getByText} = render(component)
        fireEvent.click(getByText(/delete/i))
        expect(callback).toHaveBeenCalledWith('id')
    })

    test('handles name change event', () => {
        const callback = jest.fn()
        const component = wrapIntl(
            <PropertyMenu
                propertyId={'id'}
                propertyName={'test-property'}
                propertyType={propsRegistry.get('text')}
                onTypeAndNameChanged={callback}
                onDelete={callback}
            />,
        )
        const {getByDisplayValue} = render(component)
        const input = getByDisplayValue(/test-property/i)
        fireEvent.change(input, {target: {value: 'changed name'}})
        fireEvent.blur(input)
        expect(callback).toHaveBeenCalledWith(propsRegistry.get('text'), 'changed name')
    })

    test('handles type change event', async () => {
        const callback = jest.fn()
        const component = wrapIntl(
            <PropertyMenu
                propertyId={'id'}
                propertyName={'test-property'}
                propertyType={propsRegistry.get('text')}
                onTypeAndNameChanged={callback}
                onDelete={callback}
            />,
        )
        const {getByText} = render(component)
        const menuOpen = getByText(/Type: Text/i)
        fireEvent.click(menuOpen)
        fireEvent.click(getByText('Select'))
        setTimeout(() => expect(callback).toHaveBeenCalledWith('select', 'test-property'), 2000)
    })

    test('handles name and type change event', () => {
        const callback = jest.fn()
        const component = wrapIntl(
            <PropertyMenu
                propertyId={'id'}
                propertyName={'test-property'}
                propertyType={propsRegistry.get('text')}
                onTypeAndNameChanged={callback}
                onDelete={callback}
            />,
        )
        const {getByDisplayValue, getByText} = render(component)
        const input = getByDisplayValue(/test-property/i)
        fireEvent.change(input, {target: {value: 'changed name'}})

        const menuOpen = getByText(/Type: Text/i)
        fireEvent.click(menuOpen)
        fireEvent.click(getByText('Select'))
        setTimeout(() => expect(callback).toHaveBeenCalledWith('select', 'changed name'), 2000)
    })

    test('should match snapshot', () => {
        const callback = jest.fn()
        const component = wrapIntl(
            <PropertyMenu
                propertyId={'id'}
                propertyName={'test-property'}
                propertyType={propsRegistry.get('text')}
                onTypeAndNameChanged={callback}
                onDelete={callback}
            />,
        )
        const {container, getByText} = render(component)
        const menuOpen = getByText(/Type: Text/i)
        fireEvent.click(menuOpen)
        expect(container).toMatchSnapshot()
    })
})