Fix tests

src/canvas/index.js

@@ -133,7 +133,8 @@ export default () => {
      * @return {HTMLIFrameElement}
      */
     getFrameEl() {
-      return CanvasView.frame.el;
+      const { frame } = CanvasView;
+      return frame && frame.el;
     },
 
     getFramesEl() {
@@ -153,7 +154,8 @@ export default () => {
      * @return {HTMLDocument}
      */
     getDocument() {
-      return this.getFrameEl().contentDocument;
+      const frame = this.getFrameEl();
+      return frame && frame.contentDocument;
     },
 
     /**

src/canvas/view/FrameView.js

@@ -259,33 +259,7 @@ export default Backbone.View.extend({
     append(
       body,
       `<style>
-      * {
-        box-sizing: border-box;
-      }
-      html, body, [data-gjs-type=wrapper] {
-        min-height: 100%;
-      }
-      body {
-        margin: 0;
-        height: 100%;
-        background-color: #fff
-      }
-      [data-gjs-type=wrapper] {
-        overflow: auto;
-        overflow-x: hidden;
-      }
-
-      * ::-webkit-scrollbar-track {
-        background: rgba(0, 0, 0, 0.1)
-      }
-
-      * ::-webkit-scrollbar-thumb {
-        background: rgba(255, 255, 255, 0.2)
-      }
-
-      * ::-webkit-scrollbar {
-        width: 10px
-      }
+      ${conf.baseCss || ''}
 
       .${ppfx}dashed *[data-highlightable] {
         outline: 1px dashed rgba(170,170,170,0.7);

src/dom_components/model/Components.js

@@ -44,9 +44,9 @@ export default Backbone.Collection.extend({
 
   parseString(value, opt = {}) {
     const { em } = this;
+    const { domc } = this.opt;
     const cssc = em.get('CssComposer');
     const parsed = em.get('Parser').parseHtml(value);
-    const domc = em.get('DomComponents');
     // We need this to avoid duplicate IDs
     if (!Component) Component = require('./Component').default;
     Component.checkId(parsed.html, parsed.css, domc.componentsById);

src/dom_components/view/ComponentView.js

@@ -80,7 +80,8 @@ export default Backbone.View.extend({
   remove() {
     Backbone.View.prototype.remove.apply(this, arguments);
     const { model } = this;
-    const frameM = this._getFrame().model;
+    const frame = this._getFrame() || {};
+    const frameM = frame.model;
     model.components().forEach(comp => {
       const view = comp.getView(frameM);
       view && view.remove();

src/editor/config/config.js

@@ -43,7 +43,7 @@ export default {
     * {
       box-sizing: border-box;
     }
-    html, body, #wrapper {
+    html, body, [data-gjs-type=wrapper] {
       min-height: 100%;
     }
     body {
@@ -51,7 +51,7 @@ export default {
       height: 100%;
       background-color: #fff
     }
-    #wrapper {
+    [data-gjs-type=wrapper] {
       overflow: auto;
       overflow-x: hidden;
     }

test/specs/dom_components/model/Component.js

@@ -14,11 +14,10 @@ const $ = Backbone.$;
 let obj;
 let dcomp;
 let compOpts;
-let em;
+let em = new Editor({});
 
 describe('Component', () => {
   beforeEach(() => {
-    em = new Editor({});
     dcomp = new DomComponents();
     compOpts = {
       em,
@@ -561,6 +560,7 @@ describe('Components', () => {
     em = new Editor({});
     dcomp = new DomComponents();
     compOpts = {
+      em,
       componentTypes: dcomp.componentTypes
     };
   });
@@ -606,65 +606,28 @@ describe('Components', () => {
       </style>
     `;
     const added = dcomp.addComponent(block);
+    const addComps = added.components();
     // Let's check if everthing is working as expected
     expect(Object.keys(dcomp.componentsById).length).toBe(3); // + 1 wrapper
     expect(added.getId()).toBe(id);
-    expect(
-      added
-        .components()
-        .at(0)
-        .getId()
-    ).toBe(idB);
+    expect(addComps.at(0).getId()).toBe(idB);
     const cc = em.get('CssComposer');
-    expect(cc.getAll().length).toBe(3);
-    expect(
-      cc
-        .getAll()
-        .at(0)
-        .selectorsToString()
-    ).toBe(`#${id}`);
-    expect(
-      cc
-        .getAll()
-        .at(1)
-        .selectorsToString()
-    ).toBe(`#${id}:hover`);
-    expect(
-      cc
-        .getAll()
-        .at(2)
-        .selectorsToString()
-    ).toBe(`#${idB}`);
+    const rules = cc.getAll();
+    expect(rules.length).toBe(3);
+    expect(rules.at(0).selectorsToString()).toBe(`#${id}`);
+    expect(rules.at(1).selectorsToString()).toBe(`#${id}:hover`);
+    expect(rules.at(2).selectorsToString()).toBe(`#${idB}`);
     // Now let's add the same block
     const added2 = dcomp.addComponent(block);
+    const addComps2 = added2.components();
     const id2 = added2.getId();
     const newId = `${id}-2`;
     const newIdB = `${idB}-2`;
     expect(id2).toBe(newId);
-    expect(
-      added2
-        .components()
-        .at(0)
-        .getId()
-    ).toBe(newIdB);
-    expect(cc.getAll().length).toBe(6);
-    expect(
-      cc
-        .getAll()
-        .at(3)
-        .selectorsToString()
-    ).toBe(`#${newId}`);
-    expect(
-      cc
-        .getAll()
-        .at(4)
-        .selectorsToString()
-    ).toBe(`#${newId}:hover`);
-    expect(
-      cc
-        .getAll()
-        .at(5)
-        .selectorsToString()
-    ).toBe(`#${newIdB}`);
+    expect(addComps2.at(0).getId()).toBe(newIdB);
+    expect(rules.length).toBe(6);
+    expect(rules.at(3).selectorsToString()).toBe(`#${newId}`);
+    expect(rules.at(4).selectorsToString()).toBe(`#${newId}:hover`);
+    expect(rules.at(5).selectorsToString()).toBe(`#${newIdB}`);
   });
 });

test/specs/dom_components/view/ComponentsView.js

@@ -1,18 +1,19 @@
 import DomComponents from 'dom_components';
 import ComponentsView from 'dom_components/view/ComponentsView';
 import Components from 'dom_components/model/Components';
+import Editor from 'editor/model/Editor';
 
 describe('ComponentsView', () => {
-  var $fixtures;
-  var $fixture;
   var model;
   var view;
   var dcomp;
   var compOpts;
+  const em = new Editor();
 
   beforeEach(() => {
     dcomp = new DomComponents();
     compOpts = {
+      em,
       componentTypes: dcomp.componentTypes
     };
     model = new Components([], compOpts);

test/specs/grapesjs/index.js

@@ -85,19 +85,17 @@ describe('GrapesJS', () => {
       expect(editor.getStyle().length).toEqual(0);
     });
 
-    test('Editor canvas baseCSS can be overwritten', () => {
+    test.only('Editor canvas baseCSS can be overwritten', () => {
       config.components = htmlString;
       config.baseCss = '#wrapper { background-color: #eee; }';
       config.protectedCss = '';
+      const editor = obj.init(config);
+      const body = editor.Canvas.getBody();
 
-      var editor = obj.init(config);
-
-      expect(window.frames[0].document.documentElement.outerHTML).toContain(
-        config.baseCss
+      expect(body.outerHTML).toContain(config.baseCss);
+      expect(body.outerHTML.replace(/\s+/g, ` `)).not.toContain(
+        `body { margin: 0;`
       );
-      expect(
-        window.frames[0].document.documentElement.outerHTML.replace(/\s+/g, ` `)
-      ).not.toContain(`body { margin: 0;`);
     });
 
     test('Editor canvas baseCSS defaults to sensible values if not defined', () => {

test/specs/keymaps/index.js

@@ -41,7 +41,7 @@ describe('Keymaps', () => {
       const id = 'test';
       const keys = 'ctrl+a';
       const handler = () => {};
-      const model = obj.add(id, 'ctrl+a', handler);
+      const model = obj.add(id, keys, handler);
       const removed = obj.remove(id);
       expect(obj.get(id)).toEqual(undefined);
       expect(obj.getAll()).toEqual({});