basic.html 6.83 KB
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://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 http://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>
  <script src="../../test-fixture/test-fixture-mocha.js"></script>

  <link rel="import" href="../../test-fixture/test-fixture.html">
  <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>

  <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');
        assert.equal(actualbadge.textContent, "1");

        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(22);
          expect(contentRect.height).to.be.equal(22);

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

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

          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(22);
            expect(contentRect.height).to.be.equal(22);

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

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

            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(22);
          expect(contentRect.height).to.be.equal(22);

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

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

          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');
          assert.equal(actualbadge.textContent, "1");

          badge.updatePosition();

          Polymer.Base.async(function() {
            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(22);
            expect(contentRect.height).to.be.equal(22);

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

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

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