Merge pull request #32 from homeday-de/develop

[Release] Homeday 2.0

.circleci/config.yml

@@ -22,7 +22,7 @@ jobs:
           name: Build Storybook
           command: | 
             npm run build
-            npm run storybook:build
+            npm run build:storybook
       - persist_to_workspace:
           root: ~/homeday-blocks
           paths: 

.coveralls.yml

@@ -0,0 +1,2 @@
+service_name: travis-pro
+repo_token: 9w8H3LVdjGhOpjhW461fxEMighMzzJX1a

.gitignore

@@ -22,4 +22,7 @@ yarn-error.log*
 *.sw*
 
 # AWS credentials
-aws.json
+aws.json
+
+# Jest coverage reports
+/coverage

.travis.yml

@@ -7,8 +7,11 @@ before_install:
 install:
 - npm i
 script:
+- npm run test:unit:ci
 - npm run build
-- npm run storybook:build
+- npm run build:storybook
+after_success:
+- npm run coverage
 deploy:
   provider: s3
   access_key_id: AKIAJ32SPOKYID5HUHBQ

README.md

@@ -1,5 +1,7 @@
+[![Build Status](https://travis-ci.com/homeday-de/homeday-blocks.svg?token=rxKqgsBkMR5FqNpvxBcx&branch=develop)](https://travis-ci.com/homeday-de/homeday-blocks) [![Coverage Status](https://coveralls.io/repos/github/homeday-de/homeday-blocks/badge.svg?t=Kbz7Vb)](https://coveralls.io/github/homeday-de/homeday-blocks)
+
 # Homeday Blocks
-A library of Vue components used across Homeday projects
+A library of Vue components used across Homeday projects - [here](http://hd-storybook.s3-website.eu-central-1.amazonaws.com/develop/)
 
 ## Local setup
 
@@ -39,9 +41,21 @@ npm run build:storybook
 npm run build:lib
 ```
 
+## Testing
+
+To just run all unit tests:
+```bash
+npm run test:unit
+```
+
+To watch for changes while writing tests:
+```bash
+npm run test:unit:watch
+```
+
 ## Deployment
 
-The [CI](https://travis-ci.com/homeday-de/homeday-blocks) will deploy storybook automatically, once PR is merged to `develop` branch. Additionally, you can deploy your current working branch locally, by running 
+The [CI](https://travis-ci.com/homeday-de/homeday-blocks) will deploy storybook automatically to our [showcase env](http://hd-storybook.s3-website.eu-central-1.amazonaws.com/develop/), once PR is merged to `develop` branch. Additionally, you can deploy your current working branch locally, by running 
 
 ```
 npm run deploy
@@ -53,8 +67,9 @@ for your local build by passing it as argument
 ```
 $ FOLDER=test npm run deploy
 ```
+This will deploy your branch to http://hd-storybook.s3-website.eu-central-1.amazonaws.com/test/ .
 
-If no folder is specified, timestamp will be used as folder prefix.
+**If no folder is specified, timestamp will be used as folder prefix.** This is to avoid collision with other working branches.
 
 For this to work, you have to all add your `AWS` credentials to the project. You can create JSON file in root folder, with following structure:
 

config/storybook/config.js

@@ -1,15 +1,20 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import 'hd-blocks/styles/main.scss';
-import { configure, addDecorator } from '@storybook/vue';
-import { withNotes } from '@storybook/addon-notes';
+import { configure, addParameters, addDecorator } from '@storybook/vue';
 import { withKnobs } from '@storybook/addon-knobs';
 import '@storybook/addon-console';
 
 import tooltipInstall from 'hd-blocks/components/tooltip/installer';
+import HdTheme from './themes/HdTheme';
 
 tooltipInstall();
 
-addDecorator(withNotes);
+addParameters({
+  options: {
+    theme: HdTheme,
+  },
+});
+
 addDecorator(withKnobs);
 
 const req = require.context('../../src/stories', true, /.stories.js$/);

config/storybook/themes/HdTheme.js

@@ -0,0 +1,10 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { create } from '@storybook/theming';
+import logo from './logo.svg';
+
+export default create({
+  base: 'light',
+  brandTitle: 'Homeday',
+  brandUrl: 'https://www.homeday.de',
+  brandImage: logo,
+});

config/storybook/webpack.config.js

@@ -1,23 +1,21 @@
 const generateWebpackAlias = require('../../webpack-alias');
 
-module.exports = (baseConfig, env, defaultConfig) => {
-  // Extend defaultConfig as you need.
+module.exports = ({ config }) => {
+  // Extend config as you need.
   // eslint-disable-next-line
-  defaultConfig.resolve.alias = generateWebpackAlias({
+  config.resolve.alias = generateWebpackAlias({
     custom: {
       '@': './src',
       vue$: './node_modules/vue/dist/vue.esm.js',
     },
   });
-  defaultConfig.module.rules.push({
+  config.module.rules.push({
     test: /\.md$/,
     use: [
       {
-        loader: 'html-loader',
-      }, {
-        loader: 'markdown-loader',
+        loader: 'raw-loader',
       },
     ],
   });
-  return defaultConfig;
+  return config;
 };

jest.config.js

@@ -1,4 +1,13 @@
+/**
+ * NOTE: hd-blocks mapper is needed to solve hd-blocks path in the components
+ */
 module.exports = {
+  collectCoverageFrom: [
+    'src/components/**/*.vue',
+  ],
+  coverageReporters: [
+    'lcov',
+  ],
   moduleFileExtensions: [
     'js',
     'jsx',
@@ -12,6 +21,7 @@ module.exports = {
   },
   moduleNameMapper: {
     '^@/(.*)$': '<rootDir>/src/$1',
+    '^hd-blocks/(.*)$': '<rootDir>/src/$1',
   },
   snapshotSerializers: [
     'jest-serializer-vue',