Skip to content

Commit

Permalink
Merge pull request #4697 from mattermost/pick-PR4694-MM-51842
Browse files Browse the repository at this point in the history
Cherry Pick #4694 Backport: MM-51842: fix value-change detection in number properties
  • Loading branch information
sbishel authored Apr 4, 2023
2 parents a184ef2 + 81ec1b8 commit 55ba9d8
Show file tree
Hide file tree
Showing 3 changed files with 86 additions and 1 deletion.
13 changes: 13 additions & 0 deletions webapp/src/properties/number/__snapshots__/number.test.tsx.snap
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`properties/number should match snapshot for number with empty value 1`] = `
<div>
<input
class="Editable octo-propertyvalue"
placeholder=""
style="width: 100%;"
title=""
value=""
/>
</div>
`;
72 changes: 72 additions & 0 deletions webapp/src/properties/number/number.test.tsx
Original file line number Diff line number Diff line change
@@ -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<typeof NumberEditor>

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((
<NumberEditor
{...baseProps}
/>
)),
)
expect(container).toMatchSnapshot()
})

it('should fire change event when valid number value is entered', async () => {
render(
wrapIntl(
<NumberEditor
{...baseProps}
/>,
),
)
const value = '42'
const input = screen.getByRole('textbox')
userEvent.type(input, `${value}{Enter}`)

expect(mockedMutator.changePropertyValue).toHaveBeenCalledWith(board.id, card, propertyTemplate.id, `${value}`)
})
})
2 changes: 1 addition & 1 deletion webapp/src/properties/number/number.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const Number = (props: PropertyProps): JSX.Element => {
return (
<BaseTextEditor
{...props}
validator={() => !isNaN(parseInt(props.propertyValue as string, 10))}
validator={() => props.propertyValue === '' || !isNaN(parseInt(props.propertyValue as string, 10))}
/>
)
}
Expand Down

0 comments on commit 55ba9d8

Please sign in to comment.