first commit

Author: ryansolid

.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    ["@babel/preset-env", { "targets": { "node": "current" } }],
+    "solid",
+    "@babel/preset-typescript"
+  ]
+}

.gitignore

@@ -0,0 +1 @@
+node_modules

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "trailingComma": "none",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": false,
+  "arrowParens": "avoid",
+  "printWidth": 100
+}

README.md

@@ -0,0 +1,47 @@
+<div align="center">
+<h1>Solid Testing Library</h1>
+
+<p>Simple and complete Solid DOM testing utilities that encourage good testing
+practices.</p>
+
+> Inspired completely by [preact-testing-library][preact-testing-library]
+
+</div>
+
+<hr />
+
+## Table of Contents
+
+- [The Problem](#the-problem)
+- [The Solution](#the-solution)
+- [Installation](#installation)
+- [Docs](#docs)
+
+## The Problem
+
+You want to write tests for your Solid components so that they avoid including implementation
+details, and are maintainable in the long run.
+
+## The Solution
+
+The Solid Testing Library is a very lightweight solution for testing Solid components. Its primary guiding principle is:
+
+> [The more your tests resemble the way your software is used, the more confidence they can give you.](https://twitter.com/kentcdodds/status/977018512689455106)
+
+## Installation
+
+This module is distributed via npm which is bundled with node and should be installed
+as one of your project's `devDependencies`:
+
+```
+npm install --save-dev solid-testing-library
+```
+
+💡 You may also be interested in installing `@testing-library/jest-dom` so you can use
+[the custom jest matchers](https://github.com/testing-library/jest-dom).
+
+## Docs
+
+TODO
+<!-- See the [docs](https://testing-library.com/docs/preact-testing-library/intro) over at the Testing
+Library website. -->

dist/index.d.ts

@@ -0,0 +1,20 @@
+import { Queries, BoundFunction } from "@testing-library/dom";
+import { JSX } from "solid-js";
+import type { OptionsReceived } from "pretty-format";
+declare function render(ui: () => JSX.Element, { container, baseElement, queries, hydrate }?: {
+    container?: HTMLElement;
+    baseElement?: HTMLElement;
+    queries?: Queries;
+    hydrate?: boolean;
+}): {
+    container: HTMLElement;
+    baseElement: HTMLElement;
+    debug: (baseElement?: HTMLElement | HTMLElement[], maxLength?: number, options?: OptionsReceived) => void;
+    unmount: () => void;
+    asFragment: () => DocumentFragment;
+} & {
+    [P in keyof Queries]: BoundFunction<Queries[P]>;
+};
+declare function cleanup(): void;
+export * from "@testing-library/dom";
+export { render, cleanup };

dist/index.js

@@ -0,0 +1,66 @@
+import { getQueriesForElement, prettyDOM } from "@testing-library/dom";
+import { hydrate as solidHydrate, render as solidRender } from "solid-js/web";
+if (!process.env.STL_SKIP_AUTO_CLEANUP) {
+    if (typeof afterEach === 'function') {
+        afterEach(async () => {
+            await cleanup();
+        });
+        // @ts-ignore
+    }
+    else if (typeof teardown === 'function') {
+        // @ts-ignore
+        teardown(async () => {
+            await cleanup();
+        });
+    }
+}
+const mountedContainers = new Set();
+function render(ui, { container, baseElement = container, queries, hydrate = false } = {}) {
+    if (!baseElement) {
+        // Default to document.body instead of documentElement to avoid output of potentially-large
+        // head elements (such as JSS style blocks) in debug output.
+        baseElement = document.body;
+    }
+    if (!container) {
+        container = baseElement.appendChild(document.createElement("div"));
+    }
+    const dispose = hydrate
+        ? solidHydrate(ui, container)
+        : solidRender(ui, container);
+    // We'll add it to the mounted containers regardless of whether it's actually
+    // added to document.body so the cleanup method works regardless of whether
+    // they're passing us a custom container or not.
+    mountedContainers.add({ container, dispose });
+    return {
+        container,
+        baseElement,
+        debug: (el = baseElement, maxLength, options) => Array.isArray(el)
+            ? el.forEach(e => console.log(prettyDOM(e, maxLength, options)))
+            : console.log(prettyDOM(el, maxLength, options)),
+        unmount: dispose,
+        asFragment: () => {
+            if (typeof document.createRange === "function") {
+                return document.createRange().createContextualFragment(container.innerHTML);
+            }
+            else {
+                const template = document.createElement("template");
+                template.innerHTML = container.innerHTML;
+                return template.content;
+            }
+        },
+        ...getQueriesForElement(baseElement, queries)
+    };
+}
+function cleanupAtContainer(ref) {
+    const { container, dispose } = ref;
+    dispose();
+    if (container.parentNode === document.body) {
+        document.body.removeChild(container);
+    }
+    mountedContainers.delete(ref);
+}
+function cleanup() {
+    mountedContainers.forEach(cleanupAtContainer);
+}
+export * from "@testing-library/dom";
+export { render, cleanup };