Merge pull request #22 from solidjs/container-queries

bind queries to container, testing type fixes

Author: atk

package.json

@@ -14,6 +14,7 @@
   },
   "license": "MIT",
   "author": "Ryan Carniato",
+  "maintainers": ["Alex Lohr"],
   "homepage": "https://github.com/solidjs/solid-testing-library#readme",
   "repository": {
     "type": "git",
@@ -43,11 +44,12 @@
   "scripts": {
     "prepublishOnly": "npm run build",
     "build": "tsup src/index.ts --format esm,cjs --dts --clean",
+    "typecheck": "tsc --noEmit; tsc --noEmit --project src/__tests__/tsconfig.json",
     "test": "vitest",
     "test:watch": "npm test --watch",
     "test:coverage": "npm test -- --coverage",
     "setup": "npm install && npm run validate",
-    "validate": "npm run test:coverage && npm run build",
+    "validate": "npm run typecheck && npm run test:coverage && npm run build",
     "report:coverage": "cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js && rm -rf ./coverage"
   },
   "dependencies": {

src/__tests__/basic.tsx

@@ -63,3 +63,11 @@ test("calls to hydrate will run createEffects", () => {
 
   expect(cb).toHaveBeenCalledTimes(1);
 });
+
+test("queries should not return elements outside of the container", () => {
+  const { container, getAllByText } = render(() => <div>Some text...</div>);
+  const falseContainer = document.createElement("p");
+  falseContainer.textContent = "Some text...";
+  container.parentNode!.insertBefore(falseContainer, getAllByText("Some text...")[0].parentNode);
+  expect(getAllByText("Some text...")[0] === container.childNodes[0]).toBe(true);
+});

src/__tests__/events.tsx

@@ -1,6 +1,7 @@
 import { Dynamic } from "solid-js/web";
 import { render, fireEvent } from "..";
 import userEvent from "@testing-library/user-event";
+import type { Mock } from "vitest";
 
 const eventTypes = [
   {
@@ -129,7 +130,7 @@ const eventTypes = [
   }
 ];
 
-function event(el: HTMLElement, name: string, spy: vi.Mock) {
+function event(el: HTMLElement, name: string, spy: Mock) {
   el.addEventListener(name, spy);
 }
 

src/__tests__/stopwatch.tsx

@@ -5,7 +5,7 @@ import { screen, render } from "..";
 function StopWatch() {
   const [lapse, setLapse] = createSignal(0);
   const [running, setRunning] = createSignal(false);
-  let timer: number;
+  let timer: ReturnType<typeof setInterval>;
 
   const handleRunClick = () => {
     if (running()) {

src/__tests__/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "types": ["vitest/globals", "@testing-library/jest-dom"]
+  },
+  "include": ["./*.tsx"]
+}

src/index.ts

@@ -45,7 +45,7 @@ function render(ui: Ui, options: Options = {}): Result {
   // they're passing us a custom container or not.
   mountedContainers.add({ container, dispose });
 
-  const queryHelpers = getQueriesForElement(baseElement, queries)
+  const queryHelpers = getQueriesForElement(container, queries)
 
   return {
     container,

tsconfig.json

@@ -13,5 +13,5 @@
     "outDir": "./dist",
     "module": "commonjs"
   },
-  "include": ["src"],
+  "include": ["src/index.ts", "src/types.ts"],
 }