Added new formatter

Fixed how formatter is used in cli.ts
Fix #187

.sonarrc

@@ -1,11 +1,11 @@
 {
     "collector": {
-        "name": "jsdom",
+        "name": "cdp",
         "options": {
             "waitFor": 100
         }
     },
-    "formatter": "json",
+    "formatter": "stylish",
     "rules": {
         "axe": "warning",
         "disallowed-headers": "warning",

package.json

@@ -34,8 +34,8 @@
   "bugs": "https://github.com/MicrosoftEdge/Sonar/issues",
   "homepage": "https://github.com/MicrosoftEdge/Sonar#readme",
   "dependencies": {
-    "browserslist": "^2.1.1",
     "axe-core": "^2.2.0",
+    "browserslist": "^2.1.1",
     "chalk": "^1.1.3",
     "chrome-remote-interface": "^0.22.0",
     "debug": "^2.6.1",

src/lib/cli.ts

@@ -37,12 +37,11 @@ export const cli = {
     /** Executes the CLI based on an array of arguments that is passed in. */
     execute: async (args: string | Array<string> | Object): Promise<number> => {
 
-        const format = (results) => {
+        const format = (formatterName, results) => {
             const formatters = resourceLoader.getFormatters();
+            const formatter = formatters.get(formatterName) || formatters.get('json');
 
-            formatters.forEach((formatter) => {
-                formatter.format(results);
-            });
+            formatter.format(results);
         };
 
         const currentOptions = options.parse(args);
@@ -88,7 +87,7 @@ export const cli = {
                     return result.severity === Severity.error;
                 });
 
-                format(results);
+                format(engine.formatter, results);
 
                 if (hasError) {
                     exitCode = 1;

src/lib/formatters/stylish/stylish.ts

@@ -0,0 +1,61 @@
+/**
+ * @fileoverview The basic formatter, it just a table format with diferent colors
+ * for errors and warnings.
+ */
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+import * as chalk from 'chalk';
+import * as _ from 'lodash';
+import * as table from 'text-table';
+
+import { debug as d } from '../../utils/debug';
+import { IFormatter, Severity } from '../../types'; // eslint-disable-line no-unused-vars
+import * as logger from '../../utils/logging';
+
+const debug = d(__filename);
+
+// ------------------------------------------------------------------------------
+// Formatter
+// ------------------------------------------------------------------------------
+
+const formatter: IFormatter = {
+    /** Format the problems grouped by `resource` name and sorted by line and column number */
+    format(messages) {
+
+        debug('Formatting results');
+
+        const resources = _.groupBy(messages, 'resource');
+        let warnings = 0;
+        let errors = 0;
+
+        _.forEach(resources, (msgs, resource) => {
+            const sortedMessages = _.sortBy(msgs, ['line', 'column']);
+            const tableData = [];
+
+            logger.log(chalk.cyan(`${resource}: ${msgs.length} issues`));
+            _.forEach(sortedMessages, (msg) => {
+                const severity = Severity.error === msg.severity ? chalk.red('Error') : chalk.yellow('Warning');
+
+                if (Severity.error === msg.severity) {
+                    errors++;
+                } else {
+                    warnings++;
+                }
+
+                tableData.push([severity, msg.message, msg.ruleId]);
+            });
+
+            logger.log(table(tableData));
+            logger.log('');
+        });
+
+        const color = errors > 0 ? chalk.red : chalk.yellow;
+
+        logger.log(color(`Found ${errors} errors and ${warnings} warnings`));
+    }
+};
+
+export default formatter;

src/lib/sonar.ts

@@ -31,6 +31,7 @@ export class Sonar extends EventEmitter {
     private collector: ICollector
     private messages: Array<IProblem>
     private browsersList: Array<String> = [];
+    private _formatter: string
 
     get pageContent() {
         return this.collector.html;
@@ -44,6 +45,10 @@ export class Sonar extends EventEmitter {
         return this.browsersList;
     }
 
+    get formatter() {
+        return this._formatter;
+    }
+
     constructor(config) {
         super({
             delimiter: '::',
@@ -60,6 +65,9 @@ export class Sonar extends EventEmitter {
             this.browsersList = browserslist(config.browserslist);
         }
 
+        debug('Setting the selected formatter');
+        this._formatter = config.formatter;
+
         debug('Loading plugins');
         this.plugins = new Map();
         if (config.plugins) {

tests/lib/cli.ts

@@ -14,7 +14,9 @@ const sonar = {
 const formatter = { format: () => { } };
 const resourceLoader = {
     getFormatters() {
-        return [formatter];
+        return new Map([
+            ['json', formatter]
+        ]);
     }
 };
 const logger = {