ajwann / css-spinners-react Goto Github PK

Now that the basic POC is complete, it would be nice to have a test suite to test future changes.

A great way to test that your React components render, and also test that they render the same way across changes, is snapshot tests. There are links to all the tutorials and guides you should need to set up Jest and write basic snapshot tests at the bottom of this issue.

We need a single snapshot test for each component. Each test will end up looking something like:

it('renders and nothing has changed', () => {
  const dots = renderer.create(<Dots />).toJSON();
  expect(dots).toMatchSnapshot();
});

Here is a link to the official Jest setup instructions
Here is a link with a more in depth description about snapshot tests
Here is a link with a good amount of official examples

It would be nice to add eslint, and adopt a popular style guide from a prominent React shop,
like Facebook or AirBnB.

We can follow these steps to install eslint:
https://eslint.org/docs/user-guide/getting-started

Once eslint is installed, we can install the external eslint rule package by following these steps:
https://www.npmjs.com/package/eslint-config-airbnb
The key step in that readme is "Add "extends": "airbnb" to your .eslintrc"
**If you get stuck on this second step, take a look at one of my other project's eslintrc files for guidance.

Each spinner is just a div element with a css class applied. Since using inline css styles is popular in the React world, it would be nice to support this by letting users pass arbitrary props to be set on these div elements.

Users would pass props like so:

<Dots style="width:100px;" ...props />

Each spinner will need to be updated to just apply any props passed into it via use of the spread operator. For example, the Dots component would look something like:

// whatever imports each component currently have should stay the same

const Dots = (props) => {
  render(
    <div className="dots-loader" ...props />
    </div>
  )
}

Once the below issues are completed, version 1.0.0 can be released! 💯

• close #14
• close #12