setup webpack config and test env (#1)

* add webpack config * add circleci config * add repo token for coveralls * add readme
AgileVentures · Jan 8, 2019 · d5e6b59 · d5e6b59
1 parent 356a925
commit d5e6b59
Show file tree

Hide file tree

Showing 15 changed files with 7,143 additions and 155 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["react", "env"]
+}
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -1,19 +1,21 @@
 version: 2
 jobs:
   build:
+    working_directory: ~/WebsiteOne-FE
     docker:
-      - image: circleci/node:10.15
-    working_directory: ~/repo
+      - image: circleci/node:8
     steps:
       - checkout
       - restore_cache:
           keys:
-          - v1-dependencies-{{ checksum "package.json" }}
-          - v1-dependencies-
-      - run: yarn install
+            - v1-dependencies-{{ checksum "package.json" }}
+            - v1-dependencies-
+      - run: yarn
       - save_cache:
           paths:
             - node_modules
           key: v1-dependencies-{{ checksum "package.json" }}
       - run: yarn test
-
+      - run:
+          name: Collect test coverage
+          command: yarn coveralls
diff --git a/.coveralls.yml b/.coveralls.yml
@@ -0,0 +1 @@
+repo_token: LOlqJz40tDWAZuNO7LieRG2rPDGLWpI1D
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
 node_modules/
+/coverage
diff --git a/.travis.yml b/.travis.yml
@@ -8,5 +8,5 @@ install: true
 script:
   - yarn
   - yarn test
-  - yarn run build
+  - yarn build
   - yarn coveralls
diff --git a/README.MD b/README.MD
@@ -0,0 +1 @@
+[![Coverage Status](https://coveralls.io/repos/github/AgileVentures/WebsiteOne-FE/badge.svg?branch=develop)](https://coveralls.io/github/AgileVentures/WebsiteOne-FE?branch=develop)
diff --git a/jest.config.js b/jest.config.js
@@ -0,0 +1,14 @@
+module.exports = {
+  verbose: true,
+  collectCoverage: true,
+  setupTestFrameworkScriptFile: "<rootDir>/src/tests/setupTests.js",
+  coverageReporters: ["text", "lcov"],
+  collectCoverageFrom: [
+    "**/*.{js,jsx}",
+    "!**/*.{config}.{js}",
+    "!**/node_modules/**",
+    "!**/vendor/**",
+    "!**/coverage/**",
+    "!**/src/index.js"
+  ]
+};
diff --git a/package.json b/package.json
@@ -7,8 +7,10 @@
   "author": "AgileVentures",
   "license": "MIT",
   "scripts": {
-    "start": "parcel index.html",
-    "build": "parcel build index.html"
+    "start": "webpack-dev-server --mode development --open",
+    "build": "webpack --mode production",
+    "test": "jest",
+    "coveralls": "cat ./coverage/lcov.info | coveralls"
   },
   "dependencies": {
     "react": "^16.7.0",
@@ -17,6 +19,24 @@
   },
   "devDependencies": {
     "babel-preset-env": "^1.7.0",
-    "babel-preset-react": "^6.24.1"
+    "babel-preset-react": "^6.24.1",
+    "babel-core": "^6.26.3",
+    "babel-jest": "^23.6.0",
+    "babel-loader": "7",
+    "babel-jest": "^23.6.0",
+    "coveralls": "^3.0.2",
+    "enzyme": "^3.8.0",
+    "enzyme-adapter-react-16": "^1.7.1",
+    "html-webpack-plugin": "^3.2.0",
+    "jest": "^23.6.0",
+    "regenerator-runtime": "^0.13.1",
+    "webpack": "^4.27.1",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.10",
+    "css-loader": "^2.0.1",
+    "mini-css-extract-plugin": "^0.5.0",
+    "node-sass": "^4.11.0",
+    "sass-loader": "^7.1.0",
+    "url-loader": "^1.1.2"
   }
 }
diff --git a/src/Wink.js b/src/Wink.js
@@ -0,0 +1,4 @@
+
+import React from "react";
+
+export const Wink = () => <span>😉</span>;
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Books By Povic</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+
+</head>
+<body>
+    <div id="root"></div>
+</body>
+</html>
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,7 @@
+
+import React from "react";
+import { render } from "react-dom";
+
+import { Wink } from "./Wink";
+
+render(Wink(), document.getElementById("root"));
diff --git a/src/tests/setupTests.js b/src/tests/setupTests.js
@@ -0,0 +1,4 @@
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+Enzyme.configure({ adapter: new Adapter() });
diff --git a/src/tests/wink.spec.js b/src/tests/wink.spec.js
@@ -0,0 +1,12 @@
+import React from 'react'
+import {shallow} from 'enzyme';
+
+import {Wink} from '../Wink';
+
+
+describe('Wink', () => {
+    it('should wink', () => {
+        const component = shallow(<Wink/>)
+        expect(component.find('span').text()).toBe("😉")
+    })
+})
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,27 @@
+const HtmlWebPackPlugin = require("html-webpack-plugin");
+
+const htmlPlugin = new HtmlWebPackPlugin({
+  template: "./src/index.html",
+  filename: "./index.html"
+});
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        include: path.resolve(__dirname, "src"),
+        use: ["babel-loader"]
+      },
+      {
+        test: /\.(sc|sa|c)ss$/,
+        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
+      },
+      {
+        test: /\.(png|woff|woff2|eot|ttf|svg)$/,
+        use: "url-loader?limit=100000"
+      }
+    ]
+  },
+  plugins: [htmlPlugin]
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		[![Coverage Status](https://coveralls.io/repos/github/AgileVentures/WebsiteOne-FE/badge.svg?branch=develop)](https://coveralls.io/github/AgileVentures/WebsiteOne-FE?branch=develop)
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,4 @@

		import React from "react";

		export const Wink = () => <span>😉</span>;