Skip to content

P
paragon
Commit ab8bb7d6 by Ari Rizzitano
Options

tests

parent 66105083
Showing with 410 additions and 37 deletions
.storybook/__snapshots__/Storyshots.test.js.snap
......@@ -498,6 +498,270 @@ exports[`Storyshots Paragon Welcome 1`] = `
</div>
`;
exports[`Storyshots Table default heading 1`] = `
<table
className="table"
>
<caption>
Famous Internet Cats
</caption>
<thead
className="thead-default"
>
<tr>
<th
scope="col"
>
Name
</th>
<th
scope="col"
>
Famous For
</th>
<th
scope="col"
>
Coat Color
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Lil Bub
</td>
<td>
weird tongue
</td>
<td>
brown tabby
</td>
</tr>
<tr>
<td>
Grumpy Cat
</td>
<td>
serving moods
</td>
<td>
siamese
</td>
</tr>
<tr>
<td>
Smoothie
</td>
<td>
modeling
</td>
<td>
orange tabby
</td>
</tr>
<tr>
<td>
Maru
</td>
<td>
being a lovable oaf
</td>
<td>
brown tabby
</td>
</tr>
<tr>
<td>
Keyboard Cat
</td>
<td>
piano virtuoso
</td>
<td>
orange tabby
</td>
</tr>
</tbody>
</table>
`;
exports[`Storyshots Table table-striped 1`] = `
<table
className="table table-striped"
>
<caption>
Famous Internet Cats
</caption>
<thead
className=""
>
<tr>
<th
scope="col"
>
Name
</th>
<th
scope="col"
>
Famous For
</th>
<th
scope="col"
>
Coat Color
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Lil Bub
</td>
<td>
weird tongue
</td>
<td>
brown tabby
</td>
</tr>
<tr>
<td>
Grumpy Cat
</td>
<td>
serving moods
</td>
<td>
siamese
</td>
</tr>
<tr>
<td>
Smoothie
</td>
<td>
modeling
</td>
<td>
orange tabby
</td>
</tr>
<tr>
<td>
Maru
</td>
<td>
being a lovable oaf
</td>
<td>
brown tabby
</td>
</tr>
<tr>
<td>
Keyboard Cat
</td>
<td>
piano virtuoso
</td>
<td>
orange tabby
</td>
</tr>
</tbody>
</table>
`;
exports[`Storyshots Table unstyled 1`] = `
<table
className="table"
>
<caption>
Famous Internet Cats
</caption>
<thead
className=""
>
<tr>
<th
scope="col"
>
Name
</th>
<th
scope="col"
>
Famous For
</th>
<th
scope="col"
>
Coat Color
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Lil Bub
</td>
<td>
weird tongue
</td>
<td>
brown tabby
</td>
</tr>
<tr>
<td>
Grumpy Cat
</td>
<td>
serving moods
</td>
<td>
siamese
</td>
</tr>
<tr>
<td>
Smoothie
</td>
<td>
modeling
</td>
<td>
orange tabby
</td>
</tr>
<tr>
<td>
Maru
</td>
<td>
being a lovable oaf
</td>
<td>
brown tabby
</td>
</tr>
<tr>
<td>
Keyboard Cat
</td>
<td>
piano virtuoso
</td>
<td>
orange tabby
</td>
</tr>
</tbody>
</table>
`;
exports[`Storyshots Tabs basic usage 1`] = `
<div>
<ul
......
src/Table/Table.stories.jsx
......@@ -3,39 +3,70 @@ import { storiesOf } from '@storybook/react';
import Table from './index';
const catData = [
{
name: 'Lil Bub',
color: 'brown tabby',
famous_for: 'weird tongue',
},
{
name: 'Grumpy Cat',
color: 'siamese',
famous_for: 'serving moods',
},
{
name: 'Smoothie',
color: 'orange tabby',
famous_for: 'modeling',
},
{
name: 'Maru',
color: 'brown tabby',
famous_for: 'being a lovable oaf',
},
{
name: 'Keyboard Cat',
color: 'orange tabby',
famous_for: 'piano virtuoso',
},
];
const catHeadings = [
{
label: 'Name',
key: 'name',
},
{
label: 'Famous For',
key: 'famous_for',
},
{
label: 'Coat Color',
key: 'color',
},
];
storiesOf('Table', module)
.add('basic usage', () => (
.add('unstyled', () => (
<Table
data={catData}
headings={catHeadings}
caption="Famous Internet Cats"
/>
))
.add('table-striped', () => (
<Table
data={catData}
headings={catHeadings}
caption="Famous Internet Cats"
className={['table-striped']}
/>
))
.add('default heading', () => (
<Table
data={[
{
name: 'Lil Bub',
color: 'brown tabby',
famous_for: 'weird tongue',
},
{
name: 'Grumpy Cat',
color: 'siamese',
famous_for: 'serving moods',
},
{
name: 'Smoothie',
color: 'orange tabby',
famous_for: 'modeling',
},
]}
headings={[
{
display: 'Name',
key: 'name',
},
{
display: 'Famous For',
key: 'famous_for',
},
{
display: 'Coat Color',
key: 'color',
},
]}
data={catData}
headings={catHeadings}
caption="Famous Internet Cats"
headingClassName={['thead-default']}
/>
));
src/Table/Table.test.jsx
/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import { shallow } from 'enzyme';
import Table from './index';
const props = {
headings: [
{ key: 'num', label: 'Number' },
{ key: 'x2', label: 'Number * 2' },
{ key: 'sq', label: 'Number Squared' },
],
data: [
{ sq: 1, num: 1, x2: 2 },
{ sq: 4, num: 2, x2: 4 },
{ sq: 9, num: 3, x2: 6 },
],
};
describe('<Table />', () => {
describe('renders', () => {
const wrapper = shallow(
<Table
{...props}
/>,
);
it('with display headings in the right order', () => {
wrapper.find('th').forEach((th, i) => {
expect(th.text()).toEqual(props.headings[i].label);
});
});
it('with data in the same order as the headings', () => {
wrapper.find('tr').at(1).find('td').forEach((td, i) => {
expect(Number(td.text())).toEqual(props.data[0][props.headings[i].key]);
});
});
});
});
src/Table/index.jsx
import React from 'react';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import styles from './Table.scss';
class Table extends React.Component {
getCaption() {
return this.props.caption && (
<caption>{this.props.caption}</caption>
);
}
getHeadings() {
return (
<thead className={styles['thead-default']}>
<thead className={classNames(
...this.props.headingClassName.map(className => styles[className]),
)}
>
<tr>
{this.props.headings.map(heading => (
<th key={heading.key}>{heading.display}</th>
<th
key={heading.key}
scope="col"
>
{heading.label}
</th>
))}
</tr>
</thead>
......@@ -32,8 +47,13 @@ class Table extends React.Component {
render() {
return (
<table className={styles.table}>
{this.getHeadings(this.props.headings)}
<table className={classNames(
styles.table,
...this.props.className.map(className => styles[className]),
)}
>
{this.getCaption()}
{this.getHeadings()}
{this.getBody()}
</table>
);
......@@ -41,8 +61,26 @@ class Table extends React.Component {
}
Table.propTypes = {
headings: PropTypes.arrayOf(PropTypes.object).isRequired,
caption: PropTypes.oneOfType([
PropTypes.string,
PropTypes.element,
]),
className: PropTypes.arrayOf(PropTypes.string),
data: PropTypes.arrayOf(PropTypes.object).isRequired,
headings: PropTypes.arrayOf(PropTypes.shape({
key: PropTypes.string.isRequired,
label: PropTypes.oneOfType([
PropTypes.string,
PropTypes.element,
]).isRequired,
})).isRequired,
headingClassName: PropTypes.arrayOf(PropTypes.string),
};
Table.defaultProps = {
caption: null,
className: [],
headingClassName: [],
};
export default Table;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment