OrcDen Component Test Suite
npm i @orcden/od-component-test-suite --save-dev
`
Example Basic Usage
See TestCafe for setting up a set of tests, then in your testfile:
`
import { TestCafeComponentTestSuite } from '../../../node_modules/@orcden/od-component-test-suite';
`
`
const _config = {
testServer: 'http://localhost:8079',
name: 'OD Top Button',
tag: 'od-top-button',
componentSelector: '#top-button',
hasShadow: true,
shadowSelector: '#top-button',
properties: [
{
name: 'active',
type: Boolean,
default: false,
attributeName: 'active'
},
{
name: 'offset',
type: Number,
default: 1,
validValue: 5,
attributeName: 'offset'
}
]
}
const testSuite = new TestCafeComponentTestSuite( _config );
testSuite.runAllTests();
`
Example with Custom Tests
`
...
const testSuite = new TestCafeComponentTestSuite( _config );
testSuite.runAllTests();
const model = testSuite.model;
const topButton = model.component;
fixture( 'OD-Top-Button Custom Tests' )
.page( model.testServer );
test( 'Integration Tests - Properties - offset - behaviour', async t => {
let selector = model.componentSelector
await t.eval( () => { document.querySelector( selector ).offset = 2 }, {dependencies: { selector }} );
let offsetValue = await topButton.offset;
await t
.expect( topButton.withAttribute( 'offset', offsetValue.toString() ).exists ).ok( 'Attribute "offset" updates with property' );
await t.eval( () => { document.querySelector( selector ).offset = 1 }, {dependencies: { selector }} );
} );
`
Configuration
| Field | Type | Description |
|---------------------|---------|---------------------------------------------------------------|
| testServer | String | The server/page that your Testcafe fixture runs tests against |
| name | String | The proper name for your component; Should be easy to read |
| componentTag | String | The tagName for your component when it is in the DOM |
| componentSelector | String | The selector used to find your component in the DOM of your specified server/page; Should be an Id |
| hasShadow | Boolean | Set to true if your component uses a shadow DOM |
| shadowSelector | String | The selector used to find the PARENT element inside your components shadow DOM; Can be excluded if hasShadow is set false |
| properties | Array | A set of properties that component exposes; See below for property Configuration |
$3
| Field | Description | |
|-----------------|-------------|--------------------------|
| name | String | The name of the property |
| type | Primative | The JS type that your property is; Supported Types: Boolean, String, Number, Object, Array |
| default | Primative | The default value that the property is set to upon initialization; Should be of type specified in 'type' field |
| validValue | Primative | A value that the given property can accept without issue; Should be of type specified in 'type' field; ONLY REQUIRED IN Number AND String 'type' |
| attributeName | Primative | The name of the attribute that corresponds to the property; ONLY REQUIRED IN Number AND String AND Boolean 'type' |
Development
$3
`
npm run demo
`
$3
`
npm run lint
`
$3
`
npm run fix
`
$3
`
npm run build
``