[WIP] add tests and storybooks

.eslintrc.js

@@ -4,4 +4,12 @@ module.exports = {
     browser: true,
     jest: true,
   },
+  rules: {
+    'import/no-extraneous-dependencies': [
+      0,
+      {
+        devDependencies: ['.storybook/**', 'stories/**'],
+      },
+    ],
+  },
 };

.storybook/addons.js

@@ -0,0 +1,2 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';

.storybook/config.js

@@ -0,0 +1,7 @@
+import { configure } from '@storybook/react';
+
+function loadStories() {
+  require('../src/stories');
+}
+
+configure(loadStories, module);

package.json

@@ -3,18 +3,22 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "jest-styled-components": "^6.2.1",
     "react": "^16.5.2",
     "react-dom": "^16.5.2",
-    "react-scripts": "2.0.5"
+    "react-scripts": "2.0.5",
+    "styled-components": "^4.0.2"
   },
   "homepage": "https://lo-dota.github.io/ui",
   "scripts": {
+    "storybook": "start-storybook -p 9009 -s public",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "eslint src --ext .jsx && react-scripts test",
     "eject": "react-scripts eject",
     "predeploy": "yarn build",
-    "deploy": "gh-pages -d build"
+    "deploy": "gh-pages -d build",
+    "build-storybook": "build-storybook -s public"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -26,11 +30,20 @@
     "not op_mini all"
   ],
   "devDependencies": {
+    "@storybook/react": "^3.4.11",
+    "enzyme": "^3.7.0",
+    "enzyme-adapter-react-16": "^1.6.0",
+    "enzyme-to-json": "^3.3.4",
     "eslint": "5.6.0",
     "eslint-config-airbnb": "^17.1.0",
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-jsx-a11y": "^6.1.2",
     "eslint-plugin-react": "^7.11.1",
-    "gh-pages": "^2.0.1"
+    "gh-pages": "^2.0.1",
+    "@storybook/addon-actions": "^3.4.11",
+    "@storybook/addon-links": "^3.4.11",
+    "@storybook/addons": "^3.4.11",
+    "babel-core": "^6.26.3",
+    "babel-runtime": "^6.26.0"
   }
 }

src/App.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import './App.css';
 
 const App = () => <h1>Hello world</h1>;
 

src/components/TitleBar/TitleBar.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Root = styled.div`
+  height: 100px;
+  background-color: #000;
+`;
+
+const TitleBar = () => <Root />;
+
+export default TitleBar;

src/components/TitleBar/__test__/TitleBar.test.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import TitleBar from '../index';
+import 'jest-styled-components';
+
+describe('TitleBar', () => {
+  it('should contain css property -webkit-app-region: drag', () => {
+    const wrapper = shallow(<TitleBar />);
+
+    expect(wrapper).toHaveStyleRule();
+    // expect(wrapper).toMatchSnapshot();
+  });
+});

src/components/TitleBar/index.js

@@ -0,0 +1 @@
+export { default } from './TitleBar';

src/index.css

@@ -6,6 +6,9 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background: white;
+  -webkit-app-region: drag;
+  height: 100vh;
 }
 
 code {

src/setupTests.js

@@ -0,0 +1,7 @@
+/* eslint-disable */
+import { createSerializer } from 'enzyme-to-json';
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+configure({ adapter: new Adapter() });
+expect.addSnapshotSerializer(createSerializer({ mode: 'deep' }));

src/stories/index.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import TitleBar from '../components/TitleBar';
+
+storiesOf('TitleBar', module).add('default', () => <TitleBar />);