diff --git a/webapp/src/properties/number/__snapshots__/number.test.tsx.snap b/webapp/src/properties/number/__snapshots__/number.test.tsx.snap new file mode 100644 index 000000000..8e914cd2c --- /dev/null +++ b/webapp/src/properties/number/__snapshots__/number.test.tsx.snap @@ -0,0 +1,13 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`properties/number should match snapshot for number with empty value 1`] = ` +
+ +
+`; diff --git a/webapp/src/properties/number/number.test.tsx b/webapp/src/properties/number/number.test.tsx new file mode 100644 index 000000000..6bb9194b1 --- /dev/null +++ b/webapp/src/properties/number/number.test.tsx @@ -0,0 +1,72 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React, {ComponentProps} from 'react' +import {render, screen} from '@testing-library/react' +import {mocked} from 'jest-mock' + +import userEvent from '@testing-library/user-event' + +import {wrapIntl} from '../../testUtils' +import {TestBlockFactory} from '../../test/testBlockFactory' +import mutator from '../../mutator' + +import {Board, IPropertyTemplate} from '../..//blocks/board' +import {Card} from '../../blocks/card' + +import NumberProperty from './property' +import NumberEditor from './number' + +jest.mock('../../components/flashMessages') +jest.mock('../../mutator') + +const mockedMutator = mocked(mutator) + +describe('properties/number', () => { + let board: Board + let card: Card + let propertyTemplate: IPropertyTemplate + let baseProps: ComponentProps + + beforeEach(() => { + board = TestBlockFactory.createBoard() + card = TestBlockFactory.createCard() + propertyTemplate = board.cardProperties[0] + + baseProps = { + property: new NumberProperty(), + card, + board, + propertyTemplate, + propertyValue: '', + readOnly: false, + showEmptyPlaceholder: false, + } + }) + + it('should match snapshot for number with empty value', () => { + const {container} = render( + wrapIntl(( + + )), + ) + expect(container).toMatchSnapshot() + }) + + it('should fire change event when valid number value is entered', async () => { + render( + wrapIntl( + , + ), + ) + const value = '42' + const input = screen.getByRole('textbox') + userEvent.type(input, `${value}{Enter}`) + + expect(mockedMutator.changePropertyValue).toHaveBeenCalledWith(board.id, card, propertyTemplate.id, `${value}`) + }) +}) diff --git a/webapp/src/properties/number/number.tsx b/webapp/src/properties/number/number.tsx index b22b43105..5f607f9eb 100644 --- a/webapp/src/properties/number/number.tsx +++ b/webapp/src/properties/number/number.tsx @@ -10,7 +10,7 @@ const Number = (props: PropertyProps): JSX.Element => { return ( !isNaN(parseInt(props.propertyValue as string, 10))} + validator={() => props.propertyValue === '' || !isNaN(parseInt(props.propertyValue as string, 10))} /> ) }