Testing your Ogma application

Download template

Ogma can work with the most testing frameworks out there. But in order to make it run in headless mode, you need to make the node-canvas or canvas-prebuilt library available to it, to mock the rendering.

Mocha

 npm install --save-dev mocha chai canvas
 mocha tests/**/*.test.js

const Ogma = require('@linkurious/ogma');
const { assert } = require('chai');

describe('dummy suite', () => {
  it('dummy test', () => {
    const ogma = new Ogma();
    return ogma
      .setGraph({
        nodes: [{ id: 0 }, { id: 1 }],
        edges: [{ source: 0, target: 1 }]
      })
      .then(() => {
        assert.equal(ogma.getNodes().size, 2);
      });
  });
});

Jest

 npm i --save-dev jest canvas
 jest

Alternatively, you can use other canvas-mock library, like jest-canvas-mock, and set it up to be included in the setup.

const Ogma = require('@linkurious/ogma');

describe('dummy suite', () => {
  test('dummy test', () => {
    const ogma = new Ogma();
    return ogma
      .setGraph({
        nodes: [{ id: 0 }, { id: 1 }],
        edges: [{ source: 0, target: 1 }]
      })
      .then(() => {
        expect(ogma.getNodes().size).toBe(2);
      });
  });
});

Jasmine

 npm i --save-dev jasmine
 jasmine

const Ogma = require('@linkurious/ogma');

describe('dummy suite', () => {
  it('dummy test', () => {
    const ogma = new Ogma();
    return ogma
      .setGraph({
        nodes: [{ id: 0 }, { id: 1 }],
        edges: [{ source: 0, target: 1 }]
      })
      .then(() => {
        expect(ogma.getNodes().size).toBe(2);
      });
  });
});

Playwright

You can also do in-browser testing by using playwright. This will allow you to write end-to-end tests and easily test your integration with Ogma.

We provide a boilerplate repository with an example on how to test Ogma with Playwright: ogma-playwright-e2e-boilerplate

Install playwright

npm i -D @playwright/test

Write a test

First you will need to serve the page you want to test. You can use vite and define a server port and the folder you want to serve:

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    port: 3000,
    root: 'test/pages/my-page'
  }
});

Then you need to tell playwright to navigate to your page, and write your test:

import { test, expect } from '@playwright/test';

test.describe('Ogma e2e tests', () => {
  test('click on the node', async ({ page }) => {
    // navigate to the right example
    await page.goto('http://localhost:3000/example0/');
    // check that the instance is created and exposed
    await page.waitForFunction(() => window.ogma !== undefined);
    // wait for the specific console message, wait for the layout to be done
    await new Promise<void>(resolve =>
      page.on('console', m => {
        if (m.text() === 'done') resolve();
      })
    );

    // check node position before click
    const position = await page.evaluate(() => {
      const ogma = window.ogma;
      const node = ogma.getNodes().get(0);
      return node.getPositionOnScreen();
    });
    page.mouse.click(position.x, position.y);
    await page.waitForTimeout(100);
    const selectedNode = await page.evaluate(() => {
      const ogma = window.ogma;
      return ogma.getSelectedNodes().get(0).getId();
    });
    expect(selectedNode).toBe('n0');
  });
});