Skip to content

Commit

Permalink
tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@mbrookes
mbrookes committed Sep 6, 2020
1 parent 5fe8a48 commit fc04b6a
Show file tree
Hide file tree
Showing 6 changed files with 308 additions and 68 deletions.
2 changes: 1 addition & 1 deletion packages/material-ui/src/ImageList/ImageList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ ImageList.propTypes = {
*/
rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
/**
* Number of px for the spacing between items.
* The spacing between items in px.
*/
spacing: PropTypes.number,
/**
Expand Down
195 changes: 155 additions & 40 deletions packages/material-ui/src/ImageList/ImageList.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react';
import { expect } from 'chai';
import { createShallow, getClasses, createMount, describeConformance } from 'test/utils';
import { createClientRender, getClasses, createMount, describeConformance } from 'test/utils';
import ImageList from './ImageList';

const itemsData = [
Expand All @@ -19,11 +19,10 @@ const itemsData = [
describe('<ImageList />', () => {
let classes;
const mount = createMount();
let shallow;
const render = createClientRender();

before(() => {
classes = getClasses(<ImageList />);
shallow = createShallow({ dive: true });
});

describeConformance(
Expand All @@ -39,44 +38,160 @@ describe('<ImageList />', () => {
}),
);

it('renders children by default', () => {
const wrapper = shallow(
<ImageList>
{itemsData.map((item) => (
<span
key={item.img}
className="image-item"
title={item.title}
subtitle={<span>by: {item.author}</span>}
>
<img src={item.img} alt="foo" />
</span>
))}
{false && <span>this is a null child</span>}
</ImageList>,
);

expect(wrapper.find('.image-item').length).to.equal(2);
const children = itemsData.map((item) => (
<span
key={item.img}
title={item.title}
subtitle={<span>by: {item.author}</span>}
data-testid="test-children"
>
<img src={item.img} alt="foo" />
</span>
));

it('should render children by default', () => {
const { getAllByTestId } = render(<ImageList>{children}</ImageList>);

expect(getAllByTestId('test-children').length).to.equal(2);
});

describe('classes', () => {
it('should render with the root and standard classes by default', () => {
const { getByTestId } = render(<ImageList data-testid="test-root">{children}</ImageList>);

expect(getByTestId('test-root')).to.have.class(classes.root);
expect(getByTestId('test-root')).to.have.class(classes.standard);
});

it('can render with the masonry class', () => {
const { getByTestId } = render(
<ImageList data-testid="test-root" variant="masonry">
{children}
</ImageList>,
);

expect(getByTestId('test-root')).to.have.class(classes.root);
expect(getByTestId('test-root')).to.have.class(classes.masonry);
});

it('can render with the quilted class', () => {
const { getByTestId } = render(
<ImageList data-testid="test-root" variant="woven">
{children}
</ImageList>,
);

expect(getByTestId('test-root')).to.have.class(classes.root);
expect(getByTestId('test-root')).to.have.class(classes.woven);
});

it('can render with the woven class', () => {
const { getByTestId } = render(
<ImageList data-testid="test-root" variant="woven">
{children}
</ImageList>,
);

expect(getByTestId('test-root')).to.have.class(classes.root);
expect(getByTestId('test-root')).to.have.class(classes.woven);
});
});

describe('style', () => {
it('should render with default grid-template-columns and gap styles', () => {
const { getByTestId } = render(<ImageList data-testid="test-root">{children}</ImageList>);

expect(getByTestId('test-root').style['grid-template-columns']).to.equal('repeat(2, 1fr)');
expect(getByTestId('test-root').style.gap).to.equal('4px');
});

it('should overwrite style', () => {
const style = { backgroundColor: 'red' };
const { getByTestId } = render(
<ImageList style={style} data-testid="test-root">
{children}
</ImageList>,
);

expect(getByTestId('test-root').style).to.have.property('backgroundColor', 'red');
});
});

it('should render children and overwrite style', () => {
const style = { backgroundColor: 'red' };
const wrapper = shallow(
<ImageList style={style}>
{itemsData.map((item) => (
<span
key={item.img}
className="image-item"
title={item.title}
subtitle={<span>by: {item.author}</span>}
>
<img src={item.img} alt="foo" />
</span>
))}
</ImageList>,
);

expect(wrapper.find('.image-item').length).to.equal(2);
expect(wrapper.props().style.backgroundColor).to.equal(style.backgroundColor);
describe('props', () => {
describe('prop: component', () => {
it('should render a ul by default', () => {
const { container } = render(<ImageList>{children}</ImageList>);
expect(container.firstChild).to.have.property('nodeName', 'UL');
});

it('can render a different component', () => {
const { container } = render(<ImageList component="div">{children}</ImageList>);
expect(container.firstChild).to.have.property('nodeName', 'DIV');
});
});

describe('prop: className', () => {
it('should append the className to the root element', () => {
const { container } = render(<ImageList className="foo">{children}</ImageList>);
expect(container.firstChild).to.have.class('foo');
});
});

describe('prop: variant', () => {
it('should render with column-count and column-gap styles', () => {
const { getByTestId } = render(
<ImageList data-testid="test-root" variant="masonry">
{children}
</ImageList>,
);

expect(getByTestId('test-root').style['column-count']).to.equal('2');
expect(getByTestId('test-root').style['column-gap']).to.equal('4px');
});
});

describe('prop: cols', () => {
it('should render with modified grid-template-columns style', () => {
const { getByTestId } = render(
<ImageList data-testid="test-root" cols={4}>
{children}
</ImageList>,
);

expect(getByTestId('test-root').style['grid-template-columns']).to.equal('repeat(4, 1fr)');
});

it('should render with modified column-count style', () => {
const { getByTestId } = render(
<ImageList data-testid="test-root" variant="masonry" cols={4}>
{children}
</ImageList>,
);

expect(getByTestId('test-root').style['column-count']).to.equal('4');
});
});

describe('prop: spacing', () => {
it('should render with modified grid-template-columns style', () => {
const { getByTestId } = render(
<ImageList data-testid="test-root" spacing={8}>
{children}
</ImageList>,
);

expect(getByTestId('test-root').style.gap).to.equal('8px');
});

it('should render with modified column-gap style', () => {
const { getByTestId } = render(
<ImageList data-testid="test-root" variant="masonry" spacing={8}>
{children}
</ImageList>,
);

expect(getByTestId('test-root').style['column-gap']).to.equal('8px');
});
});
});
});
4 changes: 2 additions & 2 deletions packages/material-ui/src/ImageListItem/ImageListItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export const styles = {
root: {
display: 'inline-block',
position: 'relative',
lineHeight: 0, // Fix masonry item spacing
lineHeight: 0, // 🤷🏻‍♂️Fixes masonry item spacing
},
/* Styles applied to an `img` element to ensure it covers the item. */
img: {
Expand Down Expand Up @@ -40,7 +40,7 @@ export const styles = {
};

const ImageListItem = React.forwardRef(function ImageListItem(props, ref) {
// cols rows default values are for docs only
// TODO: - Use jsdoc @default?: "cols rows default values are for docs only"
const {
children,
classes,
Expand Down
82 changes: 64 additions & 18 deletions packages/material-ui/src/ImageListItem/ImageListItem.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
import * as React from 'react';
import { expect } from 'chai';
import { getClasses, createMount, describeConformance } from 'test/utils';
import { createClientRender, getClasses, createMount, describeConformance } from 'test/utils';
import ImageList from '../ImageList';
import ImageListItem from './ImageListItem';

describe('<ImageListItem />', () => {
const mount = createMount();
let classes;
const mount = createMount();
const render = createClientRender();

before(() => {
classes = getClasses(<ImageListItem />);
Expand All @@ -20,26 +22,11 @@ describe('<ImageListItem />', () => {
}));

const itemData = {
img: 'images/image-list/00-52-29-429_640.jpg',
img: 'images/image-list/breakfast.jpg',
title: 'Breakfast',
author: 'jill111',
};

describe('prop: children', () => {
it('should render children by default', () => {
const children = <img src={itemData.img} alt="foo" />;
const wrapper = mount(<ImageListItem>{children}</ImageListItem>);

expect(wrapper.containsMatchingElement(children)).to.equal(true);
});

it('should not change non image child', () => {
const children = <div />;
const wrapper = mount(<ImageListItem>{children}</ImageListItem>);
expect(wrapper.containsMatchingElement(children)).to.equal(true);
});
});

function mountMockImage(imgEl) {
const Image = React.forwardRef((props, ref) => {
React.useImperativeHandle(ref, () => imgEl, []);
Expand All @@ -61,4 +48,63 @@ describe('<ImageListItem />', () => {
mountMockImage(null);
});
});

const children = <img src={itemData.img} alt={itemData.title} data-testid="test-children" />;

describe('props', () => {
describe('prop: children', () => {
it('should render children by default', () => {
const { getByTestId } = render(<ImageListItem>{children}</ImageListItem>);

expect(getByTestId('test-children')).not.to.equal(null);
});
});

describe('prop: component', () => {
it('can render a different component', () => {
const { container } = render(<ImageListItem component="div">{children}</ImageListItem>);
expect(container.firstChild).to.have.property('nodeName', 'DIV');
});
});
});

describe('classes', () => {
it('should render with the root and standard classes by default', () => {
const { getByTestId } = render(
<ImageList>
<ImageListItem data-testid="test-children" />
</ImageList>,
);

expect(getByTestId('test-children')).to.have.class(classes.root);
expect(getByTestId('test-children')).to.have.class(classes.standard);
});

it('can render with the woven class', () => {
const { getByTestId } = render(
<ImageList variant="woven">
<ImageListItem data-testid="test-children" />
</ImageList>,
);

expect(getByTestId('test-children')).to.have.class(classes.root);
expect(getByTestId('test-children')).to.have.class(classes.woven);
});

it('can render img with the img class', () => {
const { getByTestId } = render(<ImageListItem>{children}</ImageListItem>);

expect(getByTestId('test-children')).to.have.class(classes.img);
});

it('should not render a non-img with the img class', () => {
const { getByTestId } = render(
<ImageListItem>
<div data-testid="test-children" />
</ImageListItem>,
);

expect(getByTestId('test-children')).to.not.have.class(classes.img);
});
});
});
2 changes: 1 addition & 1 deletion packages/material-ui/src/ImageListItemBar/ImageListItemBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,7 @@ ImageListItemBar.propTypes = {
*/
subtitle: PropTypes.node,
/**
* Title to be displayed on item.
* Title to be displayed.
*/
title: PropTypes.node,
};
Expand Down
Loading

0 comments on commit fc04b6a

Please sign in to comment.