Adds button component tests.

[BE-Webdesign]

Adds basic button component tests. Covers cases where the tag name or
other properties are conditionally rendered. Related to progress on
#641. This PR adds the components directory to the list of entry points
configured for tests by webpack.

This introduces Enzyme and the react-test-renderer library as dev dependencies.

Testing Instructions
Run npm i && npm run test-unit ensure tests pass. Change Button logic to ensure tests fail as they should.

[nylen]

I think we should merge this, it's a really large and important area of our code that we've neglected to test so far.

Separately, we should consider making components an entry point as well. Otherwise it seems like we will be duplicating components between built files.

[BE-Webdesign]

Are the changes you made the test conventions I should use moving forward with using .be?

[BE-Webdesign]

Separately, we should consider making components an entry point as well. Otherwise it seems like we will be duplicating components between built files.

I think the components directory as an entry point is only used via tests really, there is no "entry" point persee in the components directory it is just a bunch of directories?

I am probably not understanding what you mean, so if you could clarify it would help me. How does this duplicate between built files, and what does that mean? I am not a webpack guru yet.

[nylen]

Are the changes you made the test conventions I should use moving forward with using .be?

It's not incredibly important either way, but I do prefer the shorter assertion form where possible.

Normally in Chai these are just property assertions like .to.be.true; - but this is a pretty bad idea IMO because if you misspell it - .to.be.ture; - the assertion does nothing.

In this repo we are using the dirty-chai library which allows these assertions to be written as function calls like .to.be.true().

Unintentionally (but fortunately), the property-based assertions are flagged as errors in our linting setup.

[BE-Webdesign]

Unintentionally (but fortunately), the property-based assertions are flagged as errors in our linting setup.

Yeah I noticed that it expects an assignment. I guess that works in our favor!

[nylen]

How does this duplicate between built files, and what does that mean?

For example, we import IconButton in both editor/header/tools/preview-button.js and blocks/editable/format-toolbar.js. I'm not entirely sure either, but I think this means the IconButton code is duplicated between the blocks and editor bundles. A solution would be to split out components/ into its own, separate build.

In any case, this is a pre-existing issue and should be handled separately. Probably @aduth and @youknowriad have already discussed it at some point.

[nylen]

Thanks for working on this!

[BE-Webdesign]

A solution would be to split out components/ into its own, separate build.

Okay, I can do that. Did not know things duplicate, if a separate build is not provided, somewhat makes sense though.

[BE-Webdesign]

Not going to merge until I resolve the webpack thing, then I will rebase this.

[nylen]

I would actually prefer that we go with the Webpack approach you took here, then resolve that separately. It's not an issue with this PR.

[nylen]

I tried to split out components/ in #929, we can discuss more there. Also a couple of people are AFK today due to Memorial Day.

[aduth]

Is this needed?

[BE-Webdesign]

Enzyme won't work without this since we are on the latest version of React. As we bump our React version we will need to bump this as well to match. This could be one of many reasons why testing component rendering will be more of a hassle than a positive. For now I think we can continue forward and just yank them if needed.