Merge pull request #1 from amoutonbrady/main

Cleanups, better build pipeline and publish as common js

Author: Ryan Carniato

package-lock.json

@@ -35,7 +35,7 @@
   "scripts": {
     "prepublishOnly": "npm run build",
     "clean": "rimraf dist",
-    "build": "tsc",
+    "build": "tsc --project tsconfig.build.json",
     "test": "jest tests",
     "test:watch": "npm test --watch",
     "test:coverage": "npm test -- --coverage",
@@ -51,15 +51,16 @@
     "@babel/core": "^7.12.16",
     "@babel/preset-env": "^7.12.16",
     "@babel/preset-typescript": "7.12.16",
-    "@testing-library/jest-dom": "^5.10.1",
-    "@types/jest": "^26.0.0",
+    "@testing-library/jest-dom": "^5.11.9",
+    "@types/jest": "^26.0.20",
     "babel-jest": "^26.6.3",
     "babel-preset-solid": "^0.24.2",
     "coveralls": "^3.1.0",
-    "jest": "^26.0.1",
+    "jest": "^26.6.3",
+    "prettier": "^2.2.1",
+    "pretty-format": "^26.6.2",
+    "rimraf": "^3.0.2",
     "solid-js": "^0.24.7",
-    "prettier": "^2.0.5",
-    "rimraf": "^3.0.0",
     "typescript": "^4.1.5"
   },
   "peerDependencies": {

package.json

@@ -1,12 +1,12 @@
-import { render } from '..'
+import { render } from "..";
 
 // This just verifies that by importing STL in an
 // environment which supports afterEach (like jest)
 // we'll get automatic cleanup between tests.
-test('first', () => {
-  render(() => <div>hi</div>)
-})
+test("first", () => {
+  render(() => <div>hi</div>);
+});
 
-test('second', () => {
-  expect(document.body.innerHTML).toEqual('')
-})
+test("second", () => {
+  expect(document.body.innerHTML).toEqual("");
+});

src/__tests__/auto-cleanup.tsx

@@ -2,7 +2,11 @@ import "@testing-library/jest-dom/extend-expect";
 import { createSignal, createEffect } from "solid-js";
 import { fireEvent, render } from "..";
 
-(globalThis as any)._$HYDRATION = {};
+declare global {
+  var _$HYDRATION: Record<string, any>;
+}
+
+globalThis._$HYDRATION = {};
 
 test("render calls createEffect immediately", () => {
   const cb = jest.fn();

src/__tests__/basic.tsx

@@ -1,26 +1,26 @@
-import '@testing-library/jest-dom/extend-expect'
-import { onCleanup } from 'solid-js'
-import { cleanup, render } from '..'
+import "@testing-library/jest-dom/extend-expect";
+import { onCleanup } from "solid-js";
+import { cleanup, render } from "..";
 
-test('cleans up the document', () => {
-  const spy = jest.fn()
-  const divId = 'my-div'
+test("cleans up the document", () => {
+  const spy = jest.fn();
+  const divId = "my-div";
 
   function Test() {
     onCleanup(() => {
-      expect(document.getElementById(divId)).toBeInTheDocument()
-      spy()
-    })
-    return (<div id={divId} />)
+      expect(document.getElementById(divId)).toBeInTheDocument();
+      spy();
+    });
+    return <div id={divId} />;
   }
 
-  render(() => <Test />)
-  cleanup()
-  expect(document.body.innerHTML).toBe('')
-  expect(spy).toHaveBeenCalledTimes(1)
-})
+  render(() => <Test />);
+  cleanup();
+  expect(document.body.innerHTML).toBe("");
+  expect(spy).toHaveBeenCalledTimes(1);
+});
 
-test('cleanup does not error when an element is not a child', () => {
-  render(() => <div />, { container: document.createElement('div') })
-  cleanup()
-})
+test("cleanup does not error when an element is not a child", () => {
+  render(() => <div />, { container: document.createElement("div") });
+  cleanup();
+});

src/__tests__/cleanup.tsx

@@ -1,53 +1,51 @@
-import '@testing-library/jest-dom/extend-expect'
-import { screen, render } from '..'
+import "@testing-library/jest-dom/extend-expect";
+import { screen, render } from "..";
 
 beforeEach(() => {
-  jest.spyOn(console, 'log').mockImplementation(() => {})
-})
+  jest.spyOn(console, "log").mockImplementation(() => {});
+});
 
 afterEach(() => {
   // @ts-ignore
-  console.log.mockRestore()
-})
+  console.log.mockRestore();
+});
 
-test('debug pretty prints the container', () => {
-  const HelloWorld = () => (<h1>Hello World</h1>)
+test("debug pretty prints the container", () => {
+  const HelloWorld = () => <h1>Hello World</h1>;
 
-  const { debug } = render(() => <HelloWorld />)
+  const { debug } = render(() => <HelloWorld />);
 
-  debug()
+  debug();
 
-  expect(console.log).toHaveBeenCalledTimes(1)
-  expect(console.log).toHaveBeenCalledWith(expect.stringContaining('Hello World'))
-})
+  expect(console.log).toHaveBeenCalledTimes(1);
+  expect(console.log).toHaveBeenCalledWith(expect.stringContaining("Hello World"));
+});
 
-test('debug pretty prints multiple containers', () => {
+test("debug pretty prints multiple containers", () => {
   const HelloWorld = () => (
     <>
       <h1 data-testid="testId">Hello World</h1>
       <h1 data-testid="testId">Hello World</h1>
     </>
-  )
-
-  const { debug } = render(() => <HelloWorld />)
-  const multipleElements = screen.getAllByTestId('testId')
-  debug(multipleElements)
-  expect(console.log).toHaveBeenCalledTimes(2)
-  expect(console.log).toHaveBeenCalledWith(
-    expect.stringContaining('Hello World')
-  )
-})
-
-test('allows same arguments as prettyDOM', () => {
-  const HelloWorld = () => <h1>Hello World</h1>
-  const { debug, container } = render(() => <HelloWorld />)
-  debug(container, 6, { highlight: false })
-  expect(console.log).toHaveBeenCalledTimes(1)
+  );
+
+  const { debug } = render(() => <HelloWorld />);
+  const multipleElements = screen.getAllByTestId("testId");
+  debug(multipleElements);
+  expect(console.log).toHaveBeenCalledTimes(2);
+  expect(console.log).toHaveBeenCalledWith(expect.stringContaining("Hello World"));
+});
+
+test("allows same arguments as prettyDOM", () => {
+  const HelloWorld = () => <h1>Hello World</h1>;
+  const { debug, container } = render(() => <HelloWorld />);
+  debug(container, 6, { highlight: false });
+  expect(console.log).toHaveBeenCalledTimes(1);
   // @ts-ignore
   expect(console.log.mock.calls[0]).toMatchInlineSnapshot(`
     Array [
       "<div>
     ...",
     ]
-  `)
-})
+  `);
+});

src/__tests__/debug.tsx

@@ -14,10 +14,10 @@ const fetchAMessage = () =>
   });
 
 function ComponentWithLoader() {
-  const [data] = createResource<{ returnedMessage: string }, string>("data", fetchAMessage);
+  const [data] = createResource("data", fetchAMessage);
   return (
     <Show when={!data.loading} fallback={<div>Loading...</div>}>
-      <div data-testid="message">Loaded this message: {data().returnedMessage}!</div>
+      <div data-testid="message">Loaded this message: {data()!.returnedMessage}!</div>
     </Show>
   );
 }

src/__tests__/end-to-end.tsx

@@ -139,6 +139,7 @@ eventTypes.forEach(({ type, events, elementType, init }) => {
 
         render(() => <Dynamic component={elementType} ref={ref} on={{ [eventProp]: spy }} />);
 
+        // @ts-ignore
         fireEvent[eventName](ref, init);
 
         expect(spy).toHaveBeenCalledTimes(1);
@@ -154,7 +155,7 @@ test("onInput works", () => {
     container: { firstChild: input }
   } = render(() => <input type="text" onInput={handler} />);
 
-  fireEvent.input(input, { target: { value: "a" } });
+  fireEvent.input(input!, { target: { value: "a" } });
 
   expect(handler).toHaveBeenCalledTimes(1);
 });
@@ -167,7 +168,7 @@ test("calling `fireEvent` directly works too", () => {
   } = render(() => <button onClick={handleEvent} />);
 
   fireEvent(
-    button,
+    button!,
     new Event("MouseEvent", {
       bubbles: true,
       cancelable: true,

src/__tests__/events.tsx

@@ -1,8 +1,8 @@
 import { render } from "..";
 
 // These are created once per test suite and reused for each case
-let treeA;
-let treeB;
+let treeA: HTMLDivElement;
+let treeB: HTMLDivElement;
 
 beforeAll(() => {
   treeA = document.createElement("div");
@@ -12,8 +12,8 @@ beforeAll(() => {
 });
 
 afterAll(() => {
-  treeA.parentNode.removeChild(treeA);
-  treeB.parentNode.removeChild(treeB);
+  treeA.parentNode!.removeChild(treeA);
+  treeB.parentNode!.removeChild(treeB);
 });
 
 test("baseElement isolates trees from one another", () => {

src/__tests__/multi-base.tsx

@@ -33,7 +33,7 @@ function StopWatch() {
   );
 }
 
-const wait = time => new Promise(resolve => setTimeout(resolve, time));
+const wait = (time: number) => new Promise(resolve => setTimeout(resolve, time));
 
 test("unmounts a component", async () => {
   jest.spyOn(console, "error").mockImplementation(() => {});
@@ -51,5 +51,5 @@ test("unmounts a component", async () => {
 
   // Just wait to see if the interval is cleared or not.
   // If it's not, then we'll call setState on an unmounted component and get an error.
-  await wait(() => expect(console.error).not.toHaveBeenCalled());
+  await wait((() => expect(console.error).not.toHaveBeenCalled()) as any);
 });