Merge pull request #28 from immnk/api-changes-for-making-project-more…

…-useful

Api changes for making project more useful

.eslintignore

@@ -0,0 +1 @@
+test/**

.eslintrc.js

@@ -1,18 +1,20 @@
 module.exports = {
     "env": {
         "browser": true,
-        "node" : true,
+        "node": true,
         "es6": true
     },
     "extends": "eslint:recommended",
     "parserOptions": {
         "sourceType": "module"
     },
     "rules": {
-        "no-unused-vars" : 2,
-        "no-undef" : 2,
-        "no-console": ["error", { allow: ["warn", "log"] }],
-        "indent": ["error",2],
+        "no-unused-vars": 2,
+        "no-undef": 2,
+        "no-console": ["error", {
+            allow: ["warn", "log"]
+        }],
+        "indent": ["error", 2],
         "quotes": [
             "error",
             "double"
@@ -21,5 +23,9 @@ module.exports = {
             "error",
             "always"
         ]
+    },
+    "globals": {
+        "document": true,
+        "window": true
     }
 };

.travis.yml

@@ -2,13 +2,11 @@ language: node_js
 node_js:
   - "stable"
 install:
-  - npm install -g mocha
   - npm install -g codecov
-  - npm install -g nyc coveralls
-  - npm install
+  - npm install --only=dev
 after_success:
-  - npm run build:prod
   - npm run coverage
+  - npm run build:prod
 deploy:
   provider: pages
   skip-cleanup: true

.vscode/launch.json

@@ -4,6 +4,21 @@
     // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
     "version": "0.2.0",
     "configurations": [
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Mocha Tests - UsersModule",
+            "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
+            "args": [
+                "-u",
+                "tdd",
+                "--timeout",
+                "999999",
+                "--colors",
+                "${workspaceFolder}\\test\\usersModule.test.js"
+            ],
+            "internalConsoleOptions": "openOnSessionStart"
+        },
         {
             "name": "Launch index.html",
             "type": "chrome",

LEARNINGS.md

@@ -66,3 +66,29 @@ module.exports = {
 
 1. Added mocha, istanbul and chai to create unit test cases and then use a online tool like coveralls to generate a comprehensive code coverage. this will give us a nice little badge also.
 2. Added GitHub issue templates
+
+## Issues and how did i resolve them
+
+> `npm test` worked but coverage report was empty. So this made the coverage report not to be sent by nyc to coveralls.
+
+Solution:
+This happened because my unit test was loading sync file in before all and the unit test ran but mocha never exited after running test cases. So the solution was
+
+`package.json`
+
+``` json
+{
+  "test": "npm run lint && nyc --reporter=html --reporter=text mocha --exit",
+}
+```
+
+`domModule.test.js`
+
+``` javascript
+before(function () {
+  this.timeout(0); // This is important so that before doesnt timeout
+  ...
+  let htmlString = fs.readFileSync("./src/index.html").toString();
+  ...
+});
+```

README.md

@@ -1,35 +1,34 @@
-Webpack Testing
----
+# Webpack Testing
 
-[![Build Status](https://travis-ci.com/immnk/webpack-testing.svg?branch=master)](https://travis-ci.com/immnk/webpack-testing) [![Dependencies](https://david-dm.org/immnk/webpack-testing.svg)](https://david-dm.org/) [![CodeFactor](https://www.codefactor.io/repository/github/immnk/webpack-testing/badge)](https://www.codefactor.io/repository/github/immnk/webpack-testing) [![Coverage Status](https://coveralls.io/repos/github/immnk/webpack-testing/badge.svg?branch=master)](https://coveralls.io/github/immnk/webpack-testing?branch=master) [![Tests](https://img.shields.io/badge/tests-covered-brightgreen.svg)](https://github.com/immnk/webpack-testing/issues/5)
+[![Build Status](https://travis-ci.org/immnk/webpack-testing.svg?branch=master)](https://travis-ci.org/immnk/webpack-testing) [![Dependencies](https://david-dm.org/immnk/webpack-testing.svg)](https://david-dm.org/) [![CodeFactor](https://www.codefactor.io/repository/github/immnk/webpack-testing/badge)](https://www.codefactor.io/repository/github/immnk/webpack-testing) [![Coverage Status](https://coveralls.io/repos/github/immnk/webpack-testing/badge.svg?branch=master)](https://coveralls.io/github/immnk/webpack-testing?branch=master) [![Tests](https://img.shields.io/badge/tests-covered-brightgreen.svg)](https://github.com/immnk/webpack-testing/issues/5)
 
-Webpack Testing is a repository created with the intention of using `webpack` to compile JS modules. This project create `dist` folder during build and deploy its content to `gh-pages` using [![Travis CI](https://img.shields.io/badge/travis%20ci-enabled-brightgreen.svg)](https://travis-ci.com/immnk/webpack-testing)
+> Webpack Testing is a repository created with the intention of using `webpack` to compile JS modules. This project create `dist` folder during build and deploy its content to `gh-pages` using [![Travis CI](https://img.shields.io/badge/travis%20ci-enabled-brightgreen.svg)](https://travis-ci.org/immnk/webpack-testing)
 
-### Table of contents
----
+## Table of contents
 
 1. [Set up](#set-up)
 2. [Test](#test)
 3. [Tasks](#tasks)
 4. [Useful websites](#useful-websites)
-5. [LICENSE](#license)
+5. [VS Code Plugins Recommended](#vs-code-plugins-recommended)
+6. [LICENSE](#license)
+
+## Set up
 
-### Set up
----
 Follow the following steps:
 
 1. `git clone https://github.com/immnk/logo-generator-app.git`
 2. `cd webpack_testing && npm install`
 3. For testing in dev `npm start`. To test prod `NODE_ENV=production npm start`
 4. Open `dist/index.html` in browser.
 
-### Test
----
+## Test
+
 1. Open webpack_testing folder where the code is cloned.
 2. Open command prompt at the folder and run `npm test`
 
-### Tasks
----
+## Tasks
+
 All tasks and issues are listed as items in [Tasks & issues in repository Issues tab](https://github.com/immnk/webpack-testing/issues)
 
 - [x] Write a README file.
@@ -41,13 +40,22 @@ All tasks and issues are listed as items in [Tasks & issues in repository Issues
 - [ ] Make automatic deployments on release branch
 - [x] Create unit test cases with Mocha(JS test framework) and Chai(assertion library)
 
-### Useful websites
----
+## VS Code Plugins Recommended
+
+- Beautify
+- Debugger for Chrome
+- ESLint
+- GitLens
+- IntelliSense for CSS class names
+- markdownlint
+- vscode-icons
+
+## Useful websites
 
 1. Mock data - https://www.mockaroo.com/
 2. Background generator - https://cssgradient.io/gradient-backgrounds/
 3. Markdown tricks - https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet
 
-### License
+## License
 
 [MIT License](https://github.com/immnk/webpack-testing/blob/master/LICENSE)