From 0537de2010fd59b7f9d962c452d2f599ebeb47ac Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Thu, 21 Feb 2019 14:08:35 +0100
Subject: [PATCH] REMOVE debugger statement && CHANGE log statement in channel
 to use logger.debug && ADD info & debug method to logger

---
 lib/channel-postmessage/package.json |  1 +
 lib/channel-postmessage/src/index.ts | 11 +++++------
 lib/client-logger/src/index.test.ts  | 14 +++++++++++++-
 lib/client-logger/src/index.ts       |  6 +++++-
 4 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/lib/channel-postmessage/package.json b/lib/channel-postmessage/package.json
index feccd7e9f925..f28d06e5e06c 100644
--- a/lib/channel-postmessage/package.json
+++ b/lib/channel-postmessage/package.json
@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "@storybook/channels": "5.0.0-beta.3",
+    "@storybook/client-logger": "5.0.0-beta.3",
     "global": "^4.3.2",
     "telejson": "^1.0.1"
   },
diff --git a/lib/channel-postmessage/src/index.ts b/lib/channel-postmessage/src/index.ts
index 90f23cc4968f..25d672a6e238 100644
--- a/lib/channel-postmessage/src/index.ts
+++ b/lib/channel-postmessage/src/index.ts
@@ -1,5 +1,7 @@
 import { window, document } from 'global';
 import Channel, { ChannelEvent, ChannelHandler } from '@storybook/channels';
+import { logger } from '@storybook/client-logger';
+
 import { isJSON, parse, stringify } from 'telejson';
 
 interface RawEvent {
@@ -90,15 +92,12 @@ export class PostmsgTransport {
       const { data } = rawEvent;
       const { key, event } = typeof data === 'string' && isJSON(data) ? parse(data) : data;
       if (key === KEY) {
-        // tslint:disable-next-line no-console
-        console.debug(`message arrived at ${this.config.page}`, event.type, ...event.args);
+        logger.debug(`message arrived at ${this.config.page}`, event.type, ...event.args);
         this.handler(event);
       }
     } catch (error) {
-      // tslint:disable-next-line no-console
-      console.error(error);
-      // tslint:disable-next-line no-debugger
-      debugger;
+      logger.error(error);
+      // debugger;
     }
   }
 }
diff --git a/lib/client-logger/src/index.test.ts b/lib/client-logger/src/index.test.ts
index ee9eaf5dfa8a..0d2bc5782bcf 100644
--- a/lib/client-logger/src/index.test.ts
+++ b/lib/client-logger/src/index.test.ts
@@ -3,17 +3,29 @@ import { logger } from '.';
 describe('client-logger', () => {
   const initialConsole = { ...global.console };
   beforeEach(() => {
+    global.console.debug = jest.fn();
     global.console.log = jest.fn();
+    global.console.info = jest.fn();
     global.console.warn = jest.fn();
     global.console.error = jest.fn();
   });
   afterAll(() => {
     global.console = initialConsole;
   });
+  it('should have an debug method that displays the message in red, with a trace', () => {
+    const message = 'debug message';
+    logger.debug(message);
+    expect(global.console.debug).toHaveBeenCalledWith(message);
+  });
+  it('should have an log method that displays the message in red, with a trace', () => {
+    const message = 'log message';
+    logger.log(message);
+    expect(global.console.log).toHaveBeenCalledWith(message);
+  });
   it('should have an info method that displays the message', () => {
     const message = 'information';
     logger.info(message);
-    expect(global.console.log).toHaveBeenCalledWith(message);
+    expect(global.console.info).toHaveBeenCalledWith(message);
   });
   it('should have a warning method that displays the message in yellow, with a trace', () => {
     const message = 'warning message';
diff --git a/lib/client-logger/src/index.ts b/lib/client-logger/src/index.ts
index 77a01d8b4d44..c501e05b99e5 100644
--- a/lib/client-logger/src/index.ts
+++ b/lib/client-logger/src/index.ts
@@ -1,7 +1,11 @@
 const { console } = global;
 
+/* tslint:disable: no-console */
+
 export const logger = {
-  info: (message: any, ...rest: any[]): void => console.log(message, ...rest),
+  debug: (message: any, ...rest: any[]): void => console.debug(message, ...rest),
+  log: (message: any, ...rest: any[]): void => console.log(message, ...rest),
+  info: (message: any, ...rest: any[]): void => console.info(message, ...rest),
   warn: (message: any, ...rest: any[]): void => console.warn(message, ...rest),
   error: (message: any, ...rest: any[]): void => console.error(message, ...rest),
 };