Testing

Element unit tests should follow a 'user testing' model, by which we mean that assertions should be grouped under actions. An assertion is when the state of the element or the page is inspected and compared to some expected value. An action is when a user action or page state change is simulated or directly caused.

Mocha and Chai

We use Mocha and chai, via Web Test Runner to run our tests and make our assertions. actions should be performed as much as possible only in beforeEach blocks and grouped by describe blocks.

An indicator that your tests do not follow these guidelines is when your it blocks contain async functions.

async function() -> actions which change state -> beforeEach()
function() -> no state changes -> it()

With this structure, tests tend to follow the schematic of a typical user action

Given that the element has the `danger` attribute
When the user clicks the button
And the data finishes fetching
Then the error message should display
When the user clicks the button
Then the error message should not display

describe('rh-jazzy-snaps', function() {
  describe('with `danger` attribute', function() {
    let element;
    beforeEach(async function() {
      element = await createFixture(html`<rh-jazzy-snaps danger></rh-jazzy-snaps>`)
    });
    describe('when the user clicks the button', function() {
      beforeEach(async function() {
        element.click();
        await element.updateComplete;
      });
      describe('when the data loads', function() {
        beforeEach(async function() {
          await oneEvent(element, 'load');
        });
        it('shows the error message', function() {
          expect(element.textContent).to.equal('no bueno!');
        });
        describe('when the user clicks the button', function() {
          beforeEach(async function() {
            element.click();
            await element.updateComplete;
          });
          it('does not show the error message', function() {
            expect(element.textContent).to.not.equal('no bueno!');
          });
        });
      });
    });
  });
});

In this way, tests are organized by user action, and actions and assertions are strictly separated. When writing these kinds of tests, it's helpful to have some snippets handy.