calculationRow.test.tsx

TLDR

The file calculationRow.test.tsx contains test cases for the CalculationRow component. It tests the rendering and snapshot of the component in different scenarios.

Methods (if applicable)

None

Classes (if applicable)

None

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

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

import {TestBlockFactory} from '../../../test/testBlockFactory'
import {FetchMock} from '../../../test/fetchMock'
import 'isomorphic-fetch'
import {wrapDNDIntl} from '../../../testUtils'

import {ColumnResizeProvider} from '../tableColumnResizeContext'

import CalculationRow from './calculationRow'

global.fetch = FetchMock.fn

beforeEach(() => {
    FetchMock.fn.mockReset()
})

describe('components/table/calculation/CalculationRow', () => {
    const board = TestBlockFactory.createBoard()
    board.cardProperties.push({
        id: 'property_2',
        name: 'Property 2',
        type: 'text',
        options: [],
    })
    board.cardProperties.push({
        id: 'property_3',
        name: 'Property 3',
        type: 'text',
        options: [],
    })
    board.cardProperties.push({
        id: 'property_4',
        name: 'Property 4',
        type: 'text',
        options: [],
    })

    const view = TestBlockFactory.createBoardView(board)
    view.fields.visiblePropertyIds.push(...['property_2', 'property_3', 'property_4'])

    const card = TestBlockFactory.createCard(board)
    card.fields.properties.property_2 = 'Foo'
    card.fields.properties.property_3 = 'Bar'
    card.fields.properties.property_4 = 'Baz'

    const card2 = TestBlockFactory.createCard(board)
    card2.fields.properties.property_2 = 'Lorem'
    card2.fields.properties.property_3 = ''
    card2.fields.properties.property_4 = 'Baz'

    test('should render three calculation elements', async () => {
        FetchMock.fn.mockReturnValueOnce(FetchMock.jsonResponse(JSON.stringify([board, view, card])))

        const component = wrapDNDIntl(
            <ColumnResizeProvider
                columnWidths={{}}
                onResizeColumn={jest.fn()}
            >
                <CalculationRow
                    board={board}
                    cards={[card, card2]}
                    activeView={view}
                    readonly={false}
                />
            </ColumnResizeProvider>,
        )

        const {container} = render(component)
        expect(container).toMatchSnapshot()
    })

    test('should match snapshot', async () => {
        view.fields.columnCalculations = {
            property_2: 'count',
            property_3: 'countValue',
            property_4: 'countUniqueValue',
        }

        const component = wrapDNDIntl(
            <ColumnResizeProvider
                columnWidths={{}}
                onResizeColumn={jest.fn()}
            >
                <CalculationRow
                    board={board}
                    cards={[card, card2]}
                    activeView={view}
                    readonly={false}
                />
            </ColumnResizeProvider>,
        )

        const {container} = render(component)
        expect(container).toMatchSnapshot()
    })
})