From 18381352fc93933c3444d78cfd40d35d2d02ab79 Mon Sep 17 00:00:00 2001
From: Nikolay Emrikh <redishko@gmail.com>
Date: Sun, 23 Sep 2018 22:25:20 +0300
Subject: [PATCH] Adds more tests and fixes problems (#37)

* Adds more tests and fixes problems

* more tests and more bug fixes

* more promise tests

* moore tests

* escape key and value values

* implemented printer & logger from whatwg spec

* temp version of format specifiers
---
 gulpfile.js                            |  37 ++--
 index-silent.html                      |   5 +-
 index.html                             |   6 +-
 js/array/array-view.js                 |   3 +
 js/console.js                          | 133 ++++++++++----
 js/enums.js                            |  20 ---
 js/function/function-view.js           |   7 +-
 js/index.js                            |   2 +-
 js/object/map-entry-view.js            |   2 +-
 js/object/object-view.js               |  34 ++--
 js/object/promise-view.js              |   2 +-
 js/object/string-number-view.js        |   5 +-
 js/tests/common.test.js                |  26 +++
 js/tests/configuration.test.js         |  79 ++++-----
 js/tests/markup.test.js                |   3 +-
 js/tests/object/number-string.test.js  |  57 ++++++
 js/tests/object/object-literal.test.js |  67 +++++++
 js/tests/object/promise.test.js        | 237 +++++++++++++++++++++++++
 js/tests/test-helpers.js               |  30 ++++
 js/type-view.js                        |  29 ++-
 jsconsole.html                         |   6 +-
 karma-chai-adapter.js                  |   4 +
 karma.conf.js                          |  10 +-
 package-lock.json                      |   6 -
 package.json                           |   1 -
 sass/entry-container.scss              |  13 +-
 sass/style.scss                        |   7 +-
 test.html                              |   1 +
 28 files changed, 650 insertions(+), 182 deletions(-)
 create mode 100644 js/tests/common.test.js
 create mode 100644 js/tests/object/number-string.test.js
 create mode 100644 js/tests/object/object-literal.test.js
 create mode 100644 js/tests/object/promise.test.js
 create mode 100644 js/tests/test-helpers.js
 create mode 100644 karma-chai-adapter.js

diff --git a/gulpfile.js b/gulpfile.js
index de95e1e..ff5c601 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -82,15 +82,13 @@ gulp.task(`build-scripts`, () => {
             jsnext: true,
             browser: true
           }),
-          commonjs({
-            include: `node_modules/**`
-          }),
+          commonjs(),
           json(),
           babel({
             babelrc: false,
             exclude: [`node_modules/**`, `js/tests/**`],
             presets: [
-              [`@babel/preset-env`, {modules: false}]
+              [`@babel/preset-env`, {modules: false, useBuiltIns: `entry`}]
             ]
           })
         ]
@@ -111,9 +109,7 @@ gulp.task(`build-prompt`, () => {
             jsnext: true,
             browser: true
           }),
-          commonjs({
-            include: `node_modules/**`
-          }),
+          commonjs(),
           json(),
           babel({
             babelrc: false,
@@ -168,18 +164,25 @@ gulp.task(`build-tests`, () => {
 });
 
 gulp.task(`test`, function (done) {
-  // return gulp
-  //     .src([`js/**/*.test.js`], {
-  //       read: false
-  //     })
-  //     .pipe(mocha({
-  //       compilers: [`js:babel-register`],
-  //       reporter: `spec`
-  //     }));
+  let testOnlyFiles;
+  if (process.env.TEST_ONLY_FILES) {
+    testOnlyFiles = process.env.TEST_ONLY_FILES
+      .trim()
+      .split(/\s*\,\s*|\s+/)
+      .join(`|`);
+  }
+  const testsGlob = `build/js/tests/**/${testOnlyFiles ? `+(${testOnlyFiles})` : `*`}.test.js`;
+
   new KarmaServer({
     configFile: __dirname + `/karma.conf.js`,
-    // singleRun: true,
-    debug: true
+    singleRun: process.env.TEST_DEBUG !== `true`,
+    debug: true,
+    files: [
+      `node_modules/chai/chai.js`,
+      `karma-chai-adapter.js`,
+      `build/js/index.js`,
+      testsGlob
+    ]
   }, done).start();
 });
 
diff --git a/index-silent.html b/index-silent.html
index 34bad4a..c578faf 100644
--- a/index-silent.html
+++ b/index-silent.html
@@ -21,13 +21,14 @@
     <script>
       const obj = {};
       const arr = [obj];
-      arr.push(arr);
-      // arr.fn = fn;
       const fn = (bar = 123) => {
         return bar;
       };
+      arr.push(arr);
+      arr.fn = fn;
       fn.arr = arr;
       fn.obj = obj;
+      fn.fn = fn;
       obj.obj = obj;
       obj.arr = arr;
       obj.fn = fn;
diff --git a/index.html b/index.html
index afe6ca5..36dcd19 100644
--- a/index.html
+++ b/index.html
@@ -58,7 +58,8 @@
       });
       const promptContainer = document.querySelector(`.prompt-container`);
       const prompt = new Prompt(promptContainer, `jsConsole`);
-      window.jsConsole.onAny = (appendedElHeight) => {
+      window.jsConsole.onAny = (rowEl) => {
+        const appendedElHeight = rowEl.offsetHeight;
         const promptOffsetBottom = promptContainer.offsetTop + prompt.viewHeight;
         if (promptOffsetBottom < document.body.clientHeight) {
           window.scroll(0, document.body.scrollTop + appendedElHeight);
@@ -72,9 +73,10 @@
         return bar;
       };
       arr.push(arr);
-      // arr.fn = fn;
+      arr.fn = fn;
       fn.arr = arr;
       fn.obj = obj;
+      fn.fn = fn;
       obj.obj = obj;
       obj.arr = arr;
       obj.fn = fn;
diff --git a/js/array/array-view.js b/js/array/array-view.js
index cc67a38..c861578 100644
--- a/js/array/array-view.js
+++ b/js/array/array-view.js
@@ -40,6 +40,8 @@ export default class ArrayView extends TypeView {
     !this._parentView) {
       this.toggleItalic(true);
     }
+
+    this._state.isOpened = this.isOpeningAllowed;
   }
 
   _getStateDescriptors() {
@@ -178,6 +180,7 @@ export default class ArrayView extends TypeView {
       addedKeysCounter++;
     }
     if (!inHead) {
+      fragment.appendChild(this._createGettersEntriesFragment());
       TypeView.appendEntryElIntoFragment(
           this._createTypedEntryEl({obj: arr, key: `length`, mode, notCheckDescriptors: true}),
           fragment
diff --git a/js/console.js b/js/console.js
index 4768e26..d7baa23 100644
--- a/js/console.js
+++ b/js/console.js
@@ -12,6 +12,8 @@ import {Mode, ViewType, Env} from './enums';
 
 const DEFAULT_MAX_FIELDS_IN_HEAD = 5;
 
+// const getSpecifiresRE = () => /%s|%d|%i|%f|%o|%O/g;
+
 /**
  * Console
  * @class
@@ -110,6 +112,78 @@ export default class Console {
     return params;
   }
 
+  /**
+   * This is implementation of https://console.spec.whatwg.org/#logger
+   * @param {{}} opts
+   * @param {[]} entries
+   */
+  _log(opts, entries) {
+    if (!entries.length) {
+      return;
+    }
+
+    // if (entries.length > 1 && getSpecifiresRE().test(entries[0])) {
+    //   this._print(opts, this._format(entries));
+    //   return;
+    // }
+
+    this._print(opts, entries);
+  }
+
+  // _format(entries) {
+  //   let targetStr = entries.shift();
+  //
+  //   const re = getSpecifiresRE();
+  //
+  //   let match;
+  //   while ((match = re.exec(targetStr)) !== null) {
+  //     const substitution = entries.shift();
+  //     const specifier = match[0];
+  //     let convertedSubstitution;
+  //     switch (specifier) {
+  //       case `%s`:
+  //         convertedSubstitution = substitution;
+  //         break;
+  //       case `%d`:
+  //       case `%i`:
+  //         if (typeof substitution === `symbol`) {
+  //           convertedSubstitution = Number.NaN;
+  //         } else {
+  //           convertedSubstitution = Number.parseInt(substitution, 10);
+  //         }
+  //         break;
+  //       case `%f`:
+  //         if (typeof substitution === `symbol`) {
+  //           convertedSubstitution = Number.NaN;
+  //         } else {
+  //           convertedSubstitution = Number.parseFloat(substitution);
+  //         }
+  //         break;
+  //       case `%o`:
+  //
+  //         break;
+  //       case `%O`:
+  //
+  //         break;
+  //     }
+  //     targetStr = targetStr.replace(specifier, convertedSubstitution);
+  //   }
+  //   entries.unshift(targetStr);
+  //   return entries;
+  // }
+
+  _print({mode, modifier, onPrint}, values) {
+    const rowEl = getElement(`<div class="console__row ${modifier ? `console__row--${modifier}` : ``}"></div>`);
+    values.forEach((val) => {
+      rowEl.appendChild(this.createTypedView(val, mode).el);
+    });
+    this._el.appendChild(rowEl);
+    if (onPrint) {
+      onPrint(rowEl);
+    }
+    this.onAny(rowEl);
+  }
+
   /**
    * Subscribe on any event fired
    * @abstract
@@ -120,80 +194,65 @@ export default class Console {
    * Subscribe on log event fired
    * @abstract
    **/
-  onlog() {}
+  onLog() {}
 
   /**
    * Subscribe on logHTML event fired
    * @abstract
    **/
-  onlogHTML() {}
+  onLogHTML() {}
 
   /**
    * Subscribe on dir event fired
    * @abstract
    **/
-  ondir() {}
+  onDir() {}
 
   /**
    * Subscribe on error event fired
    * @abstract
    **/
-  onerror() {}
+  onError() {}
 
   /**
    * Equivalent to console.log
    * Push rest of arguments into container
    */
-  log(...rest) {
-    const rowEl = this._getRowEl(rest, Mode.LOG);
-    this._el.appendChild(rowEl);
-    this.onlog();
-    this.onAny(rowEl.offsetHeight);
+  log(...entries) {
+    this._log({mode: Mode.LOG, onPrint: this.onLog}, entries);
   }
   /**
    * Equivalent to this.log but marks row as output
    */
-  logOutput(...rest) {
-    const rowEl = this._getRowEl(rest, Mode.LOG, `output`);
-    this._el.appendChild(rowEl);
-    this.onlog();
-    this.onAny(rowEl.offsetHeight);
+  logOutput(...entries) {
+    this._log({mode: Mode.LOG, modifier: `output`, onPrint: this.onLog}, entries);
   }
 
   /**
    * Equivalent to console.log but special charachters in strings won't be excaped
    * Push rest of arguments into container
    */
-  logHTML(...rest) {
-    this._el.appendChild(this._getRowEl(rest, Mode.LOG_HTML));
-    this.onlogHTML();
-    this.onAny();
+  logHTML(...entries) {
+    this._log({mode: Mode.LOG_HTML, onPrint: this.onLogHTML}, entries);
   }
 
   /**
    * Equivalent to console.error
    * Push single value into conainer
-   * @param {*} val — value
    */
-  error(val) {
-    const el = getElement(`<div class="console__row console__row--error"></div>`);
-    el.appendChild(this.createTypedView(val, Mode.ERROR).el);
-    this._el.appendChild(el);
-    this.onerror();
-    this.onAny();
+  error(...entries) {
+    this._log({mode: Mode.ERROR, modifier: `error`, onPrint: this.onError}, entries);
   }
 
   /**
    * Equivalent to console.dir
-   * Push single value into conainer
-   * @param {*} val — value
+   * Push single value into container
    */
-  dir(val) {
-    const el = getElement(`<div class="console__row"></div>`);
-    el.appendChild(this.createTypedView(val, Mode.DIR).el);
-    this._el.appendChild(el);
-    this.ondir();
-    this.onAny();
+  dir(...entries) {
+    if (!entries.length) {
+      return;
+    }
+    this._print({mode: Mode.DIR, onPrint: this.onDir}, [entries[0]]);
   }
 
   /**
@@ -202,10 +261,10 @@ export default class Console {
    * @param {string} markup
    */
   prompt(markup) {
-    const el = getElement(`<div class="console__row console__row--input"><pre class="console__item item"></pre></div>`);
-    el.querySelector(`.console__item`).innerHTML = markup;
-    this._el.appendChild(el);
-    this.onAny(el.offsetHeight);
+    const rowEl = getElement(`<div class="console__row console__row--input"><pre class="console__item item"></pre></div>`);
+    rowEl.querySelector(`.console__item`).innerHTML = markup;
+    this._el.appendChild(rowEl);
+    this.onAny(rowEl);
   }
 
   /**
diff --git a/js/enums.js b/js/enums.js
index 4d44264..e70b32c 100644
--- a/js/enums.js
+++ b/js/enums.js
@@ -22,26 +22,6 @@ export const ViewType = {
   PRIMITIVE: `primitive`
 };
 
-/**
- * CSS classes
- * @enum {string}
- */
-export const Class = {
-  CONSOLE_ITEM_HEAD: `item__head`,
-  CONSOLE_ITEM_POINTER: `item_pointer`,
-  CONSOLE_ITEM_HEAD_SHOW: `item__head_show`,
-  ENTRY_CONTAINER_BRACED: `entry-container_braced`,
-  ENTRY_CONTAINER_OVERSIZE: `entry-container_oversize`,
-  CONSOLE_ITEM_HEAD_PARENTHESED: `item__head_parenthesed`,
-  CONSOLE_ITEM_HEAD_INFO: `item__head-info`,
-  CONSOLE_ITEM_HEAD_ELEMENTS: `item__head-elements`,
-  CONSOLE_ITEM_HEAD_ELEMENTS_SHOW: `item__head-elements_show`,
-  CONSOLE_ITEM_CONTENT_CONTAINTER: `item-content-container`,
-  CONSOLE_ITEM_CONTENT_CONTAINTER_SHOW: `item-content-container_show`,
-  CONSOLE_ITEM_HEAD_ELEMENTS_LENGTH: `item__head-elements-length`,
-  CONSOLE_ITEM_HEAD_ELEMENTS_LENGTH_SHOW: `item__head-elements-length_show`
-};
-
 /**
  * Console environment
  * @enum {string}
diff --git a/js/function/function-view.js b/js/function/function-view.js
index c99e86c..c1a0ac1 100644
--- a/js/function/function-view.js
+++ b/js/function/function-view.js
@@ -37,6 +37,8 @@ export default class FunctionView extends TypeView {
   _afterRender() {
     this._state.isOpeningDisabled = this.isDisableOpening;
 
+    this._state.isOpened = this.isOpeningAllowed;
+
     if (this._mode === Mode.LOG || this._mode === Mode.LOG_HTML || this._mode === Mode.ERROR) {
       this._headContentEl.addEventListener(`click`, () => {
         this._headContentEl.classList.toggle(`nowrap`);
@@ -153,7 +155,7 @@ ${this._fnType === FnType.ARROW ? ` => ` : ` `}${bodyLines.join(`\n`)}`;
     return bodyContent;
   }
 
-  createContent(fn) {
+  createContent(fn, inHead) {
     const fragment = document.createDocumentFragment();
     const entriesKeys = this.contentEntriesKeys;
     for (let key of entriesKeys) {
@@ -162,6 +164,9 @@ ${this._fnType === FnType.ARROW ? ` => ` : ` `}${bodyLines.join(`\n`)}`;
           fragment
       );
     }
+    if (!inHead) {
+      fragment.appendChild(this._createGettersEntriesFragment());
+    }
     TypeView.appendEntryElIntoFragment(
         this._createTypedEntryEl({obj: fn, key: `__proto__`, mode: Mode.PROP, notCheckDescriptors: true}),
         fragment
diff --git a/js/index.js b/js/index.js
index b1bd22f..19fa7c0 100644
--- a/js/index.js
+++ b/js/index.js
@@ -1,4 +1,4 @@
-// import '@babel/polyfill';
+import '@babel/polyfill/dist/polyfill';
 import Console from './console';
 
 window.Console = Console;
diff --git a/js/object/map-entry-view.js b/js/object/map-entry-view.js
index d969acc..87794b4 100644
--- a/js/object/map-entry-view.js
+++ b/js/object/map-entry-view.js
@@ -30,7 +30,7 @@ export default class MapEntryView extends TypeView {
     this._state.isBraced = this._mode !== Mode.PREVIEW;
     this._state.isHeadContentShowed = true;
     this._state.isOpeningDisabled = this._mode === Mode.PREVIEW;
-    this._state.isOpened = this._mode !== Mode.PREVIEW;
+    this._state.isOpened = this.isOpeningAllowed;
   }
 
   _getStateDescriptors() {
diff --git a/js/object/object-view.js b/js/object/object-view.js
index c78e3f7..693811c 100644
--- a/js/object/object-view.js
+++ b/js/object/object-view.js
@@ -18,7 +18,7 @@ export default class ObjectView extends TypeView {
 <div class="console__item item item--${this.viewType}">\
   <div class="head item__head">\
     <span class="info head__info hidden"></span>\
-    <div class="head__content entry-container entry-container--head entry-container--${this.viewType} hidden"></div>\
+    <div class="head__content entry-container entry-container--head entry-container--${this.viewType} hidden">${this.getHeadContent()}</div>\
   </div>\
   <div class="item__content entry-container entry-container--${this.viewType} hidden"></div>\
 </div>`;
@@ -36,6 +36,8 @@ export default class ObjectView extends TypeView {
     this._state.isItalicEnabled = this.isEnableItalic;
     this._state.isErrorEnabled = this.isEnableError;
     this._state.isOversized = this.isEnableOversized;
+
+    this._state.isOpened = this.isOpeningAllowed;
   }
 
   _getStateDescriptors() {
@@ -43,12 +45,9 @@ export default class ObjectView extends TypeView {
     return {
       set isHeadContentShowed(bool) {
         if (bool && !self._headContentEl.innerHTML) {
-          if (self.headContent instanceof HTMLElement ||
-            self.headContent instanceof DocumentFragment) {
-            self._headContentEl.appendChild(self.headContent);
-          } else {
-            self._headContentEl.textContent = self.headContent;
-          }
+          const {fragment, isOversized} = self.createContent(self.value, true);
+          self.isEnableOversized = isOversized;
+          self._headContentEl.appendChild(fragment);
         }
         self._isHeadContentShowed = self.toggleHeadContentShowed(bool);
       },
@@ -191,7 +190,15 @@ export default class ObjectView extends TypeView {
     return this.el.classList.toggle(`error`, isEnable);
   }
 
-  get headContent() {
+
+  get headContentClassName() {
+    if (this._console.checkInstanceOf(this._value, `RegExp`) && this._mode !== Mode.DIR) {
+      return `c-regexp`;
+    }
+    return null;
+  }
+
+  getHeadContent() {
     if (this._mode === Mode.PREVIEW &&
     this.stringTagName === `Object` &&
     this.protoConstructorName === `Object`) {
@@ -224,16 +231,7 @@ export default class ObjectView extends TypeView {
         return `/${this._value.source}/${this._value.flags}`;
       }
     }
-    const obj = this.createContent(this._value, true);
-    this._isEnableOversized = obj.isOversized;
-    return obj.fragment;
-  }
-
-  get headContentClassName() {
-    if (this._console.checkInstanceOf(this._value, `RegExp`) && this._mode !== Mode.DIR) {
-      return `c-regexp`;
-    }
-    return null;
+    return ``;
   }
 
   createContent(obj, inHead) {
diff --git a/js/object/promise-view.js b/js/object/promise-view.js
index 28716af..ce1a73c 100644
--- a/js/object/promise-view.js
+++ b/js/object/promise-view.js
@@ -38,7 +38,7 @@ export default class PromiseView extends ObjectView {
     if (inHead) {
       TypeView.prependEntryElIntoFragment(
           this._createEntryEl({
-            key: `&lt;${this._promiseStatus}&gt;`,
+            key: `<${this._promiseStatus}>`,
             el: this._console.createTypedView(this._promiseValue, mode, this.nextNestingLevel, this).el,
             withoutValue: this._promiseStatus === PromiseStatus.pending,
             isGrey: true
diff --git a/js/object/string-number-view.js b/js/object/string-number-view.js
index 90f6129..ef1ca14 100644
--- a/js/object/string-number-view.js
+++ b/js/object/string-number-view.js
@@ -27,16 +27,17 @@ export default class StringNumberView extends ObjectView {
   createContent(obj, inHead) {
     const {fragment, isOversized} = ObjectView.prototype.createContent.apply(this, [obj, inHead]);
 
+    const insertFn = inHead ? TypeView.prependEntryElIntoFragment : TypeView.appendEntryElIntoFragment;
     const mode = inHead ? Mode.PREVIEW : Mode.PROP;
     if (this._console.checkInstanceOf(obj, `String`)) {
       const el = this._console.createTypedView(this._value.toString(), mode, this.nextNestingLevel, this).el;
-      TypeView.appendEntryElIntoFragment(
+      insertFn(
           this._createEntryEl({key: `[[PrimitiveValue]]`, el, withoutKey: inHead}),
           fragment
       );
     } else if (this._console.checkInstanceOf(obj, `Number`)) {
       const el = this._console.createTypedView(this._value * 1, mode, this.nextNestingLevel, this).el;
-      TypeView.appendEntryElIntoFragment(
+      insertFn(
           this._createEntryEl({key: `[[PrimitiveValue]]`, el, withoutKey: inHead}),
           fragment
       );
diff --git a/js/tests/common.test.js b/js/tests/common.test.js
new file mode 100644
index 0000000..1c1185b
--- /dev/null
+++ b/js/tests/common.test.js
@@ -0,0 +1,26 @@
+const Console = window.Console;
+
+const cont = document.createElement(`div`);
+cont.classList.add(`console-container`);
+document.body.appendChild(cont);
+
+describe(`Should check common console behaviours`, () => {
+  it(`new Console(container) inserts .console inside of container`, () => {
+    const cons = new Console(cont); // eslint-disable-line no-unused-vars
+    assert(document.querySelector(`.console-container > .console`));
+    cont.innerHTML = ``;
+  });
+
+  it(`every console method appends .console__item inside of .console__row`, () => {
+    const cons = new Console(cont); // eslint-disable-line no-unused-vars
+    cons.log(1);
+    cons.logHTML(1);
+    cons.dir(1);
+    cons.error(1);
+
+    cons.logOutput(1);
+    cons.prompt(1);
+    assert([...document.querySelectorAll(`.console__row > .console__item`)].length === 6);
+    cont.innerHTML = ``;
+  });
+});
diff --git a/js/tests/configuration.test.js b/js/tests/configuration.test.js
index db307da..75f58bf 100644
--- a/js/tests/configuration.test.js
+++ b/js/tests/configuration.test.js
@@ -1,15 +1,18 @@
-import Console from "../console";
-import {ViewType, Env} from "../enums";
+import {ViewType} from "../enums";
 
+const Console = window.Console;
+
+// WARNING: karma mocha adds "should" property to every object
 const obj = {};
 const arr = [obj];
-arr.push(arr);
-// arr.fn = fn;
 const fn = (bar = 123) => {
   return bar;
 };
+arr.push(arr);
+arr.fn = fn;
 fn.arr = arr;
 fn.obj = obj;
+fn.fn = fn;
 obj.obj = obj;
 obj.arr = arr;
 obj.fn = fn;
@@ -33,10 +36,9 @@ const getLengths = () => {
 
 const getConsole = (container, params) => {
   return new Console(container, Object.assign(params, {
-    env: Env.TEST,
-    // common: {
-    //   excludeProperties: [`__proto__`]
-    // }
+    common: {
+      excludeProperties: [`__proto__`]
+    }
   }));
 };
 
@@ -51,22 +53,22 @@ describe(`Check depth object`, () => {
     cons.clean();
     cons = null;
   });
-  it(`root object should be opened on 2 levels`, () => {
+  it(`root object should be opened on 6 levels`, () => {
     cons = getConsole(div, {
       object: {
-        expandDepth: 2,
+        expandDepth: 4,
         minFieldsToExpand: 1
       }
     });
     cons.log(obj);
     const {objLength, arrLength, fnLength} = getLengths();
-    assert(objLength === 3 && arrLength === 1 && fnLength === 1);
+    assert(objLength === 14 && arrLength === 13 && fnLength === 13);
   });
-  it(`root object should not be opened because of minFieldsToExpand === 4 and obj has 3 fields`, () => {
+  it(`root object should not be opened because of minFieldsToExpand === 5`, () => {
     cons = getConsole(div, {
       object: {
-        expandDepth: 2,
-        minFieldsToExpand: 4
+        expandDepth: 1,
+        minFieldsToExpand: 5
       }
     });
     cons.log(obj);
@@ -81,32 +83,30 @@ describe(`Check depth object`, () => {
       }
     });
     cons.log(obj);
-    // console.log(document.querySelector(`.console`).innerHTML);
     const {objLength, arrLength, fnLength} = getLengths();
-    // console.log(`objLength: ${objLength}, arrLength: ${arrLength}, fnLength: ${fnLength}`);
-    assert(objLength === 13 && arrLength === 0 && fnLength === 65);
+    assert(objLength === 8 && arrLength === 0 && fnLength === 7);
   });
   it(`root object should be opened with excluding nested functions`, () => {
     cons = getConsole(div, {
       object: {
-        expandDepth: 5,
+        expandDepth: 4,
         exclude: [ViewType.FUNCTION]
       }
     });
     cons.log(obj);
     const {objLength, arrLength, fnLength} = getLengths();
-    assert(objLength === 30 && arrLength === 22 && fnLength === 0);
+    assert(objLength === 8 && arrLength === 7 && fnLength === 0);
   });
   it(`root object should be opened with excluding nested arrays and functions`, () => {
     cons = getConsole(div, {
       object: {
-        expandDepth: 3,
+        expandDepth: 4,
         exclude: [ViewType.ARRAY, ViewType.FUNCTION]
       }
     });
     cons.log(obj);
     const {objLength, arrLength, fnLength} = getLengths(cons);
-    assert(objLength === 5 && arrLength === 0 && fnLength === 0);
+    assert(objLength === 4 && arrLength === 0 && fnLength === 0);
   });
 });
 
@@ -118,20 +118,20 @@ describe(`Check depth array`, () => {
   it(`root array should be opened on 2 levels`, () => {
     cons = getConsole(div, {
       array: {
-        expandDepth: 2,
+        expandDepth: 4,
         minFieldsToExpand: 1
       }
     });
     cons.log(arr);
     const {objLength, arrLength, fnLength} = getLengths();
-    const bool = objLength === 1 && arrLength === 3 && fnLength === 0;
+    const bool = objLength === 13 && arrLength === 14 && fnLength === 13;
     assert(bool);
   });
-  it(`root array should not be opened because of minFieldsToExpand === 4 and array has 2 fields`, () => {
+  it(`root array should not be opened because of minFieldsToExpand === 5`, () => {
     cons = getConsole(div, {
       array: {
         expandDepth: 2,
-        minFieldsToExpand: 4
+        minFieldsToExpand: 7
       }
     });
     cons.log(arr);
@@ -147,30 +147,29 @@ describe(`Check depth array`, () => {
     });
     cons.log(arr);
     const {objLength, arrLength, fnLength} = getLengths();
-    // console.log(`objLength: ${objLength}, arrLength: ${arrLength}, fnLength: ${fnLength}`);
-    assert(objLength === 0 && arrLength === 8 && fnLength === 97);
+    assert(objLength === 0 && arrLength === 8 && fnLength === 7);
   });
   it(`root array should be opened with excluding nested functions`, () => {
     cons = getConsole(div, {
       array: {
-        expandDepth: 3,
+        expandDepth: 4,
         exclude: [ViewType.FUNCTION]
       }
     });
     cons.log(arr);
     const {objLength, arrLength, fnLength} = getLengths();
-    assert(objLength === 6 && arrLength === 6 && fnLength === 0);
+    assert(objLength === 7 && arrLength === 8 && fnLength === 0);
   });
   it(`root array should be opened with excluding nested objects and functions`, () => {
     cons = getConsole(div, {
       array: {
-        expandDepth: 2,
+        expandDepth: 4,
         exclude: [ViewType.OBJECT, ViewType.FUNCTION]
       }
     });
     cons.log(arr);
     const {objLength, arrLength, fnLength} = getLengths();
-    assert(objLength === 0 && arrLength === 3 && fnLength === 0);
+    assert(objLength === 0 && arrLength === 4 && fnLength === 0);
   });
 });
 
@@ -188,14 +187,13 @@ describe(`Check depth function DIR`, () => {
     });
     cons.dir(fn);
     const {objLength, arrLength, fnLength} = getLengths();
-    // console.log(`objLength: ${objLength}, arrLength: ${arrLength}, fnLength: ${fnLength}`);
-    assert(objLength === 14 && arrLength === 11 && fnLength === 72);
+    assert(objLength === 13 && arrLength === 13 && fnLength === 14);
   });
-  it(`root function should not be opened because of minFieldsToExpand === 5 and function has 3 fields`, () => {
+  it(`root function should not be opened because of minFieldsToExpand === 10`, () => {
     cons = getConsole(div, {
       function: {
         expandDepth: 2,
-        minFieldsToExpand: 7
+        minFieldsToExpand: 10
       }
     });
     cons.dir(fn);
@@ -211,30 +209,29 @@ describe(`Check depth function DIR`, () => {
     });
     cons.dir(fn);
     const {objLength, arrLength, fnLength} = getLengths();
-    // console.log(`objLength: ${objLength}, arrLength: ${arrLength}, fnLength: ${fnLength}`);
-    assert(objLength === 0 && arrLength === 5 && fnLength === 46);
+    assert(objLength === 0 && arrLength === 7 && fnLength === 8);
   });
   it(`root function should be opened with excluding nested arrays`, () => {
     cons = getConsole(div, {
       function: {
-        expandDepth: 3,
+        expandDepth: 4,
         exclude: [ViewType.ARRAY]
       }
     });
     cons.dir(fn);
     const {objLength, arrLength, fnLength} = getLengths();
-    assert(objLength === 4 && arrLength === 0 && fnLength === 9);
+    assert(objLength === 7 && arrLength === 0 && fnLength === 8);
   });
   it(`root function should be opened with excluding nested objects and arrays`, () => {
     cons = getConsole(div, {
       function: {
-        expandDepth: 2,
+        expandDepth: 4,
         exclude: [ViewType.OBJECT, ViewType.ARRAY]
       }
     });
     cons.dir(fn);
     const {objLength, arrLength, fnLength} = getLengths();
-    assert(objLength === 0 && arrLength === 0 && fnLength === 2);
+    assert(objLength === 0 && arrLength === 0 && fnLength === 4);
   });
 });
 
diff --git a/js/tests/markup.test.js b/js/tests/markup.test.js
index cc999c8..8b4d6ae 100644
--- a/js/tests/markup.test.js
+++ b/js/tests/markup.test.js
@@ -1,9 +1,10 @@
 /* eslint no-undefined: 0 */
 
 // import FunctionView from '../function/function-view';
-import Console from '../console';
 import {Mode} from '../enums';
 
+const Console = window.Console;
+
 // declare consts here
 //
 // const arr1 = [1, 2, 3];
diff --git a/js/tests/object/number-string.test.js b/js/tests/object/number-string.test.js
new file mode 100644
index 0000000..d3f06d5
--- /dev/null
+++ b/js/tests/object/number-string.test.js
@@ -0,0 +1,57 @@
+import {getFirstItemInRow, getHeadEntries} from "../test-helpers";
+import {Env} from "../../enums";
+
+const Console = window.Console;
+
+const getConsole = (container, params = {}) => {
+  return new Console(container, Object.assign(params, {env: Env.TEST}));
+};
+
+let cons = null;
+describe(`Number and String:`, () => {
+  afterEach(() => {
+    cons.clean();
+    cons = null;
+  });
+  describe(`Should check spesial value:`, () => {
+    it(`Number:`, () => {
+      cons = getConsole(document.body);
+
+      const obj = new Number(12345); // eslint-disable-line
+      obj.foo = `test`;
+      obj.bar = 123;
+
+      cons.log(obj);
+
+      const el = getFirstItemInRow();
+
+      const entries = getHeadEntries(el);
+
+      assert(entries.length === 3, `different number of properties`);
+      assert((
+        entries[0].valueContEl.innerText.trim() === `12345` && // headless chrome does return innerText with extra \n
+        (entries[0].keyEl === null || entries[0].keyEl.innerText === ``)
+      ), `first value isn't a Number's [[PrimitiveValue]]`);
+    });
+
+    it(`String:`, () => {
+      cons = getConsole(document.body);
+
+      const obj = new String(`Hello test!`); // eslint-disable-line
+      obj.foo = `test`;
+      obj.bar = 123;
+
+      cons.log(obj);
+
+      const el = getFirstItemInRow();
+
+      const entries = getHeadEntries(el);
+
+      assert(entries.length === 3, `different number of properties`);
+      assert((
+        entries[0].valueContEl.innerText.trim() === `Hello test!` && // headless chrome does return innerText with extra \n
+        (entries[0].keyEl === null || entries[0].keyEl.innerText === ``)
+      ), `first value isn't a String's [[PrimitiveValue]]`);
+    });
+  });
+});
diff --git a/js/tests/object/object-literal.test.js b/js/tests/object/object-literal.test.js
new file mode 100644
index 0000000..7f87ac3
--- /dev/null
+++ b/js/tests/object/object-literal.test.js
@@ -0,0 +1,67 @@
+import {Env} from "../../enums";
+
+const Console = window.Console;
+
+const getConsole = (container, params = {}) => {
+  return new Console(container, Object.assign(params, {env: Env.TEST}));
+};
+
+const getFirstItemInRow = (containerEl) => {
+  return containerEl.querySelector(`.console__row > .console__item`);
+};
+
+const cont = document.createElement(`div`);
+cont.classList.add(`console-container`);
+document.body.appendChild(cont);
+
+let cons = null;
+describe(`OBJECT LITERAL:`, () => {
+  afterEach(() => {
+    cons.clean();
+    cons = null;
+  });
+  it(`item header has right properties`, () => {
+    cons = getConsole(cont);
+    const fn = function (val) {
+      return val;
+    };
+    const obj = {a: 1, b: `2`, c: [3], d: /re/, e: fn};
+    cons.log(obj);
+    const el = getFirstItemInRow(cont);
+    const keyEls = [...el.querySelectorAll(`.head__content > .entry-container__entry > .entry-container__key`)];
+    assert(keyEls.length === 5 && keyEls.every((keyEl) => obj[keyEl.textContent]));
+  });
+
+  it(`item body has right properties`, () => {
+    cons = getConsole(cont, {
+      common: {
+        expandDepth: 1
+      }
+    });
+    const fn = function (val) {
+      return val;
+    };
+    const obj = {a: 1, b: `2`, c: [3], d: /re/, e: fn};
+    cons.log(obj);
+    const el = getFirstItemInRow(cont);
+    const keyEls = [...el.querySelectorAll(`.item__content > .entry-container__entry > .entry-container__key`)];
+    assert(keyEls.length === 6 && keyEls.every((keyEl) => obj[keyEl.textContent])); // 5 props + __proto__
+  });
+
+  it(`item body has right properties order`, () => {
+    cons = getConsole(cont, {
+      common: {
+        expandDepth: 1
+      }
+    });
+    const fn = function (val) {
+      return val;
+    };
+    const obj = {c: [3], d: /re/, e: fn, a: 1, b: `2`};
+    const objKeysConcatenated = `abcde__proto__`;
+    cons.log(obj);
+    const el = getFirstItemInRow(cont);
+    const keyEls = [...el.querySelectorAll(`.item__content > .entry-container__entry > .entry-container__key`)];
+    assert(keyEls.map((keyEl) => keyEl.textContent).join(``) === objKeysConcatenated);
+  });
+});
diff --git a/js/tests/object/promise.test.js b/js/tests/object/promise.test.js
new file mode 100644
index 0000000..b9e2406
--- /dev/null
+++ b/js/tests/object/promise.test.js
@@ -0,0 +1,237 @@
+import {getFirstItemInRow, getHeadEntries, getBodyEntries, getInfoEl, getProtoEntry} from "../test-helpers";
+import {Env} from "../../enums";
+
+const Console = window.Console;
+
+const getConsole = (container, params = {}) => {
+  return new Console(container, Object.assign(params, {env: Env.TEST}));
+};
+
+let cons = null;
+describe(`Promise:`, () => {
+  afterEach(() => {
+    cons.clean();
+    cons = null;
+  });
+  describe(`Should check special value:`, () => {
+    it(`Resolved:`, (done) => {
+      cons = getConsole(document.body);
+
+      const obj = new Promise((res) => res(`test`));
+      obj.foo = `test`;
+      obj.bar = 123;
+
+      cons.log(obj);
+      setTimeout(() => {
+        const el = getFirstItemInRow();
+
+        const entries = getHeadEntries(el);
+
+        assert(entries.length === 3, `different number of properties`);
+        assert(entries[0].keyEl.innerText.trim() === `<resolved>`, `first value's key ins't a [[PromiseStatus]]`);
+        assert(entries[0].valueContEl.innerText.trim() === `test`, `first value's value ins't a [[PromiseValue]]`);
+        done();
+      }, 0);
+    });
+
+    it(`Rejected:`, (done) => {
+      cons = getConsole(document.body);
+
+      const obj = new Promise((res, rej) => rej(`Some error`));
+      obj.foo = `test`;
+      obj.bar = 123;
+      obj.fb = 4;
+
+      cons.log(obj);
+      setTimeout(() => {
+        const el = getFirstItemInRow();
+
+        const entries = getHeadEntries(el);
+
+        assert(entries.length === 4, `different number of properties`);
+        assert(entries[0].keyEl.innerText.trim() === `<rejected>`, `first value's key ins't a [[PromiseStatus]]`);
+        assert(entries[0].valueContEl.innerText.trim() === `Some error`, `first value's value ins't a [[PromiseValue]]`);
+        done();
+      }, 0);
+    });
+
+    it(`Pending:`, (done) => {
+      cons = getConsole(document.body);
+
+      const obj = new Promise((res) => setTimeout(() => {
+        res();
+      }, 10000));
+      obj.foo = `test`;
+
+      cons.log(obj);
+      setTimeout(() => {
+        const el = getFirstItemInRow();
+
+        const entries = getHeadEntries(el);
+
+        assert(entries.length === 2, `different number of properties`);
+        assert(entries[0].keyEl.innerText.trim() === `<pending>`, `first value's key ins't a [[PromiseStatus]]`);
+        assert(entries[0].valueContEl === null || entries[0].valueContEl.innerText === ``, `first value's value ins't a [[PromiseValue]]`);
+        done();
+      }, 0);
+    });
+  });
+  describe(`Should check body:`, () => {
+    it(`Resolved:`, (done) => {
+      cons = getConsole(document.body, {
+        common: {
+          expandDepth: 1
+        }
+      });
+
+      const obj = new Promise((res) => res(123456));
+      obj.foo = `test`;
+      obj.bar = 123;
+
+      cons.log(obj);
+      setTimeout(() => {
+        const el = getFirstItemInRow();
+
+        const entries = getBodyEntries(el);
+
+        assert(entries.length === 5, `different number of properties`); // 2 + [[PromiseStatus]] + [[PromiseValue]] + __proto__
+
+        const promiseStatusEntry = entries.find((entry) => entry.keyEl.innerText.trim() === `[[PromiseStatus]]`);
+
+        assert.exists(promiseStatusEntry, `body isn't contains [[PromiseStatus]] special property`);
+        assert.strictEqual(
+            promiseStatusEntry.valueContEl.innerText.trim(),
+            `resolved`,
+            `body's [[PromiseStatus]] special property has incorrect value`
+        );
+
+        const promiseValueEntry = entries.find((entry) => entry.keyEl.innerText.trim() === `[[PromiseValue]]`);
+        assert.strictEqual(
+            promiseValueEntry.valueContEl.innerText.trim(),
+            `123456`,
+            `body's [[PromiseStatus]] special property has incorrect value`
+        );
+
+        assert.exists(promiseValueEntry, `body isn't contains [[PromiseValue]] special property`);
+        done();
+      }, 0);
+    });
+
+    it(`Rejected:`, (done) => {
+      cons = getConsole(document.body, {
+        common: {
+          expandDepth: 1
+        }
+      });
+
+      const obj = new Promise((res, rej) => rej(`errroroooorr`));
+      obj.foo = `test`;
+
+      cons.log(obj);
+      setTimeout(() => {
+        const el = getFirstItemInRow();
+
+        const entries = getBodyEntries(el);
+
+        assert(entries.length === 4, `different number of properties`); // 1 + [[PromiseStatus]] + [[PromiseValue]] + __proto__
+
+        const promiseStatusEntry = entries.find((entry) => entry.keyEl.innerText.trim() === `[[PromiseStatus]]`);
+
+        assert.exists(promiseStatusEntry, `body isn't contains [[PromiseStatus]] special property`);
+        assert.strictEqual(
+            promiseStatusEntry.valueContEl.innerText.trim(),
+            `rejected`,
+            `body's [[PromiseStatus]] special property has incorrect value`
+        );
+
+        const promiseValueEntry = entries.find((entry) => entry.keyEl.innerText.trim() === `[[PromiseValue]]`);
+        assert.strictEqual(
+            promiseValueEntry.valueContEl.innerText.trim(),
+            `errroroooorr`,
+            `body's [[PromiseStatus]] special property has incorrect value`
+        );
+
+        assert.exists(promiseValueEntry, `body isn't contains [[PromiseValue]] special property`);
+        done();
+      }, 0);
+    });
+
+    it(`Pending:`, (done) => {
+      cons = getConsole(document.body, {
+        common: {
+          expandDepth: 1
+        }
+      });
+
+      const obj = new Promise((res) => setTimeout(() => {
+        res();
+      }, 10000));
+      obj.foo = `test`;
+      obj.bar = 89;
+
+      cons.log(obj);
+      setTimeout(() => {
+        const el = getFirstItemInRow();
+
+        const entries = getBodyEntries(el);
+
+        assert(entries.length === 5, `different number of properties`); // 2 + [[PromiseStatus]] + [[PromiseValue]] + __proto__
+
+        const promiseStatusEntry = entries.find((entry) => entry.keyEl.innerText.trim() === `[[PromiseStatus]]`);
+
+        assert.exists(promiseStatusEntry, `body isn't contains [[PromiseStatus]] special property`);
+        assert.strictEqual(
+            promiseStatusEntry.valueContEl.innerText.trim(),
+            `pending`,
+            `body's [[PromiseStatus]] special property has incorrect value`
+        );
+
+        const promiseValueEntry = entries.find((entry) => entry.keyEl.innerText.trim() === `[[PromiseValue]]`);
+        assert.strictEqual(
+            promiseValueEntry.valueContEl.innerText.trim(),
+            `undefined`,
+            `body's [[PromiseStatus]] special property has incorrect value`
+        );
+
+        assert.exists(promiseValueEntry, `body isn't contains [[PromiseValue]] special property`);
+        done();
+      }, 0);
+    });
+
+    describe(`Should check prototype name:`, () => {
+      it(`item info contains correct prototype/constructor name`, (done) => {
+        cons = getConsole(document.body);
+
+        const obj = new Promise((res) => res(456));
+        cons.log(obj);
+
+        setTimeout(() => {
+          const el = getFirstItemInRow();
+
+          const infoEl = getInfoEl(el);
+          assert.strictEqual(infoEl.innerText.trim(), `Promise`, `incorrect name`);
+          done();
+        }, 0);
+      });
+
+      it(`__proto__ property has correct prototype/constructor name`, (done) => {
+        cons = getConsole(document.body, {
+          common: {
+            expandDepth: 1
+          }
+        });
+
+        const obj = new Promise((res) => res(456));
+        cons.log(obj);
+
+        setTimeout(() => {
+          const el = getFirstItemInRow();
+
+          const protoEntryInfoEl = getInfoEl(getProtoEntry(el).valueContEl);
+          assert.strictEqual(protoEntryInfoEl.innerText.trim(), `Promise`, `incorrect name`);
+          done();
+        }, 0);
+      });
+    });
+  });
+});
diff --git a/js/tests/test-helpers.js b/js/tests/test-helpers.js
new file mode 100644
index 0000000..9cf76dd
--- /dev/null
+++ b/js/tests/test-helpers.js
@@ -0,0 +1,30 @@
+export const getFirstItemInRow = () => {
+  return document.querySelector(`.console__row > .console__item`);
+};
+
+export const getHeadEntries = (el) => {
+  const entryEls = [...el.querySelectorAll(`.head__content > .entry-container__entry`)];
+
+  return entryEls.map((entryEl) => ({
+    keyEl: entryEl.querySelector(`.entry-container__key`),
+    valueContEl: entryEl.querySelector(`.entry-container__value-container`)
+  }));
+};
+
+export const getBodyEntries = (el) => {
+  const entryEls = [...el.querySelectorAll(`.item__content > .entry-container__entry`)];
+
+  return entryEls.map((entryEl) => ({
+    keyEl: entryEl.querySelector(`.entry-container__key`),
+    valueContEl: entryEl.querySelector(`.entry-container__value-container`)
+  }));
+};
+
+export const getInfoEl = (el) => {
+  return el.querySelector(`.head__info`);
+};
+
+export const getProtoEntry = (el) => {
+  return getBodyEntries(el)
+    .find((entry) => entry.keyEl.innerText.trim() === `__proto__`);
+};
diff --git a/js/type-view.js b/js/type-view.js
index 9b841af..6e1f218 100644
--- a/js/type-view.js
+++ b/js/type-view.js
@@ -1,7 +1,7 @@
 /* eslint no-empty: "off"*/
 /* eslint no-unused-vars: "off"*/
 import AbstractView from './abstract-view';
-import {getElement} from './utils';
+import {getElement, escapeHTML} from './utils';
 import {Mode, Env} from './enums';
 
 const isNativeFunction = (fn) => {
@@ -65,10 +65,6 @@ export default class TypeView extends AbstractView {
     this._contentEl = this.el.querySelector(`.item__content`);
 
     this._afterRender();
-
-    this._state.isOpened = this._mode !== Mode.PREVIEW &&
-      !this._state.isOpeningDisabled &&
-      this.isAutoExpandNeeded;
   }
 
   get protoConstructorName() {
@@ -240,6 +236,12 @@ export default class TypeView extends AbstractView {
     return this._headEl.classList.toggle(`item__head--arrow-bottom`, isEnable);
   }
 
+  get isOpeningAllowed() {
+    return this._mode !== Mode.PREVIEW &&
+      !this._state.isOpeningDisabled &&
+      this.isAutoExpandNeeded;
+  }
+
   get depth() {
     if (!this._cache.depth) {
       this._cache.depth = this._parentView ? this._parentView.depth + 1 : 1;
@@ -391,10 +393,6 @@ export default class TypeView extends AbstractView {
       }
     }
 
-    if (this._console.params.env === Env.TEST) {
-      keys.delete(`should`);
-    }
-
     return keys;
   }
 
@@ -492,13 +490,6 @@ export default class TypeView extends AbstractView {
     const keys = Object.keys(this._ownPropertyDescriptorsWithGetSet);
     keys.sort(TypeView.compareProperties);
 
-    if (this._console.params.env === Env.TEST) {
-      const shouldKeyIndex = keys.indexOf(`should`);
-      if (shouldKeyIndex !== -1) {
-        keys.splice(shouldKeyIndex, 1);
-      }
-    }
-
     for (let key of keys) {
       const descriptor = this._ownPropertyDescriptorsWithGetSet[key];
 
@@ -533,9 +524,9 @@ export default class TypeView extends AbstractView {
    */
   _createEntryEl({key, el, mode, withoutKey, withoutValue, getViewEl, isGrey}) {
     const entryEl = getElement(`\
-<span class="entry-container__entry">\
-${withoutKey ? `` : `<span class="entry-container__key ${isGrey ? `grey` : ``}">${key.toString()}</span>`}${withoutValue ? `` : `<span class="entry-container__value-container"></span>`}\
-</span>`);
+<div class="entry-container__entry">\
+${withoutKey ? `` : `<span class="entry-container__key ${withoutValue ? `` : `entry-container__key--with-colon`} ${isGrey ? `grey` : ``}">${escapeHTML(key.toString())}</span>`}${withoutValue ? `` : `<div class="entry-container__value-container"></div>`}\
+</div>`);
     if (withoutValue) {
       return entryEl;
     }
diff --git a/jsconsole.html b/jsconsole.html
index 85965be..9fb1b52 100644
--- a/jsconsole.html
+++ b/jsconsole.html
@@ -57,7 +57,8 @@
       });
       const promptContainer = document.querySelector(`.prompt-container`);
       const prompt = new Prompt(promptContainer, `jsConsole`);
-      window.jsConsole.onAny = (appendedElHeight) => {
+      window.jsConsole.onAny = (rowEl) => {
+        const appendedElHeight = rowEl.offsetHeight;
         const promptOffsetBottom = promptContainer.offsetTop + prompt.viewHeight;
         if (promptOffsetBottom < document.body.clientHeight) {
           window.scroll(0, document.body.scrollTop + appendedElHeight);
@@ -71,9 +72,10 @@
         return bar;
       };
       arr.push(arr);
-      // arr.fn = fn;
+      arr.fn = fn;
       fn.arr = arr;
       fn.obj = obj;
+      fn.fn = fn;
       obj.obj = obj;
       obj.arr = arr;
       obj.fn = fn;
diff --git a/karma-chai-adapter.js b/karma-chai-adapter.js
new file mode 100644
index 0000000..c8c783b
--- /dev/null
+++ b/karma-chai-adapter.js
@@ -0,0 +1,4 @@
+(function () { // no should
+  window.expect = window.chai.expect;
+  window.assert = window.chai.assert;
+})();
diff --git a/karma.conf.js b/karma.conf.js
index 3229921..6a97581 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -1,10 +1,10 @@
 module.exports = function (config) {
   config.set({
     basePath: ``,
-    frameworks: [`mocha`, `chai`],
-    files: [
-      `build/js/tests/**/*.test.js`,
-    ],
+    frameworks: [`mocha`],
+    // files: [
+    //   `build/js/tests/**/*.test.js`,
+    // ],
     browserConsoleLogOpptions: {
       level: `debug`,
       format: `%b %T: %m`,
@@ -13,7 +13,7 @@ module.exports = function (config) {
     singleRun: true,
     client: {
       mocha: {
-        timeout: 15000 // 6 seconds - upped from 2 seconds
+        timeout: 15000
       }
     },
     browsers: [`ChromeHeadless`],
diff --git a/package-lock.json b/package-lock.json
index 7d6b47d..627effa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8291,12 +8291,6 @@
       "integrity": "sha512-nv3GbDAKdonWuTJc+Kg4jEdRXzoP7uKKQ6HfTJb5PNTY+OJYKzrtUBUSez/wrutUFtztVT+MQxJHamd7MNCmBQ==",
       "dev": true
     },
-    "karma-chai": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/karma-chai/-/karma-chai-0.1.0.tgz",
-      "integrity": "sha1-vuWtQEAFF4Ea40u5RfdikJEIt5o=",
-      "dev": true
-    },
     "karma-chrome-launcher": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/karma-chrome-launcher/-/karma-chrome-launcher-2.2.0.tgz",
diff --git a/package.json b/package.json
index c5c0119..93b815b 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,6 @@
     "gulp-uglify": "3.0.0",
     "karma": "2.0.4",
     "karma-babel-preprocessor": "8.0.0-beta.0",
-    "karma-chai": "0.1.0",
     "karma-chrome-launcher": "2.2.0",
     "karma-mocha": "1.3.0",
     "karma-spec-reporter": "0.0.32",
diff --git a/sass/entry-container.scss b/sass/entry-container.scss
index 18196df..6af1a6e 100644
--- a/sass/entry-container.scss
+++ b/sass/entry-container.scss
@@ -1,7 +1,9 @@
 .entry-container {
   $parent: &;
 
-  &__entry {
+  &__entry,
+  &__key,
+  &__value-container {
     display: inline-block;
   }
 
@@ -70,8 +72,11 @@
     }
   }
 
-  &__key + &__value-container::before {
-    content: ": ";
-    white-space: pre;
+  &__key {
+    &--with-colon::after {
+      content: ":";
+      white-space: pre;
+      margin-right: 6px;
+    }
   }
 }
diff --git a/sass/style.scss b/sass/style.scss
index 6b549c4..6e16e70 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -50,7 +50,7 @@ __elem — element
         background-repeat: no-repeat;
         background-size: contain;
         position: absolute;
-        top: 8px;
+        top: 0.5em;
         left: 5px;
         content: "";
       }
@@ -120,6 +120,11 @@ __elem — element
 .map-pair {
   display: inline-block;
 
+  &__key,
+  &__value {
+    display: inline-block;
+  }
+
   &--braced {
     &::before {
       content: '{';
diff --git a/test.html b/test.html
index 3fe5820..e66e589 100644
--- a/test.html
+++ b/test.html
@@ -215,6 +215,7 @@
       //   jsConsole.log(err1);
       // }
       //
+      console.log('123', '456')
       console.log(undefined);
       console.log(NaN);
       console.log(null);