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))}
/>
)
}