Write component tests
Alex P
parent
31533c7093
commit
b3b3f97130
|
|
@ -11,7 +11,6 @@ import Row from 'src/shared/components/index_views/IndexListRow'
|
|||
import {Alignment} from 'src/clockface'
|
||||
import {
|
||||
IndexListColumn,
|
||||
IndexListRowColumn,
|
||||
IndexListRow,
|
||||
} from 'src/shared/components/index_views/IndexListTypes'
|
||||
|
||||
|
|
@ -46,7 +45,16 @@ class IndexList extends Component<Props> {
|
|||
if (rows.length) {
|
||||
return (
|
||||
<tbody className="index-list--body">
|
||||
{rows.map((row, i) => this.listRow(row.columns, i, row.disabled))}
|
||||
{rows.map((row, i) => (
|
||||
<Row
|
||||
key={`index-list--row-${i}`}
|
||||
rowIndex={i}
|
||||
rowColumns={row.columns}
|
||||
getColumnWidthPercent={this.getColumnWidthPercent}
|
||||
getRowColumnClassName={this.getRowColumnClassName}
|
||||
disabled={row.disabled}
|
||||
/>
|
||||
))}
|
||||
</tbody>
|
||||
)
|
||||
}
|
||||
|
|
@ -55,29 +63,15 @@ class IndexList extends Component<Props> {
|
|||
<tbody className="index-list--empty">
|
||||
<tr className="index-list--empty-row">
|
||||
<td colSpan={columns.length}>
|
||||
<div className="index-list--empty-cell">{emptyState}</div>
|
||||
<div className="index-list--empty-cell" data-test="empty-state">
|
||||
{emptyState}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
)
|
||||
}
|
||||
|
||||
private listRow = (
|
||||
rowColumns: IndexListRowColumn[],
|
||||
rowIndex: number,
|
||||
disabled: boolean
|
||||
): JSX.Element => {
|
||||
return (
|
||||
<Row
|
||||
rowIndex={rowIndex}
|
||||
rowColumns={rowColumns}
|
||||
getColumnWidthPercent={this.getColumnWidthPercent}
|
||||
getRowColumnClassName={this.getRowColumnClassName}
|
||||
disabled={disabled}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
private getRowColumnClassName = (
|
||||
columnKey: string,
|
||||
disabled: boolean
|
||||
|
|
|
|||
|
|
@ -21,15 +21,17 @@ class IndexListHeader extends Component<Props> {
|
|||
const {columns, getColumnWidthPercent} = this.props
|
||||
return (
|
||||
<thead className="index-list--header">
|
||||
{columns.map(column => (
|
||||
<th
|
||||
key={column.key}
|
||||
style={getColumnWidthPercent(column.key)}
|
||||
className={this.className(column.key)}
|
||||
>
|
||||
{column.title}
|
||||
</th>
|
||||
))}
|
||||
<tr>
|
||||
{columns.map(column => (
|
||||
<th
|
||||
key={column.key}
|
||||
style={getColumnWidthPercent(column.key)}
|
||||
className={this.className(column.key)}
|
||||
>
|
||||
{column.title}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,106 @@
|
|||
import React from 'react'
|
||||
import {mount} from 'enzyme'
|
||||
|
||||
import {Alignment} from 'src/clockface'
|
||||
import IndexList from 'src/shared/components/index_views/IndexList'
|
||||
|
||||
describe('IndexList', () => {
|
||||
let wrapper
|
||||
|
||||
const wrapperSetup = (override = {}) => {
|
||||
const emptyState = <div>Empty</div>
|
||||
|
||||
const columns = [
|
||||
{
|
||||
key: 'test--fruit',
|
||||
size: 500,
|
||||
title: 'Fruit',
|
||||
align: Alignment.Left,
|
||||
showOnHover: false,
|
||||
},
|
||||
{
|
||||
key: 'test--calories',
|
||||
size: 500,
|
||||
title: 'Calories',
|
||||
align: Alignment.Left,
|
||||
showOnHover: false,
|
||||
},
|
||||
]
|
||||
|
||||
const rows = [
|
||||
{
|
||||
disabled: false,
|
||||
columns: [
|
||||
{
|
||||
key: 'test--fruit',
|
||||
contents: 'Apple',
|
||||
},
|
||||
{
|
||||
key: 'test--calories',
|
||||
contents: '500',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
disabled: false,
|
||||
columns: [
|
||||
{
|
||||
key: 'test--fruit',
|
||||
contents: 'Pear',
|
||||
},
|
||||
{
|
||||
key: 'test--calories',
|
||||
contents: '1000',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
disabled: false,
|
||||
columns: [
|
||||
{
|
||||
key: 'test--fruit',
|
||||
contents: 'Banana',
|
||||
},
|
||||
{
|
||||
key: 'test--calories',
|
||||
contents: '200',
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const props = {
|
||||
columns,
|
||||
rows,
|
||||
emptyState,
|
||||
...override,
|
||||
}
|
||||
|
||||
return mount(<IndexList {...props} />)
|
||||
}
|
||||
|
||||
it('mounts without exploding', () => {
|
||||
wrapper = wrapperSetup()
|
||||
expect(wrapper).toHaveLength(1)
|
||||
})
|
||||
|
||||
it('matches snapshot with minimal props', () => {
|
||||
wrapper = wrapperSetup()
|
||||
expect(wrapper).toMatchSnapshot()
|
||||
})
|
||||
|
||||
it('renders empty state when 0 rows exist', () => {
|
||||
wrapper = wrapperSetup({rows: []})
|
||||
|
||||
const emptyDiv = wrapper
|
||||
.find('div')
|
||||
.filterWhere(div => div.prop('data-test'))
|
||||
|
||||
expect(emptyDiv.prop('data-test')).toBe('empty-state')
|
||||
})
|
||||
|
||||
it('matches snapshot when 0 rows exist', () => {
|
||||
wrapper = wrapperSetup({rows: []})
|
||||
expect(wrapper).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
|
|
@ -0,0 +1,397 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`IndexList matches snapshot when 0 rows exist 1`] = `
|
||||
<IndexList
|
||||
columns={
|
||||
Array [
|
||||
Object {
|
||||
"align": "left",
|
||||
"key": "test--fruit",
|
||||
"showOnHover": false,
|
||||
"size": 500,
|
||||
"title": "Fruit",
|
||||
},
|
||||
Object {
|
||||
"align": "left",
|
||||
"key": "test--calories",
|
||||
"showOnHover": false,
|
||||
"size": 500,
|
||||
"title": "Calories",
|
||||
},
|
||||
]
|
||||
}
|
||||
emptyState={
|
||||
<div>
|
||||
Empty
|
||||
</div>
|
||||
}
|
||||
rows={Array []}
|
||||
>
|
||||
<table
|
||||
className="index-list"
|
||||
>
|
||||
<IndexListHeader
|
||||
columns={
|
||||
Array [
|
||||
Object {
|
||||
"align": "left",
|
||||
"key": "test--fruit",
|
||||
"showOnHover": false,
|
||||
"size": 500,
|
||||
"title": "Fruit",
|
||||
},
|
||||
Object {
|
||||
"align": "left",
|
||||
"key": "test--calories",
|
||||
"showOnHover": false,
|
||||
"size": 500,
|
||||
"title": "Calories",
|
||||
},
|
||||
]
|
||||
}
|
||||
getColumnWidthPercent={[Function]}
|
||||
>
|
||||
<thead
|
||||
className="index-list--header"
|
||||
>
|
||||
<tr>
|
||||
<th
|
||||
className="index-list--header-cell index-list--align-left"
|
||||
key="test--fruit"
|
||||
style={
|
||||
Object {
|
||||
"width": "50%",
|
||||
}
|
||||
}
|
||||
>
|
||||
Fruit
|
||||
</th>
|
||||
<th
|
||||
className="index-list--header-cell index-list--align-left"
|
||||
key="test--calories"
|
||||
style={
|
||||
Object {
|
||||
"width": "50%",
|
||||
}
|
||||
}
|
||||
>
|
||||
Calories
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</IndexListHeader>
|
||||
<tbody
|
||||
className="index-list--empty"
|
||||
>
|
||||
<tr
|
||||
className="index-list--empty-row"
|
||||
>
|
||||
<td
|
||||
colSpan={2}
|
||||
>
|
||||
<div
|
||||
className="index-list--empty-cell"
|
||||
data-test="empty-state"
|
||||
>
|
||||
<div>
|
||||
Empty
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</IndexList>
|
||||
`;
|
||||
|
||||
exports[`IndexList matches snapshot with minimal props 1`] = `
|
||||
<IndexList
|
||||
columns={
|
||||
Array [
|
||||
Object {
|
||||
"align": "left",
|
||||
"key": "test--fruit",
|
||||
"showOnHover": false,
|
||||
"size": 500,
|
||||
"title": "Fruit",
|
||||
},
|
||||
Object {
|
||||
"align": "left",
|
||||
"key": "test--calories",
|
||||
"showOnHover": false,
|
||||
"size": 500,
|
||||
"title": "Calories",
|
||||
},
|
||||
]
|
||||
}
|
||||
emptyState={
|
||||
<div>
|
||||
Empty
|
||||
</div>
|
||||
}
|
||||
rows={
|
||||
Array [
|
||||
Object {
|
||||
"columns": Array [
|
||||
Object {
|
||||
"contents": "Apple",
|
||||
"key": "test--fruit",
|
||||
},
|
||||
Object {
|
||||
"contents": "500",
|
||||
"key": "test--calories",
|
||||
},
|
||||
],
|
||||
"disabled": false,
|
||||
},
|
||||
Object {
|
||||
"columns": Array [
|
||||
Object {
|
||||
"contents": "Pear",
|
||||
"key": "test--fruit",
|
||||
},
|
||||
Object {
|
||||
"contents": "1000",
|
||||
"key": "test--calories",
|
||||
},
|
||||
],
|
||||
"disabled": false,
|
||||
},
|
||||
Object {
|
||||
"columns": Array [
|
||||
Object {
|
||||
"contents": "Banana",
|
||||
"key": "test--fruit",
|
||||
},
|
||||
Object {
|
||||
"contents": "200",
|
||||
"key": "test--calories",
|
||||
},
|
||||
],
|
||||
"disabled": false,
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
<table
|
||||
className="index-list"
|
||||
>
|
||||
<IndexListHeader
|
||||
columns={
|
||||
Array [
|
||||
Object {
|
||||
"align": "left",
|
||||
"key": "test--fruit",
|
||||
"showOnHover": false,
|
||||
"size": 500,
|
||||
"title": "Fruit",
|
||||
},
|
||||
Object {
|
||||
"align": "left",
|
||||
"key": "test--calories",
|
||||
"showOnHover": false,
|
||||
"size": 500,
|
||||
"title": "Calories",
|
||||
},
|
||||
]
|
||||
}
|
||||
getColumnWidthPercent={[Function]}
|
||||
>
|
||||
<thead
|
||||
className="index-list--header"
|
||||
>
|
||||
<tr>
|
||||
<th
|
||||
className="index-list--header-cell index-list--align-left"
|
||||
key="test--fruit"
|
||||
style={
|
||||
Object {
|
||||
"width": "50%",
|
||||
}
|
||||
}
|
||||
>
|
||||
Fruit
|
||||
</th>
|
||||
<th
|
||||
className="index-list--header-cell index-list--align-left"
|
||||
key="test--calories"
|
||||
style={
|
||||
Object {
|
||||
"width": "50%",
|
||||
}
|
||||
}
|
||||
>
|
||||
Calories
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</IndexListHeader>
|
||||
<tbody
|
||||
className="index-list--body"
|
||||
>
|
||||
<IndexListRow
|
||||
disabled={false}
|
||||
getColumnWidthPercent={[Function]}
|
||||
getRowColumnClassName={[Function]}
|
||||
key="index-list--row-0"
|
||||
rowColumns={
|
||||
Array [
|
||||
Object {
|
||||
"contents": "Apple",
|
||||
"key": "test--fruit",
|
||||
},
|
||||
Object {
|
||||
"contents": "500",
|
||||
"key": "test--calories",
|
||||
},
|
||||
]
|
||||
}
|
||||
rowIndex={0}
|
||||
>
|
||||
<tr
|
||||
className="index-list--row"
|
||||
>
|
||||
<td
|
||||
className="index-list--row-cell index-list--align-left"
|
||||
key="index-list--row-0-col-test--fruit"
|
||||
style={
|
||||
Object {
|
||||
"width": "50%",
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="index-list--cell"
|
||||
>
|
||||
Apple
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
className="index-list--row-cell index-list--align-left"
|
||||
key="index-list--row-0-col-test--calories"
|
||||
style={
|
||||
Object {
|
||||
"width": "50%",
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="index-list--cell"
|
||||
>
|
||||
500
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</IndexListRow>
|
||||
<IndexListRow
|
||||
disabled={false}
|
||||
getColumnWidthPercent={[Function]}
|
||||
getRowColumnClassName={[Function]}
|
||||
key="index-list--row-1"
|
||||
rowColumns={
|
||||
Array [
|
||||
Object {
|
||||
"contents": "Pear",
|
||||
"key": "test--fruit",
|
||||
},
|
||||
Object {
|
||||
"contents": "1000",
|
||||
"key": "test--calories",
|
||||
},
|
||||
]
|
||||
}
|
||||
rowIndex={1}
|
||||
>
|
||||
<tr
|
||||
className="index-list--row"
|
||||
>
|
||||
<td
|
||||
className="index-list--row-cell index-list--align-left"
|
||||
key="index-list--row-1-col-test--fruit"
|
||||
style={
|
||||
Object {
|
||||
"width": "50%",
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="index-list--cell"
|
||||
>
|
||||
Pear
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
className="index-list--row-cell index-list--align-left"
|
||||
key="index-list--row-1-col-test--calories"
|
||||
style={
|
||||
Object {
|
||||
"width": "50%",
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="index-list--cell"
|
||||
>
|
||||
1000
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</IndexListRow>
|
||||
<IndexListRow
|
||||
disabled={false}
|
||||
getColumnWidthPercent={[Function]}
|
||||
getRowColumnClassName={[Function]}
|
||||
key="index-list--row-2"
|
||||
rowColumns={
|
||||
Array [
|
||||
Object {
|
||||
"contents": "Banana",
|
||||
"key": "test--fruit",
|
||||
},
|
||||
Object {
|
||||
"contents": "200",
|
||||
"key": "test--calories",
|
||||
},
|
||||
]
|
||||
}
|
||||
rowIndex={2}
|
||||
>
|
||||
<tr
|
||||
className="index-list--row"
|
||||
>
|
||||
<td
|
||||
className="index-list--row-cell index-list--align-left"
|
||||
key="index-list--row-2-col-test--fruit"
|
||||
style={
|
||||
Object {
|
||||
"width": "50%",
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="index-list--cell"
|
||||
>
|
||||
Banana
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
className="index-list--row-cell index-list--align-left"
|
||||
key="index-list--row-2-col-test--calories"
|
||||
style={
|
||||
Object {
|
||||
"width": "50%",
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="index-list--cell"
|
||||
>
|
||||
200
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</IndexListRow>
|
||||
</tbody>
|
||||
</table>
|
||||
</IndexList>
|
||||
`;
|
||||
Loading…
Reference in New Issue