make sure setValue receives empty string (#1444)
* make sure setValue receives empty string * fix lint errors
This commit is contained in:
parent
7ca76b9db1
commit
e18ecc3be2
3 changed files with 98 additions and 5 deletions
|
@ -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
|
||||
|
|
|
@ -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()
|
||||
})
|
||||
})
|
||||
|
|
|
@ -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'}
|
||||
/>
|
||||
|
|
Loading…
Reference in a new issue