@socketsupply/ssc-test

ssc test

A tool for testing ssc apps. Exposes two functions -- addTest, which is called in your application code, and buildTests, called by your build script.

install

npm i -D @socketsupply/ssc-test

example -- application code

Within the render process, call addTest() --

import { render } from 'preact'
import { html } from 'htm/preact'
import addTest from "@socketsupply/ssc-test"

function demonstration () {
    return html`<div class="demo">
        <h1>hello, world</h1>
        <a href="/hello">hello</a>
    </div>`
}

// call this function within the render process. It will look at
// `process.argv`, for an argument like `--test=foo.js`. If this
// was not called with a `--test=...` argument, then it does nothing.
addTest()

render(html`<${demonstration} />`, document.body)

example -- build script

This is the node script that will build the JS for your application. Notice the buildTest function required in the example.

This will build all the test files located in the directory passed in, here __dirname + '/test'. That way we can compile the application, then you can run any of the tests without needing to re-compile. Also, make sure the test filenames do not conflict with the application code filenames.

const buildTests = require('@socketsupply/ssc-test/dist/build-tests')
// or with esm:
// import buildTests from('@socketsupply/ssc-test/build-tests)
const esbuild = require('esbuild')

async function main () {
  // render process
  await esbuild.build({
    entryPoints: ['src/render/index.js'],
    // ...
  })

  // main process
  await esbuild.build({
    entryPoints: ['src/main/index.js'],
    // ...
  })

  // tests
  if (buildTests.isTest()) { // check if this was passed `--test`
    // takes the path to a directory with tests in it,
    // and the path to the output directory
    const testDir = __dirname + '/test'
    const outputDir = __dirname + '/public'
    await buildTests(testDir, outputDir)
  }
}

example -- tests

// @ts-check
'use strict'
const { test } = require('tapzero')
const dom = require('@socketsupply/test-dom')
const uuid = require('uuid').v4
const path = require('path-browserify')
const Harness = require('@socketsupply/ssc-test/')

test('setup', async t => {
    const harness = await Harness.create({ customBootstrap })
    t.ok(harness, 'should create harness')
})

test('find an element', async t => {
    const el = await dom.waitFor({
        selector: 'a'
    })

    t.ok(dom.isElementVisible(el), 'should find a visible link tag')
})

function customBootstrap (harness, system, env) {
    const _dialog = system.dialog.bind(system)
    const mocks = harness.mocks
    mocks.folder = uuid()

    // this way we can mock calls to the app menu
    system.dialog = function (args) {
        if (args.title === 'Add Workspace Folder' && args.type === 'open') {
            const _path = path.join(env.home, 'ssc-test', mocks.folder)

            return system.send({
                api: 'fs',
                method: 'mkdirp',
                arguments: [_path]
            })
            .then(() => ([_path]))
        }

        // if we don't need to mock this call, return the standard dialog
        return _dialog(args)
    }
}

use with npm

Run tests as part of npm scripts. See the example directory. Run this command:

$ npm test -- --test=test.js .

See package.json in the example directory:

{
    "scripts": {
        "test": "node ./build.js --test && ssc compile -r --test"
    }
}