refactor(ons-page): unit tests

core/elements/ons-page.spec.es6

@@ -1,10 +1,20 @@
-describe('ons-page', () => {
-  it('exists', () => {
+describe('OnsPageElement', () => {
+  let element;
+
+  beforeEach(() => {
+    element = new OnsPageElement();
+  });
+
+  afterEach(() => {
+    element.remove();
+    element = null;
+  });
+
+  it('should exist', () => {
     expect(window.OnsPageElement).to.be.ok;
   });
 
   it('has page class', () => {
-    var element = new OnsPageElement();
     expect(element.classList.contains('page')).to.be.true;
   });
 
@@ -13,7 +23,6 @@ describe('ons-page', () => {
       var initPromise = new Promise(function(resolve, reject) {
         document.addEventListener('init', resolve);
       });
-      var element = new OnsPageElement();
       document.body.appendChild(element);
       expect(element.parentNode).to.be.ok;
       return expect(initPromise).to.eventually.be.fulfilled;
@@ -24,7 +33,6 @@ describe('ons-page', () => {
     it('fires \'destroy\' event', () => {
       var spy = chai.spy();
       document.addEventListener('destroy', spy);
-      var element = new OnsPageElement();
       document.body.appendChild(element);
       element._destroy();
       expect(element.parentNode).not.to.be.ok;
@@ -33,30 +41,33 @@ describe('ons-page', () => {
   });
 
   describe('#setDeviceBackButtonHandler()', () => {
-    var element = new OnsPageElement();
-
     it('sets the callback', () => {
       expect(element._deviceBackButtonHandler).not.to.be.ok;
       element.setDeviceBackButtonHandler(() => { return; });
       expect(element._deviceBackButtonHandler).to.be.ok;
     });
 
     it('overwrites the callback', () => {
+      expect(element._deviceBackButtonHandler).not.to.be.ok;
+      element.setDeviceBackButtonHandler(() => { return; });
+      expect(element._deviceBackButtonHandler).to.be.ok;
+
       var spy = chai.spy.on(element._deviceBackButtonHandler, 'destroy');
       element.setDeviceBackButtonHandler(() => { return; });
-      expect(spy).to.have.been.called.once;
       expect(element._deviceBackButtonHandler).to.be.ok;
+      expect(spy).to.have.been.called.once;
     });
 
     it('is correctly deleted', () => {
+      element.setDeviceBackButtonHandler(() => { return; });
+      expect(element._deviceBackButtonHandler).to.be.ok;
+
       element._destroy();
       expect(element.parentNode).not.to.be.ok;
     });
   });
 
   describe('#_getBackgroundElement()', () => {
-    var element = new OnsPageElement();
-
     it('gets page__background', () => {
       expect(() => element._getBackgroundElement()).not.to.throw(Error);
     });
@@ -69,15 +80,13 @@ describe('ons-page', () => {
 
   describe('#_getContentElement()', () => {
     it('throws page__content error', () => {
-      var element = new OnsPageElement();
       element.removeChild(element.getElementsByClassName('page__content')[0]);
       expect(() => element._getContentElement()).to.throw(Error);
     });
   });
 
   describe('#_hasToolbarElement()', () => {
     it('returns if a toolbar exists', () => {
-      var element = new OnsPageElement();
       expect(element._hasToolbarElement()).to.be.false;
       element._registerToolbar(new OnsToolbarElement());
       expect(element._hasToolbarElement()).to.be.true;
@@ -86,14 +95,12 @@ describe('ons-page', () => {
 
   describe('#_canAnimateToolbar()', () => {
     it('works with normal toolbar', () => {
-      var element = new OnsPageElement();
       expect(element._canAnimateToolbar()).to.be.false;
       element._registerToolbar(new OnsToolbarElement());
       expect(element._canAnimateToolbar()).to.be.true;
     });
 
     it('works with toolbar in page__content', () => {
-      var element = new OnsPageElement();
       expect(element._canAnimateToolbar()).to.be.false;
       element.lastChild.appendChild(new OnsToolbarElement());
       expect(element._canAnimateToolbar()).to.be.true;
@@ -102,23 +109,20 @@ describe('ons-page', () => {
 
   describe('#_getToolbarElement()', () => {
     it('returns the toolbar element', () => {
-      var element = new OnsPageElement();
       element._registerToolbar(new OnsToolbarElement());
       expect(element._getToolbarElement()).to.be.ok;
     });
   });
 
   describe('#_registerToolbar()', () => {
     it('inserts toolbar as a child', () => {
-      var element = new OnsPageElement();
       var spy = chai.spy.on(element, 'insertBefore');
       var toolbarElement = new OnsToolbarElement();
       element._registerToolbar(toolbarElement);
       expect(spy).to.have.been.called.with(toolbarElement, element.children[0]);
     });
 
     it('inserts toolbar as a child after status-bar-fill', () => {
-      var element = new OnsPageElement();
       var fill = document.createElement('div');
       fill.classList.add('page__status-bar-fill');
       element.insertBefore(fill, element.firstChild);
@@ -131,15 +135,13 @@ describe('ons-page', () => {
 
   describe('#_getBottomToolbarElement()', () => {
     it('inserts bottomToolbar as a child', () => {
-      var element = new OnsPageElement();
       element._registerBottomToolbar(new OnsBottomToolbarElement());
       expect(element._getBottomToolbarElement()).to.be.ok;
     });
   });
 
   describe('#registerExtraElement()', () => {
     it('attaches a new child to the page', () => {
-      var element = new OnsPageElement();
       expect(element.lastChild.className).to.equal('page__content');
       element._registerExtraElement(document.createElement('div'));
       expect(element.lastChild.className).to.equal('page__extra');
@@ -148,9 +150,8 @@ describe('ons-page', () => {
 
   describe('#_tryToFillStatusBar()', () => {
     it('fills status bar', () => {
-      var element = new OnsPageElement();
       var tmp = ons._internal.shouldFillStatusBar;
-      ons._internal.shouldFillStatusBar = () => {return true;};
+      ons._internal.shouldFillStatusBar = () => { return true; };
       element._tryToFillStatusBar();
       ons._internal.shouldFillStatusBar = tmp;
       expect(element.firstChild.className).to.equal('page__status-bar-fill');
@@ -159,23 +160,20 @@ describe('ons-page', () => {
 
   describe('#attributeChangedCallback()', () => {
     it('triggers \'onModifierChanged()\' method', () => {
-      var element = new OnsPageElement();
-      element.setAttribute('modifier', 'hoge');
-      element.attributeChangedCallback('hoge','fuga','piyo');
-      expect(() => element.attributeChangedCallback('hoge','fuga','piyo')).to.be.ok;
+      var spy = chai.spy.on(ons._internal.ModifierUtil, 'onModifierChanged');
+      element.attributeChangedCallback('modifier','fuga','piyo');
+      expect(spy).to.have.been.called.once;
     });
   });
 
   describe('#_compile()', () => {
     it('does not compile twice', () => {
-      var element = new OnsPageElement();
       var formerLastChild = element.lastChild;
       element._compile();
       expect(element.lastChild).to.equal(formerLastChild);
     });
 
     it('uses style attribute', () => {
-      var element = new OnsPageElement();
       while (element.lastChild) {
         element.removeChild(element.lastChild);
       }