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`] = ` ...@@ -498,6 +498,270 @@ exports[`Storyshots Paragon Welcome 1`] = `
</div> </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`] = ` exports[`Storyshots Tabs basic usage 1`] = `
<div> <div>
<ul <ul
......
src/Table/Table.stories.jsx
...@@ -3,39 +3,70 @@ import { storiesOf } from '@storybook/react'; ...@@ -3,39 +3,70 @@ import { storiesOf } from '@storybook/react';
import Table from './index'; 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) 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 <Table
data={[ data={catData}
{ headings={catHeadings}
name: 'Lil Bub', caption="Famous Internet Cats"
color: 'brown tabby', headingClassName={['thead-default']}
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',
},
]}
/> />
)); ));
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 React from 'react';
import classNames from 'classnames';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import styles from './Table.scss'; import styles from './Table.scss';
class Table extends React.Component { class Table extends React.Component {
getCaption() {
return this.props.caption && (
<caption>{this.props.caption}</caption>
);
}
getHeadings() { getHeadings() {
return ( return (
<thead className={styles['thead-default']}> <thead className={classNames(
...this.props.headingClassName.map(className => styles[className]),
)}
>
<tr> <tr>
{this.props.headings.map(heading => ( {this.props.headings.map(heading => (
<th key={heading.key}>{heading.display}</th> <th
key={heading.key}
scope="col"
>
{heading.label}
</th>
))} ))}
</tr> </tr>
</thead> </thead>
...@@ -32,8 +47,13 @@ class Table extends React.Component { ...@@ -32,8 +47,13 @@ class Table extends React.Component {
render() { render() {
return ( return (
<table className={styles.table}> <table className={classNames(
{this.getHeadings(this.props.headings)} styles.table,
...this.props.className.map(className => styles[className]),
)}
>
{this.getCaption()}
{this.getHeadings()}
{this.getBody()} {this.getBody()}
</table> </table>
); );
...@@ -41,8 +61,26 @@ class Table extends React.Component { ...@@ -41,8 +61,26 @@ class Table extends React.Component {
} }
Table.propTypes = { 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, 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; 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