Skip to content

Instantly share code, notes, and snippets.

@mauricior

mauricior/01-simple.test.js

Forked from a-h/01-simple.test.js
Created August 8, 2018 18:52
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mauricior/e2abfef43d2e47f9387a02467f63d80f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mauricior/e2abfef43d2e47f9387a02467f63d80f to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @a-h a-h revised this gist Mar 24, 2018. 1 changed file with 37 additions and 0 deletions.
    37 changes: 37 additions & 0 deletions 05-simple-material-withstyles-using-mount.test.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,37 @@
    import React from 'react';
    import { CircularProgress } from 'material-ui-next/Progress';
    import { mount } from 'enzyme';
    import { withStyles } from 'material-ui-next/styles';
    import PropTypes from 'prop-types';

    const style = {
    buttonProgress: {
    position: 'absolute',
    top: '50%',
    left: '50%',
    marginTop: -12,
    marginLeft: -12,
    },
    };

    const Composer = ({
    classes,
    }) => (
    <div>
    <CircularProgress size={24} className={classes.buttonProgress} />
    </div>);


    Composer.propTypes = {
    classes: PropTypes.object.isRequired,
    };

    const Composition = withStyles(style)(Composer);

    describe('<Composition />', () => {
    it('should render CircularProgress', () => {
    const wrapper = mount(<Composition />);
    // No longer need to dive().
    expect(wrapper.find(CircularProgress)).toHaveLength(1);
    });
    });
  2. @a-h a-h revised this gist Mar 24, 2018. 4 changed files with 0 additions and 0 deletions.
    0 simple.test.js → 01-simple.test.js
    View file
    File renamed without changes.
    0 simple-material.test.js → 02-simple-material.test.js
    View file
    File renamed without changes.
    0 simple-material-withstyles.test.js → 03-simple-material-withstyles.test.js
    View file
    File renamed without changes.
    0 ...al-withstyles-using-createshallow.test.js → ...al-withstyles-using-createshallow.test.js
    View file
    File renamed without changes.
  3. @a-h a-h created this gist Mar 24, 2018.
    39 changes: 39 additions & 0 deletions simple-material-withstyles-using-createshallow.test.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,39 @@
    import React from 'react';
    import { CircularProgress } from 'material-ui-next/Progress';
    import { createShallow } from 'material-ui-next/test-utils';
    import { withStyles } from 'material-ui-next/styles';
    import PropTypes from 'prop-types';

    const style = {
    buttonProgress: {
    position: 'absolute',
    top: '50%',
    left: '50%',
    marginTop: -12,
    marginLeft: -12,
    },
    };

    const Composer = ({
    classes,
    }) => (
    <p>
    <CircularProgress size={24} className={classes.buttonProgress} />
    </p>);


    Composer.propTypes = {
    classes: PropTypes.object.isRequired,
    };

    const Composition = withStyles(style)(Composer);

    describe('<Composition />', () => {
    const shallow = createShallow();

    it('should render CircularProgress', () => {
    const wrapper = shallow(<Composition />);
    // Still need to dive().
    expect(wrapper.dive().find(CircularProgress)).toHaveLength(1);
    });
    });
    37 changes: 37 additions & 0 deletions simple-material-withstyles.test.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,37 @@
    import React from 'react';
    import { shallow } from 'enzyme';
    import { CircularProgress } from 'material-ui-next/Progress';
    import { withStyles } from 'material-ui-next/styles';
    import PropTypes from 'prop-types';

    const style = {
    buttonProgress: {
    position: 'absolute',
    top: '50%',
    left: '50%',
    marginTop: -12,
    marginLeft: -12,
    },
    };

    const Composer = ({
    classes,
    }) => (
    <p>
    <CircularProgress size={24} className={classes.buttonProgress} />
    </p>);


    Composer.propTypes = {
    classes: PropTypes.object.isRequired,
    };

    const Composition = withStyles(style)(Composer);

    describe('<Composition />', () => {
    it('should render a styled CircularProgress', () => {
    const wrapper = shallow(<Composition />);
    // Note the use of dive() because Composition is now wrapped by the withStyles higher order component.
    expect(wrapper.dive().find(CircularProgress)).toHaveLength(1);
    });
    });
    15 changes: 15 additions & 0 deletions simple-material.test.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,15 @@
    import React from 'react';
    import { shallow } from 'enzyme';
    import { CircularProgress } from 'material-ui-next/Progress';

    const Composition = () => (
    <p>
    <CircularProgress size={24} />
    </p>);

    describe('<Composition />', () => {
    it('should render a CircularProgress', () => {
    const wrapper = shallow(<Composition />);
    expect(wrapper.find(CircularProgress)).toHaveLength(1);
    });
    });
    21 changes: 21 additions & 0 deletions simple.test.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,21 @@
    import React from 'react';
    import { shallow } from 'enzyme';

    const Item = text => <p>Item {text}</p>;

    const Composition = ({ showB }) => (
    <p>
    <Item text="A" />
    {showB && <Item text="B" />}
    </p>);

    describe('<Composition />', () => {
    it('should render one item if showB is set to false', () => {
    const wrapper = shallow(<Composition showB={false} />);
    expect(wrapper.find(Item)).toHaveLength(1);
    });
    it('should render two items if showB is set to true', () => {
    const wrapper = shallow(<Composition showB />);
    expect(wrapper.find(Item)).toHaveLength(2);
    });
    });