How to test Elements

Here you can find information about how we are testing elements, how you should write tests and what helpers are provided to make it easier and more consistent.

---

Tools

We are using Happo for visual regression testing.

• It uses storybooks stories to take screenshots

• We have two separate story files in the storybook directory:

  1. *.stories.js which will be used in our demo
  2. *.happo.js which will be used by happo for testing

• Since we'll have lots of components with lots of stories, we are going to create big stories to see most of the combination in one screenshot, like this:

• You can use the createHappoStories helper (which already is in your component directory if you created it with component-gen command) to automatically generate the combinations of different props for you like this example:

import { storiesOf } from '@open-wc/demoing-storybook';
import '@tradeshift/elements';
import '@tradeshift/elements.button';
// Import the helper
import { createHappoStories } from '../../../../.storybook-happo/utils';
import { sizes, types } from '../src/utils';

storiesOf('ts-button', module).add('test', () => {
// Create an object based on available props in the component
	const properties = {
                // Key is the prop name how it should be used as an attribute: `attribute-name="value"`
		icon: { 
                  // Key is the name that will show up in the screen to show which value for the prop is used
		  // Value is the value for the attribute
                  'arrow-up': 'arrow-up' 
                },
       	        // You should use it like this for boolean attributes
                disabled: { true: true },
		busy: { true: true },
		size: sizes,
		type: types
	};
        // You should pass the `component name` without `ts-`
        // Properties object
        // Content which will be used as default slot
        // Options: columns count, ... 
	return createHappoStories('button', properties, 'Button', { columns: 5 });
});