Update unit test
Alex P
parent
2f4c7ed216
commit
11fd11091e
|
|
@ -5,7 +5,7 @@ import React, {Component} from 'react'
|
|||
import {ErrorHandling} from 'src/shared/decorators/errors'
|
||||
|
||||
interface Props {
|
||||
children: JSX.Element[] | JSX.Element
|
||||
children?: JSX.Element[] | JSX.Element
|
||||
emptyState: JSX.Element
|
||||
columnCount: number
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,96 +1,71 @@
|
|||
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 wrapperSetup = (empty: boolean) => {
|
||||
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 header = (
|
||||
<IndexList.Header key="index-header">
|
||||
<IndexList.HeaderCell columnName="Fruit" width="50%" />
|
||||
<IndexList.HeaderCell columnName="Calories" width="50%" />
|
||||
</IndexList.Header>
|
||||
)
|
||||
|
||||
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 body = (
|
||||
<IndexList.Body key="index-body" columnCount={2} emptyState={emptyState}>
|
||||
<IndexList.Row>
|
||||
<IndexList.Cell>Apple</IndexList.Cell>
|
||||
<IndexList.Cell>500</IndexList.Cell>
|
||||
</IndexList.Row>
|
||||
<IndexList.Row>
|
||||
<IndexList.Cell>Pear</IndexList.Cell>
|
||||
<IndexList.Cell>1000</IndexList.Cell>
|
||||
</IndexList.Row>
|
||||
<IndexList.Row>
|
||||
<IndexList.Cell>Banana</IndexList.Cell>
|
||||
<IndexList.Cell>100</IndexList.Cell>
|
||||
</IndexList.Row>
|
||||
</IndexList.Body>
|
||||
)
|
||||
|
||||
const emptyBody = (
|
||||
<IndexList.Body
|
||||
key="index-body"
|
||||
columnCount={2}
|
||||
emptyState={emptyState}
|
||||
/>
|
||||
)
|
||||
|
||||
let children = [header, body]
|
||||
|
||||
if (empty) {
|
||||
children = [header, emptyBody]
|
||||
}
|
||||
|
||||
const props = {
|
||||
columns,
|
||||
rows,
|
||||
emptyState,
|
||||
...override,
|
||||
children,
|
||||
}
|
||||
|
||||
return mount(<IndexList {...props} />)
|
||||
}
|
||||
|
||||
it('mounts without exploding', () => {
|
||||
wrapper = wrapperSetup()
|
||||
wrapper = wrapperSetup(false)
|
||||
expect(wrapper).toHaveLength(1)
|
||||
})
|
||||
|
||||
it('matches snapshot with minimal props', () => {
|
||||
wrapper = wrapperSetup()
|
||||
wrapper = wrapperSetup(false)
|
||||
expect(wrapper).toMatchSnapshot()
|
||||
})
|
||||
|
||||
it('renders empty state when 0 rows exist', () => {
|
||||
wrapper = wrapperSetup({rows: []})
|
||||
wrapper = wrapperSetup(true)
|
||||
|
||||
const emptyDiv = wrapper
|
||||
.find('div')
|
||||
|
|
@ -100,7 +75,7 @@ describe('IndexList', () => {
|
|||
})
|
||||
|
||||
it('matches snapshot when 0 rows exist', () => {
|
||||
wrapper = wrapperSetup({rows: []})
|
||||
wrapper = wrapperSetup(true)
|
||||
expect(wrapper).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,397 +1,255 @@
|
|||
// 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 []}
|
||||
>
|
||||
<IndexList>
|
||||
<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]}
|
||||
key="index-header"
|
||||
>
|
||||
<thead
|
||||
className="index-list--header"
|
||||
>
|
||||
<tr>
|
||||
<th
|
||||
className="index-list--header-cell index-list--align-left"
|
||||
key="test--fruit"
|
||||
style={
|
||||
Object {
|
||||
"width": "50%",
|
||||
}
|
||||
}
|
||||
<IndexListHeaderCell
|
||||
alignment="left"
|
||||
columnName="Fruit"
|
||||
width="50%"
|
||||
>
|
||||
Fruit
|
||||
</th>
|
||||
<th
|
||||
className="index-list--header-cell index-list--align-left"
|
||||
key="test--calories"
|
||||
style={
|
||||
Object {
|
||||
"width": "50%",
|
||||
<th
|
||||
className="index-list--header-cell index-list--align-left"
|
||||
style={
|
||||
Object {
|
||||
"width": "50%",
|
||||
}
|
||||
}
|
||||
}
|
||||
>
|
||||
Fruit
|
||||
</th>
|
||||
</IndexListHeaderCell>
|
||||
<IndexListHeaderCell
|
||||
alignment="left"
|
||||
columnName="Calories"
|
||||
width="50%"
|
||||
>
|
||||
Calories
|
||||
</th>
|
||||
<th
|
||||
className="index-list--header-cell index-list--align-left"
|
||||
style={
|
||||
Object {
|
||||
"width": "50%",
|
||||
}
|
||||
}
|
||||
>
|
||||
Calories
|
||||
</th>
|
||||
</IndexListHeaderCell>
|
||||
</tr>
|
||||
</thead>
|
||||
</IndexListHeader>
|
||||
<tbody
|
||||
className="index-list--empty"
|
||||
<IndexListBody
|
||||
columnCount={2}
|
||||
emptyState={
|
||||
<div>
|
||||
Empty
|
||||
</div>
|
||||
}
|
||||
key="index-body"
|
||||
>
|
||||
<tr
|
||||
className="index-list--empty-row"
|
||||
<tbody
|
||||
className="index-list--empty"
|
||||
>
|
||||
<td
|
||||
colSpan={2}
|
||||
<tr
|
||||
className="index-list--empty-row"
|
||||
>
|
||||
<div
|
||||
className="index-list--empty-cell"
|
||||
data-test="empty-state"
|
||||
<td
|
||||
colSpan={2}
|
||||
>
|
||||
<div>
|
||||
Empty
|
||||
<div
|
||||
className="index-list--empty-cell"
|
||||
data-test="empty-state"
|
||||
>
|
||||
<div>
|
||||
Empty
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</IndexListBody>
|
||||
</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,
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
<IndexList>
|
||||
<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]}
|
||||
key="index-header"
|
||||
>
|
||||
<thead
|
||||
className="index-list--header"
|
||||
>
|
||||
<tr>
|
||||
<th
|
||||
className="index-list--header-cell index-list--align-left"
|
||||
key="test--fruit"
|
||||
style={
|
||||
Object {
|
||||
"width": "50%",
|
||||
}
|
||||
}
|
||||
<IndexListHeaderCell
|
||||
alignment="left"
|
||||
columnName="Fruit"
|
||||
width="50%"
|
||||
>
|
||||
Fruit
|
||||
</th>
|
||||
<th
|
||||
className="index-list--header-cell index-list--align-left"
|
||||
key="test--calories"
|
||||
style={
|
||||
Object {
|
||||
"width": "50%",
|
||||
<th
|
||||
className="index-list--header-cell index-list--align-left"
|
||||
style={
|
||||
Object {
|
||||
"width": "50%",
|
||||
}
|
||||
}
|
||||
}
|
||||
>
|
||||
Fruit
|
||||
</th>
|
||||
</IndexListHeaderCell>
|
||||
<IndexListHeaderCell
|
||||
alignment="left"
|
||||
columnName="Calories"
|
||||
width="50%"
|
||||
>
|
||||
Calories
|
||||
</th>
|
||||
<th
|
||||
className="index-list--header-cell index-list--align-left"
|
||||
style={
|
||||
Object {
|
||||
"width": "50%",
|
||||
}
|
||||
}
|
||||
>
|
||||
Calories
|
||||
</th>
|
||||
</IndexListHeaderCell>
|
||||
</tr>
|
||||
</thead>
|
||||
</IndexListHeader>
|
||||
<tbody
|
||||
className="index-list--body"
|
||||
<IndexListBody
|
||||
columnCount={2}
|
||||
emptyState={
|
||||
<div>
|
||||
Empty
|
||||
</div>
|
||||
}
|
||||
key="index-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}
|
||||
<tbody
|
||||
className="index-list--body"
|
||||
>
|
||||
<tr
|
||||
className="index-list--row"
|
||||
<IndexListRow
|
||||
disabled={false}
|
||||
>
|
||||
<td
|
||||
className="index-list--row-cell index-list--align-left"
|
||||
key="index-list--row-0-col-test--fruit"
|
||||
style={
|
||||
Object {
|
||||
"width": "50%",
|
||||
}
|
||||
}
|
||||
<tr
|
||||
className="index-list--row"
|
||||
>
|
||||
<div
|
||||
className="index-list--cell"
|
||||
<IndexListRowCell
|
||||
alignment="left"
|
||||
revealOnHover={false}
|
||||
>
|
||||
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"
|
||||
<td
|
||||
className="index-list--row-cell index-list--align-left"
|
||||
>
|
||||
<div
|
||||
className="index-list--cell"
|
||||
>
|
||||
Apple
|
||||
</div>
|
||||
</td>
|
||||
</IndexListRowCell>
|
||||
<IndexListRowCell
|
||||
alignment="left"
|
||||
revealOnHover={false}
|
||||
>
|
||||
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"
|
||||
>
|
||||
<div
|
||||
className="index-list--cell"
|
||||
>
|
||||
500
|
||||
</div>
|
||||
</td>
|
||||
</IndexListRowCell>
|
||||
</tr>
|
||||
</IndexListRow>
|
||||
<IndexListRow
|
||||
disabled={false}
|
||||
>
|
||||
<td
|
||||
className="index-list--row-cell index-list--align-left"
|
||||
key="index-list--row-1-col-test--fruit"
|
||||
style={
|
||||
Object {
|
||||
"width": "50%",
|
||||
}
|
||||
}
|
||||
<tr
|
||||
className="index-list--row"
|
||||
>
|
||||
<div
|
||||
className="index-list--cell"
|
||||
<IndexListRowCell
|
||||
alignment="left"
|
||||
revealOnHover={false}
|
||||
>
|
||||
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"
|
||||
<td
|
||||
className="index-list--row-cell index-list--align-left"
|
||||
>
|
||||
<div
|
||||
className="index-list--cell"
|
||||
>
|
||||
Pear
|
||||
</div>
|
||||
</td>
|
||||
</IndexListRowCell>
|
||||
<IndexListRowCell
|
||||
alignment="left"
|
||||
revealOnHover={false}
|
||||
>
|
||||
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"
|
||||
>
|
||||
<div
|
||||
className="index-list--cell"
|
||||
>
|
||||
1000
|
||||
</div>
|
||||
</td>
|
||||
</IndexListRowCell>
|
||||
</tr>
|
||||
</IndexListRow>
|
||||
<IndexListRow
|
||||
disabled={false}
|
||||
>
|
||||
<td
|
||||
className="index-list--row-cell index-list--align-left"
|
||||
key="index-list--row-2-col-test--fruit"
|
||||
style={
|
||||
Object {
|
||||
"width": "50%",
|
||||
}
|
||||
}
|
||||
<tr
|
||||
className="index-list--row"
|
||||
>
|
||||
<div
|
||||
className="index-list--cell"
|
||||
<IndexListRowCell
|
||||
alignment="left"
|
||||
revealOnHover={false}
|
||||
>
|
||||
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"
|
||||
<td
|
||||
className="index-list--row-cell index-list--align-left"
|
||||
>
|
||||
<div
|
||||
className="index-list--cell"
|
||||
>
|
||||
Banana
|
||||
</div>
|
||||
</td>
|
||||
</IndexListRowCell>
|
||||
<IndexListRowCell
|
||||
alignment="left"
|
||||
revealOnHover={false}
|
||||
>
|
||||
200
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</IndexListRow>
|
||||
</tbody>
|
||||
<td
|
||||
className="index-list--row-cell index-list--align-left"
|
||||
>
|
||||
<div
|
||||
className="index-list--cell"
|
||||
>
|
||||
100
|
||||
</div>
|
||||
</td>
|
||||
</IndexListRowCell>
|
||||
</tr>
|
||||
</IndexListRow>
|
||||
</tbody>
|
||||
</IndexListBody>
|
||||
</table>
|
||||
</IndexList>
|
||||
`;
|
||||
|
|
|
|||
Loading…
Reference in New Issue