Acceptance testing against HTML snapshots

README.md

I was writing some acceptance tests against a lambda that sent out emails, I thought it would be useful to test the actual snapshot of the HTML thats being sent to the users. since the HTML can be lengthy, I did not want to pollute my test code and I also wanted the HTML snapshot to be readily viewable on a browser as a true representation of the current email layout.

I created a folder which would hold all the snapshot HTML files, and added this index file which would go through all the files in the directoy and export them as strings so that they can be asserted against in the tests.

// Read in the libs from this directory and add them as exports
// This way you can just reference
import * as fs from 'fs';

const snapshots = {};

fs.readdirSync(__dirname).forEach(function (file) {
  if (file.indexOf('.html') > -1 && file !== 'snapshots.ts') {
    let content = fs.readFileSync(__dirname + '/' + file, 'utf-8');
    const lastChar = content[content.length - 1];
    content =
      lastChar == '\n' || lastChar == '\r' ? content.slice(0, -1) : content;
    snapshots[file.replace('.html', '')] = content;
  }
});

export default snapshots;

the test:

it('should send welcome email', async () => {
      await handler(
        buildEvent(AccountV2EventNames.AccountCreated, {
          account: {
            tenant: '44-gbr-delivery',
            email: '[email protected]',
            names: [
              { givenName: 'Jason', familyName: 'Mays', type: 'primary' },
            ],
          },
        }),
      );
      expect(emailServiceStub.emails.length).toBe(1);
      expect(emailServiceStub.emails[0]).toEqual({
        emailAddress: '[email protected]',
        subject: 'Jason',
        htmlMessage: snapshots['en-GB-welcome'],
        plaintextMessage: 'en-GB\nWelcome: Jason.',
      });
    });