IXON Component Development Kit Testing

This package contains a implementation of the ComponentContext, usefull for component testing.

Component testing

App Engine UI Components can be tested in Jest, just like a regular unit test. To test components, two libraries are recommended, @testing-library/svelte and @ixon-cdk/testing. @ixon-cdk/testing implements the Component Context API for use in testing, while @testing-library/svelte makes it easy to do DOM assertions on your components.

Note: the @testing-library/svelte documentation can be found here.

Component Context

The Component Context is dependent on the host app, for example Portal, to function. This is not workable in unit tests. For unit tests, a Mock Component Context is created. Depending on the component, you can create a new ComponentContext with createMockComponentContext({}) or ComponentContextFactory with createMockComponentContextFactory({}). When creating the context, you can set several options, for example the component inputs.

import { createMockComponentContext } from '@ixon-cdk/testing';
import { AGENT_LIST } from '@testing/mock-data';
import MyComponent from './my-component.svelte';

const context = createMockComponentContext({});

const component = render(MyComponent, {
  props: {
    context,
  },
});

ResourceDataClient

The results of the ResourceDataClient can be configured when creating the ComponentContext, you don't need to use Jest mocks. In the following example, a ComponentContext is created with ResourceDataClient options. When the component queries the Agent resource, the value AGENT_LIST[0] will be given. This works for both query and render.

import { createMockComponentContext } from '@ixon-cdk/testing';
import { AGENT_LIST } from './mock-data';
import MyComponent from './my-component.svelte';

const context = createMockComponentContext({
  resourceData: {
    selectors: [
      {
        selector: 'Agent',
        value: AGENT_LIST[0],
      },
    ],
  },
});

const component = render(MyComponent, {
  props: {
    context,
  },
});

In certain situations, you want to be able to update the resource, for example to mimic a Change Notification. You can also provide a BehaviourSubject as value. When a new value is published, the query listeners will be called and the render method will re-render the templates. In the following example, the agent name will be updated.

import { createMockComponentContext } from '@ixon-cdk/testing';
import { AGENT_LIST } from './mock-data';
import MyComponent from './my-component.svelte';

const agent$ = new BehaviorSubject(AGENT_LIST[0]);
const context = createMockComponentContext({
  resourceData: {
    selectors: [
      {
        selector: 'Agent',
        value: agent$,
      },
    ],
  },
});

const component = render(MyComponent, {
  props: {
    context,
  },
});

// Update the agent name
agent$.next({
  ...AGENT_LIST[0],
  name: 'Demo loader',
});

LoggingDataClient

The results of the LoggingDataClient can be configured when creating the ComponentContext, you don't need to use Jest mocks. In the following example, a ComponentContext is created with LoggingDataClient options.

import {
  createMockComponentContext,
  createMockLoggingDataValue,
} from '@ixon-cdk/testing';
import MyComponent from './my-component.svelte';

const dateTime = DateTime.fromJSDate(BASE_TIME);
const context = createMockComponentContext({
  loggingData: {
    selectors: [
      {
        selector: 'Agent#selected:default.tag.count-int-last',
        values: [createMockLoggingDataValue(27, dateTime.toMillis())],
      },
    ],
  },
});

const component = render(MyComponent, {
  props: {
    context,
  },
});

In certain situations, you want to be able to update the data, for example to mimic live data. You can also provide a BehaviourSubject as value. When a new value is published, the query listeners will be called.

import {
  createMockComponentContext,
  createMockLoggingDataValue,
} from '@ixon-cdk/testing';
import MyComponent from './my-component.svelte';

const dateTime = DateTime.fromJSDate(BASE_TIME);
const values$ = new BehaviorSubject([
  createMockLoggingDataValue(27, dateTime.toMillis()),
]);

const context = createMockComponentContext({
  loggingData: {
    selectors: [
      {
        selector: 'Agent#selected:default.tag.count-int-last',
        values: values$,
      },
    ],
  },
});

const component = render(MyComponent, {
  props: {
    context,
  },
});

values$.next([
  createMockLoggingDataValue(29, dateTime.plus({ seconds: 10 }).toMillis()),
]);