Chrome extension to generate tests for solidjs.

Overview

Solid Test Recorder

Automated Chrome extension to generate unit/integration tests for solidjs

Features

  • Generates UI tests which relay on vitest and msw which follow solidjs guidelines.
  • Uses a combination of devtools element inspector and console which gives great recording control e.g. terminal-like auto-completion.
  • Auto-generates the most specific selector for inspected element.
  • Records network requests and generates mocks and their spies.

Motivation

Writing UI tests is boring yet extremely important. This extension is meant to make it more fun and attract developers to write more tests.

Installation

First, you need to build it.

You can use Docker:

$ docker-compose up
$ docker exec -it docker solid_test_recorder yarn build

or run these on you machine:

$ yarn install
$ yarn build

Then, upload /dist directory as an unpacked extension. See this link.

Usage

As soon as you open devtools, in Console, you'll get access to $str (Solid Test Recorder) global var. You can execute $str.help for available commands.

The usual flow would be:

$str.clear // to start new test file
$str.describe = 'my component'
$str.it = 'should do something'
$str.expect.to* // use element inspector to choose the element in question

You'll be also often capturing events e.g.:

$str.capture.click // or any available DOM event
// click at the button in the browser
$str.stopCapturing
// and then again...
$str.expect.to*

To see the results which will open as 2 vertical editors:

$str.seeResult // to close $str.closeEditor

In the first one you'll see your test file, and the second is API mock data generated from the actual network requests.

In order to use the test, your setupVitest.ts in the root directory should look like this and you should have a ./test/mocked-requests.json file.

There are more interesting commands. I'll be recording video tutorials soon so bear with me!

Roadmap

  1. Produce short video tutorials as documentation.
  2. Convert it to TypeScript.
  3. Write e2e tests (how ironic?).
  4. Store tests in files which can be then uploaded (and sort of replayed).

Visit solidjs discord channel where I'll be posting updates. Don't hesitate to DM for any questions related to the project.

Contributing

The codebase needs to be converted to TypeScript before it can be workable by a team. Also, I have an idea how to e2e test it, and this would also need to happen before any major logic changes. Anyway, feel free to create issues and PRs, just want to highlight the priorities.

License

MIT

You might also like...

A modern solidjs based UI library ~ it is very lightweight!

🚧 目前正在开发中,敬请期待~ cerises-ui 一个现代的基于 solidjs 的 UI 库~它是非常轻量级的! 官网:https://cerises-ui.edoc.wiki 目前计划组件 组件 说明 认领人 进度 Review & Unit Test Button、ButtonGroup

Jul 19, 2022

Utility to track the boundaries of html-elements in SolidJS

solid-boundaries Helps you to track the size and position of html-elements in solid-js. What does it do? See it in action here, or see it on CodeSandb

Sep 7, 2022

A SolidJS template built with Hope-UI

solid-hope-admin 名称 简介 solid JavaScript框架 hope-ui UI组件库 solid-app-router 路由 vite-plugin-pages 自动生成文件路由 query-string 解析URL地址 steeze-ui/solid-icon 图标 功能

Sep 18, 2022

A library of high-quality primitives that help you build accessible user interfaces with SolidJS.

Solid Aria A library of high-quality primitives that help you build accessible user interfaces with SolidJS. Primitives @solid-aria/primitives - Expor

Sep 20, 2022

A SolidJS starter template with solid-labels, solid-sfc and solid-styled

solid-sfc-styled-labels-starter This is a SolidJS starter template for easily setting up solid-sfc, solid-styled and solid-labels. Development Install

Mar 25, 2022

Cache Solidjs resources by key (derived from the resource source)

Solid Cached Resource (Experimental) Create a solid resource attached to a cached state by a unique key. Heavily inspired by react-query, but for soli

Sep 3, 2022

Template for building SolidJS web application with Tailwind CSS faster!

Template for building SolidJS web application with Tailwind CSS faster!

Hardtail Template for building SolidJS web application with Tailwind CSS faster! Setup First you could clone or fork this project or repository to you

Sep 18, 2022

A lightweight SolidJS component for building interactive node-based diagrams and graphs.

Convert Your Ideas To Graphs With Solid Graph! Solid Graph A lightweight and minimal Solid component for building interactive graphs and node-based ed

Sep 17, 2022

A lightweight SolidJS component for building interactive node-based diagrams and graphs.

Convert Your Ideas To A Simple And Excitig Journay With Odysea! Odysea A lightweight and minimal Solid component for building interactive graphs and n

Aug 15, 2022
Owner
Chris Czopp
Chris Czopp
SAP Community Code Challenge: This repository contains an empty OpenUI5 application and end-to-end tests written with wdi5. Take part in the challenge and develop an app that passes the tests.

SAP Community Code Challenge - UI5 The change log describes notable changes in this package. Description This repository is the starting point for the

SAP Samples 8 Aug 2, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 13 Jul 1, 2022
Export Cypress Tests from Google Chrome DevTools' Recorder

@cypress/chrome-recorder This repo provides tools to export Cypress Tests from Google Chrome DevTools' Recordings Installation $ npm install -g @cypre

Cypress.io 140 Sep 21, 2022
VSCode extension with helpful code snippets for SolidJS.

Solid Snippets VSCode extension with helpful code snippets for SolidJS. GET THE EXTENSION Snippets Trigger Content Languages JSX sinput→ Input two-way

SolidJS Community 8 Aug 29, 2022
Eth-explorers-extension - Chrome extension to open Ethereum addresses & transaction hash from any page on popular explorers + dashboards

eth-explorers-extension(s) This repository contains two folders with two extensions that work for address and transactions respectively. 1. eth-addres

Apoorv Lathey 59 Aug 20, 2022
Unstyled, dev error overlays for SolidJS

solid-error-overlay Unstyled, headless Error Overlay for SolidJS Install npm i solid-error-overlay yarn add solid-error-overlay pnpm add solid-error-o

Alexis H. Munsayac 14 Jul 19, 2022
A form management library for SolidJS that is very lightweight and simple!

solform A form management library for SolidJS that is very lightweight and simple! Why solform Very easy, fast, lightweight and powerful! It has built

Okan YILDIRIM 16 Aug 4, 2022
Solidex is a list of SolidJS ecosystem resources and packages.

Solidex The following is a list of articles, packages and other resources that focus on the SolidJS ecosystem. Solidex is a platform for listing and m

Solid 5 Aug 7, 2022