make sure setValue receives empty string (#1444)

* make sure setValue receives empty string

* fix lint errors
This commit is contained in:
Scott Bishel 2021-10-06 07:57:16 -06:00 committed by GitHub
parent 7ca76b9db1
commit e18ecc3be2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 98 additions and 5 deletions

View file

@ -1,5 +1,44 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`components/propertyValueElement Generic fields should allow cancel 1`] = `
<div>
<input
class="Editable octo-propertyvalue"
placeholder="Empty"
spellcheck="true"
style="width: 5px;"
title=""
value=""
/>
</div>
`;
exports[`components/propertyValueElement URL fields should allow cancel 1`] = `
<div>
<div
class="URLProperty property-link url"
>
<input
class="Editable octo-propertyvalue"
placeholder="Empty"
style="width: 5px;"
title="http://localhost"
value="http://localhost"
/>
<a
class="Link__button"
href="http://localhost"
rel="noreferrer"
target="_blank"
>
<i
class="CompassIcon icon-link-variant LinkIcon"
/>
</a>
</div>
</div>
`;
exports[`components/propertyValueElement should match snapshot, date, array value 1`] = `
<div>
<div

View file

@ -4,13 +4,11 @@
import React from 'react'
import {render} from '@testing-library/react'
import '@testing-library/jest-dom'
import userEvent from '@testing-library/user-event'
import {wrapDNDIntl} from '../testUtils'
import 'isomorphic-fetch'
import {IPropertyTemplate, IPropertyOption} from '../blocks/board'
import {TestBlockFactory} from '../test/testBlockFactory'
import PropertyValueElement from './propertyValueElement'
@ -188,4 +186,60 @@ describe('components/propertyValueElement', () => {
const {container} = render(component)
expect(container).toMatchSnapshot()
})
test('URL fields should allow cancel', () => {
const propertyTemplate: IPropertyTemplate = {
id: 'property_url',
name: 'Property URL',
type: 'url',
options: [],
}
const component = wrapDNDIntl(
<PropertyValueElement
board={board}
readOnly={false}
card={card}
contents={[]}
comments={[comments]}
propertyTemplate={propertyTemplate}
showEmptyPlaceholder={true}
/>,
)
const {container} = render(component)
const editElement = container.querySelector('.Editable')
expect(editElement).toBeDefined()
userEvent.type(editElement!, 'http://test{esc}')
expect(container).toMatchSnapshot()
})
test('Generic fields should allow cancel', () => {
const propertyTemplate: IPropertyTemplate = {
id: 'text',
name: 'Generic Text',
type: 'text',
options: [],
}
const component = wrapDNDIntl(
<PropertyValueElement
board={board}
readOnly={false}
card={card}
contents={[]}
comments={[comments]}
propertyTemplate={propertyTemplate}
showEmptyPlaceholder={true}
/>,
)
const {container} = render(component)
const editElement = container.querySelector('.Editable')
expect(editElement).toBeDefined()
userEvent.type(editElement!, 'http://test{esc}')
expect(container).toMatchSnapshot()
})
})

View file

@ -182,7 +182,7 @@ const PropertyValueElement = (props:Props): JSX.Element => {
placeholder={emptyDisplayValue}
onChange={setValue}
onSave={saveTextProperty}
onCancel={() => setValue(propertyValue)}
onCancel={() => setValue(propertyValue || '')}
validator={(newValue) => validateProp(propertyTemplate.type, newValue)}
/>
)
@ -236,7 +236,7 @@ const PropertyValueElement = (props:Props): JSX.Element => {
autoExpand={true}
onChange={setValue}
onSave={saveTextProperty}
onCancel={() => setValue(propertyValue)}
onCancel={() => setValue(propertyValue || '')}
validator={(newValue) => validateProp(propertyTemplate.type, newValue)}
spellCheck={propertyTemplate.type === 'text'}
/>