Skip to content

Instantly share code, notes, and snippets.

View alanbsmith's full-sized avatar
👋

Alan B Smith alanbsmith

👋
188 followers · 40 following
View GitHub Profile
@alanbsmith
alanbsmith / effective-testing-for-styled-components-simple-button.js
Created December 8, 2017 21:20
effective-testing-for-styled-components-simple-button
import styled from 'styled-components';
const Button = styled.button`
background-color: #7D7D7D;
color: #FFF;
`;
export default Button;
@alanbsmith
alanbsmith / effective-testing-for-styled-components-simple-button-enzyme-test.js
Created December 8, 2017 21:21
effective-testing-for-styled-components-simple-button-enzyme-test
import { shallow } from ‘enzyme’;
import expect from ‘expect’
import enzymify from ‘expect-enzyme’
expect.extend(enzymify())
describe(‘Button Component’, () => {
it(‘renders a button element’, () => {
const wrapper = shallow(Button);
// this test is basically worthless
expect(wrapper).toBeA(‘button’);
@alanbsmith
alanbsmith / effective-testing-for-styled-components-simple-snapshot.js
Created December 8, 2017 21:23
effective-testing-for-styled-components-simple-snapshot
import React from 'react';
import Button from '../index';
import renderer from 'react-test-renderer';
describe('Button Block', () => {
it('renders correctly', () => {
const tree = renderer
.create(<Button>Submit</Button>)
.toJSON();
expect(tree).toMatchSnapshot();
@alanbsmith
alanbsmith / effective-testing-for-styled-components-button-file-structure.md
Created December 8, 2017 21:24
effective-testing-for-styled-components-button-file-structure 
├ Button/
├── __tests__/
| | ├── __snapshots__
| | | ├── index.js.snap // <- Button snapshot
| └── index.js          // <- Test
@alanbsmith
alanbsmith / effective-testing-for-styled-components-file-structure.md
Last active December 8, 2017 21:31
effective-testing-for-styled-components-file-structure 
├ lib/
├── blocks/
| ├── Button/
| | ├── __tests__/
| | | ├── Icon.js  // <- Element Test
| | | └── index.js // <- Block Test
| | ├── Icon.js    // <- Element
| | ├── Text.js    // <- Element
| | └── index.js // &lt;- Block
@alanbsmith
alanbsmith / effective-testing-for-styled-components-button-styles.js
Created December 8, 2017 21:32
effective-testing-for-styled-components-button-styles
// lib/blocks/Button/index.js
import styled from 'styled-components';
import { rgba, lighten } from 'polished';
…
const Button = styled.button`
background-color: #7D7D7D;
border-radius: 2px;
border: solid 1px transparent;
@alanbsmith
alanbsmith / effective-testing-for-styled-components-initial-test.js
Created December 8, 2017 21:33
effective-testing-for-styled-components-initial-test
// lib/blocks/Button/__tests__/index.js
import React from 'react';
import Button from '../index';
import renderer from 'react-test-renderer';
describe('Button Block', () => {
it('renders correctly', () => {
const tree = renderer.create(
<Button>
@alanbsmith
alanbsmith / effective-testing-for-styled-components-test-output.sh
Created December 8, 2017 21:35
effective-testing-for-styled-components-test-output
$ yarn test
PASS lib/blocks/Button/__tests__/index.js
Button Block
✓ renders correctly (15ms)
› 1 snapshot written.
Snapshot Summary
› 1 snapshot written in 1 test suite.
@alanbsmith
alanbsmith / effective-testing-for-styled-components-snapshot-file-structure.md
Created December 8, 2017 21:36
effective-testing-for-styled-components-snapshot-file-structure 
├ lib/
├── blocks/
| ├── Button/
| | ├── __tests__/
| | | ├── __snapshots__/
| | | | └── index.js.snap // <- Button snapshot
| | | ├── Icon.js         // <- Element Test
| | | └── index.js        // <- Block Test
@alanbsmith
alanbsmith / effective-testing-for-styled-components-updated-styles.js
Created December 8, 2017 21:38
effective-testing-for-styled-components-updated-styles
…
const Button = styled.button`
background-color: #7D7D7D;
border-radius: 2px;
border: solid 1px transparent;
color: #FFF;
cursor: pointer;
…
`;