Solid-UI Unit Testing

The purpose of this README is to provide guidance on how to write tests for solid-ui for beginners.

Although we would love to have 100% test coverage, we realize that this is not a commericial product. solid-ui is an open source, volunteer built library that houses UI components that can be used to build Solid applications. We are working to increase test coverage on existing code, and any help is much appreciated. If you add a new component to solid-ui, you should write tests to test the main functionality of your component before your PR will be merged.

Running Tests

All

The following command will run all the tests. npm run test

One file at a time

There are a lot of tests in solid-ui, so you will most likely want to run only the test you are working on at the moment. You can use commands like the following to do that: npm test <filetobetested> npm test test/unit/utils/keyHelpers/accessData.test.ts

Coverage

Run the following command: npm run test-coverage

The results will be found in coverage/lcov-report/index.html. If you are using VSCode, you can right click and select Open in Browser Preview. Alternatively, you can type the path in your browser; for instance, the following:

file:///Users/<yourhomedirectory>/2023Development/solid-ui/coverage/lcov-report/index.html

Tips and Tricks

The following are some tips and tricks to make your testing easier.

VSCode / Cursor debugging

Tests run with Vitest. Useful workflows:

Watch mode (re-runs on save) — from the package root:

npx vitest

Pass a file path to limit the run, for example npx vitest test/unit/widgets/forms/basic.test.ts.

Single run (CI-style) — same as npm run test:

npm test
npm test test/unit/utils/keyHelpers/accessData.test.ts

Editor integration — install the Vitest extension. It adds a testing sidebar, run/debug icons beside each test, and supports breakpoints in test and source files without extra configuration (Vitest picks up vite.config.ts).

Node inspector — for stepping in the terminal:

npm run test-debug

Then attach your editor’s JavaScript debugger, or open chrome://inspect if you use the Chrome/Edge protocol.

Mocking

In solid-ui, we do not currently follow a MVC pattern, so testing is not always easy. The following are patterns to help with this.

Store methods

Load

In SolidOS, we use rdflib.js to work with LinkedData. First, you load the document you need to work with into the store. Once the document is loaded, you can access the data by using additional methods on the store such as any, each, etc.

Vitest setup (test/helpers/setup.ts) stubs store.fetcher.load by default so unit tests do not hit the network when triples are already in the store. You normally do not need to repeat that in each test file.

If a test must perform a real load (for example with nock), call restoreFetcherLoad() before the load and stubFetcherLoad() in afterEach:

import { afterEach, beforeEach, describe } from 'vitest'
import { restoreFetcherLoad, stubFetcherLoad } from '../stubs/fetcher'
import nock from 'nock'

describe('my test', () => {
  beforeEach(() => {
    restoreFetcherLoad()
    nock.cleanAll()
    nock.disableNetConnect()
  })

  afterEach(() => {
    stubFetcherLoad()
    nock.cleanAll()
    nock.enableNetConnect()
  })

  // ...
});

Any

Each