3

I have hundreds of Polymer test suites. At the end of each test, I'd like to access the DOM to do some custom quality checks.

Would writing a wct plugin work? If so, how should I access the DOM from within a plugin?

Thanks in advance!

x74x61
  • 423
  • 6
  • 18

1 Answers1

2

No plugin necessary. You could already access the DOM of the test fixture with the native DOM APIs (e.g., el.querySelector()) or with Polymer instance methods (e.g., el.$$() or el.getEffectiveChildren()). I verified this with Shady and Shadow DOMs on Chrome 53 and 56.

This example adds a couple DOM-related assertions to afterEach(), which runs after every test:

<test-fixture id="basic">
  <template>
    <my-app></my-app>
  </template>
</test-fixture>

<script>
  describe('my-app', function() {
    var el;

    beforeEach(function() {
      el = fixture('basic');
    });

    afterEach(function() {
      expect(el.$$('h2').textContent).to.have.string('Hello');
      expect(el.querySelectorAll('*')).to.have.lengthOf(2);
    });

    it('instantiating the el works', function() {
      expect(el.is).to.equal('my-app');
    });
  });
</script>
tony19
  • 125,647
  • 18
  • 229
  • 307
  • Is there a way to apply this afterEach globally to all my test suites? I have hundreds of them. It wouldn't be efficient to adjust each one manually. – x74x61 Oct 28 '16 at 06:45
  • 1
    You might be able to add a wrapper around `describe()` that has an `afterEach()`, and replace your test file refs to `describe()` with your wrapper. You should ask that as a new question for [tag:mocha] to get a definitive answer. – tony19 Oct 28 '16 at 06:52