Atdd NPM | npm.io

ATDD

Aligning TDD practices with our Acceptance criteria.

Given
When
Should
Expect

TODO:mattmark speak to the situation, motivation and expected out that is driving this POC

Installing

TODO:[mattmark]

Example Usage

imageComponent.ts

  export default function () {
    return {
      data: {
        isLoading: false
      },
      methods: {
        xhr: async name => ({
          width: 16,
          height: 16,
          alt: name,
          src: `data:image/gif;base64,${name}`
        }),
        error: async message => (new Error(message))
      },
      render: function ({ width, height, alt, src }) {
        return `<img width="${width}" height="${height}" alt="${alt}" src="${src}" />`
      }
    }
  };

imageComponent.spec.ts

import { describe } from 'atdd';

import imageComponent from './imageComponent';

describe('imageComponent', async assert => {
  assert({
    given: 'imageComponent is created',
    when: imageComponent().data,
    should: 'have the correct default data',
    expected: { isLoading: false },
  });

  assert({
    given: 'xhr request is made with "placeholder" arg',
    when: await imageComponent().methods.xhr('placeholder'),
    should: 'return the expected data',
    expected: { width: 16, height: 16, alt: 'placeholder', src: 'data:image/gif;base64,placeholder' },
  });

  assert({
    given: 'render is called with placeholder data',
    when: imageComponent().render( await imageComponent().methods.xhr('placeholder') ),
    should: 'return the expected markup',
    expected: '<img width="16" height="16" alt="placeholder" src="data:image/gif;base64,placeholder" />',
  });
});