GH-1136 - fix for when property value is an array (#1174)
* fix for when property value is an array * remove log statement * remove async from tests
This commit is contained in:
Scott Bishel
GitHub
parent
fae2ac150e
commit
730a7af39a
3 changed files with 355 additions and 4 deletions
|
|
@ -0,0 +1,151 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`components/propertyValueElement should match snapshot, date, array value 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="DateRange "
|
||||
>
|
||||
<button
|
||||
class="Button "
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
title="Empty"
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`components/propertyValueElement should match snapshot, multi-select 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="octo-propertyvalue"
|
||||
data-testid="multiselect-non-editable"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="Label propColorBrown "
|
||||
>
|
||||
value 1
|
||||
</span>
|
||||
<span
|
||||
class="Label propColorBrown "
|
||||
>
|
||||
value 2
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`components/propertyValueElement should match snapshot, person, array value 1`] = `
|
||||
<div>
|
||||
<input
|
||||
class="Editable octo-propertyvalue"
|
||||
placeholder=""
|
||||
spellcheck="true"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`components/propertyValueElement should match snapshot, select 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="octo-propertyvalue"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="Label propColorBrown "
|
||||
>
|
||||
<span
|
||||
class="Label-text"
|
||||
>
|
||||
value 1
|
||||
</span>
|
||||
<div
|
||||
aria-label="Clear"
|
||||
class="Button IconButton margin-left delete-value"
|
||||
role="button"
|
||||
title="Clear"
|
||||
>
|
||||
<i
|
||||
class="CompassIcon icon-close CloseIcon"
|
||||
/>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`components/propertyValueElement should match snapshot, select, read-only 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="octo-propertyvalue"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="Label propColorBrown "
|
||||
>
|
||||
<span
|
||||
class="Label-text"
|
||||
>
|
||||
value 1
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`components/propertyValueElement should match snapshot, url, array value 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="URLProperty property-link url"
|
||||
>
|
||||
<input
|
||||
class="Editable octo-propertyvalue"
|
||||
placeholder=""
|
||||
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, url, array value 2`] = `
|
||||
<div>
|
||||
<div
|
||||
class="URLProperty property-link url"
|
||||
>
|
||||
<input
|
||||
class="Editable octo-propertyvalue"
|
||||
placeholder=""
|
||||
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>
|
||||
`;
|
||||
200
webapp/src/components/propertyValueElement.test.tsx
Normal file
200
webapp/src/components/propertyValueElement.test.tsx
Normal file
|
|
@ -0,0 +1,200 @@
|
|||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
import React from 'react'
|
||||
import {render} from '@testing-library/react'
|
||||
import '@testing-library/jest-dom'
|
||||
import {IntlProvider} from 'react-intl'
|
||||
|
||||
import 'isomorphic-fetch'
|
||||
import {DndProvider} from 'react-dnd'
|
||||
import {HTML5Backend} from 'react-dnd-html5-backend'
|
||||
|
||||
import {IPropertyTemplate, IPropertyOption} from '../blocks/board'
|
||||
|
||||
import {TestBlockFactory} from '../test/testBlockFactory'
|
||||
|
||||
import PropertyValueElement from './propertyValueElement'
|
||||
|
||||
const wrapProviders = (children: any) => {
|
||||
return (
|
||||
<DndProvider backend={HTML5Backend}>
|
||||
<IntlProvider locale='en'>{children}</IntlProvider>
|
||||
</DndProvider>
|
||||
)
|
||||
}
|
||||
|
||||
describe('components/propertyValueElement', () => {
|
||||
const board = TestBlockFactory.createBoard()
|
||||
const card = TestBlockFactory.createCard(board)
|
||||
const comments = TestBlockFactory.createComment(card)
|
||||
|
||||
test('should match snapshot, select', async () => {
|
||||
const propertyTemplate = board.fields.cardProperties.find((p) => p.id === 'property1')
|
||||
const component = wrapProviders(
|
||||
<PropertyValueElement
|
||||
board={board}
|
||||
readOnly={false}
|
||||
card={card}
|
||||
contents={[]}
|
||||
comments={[comments]}
|
||||
propertyTemplate={propertyTemplate || board.fields.cardProperties[0]}
|
||||
emptyDisplayValue={'empty'}
|
||||
/>,
|
||||
)
|
||||
|
||||
const {container} = render(component)
|
||||
expect(container).toMatchSnapshot()
|
||||
})
|
||||
|
||||
test('should match snapshot, select, read-only', async () => {
|
||||
const propertyTemplate = board.fields.cardProperties.find((p) => p.id === 'property1')
|
||||
const component = wrapProviders(
|
||||
<PropertyValueElement
|
||||
board={board}
|
||||
readOnly={true}
|
||||
card={card}
|
||||
contents={[]}
|
||||
comments={[comments]}
|
||||
propertyTemplate={propertyTemplate || board.fields.cardProperties[0]}
|
||||
emptyDisplayValue={'empty'}
|
||||
/>,
|
||||
)
|
||||
|
||||
const {container} = render(component)
|
||||
expect(container).toMatchSnapshot()
|
||||
})
|
||||
|
||||
test('should match snapshot, multi-select', () => {
|
||||
const options: IPropertyOption[] = []
|
||||
for (let i = 0; i < 3; i++) {
|
||||
const propertyOption: IPropertyOption = {
|
||||
id: `ms${i}`,
|
||||
value: `value ${i}`,
|
||||
color: 'propColorBrown',
|
||||
}
|
||||
options.push(propertyOption)
|
||||
}
|
||||
|
||||
const propertyTemplate: IPropertyTemplate = {
|
||||
id: 'multiSelect',
|
||||
name: 'MultiSelect',
|
||||
type: 'multiSelect',
|
||||
options,
|
||||
}
|
||||
card.fields.properties.multiSelect = ['ms1', 'ms2']
|
||||
const component = wrapProviders(
|
||||
<PropertyValueElement
|
||||
board={board}
|
||||
readOnly={false}
|
||||
card={card}
|
||||
contents={[]}
|
||||
comments={[comments]}
|
||||
propertyTemplate={propertyTemplate}
|
||||
emptyDisplayValue={'empty'}
|
||||
/>,
|
||||
)
|
||||
|
||||
const {container} = render(component)
|
||||
expect(container).toMatchSnapshot()
|
||||
})
|
||||
|
||||
test('should match snapshot, url, array value', () => {
|
||||
const propertyTemplate: IPropertyTemplate = {
|
||||
id: 'property_url',
|
||||
name: 'Property URL',
|
||||
type: 'url',
|
||||
options: [],
|
||||
}
|
||||
card.fields.properties.property_url = ['http://localhost']
|
||||
|
||||
const component = wrapProviders(
|
||||
<PropertyValueElement
|
||||
board={board}
|
||||
readOnly={false}
|
||||
card={card}
|
||||
contents={[]}
|
||||
comments={[comments]}
|
||||
propertyTemplate={propertyTemplate}
|
||||
emptyDisplayValue={'empty'}
|
||||
/>,
|
||||
)
|
||||
|
||||
const {container} = render(component)
|
||||
expect(container).toMatchSnapshot()
|
||||
})
|
||||
|
||||
test('should match snapshot, url, array value', () => {
|
||||
const propertyTemplate: IPropertyTemplate = {
|
||||
id: 'property_url',
|
||||
name: 'Property URL',
|
||||
type: 'url',
|
||||
options: [],
|
||||
}
|
||||
card.fields.properties.property_url = ['http://localhost']
|
||||
|
||||
const component = wrapProviders(
|
||||
<PropertyValueElement
|
||||
board={board}
|
||||
readOnly={false}
|
||||
card={card}
|
||||
contents={[]}
|
||||
comments={[comments]}
|
||||
propertyTemplate={propertyTemplate}
|
||||
emptyDisplayValue={'empty'}
|
||||
/>,
|
||||
)
|
||||
|
||||
const {container} = render(component)
|
||||
expect(container).toMatchSnapshot()
|
||||
})
|
||||
|
||||
test('should match snapshot, person, array value', () => {
|
||||
const propertyTemplate: IPropertyTemplate = {
|
||||
id: 'text',
|
||||
name: 'Generic Text',
|
||||
type: 'text',
|
||||
options: [],
|
||||
}
|
||||
card.fields.properties.person = ['value1', 'value2']
|
||||
|
||||
const component = wrapProviders(
|
||||
<PropertyValueElement
|
||||
board={board}
|
||||
readOnly={false}
|
||||
card={card}
|
||||
contents={[]}
|
||||
comments={[comments]}
|
||||
propertyTemplate={propertyTemplate}
|
||||
emptyDisplayValue={'empty'}
|
||||
/>,
|
||||
)
|
||||
|
||||
const {container} = render(component)
|
||||
expect(container).toMatchSnapshot()
|
||||
})
|
||||
|
||||
test('should match snapshot, date, array value', () => {
|
||||
const propertyTemplate: IPropertyTemplate = {
|
||||
id: 'date',
|
||||
name: 'Date',
|
||||
type: 'date',
|
||||
options: [],
|
||||
}
|
||||
card.fields.properties.date = ['invalid date']
|
||||
|
||||
const component = wrapProviders(
|
||||
<PropertyValueElement
|
||||
board={board}
|
||||
readOnly={false}
|
||||
card={card}
|
||||
contents={[]}
|
||||
comments={[comments]}
|
||||
propertyTemplate={propertyTemplate}
|
||||
emptyDisplayValue={'empty'}
|
||||
/>,
|
||||
)
|
||||
const {container} = render(component)
|
||||
expect(container).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
|
|
@ -188,7 +188,7 @@ const PropertyValueElement = (props:Props): JSX.Element => {
|
|||
} else if (propertyTemplate.type === 'person') {
|
||||
return (
|
||||
<UserProperty
|
||||
value={propertyValue as string}
|
||||
value={propertyValue.toString()}
|
||||
readonly={readOnly}
|
||||
onChange={(newValue) => mutator.changePropertyValue(card, propertyTemplate.id, newValue)}
|
||||
/>
|
||||
|
|
@ -200,14 +200,14 @@ const PropertyValueElement = (props:Props): JSX.Element => {
|
|||
return (
|
||||
<DateRange
|
||||
className='octo-propertyvalue'
|
||||
value={value as string}
|
||||
value={value.toString()}
|
||||
onChange={(newValue) => mutator.changePropertyValue(card, propertyTemplate.id, newValue)}
|
||||
/>
|
||||
)
|
||||
} else if (propertyTemplate.type === 'url') {
|
||||
return (
|
||||
<URLProperty
|
||||
value={value as string}
|
||||
value={value.toString()}
|
||||
readonly={readOnly}
|
||||
onChange={setValue}
|
||||
onSave={saveTextProperty}
|
||||
|
|
@ -261,7 +261,7 @@ const PropertyValueElement = (props:Props): JSX.Element => {
|
|||
<Editable
|
||||
className='octo-propertyvalue'
|
||||
placeholderText=''
|
||||
value={value as string}
|
||||
value={value.toString()}
|
||||
onChange={setValue}
|
||||
onSave={saveTextProperty}
|
||||
onCancel={() => setValue(propertyValue)}
|
||||
|
|
|
|||
Loading…
Reference in a new issue