Fix custom panels not being hidden in preview mode. Fixes artf/grapesjs#2636

\+ Fix `stopPreview` command crash when `sw-visibility` button isn't defined
\+ Fix `toggle` typo

src/commands/view/Preview.js

@@ -3,7 +3,7 @@ import { each } from 'underscore';
 export default {
   getPanels(editor) {
     if (!this.panels) {
-      this.panels = editor.Panels.getPanelsEl();
+      this.panels = editor.Panels.getPanels();
     }
 
     return this.panels;
@@ -17,8 +17,10 @@ export default {
 
   run(editor, sender) {
     this.sender = sender;
+
     editor.stopCommand('sw-visibility');
     editor.getModel().stopDefault();
+
     const panels = this.getPanels(editor);
     const canvas = editor.Canvas.getElement();
     const editorEl = editor.getEl();
@@ -34,7 +36,9 @@ export default {
 
     this.helper.style.display = 'inline-block';
     this.tglPointers(editor);
-    panels.style.display = 'none';
+
+    panels.forEach(panel => panel.set('visible', false));
+
     const canvasS = canvas.style;
     canvasS.width = '100%';
     canvasS.height = '100%';
@@ -49,11 +53,20 @@ export default {
     const { sender = {} } = this;
     sender.set && sender.set('active', 0);
     const panels = this.getPanels(editor);
-    if (editor.Panels.getButton('options', 'sw-visibility').get('active')) {
+
+    const swVisibilityButton = editor.Panels.getButton(
+      'options',
+      'sw-visibility'
+    );
+
+    if (swVisibilityButton && swVisibilityButton.get('active')) {
       editor.runCommand('sw-visibility');
     }
+
     editor.getModel().runDefault();
-    panels.style.display = '';
+
+    panels.forEach(panel => panel.set('visible', true));
+
     const canvas = editor.Canvas.getElement();
     canvas.setAttribute('style', '');
 

src/panels/view/ButtonView.js

@@ -137,10 +137,10 @@ export default Backbone.View.extend({
 
     if (this.model.get('disable')) return;
 
-    this.toogleActive();
+    this.toggleActive();
   },
 
-  toogleActive() {
+  toggleActive() {
     const { model } = this;
     const { active, togglable } = model.attributes;
 

test/specs/commands/view/Preview.js

@@ -0,0 +1,74 @@
+import Panel from '../../../../src/panels/model/Panel';
+import Preview from '../../../../src/commands/view/Preview';
+import Button from '../../../../src/panels/model/Button';
+
+describe('Preview command', () => {
+  let fakeButton, fakePanels, fakeEditor;
+
+  beforeEach(() => {
+    fakeButton = new Button();
+    fakePanels = [new Panel(), new Panel(), new Panel()];
+
+    fakeEditor = {
+      getEl: jest.fn(),
+      refresh: jest.fn(),
+      stopCommand: jest.fn(),
+
+      getModel: jest.fn().mockReturnValue({
+        runDefault: jest.fn(),
+        stopDefault: jest.fn()
+      }),
+
+      Config: {},
+
+      Canvas: {
+        getElement: jest.fn().mockReturnValue({
+          style: {},
+          setAttribute: jest.fn()
+        })
+      },
+
+      Panels: {
+        getButton: jest.fn(() => fakeButton),
+        getPanels: jest.fn(() => fakePanels)
+      }
+    };
+
+    Preview.panels = undefined;
+    spyOn(Preview, 'tglPointers');
+  });
+
+  describe('.getPanels', () => {
+    test('it should return panels set with the editor panels if not already set', () => {
+      Preview.getPanels(fakeEditor);
+      expect(Preview.panels).toBe(fakePanels);
+      Preview.getPanels(fakeEditor);
+      expect(fakeEditor.Panels.getPanels).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('.run', () => {
+    beforeEach(() => {
+      Preview.helper = { style: {} };
+    });
+
+    it('should hide all panels', () => {
+      fakePanels.forEach(panel => expect(panel.get('visible')).toEqual(true));
+      Preview.run(fakeEditor);
+      fakePanels.forEach(panel => expect(panel.get('visible')).toEqual(false));
+    });
+  });
+
+  describe('.stop', () => {
+    it('should show all panels', () => {
+      fakePanels.forEach(panel => panel.set('visible', false));
+      Preview.stop(fakeEditor);
+      fakePanels.forEach(panel => expect(panel.get('visible')).toEqual(true));
+    });
+
+    it('should not break when the sw-visibility button is not present', () => {
+      fakeButton = null;
+      expect(() => Preview.stop(fakeEditor)).not.toThrow();
+    });
+  });
+});

test/specs/panels/view/ButtonView.js

@@ -68,14 +68,14 @@ describe('ButtonView', () => {
   });
 
   test('Cancels the click action when button is disabled', () => {
-    const stub = sinon.stub(view, 'toogleActive');
+    const stub = sinon.stub(view, 'toggleActive');
     model.set('disable', true, { silent: true });
     view.clicked();
     expect(stub.called).toEqual(false);
   });
 
   test('Enable the click action when button is enable', () => {
-    const stub = sinon.stub(view, 'toogleActive');
+    const stub = sinon.stub(view, 'toggleActive');
     model.set('disable', false, { silent: true });
     view.clicked();
     expect(stub.called).toEqual(true);