Testing Tips

When embedding a KronoGraph timeline into your app, you may be interested in automated integration testing. This section outlines the APIs that KronoGraph provides for obtaining information about entities and events in the timeline which you can then use within your chosen test framework.

Handled Events

The draw event The onTimelineDraw event is fired each time the timeline is rendered. This can include animated transitions, so we recommend using setTimeout() in your tests to allow any animations to finish before making assertions.

Methods

The following timeline instance methods are particularly useful for integration tests.

If you're going to use a tool to inspect the timeline in a given window, give access to the timeline by exposing the timeline ref to the window:

const MyFunctionalComponent = () => {
  const timelineRef = useRef(null);

  useEffect(() => {
    if (typeof window !== "undefined") {
      // expose the ref on the top-most window
      window.top.timeline = timelineRef.current;
    }
  }, []);

  return (
      <Timeline
        ref={timelineRef}
        entities={data.entities}
        events={data.events}
      />
  );
};

You can then use the ref:

const entityColor = timelineRef.current.getEntity('entity a').color;

The function...	Can be used to test whether...
getAnnotationBodyPosition	the specified annotation is in the current timeline range: returns null if not.
getEntityPosition	there's an entity in the current timeline range, in the specified position: returns null if not.
getEventPosition	there's an event in the current timeline range, in the specified position: returns null if not.
getInRangeItems	there are any events and entities in the current timeline range: returns an empty object if not. there are any focused entities in the current timeline range by specifying the `focus` option: returns an empty object if not.

If you're going to use a tool to inspect the timeline in a given window, you need to make it available to the global scope. This allows you to then use a function such as timeline.options(), for example, to get the timeline's current options.

The function...	Can be used to test whether...
getAnnotationBodyPosition	the specified annotation is in the current timeline range: returns null if not.
getEntity	there's an entity with the specified id: returns null if not.
getEntityPosition	there's an entity in the current timeline range, in the specified position: returns null if not.
getEvent	there's an event with the specified id: returns null if not.
getEventPosition	there's an event in the current timeline range, in the specified position: returns null if not.
getInRangeItems	there are any events and entities in the current timeline range: returns an empty object if not. there are any focused entities in the current timeline range by specifying the `focus` option: returns an empty object if not.
getPinnedEntityIds	there are any pinned entities: returns an empty object if not.
getRowEntityIds	there's an entity row with the specified id: returns null if not.