<!doctype html> <!– @license Copyright © 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at polymer.github.io/LICENSE The complete set of authors may be found at polymer.github.io/AUTHORS The complete set of contributors may be found at polymer.github.io/CONTRIBUTORS Code distributed by Google as part of the polymer project is also subject to an additional IP rights grant found at polymer.github.io/PATENTS –> <html> <head>

<meta charset="UTF-8">
<title>test for app-drawer-layout</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../../web-component-tester/browser.js"></script>
<script src="../../../test-fixture/test-fixture-mocha.js"></script>
<link rel="import" href="../../../iron-resizable-behavior/iron-resizable-behavior.html">
<link rel="import" href="../../../test-fixture/test-fixture.html">
<link rel="import" href="../app-drawer-layout.html">

<style is="custom-style">
  body {
    margin: 0;
    padding: 0;
  }

  app-drawer-layout {
    width: 100px;
    height: 300px;
    background: green;
    position: absolute;
    overflow: hidden !important;
    z-index: 0;
    --app-drawer-layout-drawer: {
      background-color: blue;
    };
    --app-drawer-duration: 0s;
  }

  [content] {
    width: 1px;
    height: 3000px;
    background-color: red;
  }

  [drawer] {
    width: 100%;
  }
</style>

</head> <body>

<test-fixture id="testDrawerLayout">
  <template>
    <app-drawer-layout>
      <app-drawer>Drawer</app-drawer>
      <div drawer-toggle>Toggle</div>
      <p>Content</p>
      <x-resizeable></x-resizeable>
    </app-drawer-layout>
  </template>
</test-fixture>

<script>
  HTMLImports.whenReady(function() {
    Polymer({
      is: 'x-resizeable',
      behaviors: [
        Polymer.IronResizableBehavior
      ]
    });
  });

  suite('basic features', function() {
    var drawerLayout, drawer;

    setup(function() {
      drawerLayout = fixture('testDrawerLayout');
      drawer = drawerLayout.querySelector('app-drawer');
    });

    test('default values', function() {
      assert.isFalse(drawerLayout.forceNarrow);
      assert.equal(drawerLayout.responsiveWidth, '640px');
      assert.isFalse(drawerLayout.openedWhenNarrow);
    });

    test('get drawer', function() {
      assert.equal(drawerLayout.drawer, drawer);
    });

    test('forceNarrow', function() {
      drawerLayout.responsiveWidth = '0px';
      drawerLayout.forceNarrow = true;

      assert.isTrue(drawerLayout.narrow);
    });

    test('responsiveWidth', function(done) {
      var xResizeable = drawerLayout.querySelector('x-resizeable');
      var notifyResizeSpy = sinon.spy(xResizeable, 'notifyResize');
      var drawerToggle = drawerLayout.querySelector('[drawer-toggle]');
      drawerLayout.responsiveWidth = '0px';

      window.setTimeout(function() {
        assert.isFalse(drawerLayout.narrow);
        assert.isTrue(drawer.opened);
        assert.equal(window.getComputedStyle(drawerToggle)['display'], 'none');
        assert.isTrue(notifyResizeSpy.called);

        notifyResizeSpy.reset();
        drawerLayout.responsiveWidth = '10000px';

        window.setTimeout(function() {
          assert.isTrue(drawerLayout.narrow);
          assert.isFalse(drawer.opened);
          assert.notEqual(window.getComputedStyle(drawerToggle)['display'], 'none');
          assert.isTrue(notifyResizeSpy.called);

          done();
        }, 50);
      }, 50);
    });

    test('drawer-toggle', function(done) {
      drawerLayout.responsiveWidth = '10000px';

      assert.isFalse(drawer.opened);

      Polymer.Base.fire('tap', null /* detail */, { node: drawerLayout.querySelector('p') });

      assert.isFalse(drawer.opened);

      Polymer.Base.fire('tap', null /* detail */, { node: drawerLayout.querySelector('[drawer-toggle]') });

      assert.isTrue(drawer.opened);

      drawerLayout.responsiveWidth = '0px';

      window.setTimeout(function() {
        Polymer.Base.fire('tap', null /* detail */, { node: drawerLayout.querySelector('[drawer-toggle]') });

        assert.isTrue(drawer.opened);

        done();
      }, 50);
    });

    test('content layout', function(done) {
      drawerLayout.responsiveWidth = '10000px';

      window.setTimeout(function() {
        assert.equal(drawerLayout.$.contentContainer.style.marginLeft, '');
        assert.equal(drawerLayout.$.contentContainer.style.marginRight, '');

        drawerLayout.responsiveWidth = '0px';

        window.setTimeout(function() {
          assert.equal(drawerLayout.$.contentContainer.style.marginLeft, '256px');
          assert.equal(drawerLayout.$.contentContainer.style.marginRight, '');

          drawer.align = 'end';

          window.setTimeout(function() {
            assert.equal(drawerLayout.$.contentContainer.style.marginLeft, '');
            assert.equal(drawerLayout.$.contentContainer.style.marginRight, '256px');

            done();
          }, 50);
        }, 50);
      }, 50);
    });

    test('iron-resize triggers content layout', function() {
      var resetLayoutSpy = sinon.spy(drawerLayout, 'resetLayout');

      assert.isFalse(resetLayoutSpy.called);

      drawerLayout.notifyResize();

      assert.isTrue(resetLayoutSpy.called);

      resetLayoutSpy.restore();
    });

    test('openedWhenNarrow', function(done) {
      drawerLayout.openedWhenNarrow = true;
      drawerLayout.responsiveWidth = '0px';

      window.setTimeout(function() {
        assert.isFalse(drawerLayout.narrow);
        assert.isTrue(drawer.opened);

        drawerLayout.responsiveWidth = '10000px';

        window.setTimeout(function() {
          assert.isTrue(drawerLayout.narrow);
          assert.isTrue(drawer.opened);

          done();
        }, 50);
      }, 50);
    });

    test('app-drawer appended later', function(done) {
      assert.doesNotThrow(function() {
        drawerLayout = document.body.appendChild(document.createElement('app-drawer-layout'));
      });
      assert.isUndefined(drawerLayout.drawer);
      assert.equal(drawerLayout.$.contentContainer.style.marginLeft, '');
      assert.equal(drawerLayout.$.contentContainer.style.marginRight, '');

      drawerLayout.responsiveWidth = '0px';
      Polymer.dom(drawerLayout).appendChild(document.createElement('app-drawer'));
      Polymer.dom.flush();

      window.setTimeout(function() {
        assert.isTrue(drawerLayout.drawer.opened);
        assert.equal(drawerLayout.$.contentContainer.style.marginLeft, '256px');
        assert.equal(drawerLayout.$.contentContainer.style.marginRight, '');

        done();
      }, 50);
    });
  });

</script>

</body> </html>