Untitled

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>bbva-branch-navigation test</title>
    <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
    <script src="../node_modules/mocha/mocha.js"></script>
    <script src="../node_modules/wct-mocha/wct-mocha.js"></script>
    <script src="../node_modules/chai/chai.js"></script>
    <script src="../node_modules/sinon/pkg/sinon.js"></script>
    <script src="../node_modules/@polymer/test-fixture/test-fixture.js"></script>
    <script src="../node_modules/sinon-chai/lib/sinon-chai.js"></script>
  </head>

  <body>
    <test-fixture id="default">
      <template>
        <bbva-branch-navigation
          title="Link 0"
          links='[{"href":"http://www.google.es/","title":"link1","text":"Link1"},{"href":"http://www.google.es/","title":"link2","text":"Link2"}]'
        ></bbva-branch-navigation>
      </template>
    </test-fixture>
    <test-fixture id="opened">
      <template>
        <bbva-branch-navigation
          title="Link 0"
          links='[{"href":"http://www.google.es/","title":"link1","text":"Link1"},{"href":"http://www.google.es/","title":"link2","text":"Link2"}]'
          always-open
        ></bbva-branch-navigation>
      </template>
    </test-fixture>

    <script type="module">
      import './test.js';
      suite('bbva-branch-navigation', () => {
        let el, elOpened;

        setup(async () => {
          el = fixture('default');
          elOpened = fixture('opened');

          return await elOpened.updateComplete;
        });

        test('Asserting attribute "title" is in the header > span.', () => {
          const span = el.shadowRoot.querySelector('header > span');
          assert.equal(span.innerText, 'Link 0');
        });

        test('Asserting attribute "aria-hidden" is true or false when header\'s drop down is clicked.', async () => {
          const link = el.shadowRoot.querySelector('header');
          const dropDown = el.shadowRoot.querySelector('cells-collapse');
          assert.equal(dropDown.getAttribute('aria-hidden'), 'true');
          link.click();
          await el.updateComplete;
          assert.equal(dropDown.getAttribute('aria-hidden'), 'false');
        });

        test('Asserting collapsible has attribute "always-open" and is open, so never will be closed.', async () => {
          const link = elOpened.shadowRoot.querySelector('header');
          const dropDown = elOpened.shadowRoot.querySelector('cells-collapse');
          assert.equal(dropDown.getAttribute('aria-hidden'), 'false');
          link.click();
          await elOpened.updateComplete;
          assert.equal(dropDown.getAttribute('aria-hidden'), 'false');
        });

        test('Asserting the collapsible is opened when the method "open" is called. And it is closed, when method "close" is called.', async () => {
          const dropDown = el.shadowRoot.querySelector('cells-collapse');
          assert.equal(dropDown.getAttribute('aria-hidden'), 'true');
          el.open();
          await el.updateComplete;
          assert.equal(dropDown.getAttribute('aria-hidden'), 'false');
          el.close();
          await el.updateComplete;
          assert.equal(dropDown.getAttribute('aria-hidden'), 'true');
        });


        test('checks property opened is set to true at the beginning', () => {
          const opened = elOpened.opened;
          assert.isTrue(opened)
        });

        test('checks property collapsed is set to true at the beginning', () => {
          const collapsed = elOpened.collapsed;
          assert.isTrue(collapsed)
        });

        test('checks property collapsed is set to false', () => {
          const collapsed = elOpened.collapsed = false;
          assert.isFalse(collapsed)
        });


        test('checks property opened is set to false at the beginning', () => {
          const opened = el.opened;
          assert.isFalse(opened)
        });

        test('checks property opened is set to true', () => {
          const opened = el.opened = true;
          assert.isTrue(opened)
        });

        test('checks property collapsed is set to false', () => {
          const collapsed = el.collapsed;
          assert.isFalse(collapsed)
        });

        test('checks property collapsed is set to true', () => {
          const collapsed = el.collapsed = true;
          assert.isTrue(collapsed)
        });


        test('checks property links is an Array', () => {
          const links = elOpened.links;
          assert.isArray(links)
        });

        test('checks property links is an Array', () => {
          const links = el.links;
          assert.isArray(links)
        });

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