<!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.txt The complete set of authors may be found at polymer.github.io/AUTHORS.txt The complete set of contributors may be found at polymer.github.io/CONTRIBUTORS.txt 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.txt –> <html> <head>

<meta charset="UTF-8">
<title>paper-badge tests</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>
<link rel="import" href="../paper-badge.html">
<link rel="import" href="test-button.html">

</head> <style>

body {
  margin: 0;
  padding: 0;
}
#target {
  width: 100px;
  height: 20px;
  background-color: red;
}

</style> <body>

<test-fixture id="basic">
  <template>
    <div style="position:relative">
      <div id="target"></div>
      <paper-badge for="target" label="1"></paper-badge>
    </div>
  </template>
</test-fixture>

<test-fixture id="dynamic">
  <template>
    <div>
      <div id="target"></div>
      <paper-badge label="1"></paper-badge>
    </div>
  </template>
</test-fixture>

<test-fixture id="nested">
  <template>
    <div>
      <div id="target">
        <paper-badge label="1"></paper-badge>
      </div>
    </div>
  </template>
</test-fixture>

<test-fixture id="custom">
  <template>
    <test-button></test-button>
  </template>
</test-fixture>

<test-fixture id="icon-badge">
  <template>
    <div style="position:relative">
      <div id="target"></div>
      <paper-badge icon="favorite" label="favorite icon"></paper-badge>
    </div>
  </template>
</test-fixture>

<test-fixture id="initially-hidden">
  <template>
    <div style="position:relative">
      <div id="target"></div>
      <paper-badge for="target" label="1" hidden></paper-badge>
    </div>
  </template>
</test-fixture>

<script>
  suite('basic', function() {
    test('badge is positioned correctly', function(done) {
      var f = fixture('basic');
      var badge = f.querySelector('paper-badge');
      var actualbadge = Polymer.dom(badge.root).querySelector('.badge');

      expect(badge.target.getAttribute('id')).to.be.equal('target');

      badge.updatePosition();

      Polymer.Base.async(function() {
        assert.equal(actualbadge.textContent.trim(), "1");

        var divRect = f.querySelector('#target').getBoundingClientRect();
        expect(divRect.width).to.be.equal(100);
        expect(divRect.height).to.be.equal(20);

        var contentRect = badge.getBoundingClientRect();
        expect(contentRect.width).to.be.equal(20);
        expect(contentRect.height).to.be.equal(20);

        // The target div is 100 x 20, and the badge is centered on the
        // top right corner.
        expect(contentRect.left).to.be.equal(100 - 10);
        expect(contentRect.top).to.be.equal(0 - 10);

        // Also check the math, just in case.
        expect(contentRect.left).to.be.equal(divRect.width - 10);
        expect(contentRect.top).to.be.equal(divRect.top - 10);

        done();
      });
    });

    test('badge is positioned correctly after initially being hidden', function(done) {
      var f = fixture('initially-hidden');
      var badge = f.querySelector('paper-badge');
      var actualbadge = Polymer.dom(badge.root).querySelector('.badge');

      expect(badge.target.getAttribute('id')).to.be.equal('target');

      // Badge is initially hidden.
      var contentRect = badge.getBoundingClientRect();
      expect(contentRect.width).to.be.equal(0);
      expect(contentRect.height).to.be.equal(0);

      badge.removeAttribute('hidden');

      Polymer.Base.async(function() {
        assert.equal(actualbadge.textContent.trim(), "1");

        var divRect = f.querySelector('#target').getBoundingClientRect();
        expect(divRect.width).to.be.equal(100);
        expect(divRect.height).to.be.equal(20);

        contentRect = badge.getBoundingClientRect();
        expect(contentRect.width).to.be.equal(20);
        expect(contentRect.height).to.be.equal(20);

        // The target div is 100 x 20, and the badge is centered on the
        // top right corner.
        expect(contentRect.left).to.be.equal(100 - 10);
        expect(contentRect.top).to.be.equal(0 - 10);

        // Also check the math, just in case.
        expect(contentRect.left).to.be.equal(divRect.width - 10);
        expect(contentRect.top).to.be.equal(divRect.top - 10);

        done();
      });
    });

    test('badge is positioned correctly after being dynamically set', function(done) {
      var f = fixture('dynamic');
      var badge = f.querySelector('paper-badge');
      badge.updatePosition();

      expect(badge.target.getAttribute('id')).to.not.be.equal('target');

      Polymer.Base.async(function() {
        var contentRect = badge.getBoundingClientRect();
        expect(contentRect.left).to.not.be.equal(100 - 11);

        badge.for = 'target';
        expect(badge.target.getAttribute('id')).to.be.equal('target');

        badge.updatePosition();

        Polymer.Base.async(function() {
          var divRect = f.querySelector('#target').getBoundingClientRect();
          expect(divRect.width).to.be.equal(100);
          expect(divRect.height).to.be.equal(20);

          var contentRect = badge.getBoundingClientRect();
          expect(contentRect.width).to.be.equal(20);
          expect(contentRect.height).to.be.equal(20);

          // The target div is 100 x 20, and the badge is centered on the
          // top right corner.
          expect(contentRect.left).to.be.equal(100 - 10);
          expect(contentRect.top).to.be.equal(0 - 10);

          // Also check the math, just in case.
          expect(contentRect.left).to.be.equal(divRect.width - 10);
          expect(contentRect.top).to.be.equal(divRect.top - 10);

          done();
        });
      });
    });

    test('badge is positioned correctly when nested in a target element', function(done) {
      var f = fixture('nested');
      var badge = f.querySelector('paper-badge');

      expect(badge.target.getAttribute('id')).to.be.equal('target');

      badge.updatePosition();

      Polymer.Base.async(function() {
        var divRect = f.querySelector('#target').getBoundingClientRect();
        expect(divRect.width).to.be.equal(100);
        expect(divRect.height).to.be.equal(20);

        var contentRect = badge.getBoundingClientRect();
        expect(contentRect.width).to.be.equal(20);
        expect(contentRect.height).to.be.equal(20);

        // The target div is 100 x 20, and the badge is centered on the
        // top right corner.
        expect(contentRect.left).to.be.equal(100 - 10);
        expect(contentRect.top).to.be.equal(0 - 10);

        // Also check the math, just in case.
        expect(contentRect.left).to.be.equal(divRect.width - 10);
        expect(contentRect.top).to.be.equal(divRect.top - 10);

        done();
      });
    });

    test('badge displays icons correctly', function(done) {
      var f = fixture('icon-badge');
      var badge = f.querySelector('paper-badge');

      Polymer.Base.async(function() {
        var icon = Polymer.dom(badge.root).querySelector('iron-icon');
        expect(icon).not.to.be.null;
        expect(icon.icon).to.be.equal(badge.icon);
        expect(badge.getAttribute('aria-label')).to.be.equal(badge.label);
        done();
      });
    });

    suite('badge is inside a custom element', function() {
      test('badge is positioned correctly', function(done) {
        var f = fixture('custom');
        var badge = f.$.badge;
        var actualbadge = Polymer.dom(badge.root).querySelector('.badge');

        badge.updatePosition();

        Polymer.Base.async(function() {
          assert.equal(actualbadge.textContent.trim(), "1");

          var divRect = f.$.button.getBoundingClientRect();
          expect(divRect.width).to.be.equal(100);
          expect(divRect.height).to.be.equal(20);

          var contentRect = badge.getBoundingClientRect();
          expect(contentRect.width).to.be.equal(20);
          expect(contentRect.height).to.be.equal(20);

          // The target div is 100 x 20, and the badge is centered on the
          // top right corner.
          expect(contentRect.left).to.be.equal(100 - 10);
          expect(contentRect.top).to.be.equal(0 - 10);

          // Also check the math, just in case.
          expect(contentRect.left).to.be.equal(divRect.width - 10);
          expect(contentRect.top).to.be.equal(divRect.top - 10);

          done();
        });
      });
    });
  });
</script>

</body> </html>