Skip to content

Commit

Permalink
WIP tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@mbrookes
mbrookes committed Sep 5, 2020
1 parent 5fe8a48 commit b398680
Show file tree
Hide file tree
Showing 5 changed files with 143 additions and 57 deletions.
56 changes: 22 additions & 34 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,33 @@ 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>,
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(wrapper.find('.image-item').length).to.equal(2);
expect(getAllByTestId('test-children').length).to.equal(2);
});

it('should render children and overwrite style', () => {
it('should 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>
))}
const { getByTestId } = render(
<ImageList style={style} data-testid="test-root">
{children}
</ImageList>,
);

expect(wrapper.find('.image-item').length).to.equal(2);
expect(wrapper.props().style.backgroundColor).to.equal(style.backgroundColor);
expect(getByTestId('test-root').style).to.have.property('backgroundColor', 'red');
});
});
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
50 changes: 38 additions & 12 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,23 +22,18 @@ describe('<ImageListItem />', () => {
}));

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

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

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);
});
const { getByTestId } = render(<ImageListItem>{children}</ImageListItem>);

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

Expand All @@ -61,4 +58,33 @@ describe('<ImageListItem />', () => {
mountMockImage(null);
});
});

describe('classes', () => {
it('should render with the root and standard classes', () => {
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('should render with the root and woven classes', () => {
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('should 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);
});
});
});
6 changes: 3 additions & 3 deletions packages/material-ui/src/ImageListItemBar/ImageListItemBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export const styles = (theme) => ({
fontFamily: theme.typography.fontFamily,
},
/* Styles applied to the root element if a `subtitle` is provided. */
rootSubtitle: {
subtitle: {
height: 68,
},
/* Styles applied to the root element if `position="bottom"`. */
Expand Down Expand Up @@ -103,7 +103,7 @@ const ImageListItemBar = React.forwardRef(function ImageListItemBar(props, ref)
className={clsx(
classes.root,
{
[classes.rootSubtitle]: subtitle,
[classes.subtitle]: subtitle,
[classes.positionBelow]: position === 'below',
[classes.positionBelowSubtitle]: position === 'below' && subtitle,
[classes.positionBottom]: position === 'bottom',
Expand Down 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
84 changes: 78 additions & 6 deletions packages/material-ui/src/ImageListItemBar/ImageListItemBar.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
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 ImageListItemBar from './ImageListItemBar';

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

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

describeConformance(<ImageListItemBar title="conform?" />, () => ({
Expand All @@ -28,10 +27,83 @@ describe('<ImageListItemBar />', () => {
};

describe('prop: title', () => {
it('should renders title', () => {
const wrapper = shallow(<ImageListItemBar title={itemData.title} />);
it('should render a title', () => {
const { container } = render(<ImageListItemBar title={itemData.title} />);

expect(wrapper.children('div').text()).to.equal(itemData.title);
expect(container.querySelector('div')).to.have.text(itemData.title);
});
});

describe('prop: subtitle', () => {
it('should render a subtitle', () => {
const { container } = render(<ImageListItemBar subtitle={itemData.author} />);

expect(container.querySelector('div')).to.have.text(itemData.author);
});
});

describe('classes', () => {
it('should render with the root and positionBottom classes', () => {
const { container } = render(<ImageListItemBar title="text" />);

expect(container.querySelector('div')).to.have.class(classes.root);
expect(container.querySelector('div')).to.have.class(classes.positionBottom);
});


it('should render with the subtitle class', () => {
const { container } = render(<ImageListItemBar title="title" subtitle="subtitle" />);

expect(container.querySelector('div')).to.have.class(classes.root);
expect(container.querySelector('div')).to.have.class(classes.subtitle);
});

it('should render with the positionBelow class', () => {
const { container } = render(<ImageListItemBar title="text" position="below" />);

expect(container.querySelector('div')).to.have.class(classes.root);
expect(container.querySelector('div')).to.have.class(classes.positionBelow);
});

it('should render with the positionBelowSubtitle class', () => {
const { container } = render(<ImageListItemBar title="text" subtitle="subtitle" position="below" />);

expect(container.querySelector('div')).to.have.class(classes.root);
expect(container.querySelector('div')).to.have.class(classes.positionBelowSubtitle);
});

it('should render with the positionTop class', () => {
const { container } = render(<ImageListItemBar title="text" position="top" />);

expect(container.querySelector('div')).to.have.class(classes.root);
expect(container.querySelector('div')).to.have.class(classes.positionTop);
});

it('should render a child div with the titleWrap class', () => {
const { container } = render(<ImageListItemBar title="text" />);

expect(container.firstChild.querySelector('div')).to.have.class(classes.titleWrap);
});

it('should render a child div with the titleWrapBelow class', () => {
const { container } = render(<ImageListItemBar title="text" position="below" />);

expect(container.firstChild.querySelector('div')).to.have.class(classes.titleWrap);
expect(container.firstChild.querySelector('div')).to.have.class(classes.titleWrapBelow);
});

it('should render a child div with the titleWrapActionPosRight class', () => {
const { container } = render(<ImageListItemBar title="text" actionIcon={<div />} />);

expect(container.firstChild.querySelector('div')).to.have.class(classes.titleWrap);
expect(container.firstChild.querySelector('div')).to.have.class(classes.titleWrapActionPosRight);
});

it('should render a child div with the titleWrapActionPosLeft class', () => {
const { container } = render(<ImageListItemBar title="text" actionIcon={<div />} actionPosition="left" />);

expect(container.firstChild.querySelector('div')).to.have.class(classes.titleWrap);
expect(container.firstChild.querySelector('div')).to.have.class(classes.titleWrapActionPosLeft);
});
});
});

0 comments on commit b398680

Please sign in to comment.