foundation-testing.createcomponentsuite

Home > @genesislcap/foundation-testing > createComponentSuite

createComponentSuite() function

Create component test suite.

Signature:

export declare function createComponentSuite<TElement = HTMLElement>(title: string, elementNameOrGetter: string | ElementGetter, context?: ComponentContext<TElement>, registrations?: Registration<any>[]): uvu.Test<ComponentContext<TElement>>;

Parameters

Parameter	Type	Description
title	string	Title of the test suite
elementNameOrGetter	string | ElementGetter	Element tag name or getter which is used to create the element within the fixture
context	ComponentContext<TElement>	(Optional) Optional component context ComponentContext
registrations	Registration<any>[]	(Optional) Optional array of DI container registrations

Returns:

uvu.Test<ComponentContext<TElement>>

The test suite

Remarks

Used to test function output given certain input arguments.

Example 1

Simple suite using the tag name of the component.

import { createComponentSuite } from '@genesislcap/foundation-testing';
import { Component } from './component';
Component; // < As we're using tag name in the Suite, we hold a reference to avoid tree shaking.
const Suite = createComponentSuite<Component>('Component', 'my-component');
// test cases...
Suite.run();

Example 2

Mocking a DI dependency for a composable component.

const connectMock = new ConnectMock();
const mocks = [Registration.instance(Connect, connectMock)];
const Suite = createComponentSuite<ConnectionIndicator>('ConnectionIndicator Component', () => connectionIndicator(), null, mocks);
// test cases...
Suite.run();

Example 3

An element will be required to test anything that directly or in-directly makes use of the DI container, for example, a service that can be injected into components, or has its own injected dependencies.

import { Service } from './service';
@customElement({
  name: 'test-element',
  template: html`<slot></slot>`,
})
class TestElement extends FASTElement {}
const mocks = [...];
const Suite = createComponentSuite<TestElement>('Service', 'test-element', null, mocks);
// test cases...
Suite.run();

Importing the service should invoke the Service's DI registration, so in your test cases you can simply query the container to get a reference to your service.

Suite('Service.x does something expected', async ({ container }) => {
  const myService = container.get(Service);
  // assert
});

You can optionally add the service to the test element for lookup convenience, but this is not required.

class TestElement extends FASTElement {
  @Service service: Service;
}
Suite('Element has service injected', async ({ element }) => {
  assert.ok(element.service);
});