test: Add some simple TS tests to catch regressions (#112)

Author: rschristian

package-lock.json

@@ -11,7 +11,9 @@
 		"prepare": "npx simple-git-hooks",
 		"build": "microbundle -f cjs,es,umd --no-generateTypes",
 		"lint": "eslint src/*.{js,jsx}",
-		"test": "wtr src/*.test.{js,jsx}",
+		"test": "npm run test:types & npm run test:browser",
+		"test:browser": "wtr test/*.test.{js,jsx}",
+		"test:types": "tsc -p test/",
 		"prettier": "prettier **/*.{js,jsx} --write",
 		"prepublishOnly": "npm run build && npm run lint && npm run test"
 	},
@@ -22,6 +24,7 @@
 				"version": "16.8"
 			}
 		},
+		"ignorePatterns": ["*.ts", "*.tsx"],
 		"rules": {
 			"brace-style": "off",
 			"jest/expect-expect": "off",
@@ -75,7 +78,8 @@
 		"nano-staged": "^0.8.0",
 		"preact": "^10.27.1",
 		"prettier": "^2.1.1",
-		"simple-git-hooks": "^2.13.1"
+		"simple-git-hooks": "^2.13.1",
+		"typescript": "^5.9.2"
 	},
 	"simple-git-hooks": {
 		"pre-commit": "npx nano-staged"

package.json

@@ -2,7 +2,7 @@ import { assert } from '@open-wc/testing';
 import { h, createContext, Component, Fragment } from 'preact';
 import { useContext } from 'preact/hooks';
 import { act } from 'preact/test-utils';
-import registerElement from './index';
+import registerElement from '../src/index';
 
 /** @param {string} name */
 function createTestElement(name) {

src/index.test.jsx renamed to test/index.test.jsx

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "noEmit": true,
+    "skipLibCheck": true,
+    "jsx": "react",
+    "jsxFactory": "h",
+    "jsxFragmentFactory": "Fragment",
+  },
+	"include": ["./types.test.tsx"],
+}

test/tsconfig.json

@@ -0,0 +1,21 @@
+import { h } from 'preact';
+import registerElement from '../src/index';
+
+interface AppProps {
+	name: string;
+}
+
+function App(props: AppProps) {
+	return <h1>Hello {props.name}!</h1>;
+}
+
+registerElement(App, 'my-app', ['name']);
+
+// @ts-expect-error `bar` is not a valid prop, so it should not be an observed attribute
+registerElement(App, 'my-app', ['name', 'bar']);
+
+registerElement(App, 'my-app-shadow', ['name'], {
+	shadow: false,
+	// @ts-expect-error should not set shadow DOM mode when `shadow` is false
+	mode: 'open',
+});