Assertion templates

    To use assertion templates first import the module:

    A base assertion should be created which defines the widget’s default render state. Given the following widget:

    3. import * as css from './styles/Profile.m.css';
    5. export interface ProfileProperties {
    6.     username?: string;
    7. }
    9. const factory = create().properties<ProfileProperties>();
    11. const Profile = factory(function Profile({ properties }) {
    12.     const { username } = properties();
    13.     return <h1 classes={[css.root]}>{`Welcome ${username || 'Stranger'}!`}</h1>;
    15. export default Profile;

    and in a test would look like:

    1. const profileAssertion = assertionTemplate(() => (
    2.     <h1 classes={[css.root]} assertion-key="welcome">
    4.     </h1>
    5. ));
    7. describe('Profile', () => {
    8.     it('default renders correctly', () => {
    9.         const h = harness(() => <Profile />);
    10.         h.expect(profileAssertion);
    11.     });

    Here the setChildren() api is used on the baseAssertion, and the special ~ selector allows finding a node with a key of ~welcome. The assertion-key property (or when using w() or v()functions, ) is a special property on assertion templates that will be erased at assertion time so it doesn’t show up when matching the renders. This allows the assertion templates to easily select nodes without having to augment the actual widget render function. Once the welcome node is found, its children are overridden to a new value of ['Welcome Kel Varnsen!'], and the resulting template is then used in h.expect. It’s important to note that assertion templates always return a new assertion template when setting a value. This ensures that an existing template is not accidentally mutated, which would cause other tests to potentially fail, and allows construction of layered templates that incrementally build on each other.

    Assertion template has the following API:

    1. insertBefore(selector: string, children: () => DNode[]): AssertionTemplateResult;
    2. insertAfter(selector: string, children: () => DNode[]): AssertionTemplateResult;
    3. insertSiblings(selector: string, children: () => DNode[], type?: 'before' | 'after'): AssertionTemplateResult;
    4. append(selector: string, children: () => DNode[]): AssertionTemplateResult;
    5. prepend(selector: string, children: () => DNode[]): AssertionTemplateResult;
    6. replaceChildren(selector: string, children: () => DNode[]): AssertionTemplateResult;
    7. setChildren(selector: string, children: () => DNode[], type?: 'prepend' | 'replace' | 'append'): AssertionTemplateResult;
    8. setProperty(selector: string, property: string, value: any): AssertionTemplateResult;
    9. setProperties(selector: string, value: any | PropertiesComparatorFunction): AssertionTemplateResult;
    10. getChildren(selector: string): DNode[];
    11. getProperty(selector: string, property: string): any;
    12. getProperties(selector: string): any;
    13. replace(selector: string, node: DNode): AssertionTemplateResult;