fix(#431): Run example tests

Author: doug-wade

packages/cli/config/jest.config.js

@@ -1,15 +1,37 @@
+import fs from 'node:fs';
+import { findUp, findUpStop } from 'find-up';
+
+let rootDir;
+
+await findUp(directory => {
+    const candidatePath = `${directory}/node_modules/@tybalt/test-utils/dist/cjs/setup.js`;
+	if (fs.existsSync(candidatePath)) {
+        rootDir = directory;
+        return findUpStop;
+    } else {
+        return candidatePath;
+    }
+});
+
 export default {
     moduleFileExtensions: ['js', 'ts'],
     extensionsToTreatAsEsm: ['.ts'],
     transform: {
-        '^.+\\.ts$': [
+        '^.+\\.m?[tj]sx?$': [
             'ts-jest',
             {
-                useESM: true,
+                useESM: true
             },
         ],
+        '\\.(css|less|sass|scss)$': `${rootDir}/node_modules/@tybalt/cli/config/style-mock.js`
     },
     testEnvironment: 'jest-environment-jsdom',
-    setupFilesAfterEnv: [`@tybalt/test-utils/dist/cjs/setup.js`],
+    setupFilesAfterEnv: [
+        `${rootDir}/node_modules/@tybalt/test-utils/dist/cjs/setup.js`
+    ],
     rootDir: process.cwd(),
+    transformIgnorePatterns: [
+        '/node_modules/(?!(@tybalt)/)', 
+        `${rootDir}/packages/test-utils`,
+    ],
 };

packages/cli/config/style-mock.js

@@ -0,0 +1,5 @@
+export default {
+    process: function() {
+      return { code: "" };
+    }
+};

packages/cli/package.json

@@ -35,7 +35,9 @@
         "eslint": "^8.56.0",
         "find-up": "^7.0.0",
         "glob": "^10.3.10",
+        "identity-obj-proxy": "3.0.0",
         "import-meta-resolve": "^4.0.0",
+        "jest-css-modules-transform": "^4.4.2",
         "jest-environment-jsdom": "^29.7.0",
         "js-convert-case": "^4.2.0",
         "mkdirp": "^3.0.1",

packages/cli/src/commands/test.ts

@@ -13,6 +13,7 @@ export default ({ program }: CommandContext) => {
         .action(async (pattern: string) => {
             const __filename = url.fileURLToPath(import.meta.url);
             const __dirname = path.dirname(__filename);
+
             const filePath = path.resolve(`${__dirname}../../../config/jest.config.js`);
 
             const results = child_process.spawnSync(
@@ -21,12 +22,13 @@ export default ({ program }: CommandContext) => {
                 {},
             );
 
-            const stdErr = results.stderr.toString();
+            const stdErr = results.stderr?.toString();
 
-            console.log(results.stdout.toString());
+            console.log(results.stdout?.toString());
             if (stdErr) {
                 console.error(stdErr);
-                process.exit(1);
             }
+
+            process.exit(results.status || 0);
         });
 };

packages/cli/tsconfig.json

@@ -2,9 +2,9 @@
     "$schema": "https://json.schemastore.org/tsconfig",
     "compilerOptions": {
         "baseUrl": ".",
-        "lib": ["es2021", "dom"],
+        "lib": ["es2022", "dom"],
         "module": "nodenext",
-        "target": "es2021",
+        "target": "es2022",
         "outDir": "dist",
         "strict": true,
         "esModuleInterop": true,

packages/core/package.json

@@ -2,14 +2,22 @@
     "name": "@tybalt/core",
     "version": "0.1.4",
     "description": "A library for writing web components",
-    "module": "dist/mjs/index.js",
+    "module": "dist/mjs/index.mjs",
     "main": "dist/cjs/index.js",
+    "types": "dist/types/index.d.ts",
+    "exports": {
+        ".": {
+            "import": "./dist/mjs/index.mjs",
+            "require": "./dist/cjs/index.js",
+            "types": "./dist/types/index.d.ts"
+        }
+    },
     "scripts": {
         "build": "yarn run compile && yarn run generate-types",
         "ci-test": "jest --coverage",
         "clean": "rimraf dist/",
         "compile": "yarn run compile-esm && yarn run compile-commonjs",
-        "compile-esm": "esbuild src/index.ts --bundle --format=esm --outfile=dist/mjs/index.js",
+        "compile-esm": "esbuild src/index.ts --bundle --format=esm --platform=browser --target=es2022 --outfile=dist/mjs/index.mjs",
         "compile-commonjs": "esbuild src/index.ts --bundle --format=cjs --outfile=dist/cjs/index.js",
         "debug": "yarn node --inspect-brk $(yarn bin jest) --runInBand",
         "generate-types": "tsc && rsync -a dist/types/ dist/mjs/ && rsync -a dist/types/ dist/cjs/",

packages/core/src/index.ts

@@ -7,6 +7,7 @@ export { default as forceRerenderOnUpdate } from './api/force-rerender-on-update
 export { default as html } from './api/html';
 export { default as createContext } from './api/create-context';
 export { default as ContextEvent } from './api/context-event';
+export { default as render } from './api/render';
 
 /*
  * It seems that esbuild doesn't parse the dependency graph to determine a correct ordering of the modules, so we

packages/core/tsconfig.json

@@ -2,9 +2,9 @@
     "$schema": "https://json.schemastore.org/tsconfig",
     "compilerOptions": {
         "baseUrl": ".",
-        "lib": ["es2021", "dom"],
+        "lib": ["es2022", "dom"],
         "module": "node16",
-        "target": "es2021",
+        "target": "es2022",
         "outDir": "dist/types",
         "strict": true,
         "esModuleInterop": true,

packages/core/tst/integration/events.test.ts

@@ -13,7 +13,7 @@ describe('events', () => {
                 return html`<div><button @click="${listener}"></button></div>`;
             },
             setup(_, { emit }) {
-                const listener = (evt) => {
+                const listener = (evt: Event) => {
                     evt.stopPropagation();
 
                     emit(eventName);

packages/esbuild-plugin/tsconfig.json

@@ -2,9 +2,9 @@
     "$schema": "https://json.schemastore.org/tsconfig",
     "compilerOptions": {
         "baseUrl": ".",
-        "lib": ["es2021"],
+        "lib": ["es2022"],
         "module": "nodenext",
-        "target": "es2021",
+        "target": "es2022",
         "outDir": "dist/types",
         "strict": true,
         "esModuleInterop": true,

packages/eslint-plugin/src/index.ts

@@ -5,10 +5,10 @@ module.exports = {
     configs: {
         recommended: {
             parserOptions: {
-                ecmaVersion: 2021,
+                ecmaVersion: 2022,
             },
             plugins: ['@tybalt/eslint-plugin'],
-            env: { browser: true, es2021: true },
+            env: { browser: true, es2022: true },
             extends: ['eslint:recommended'],
             rules: {
                 '@tybalt/component-names-are-multi-word': 'error',
@@ -17,7 +17,7 @@ module.exports = {
         'ts-recommended': {
             plugins: ['@typescript-eslint', '@tybalt/eslint-plugin'],
             parser: '@typescript-eslint/parser',
-            env: { browser: true, es2021: true },
+            env: { browser: true, es2022: true },
             extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
             rules: {
                 '@tybalt/component-names-are-multi-word': 'error',

packages/eslint-plugin/tsconfig.json

@@ -1,6 +1,6 @@
 {
     "compilerOptions": {
-       "target": "es2021",
+       "target": "es2022",
        "module": "nodenext",
        "sourceMap": false,
        "outDir": "dist",

packages/example/jest.config.js

@@ -7,14 +7,14 @@
     "type": "module",
     "scripts": {
         "build": "tybalt build",
-        "ci-test": "echo 'TODO: run tybalt test --integration'",
-        "examples": "tybalt examples",
+        "clean": "rimraf dist/",
+        "ci-test": "yarn run test",
         "lint": "tybalt lint",
         "scaffold": "tybalt scaffold",
-        "test": "echo 'TODO: run tybalt test'",
+        "test": "tybalt test",
         "watch": "tybalt watch 'src/**/*.*'",
         "serve": "tybalt serve",
-        "prepare": "yarn run build && yarn run lint && yarn run test && yarn run examples"
+        "prepare": "yarn run build && yarn run lint && yarn run test"
     },
     "keywords": [],
     "author": "Douglas Wade <[email protected]>",
@@ -29,7 +29,7 @@
         "browser-sync": "^3.0.2",
         "esbuild": "^0.19.10",
         "esbuild-jest": "^0.5.0",
-        "jest-environment-jsdom": "^29.7.0"
+        "rimraf": "^5.0.5"
     },
     "bugs": {
         "url": "https://github.com/doug-wade/tybalt/issues?q=is%3Aissue+is%3Aopen+label%3Aexample"

packages/example/jest.setup.js

@@ -1,5 +1,6 @@
 import { mount } from '@tybalt/test-utils';
-import Button from './button.component';
+
+import Button from './button.component.ts';
 
 describe('button', () => {
     it('renders a button', async () => {

packages/example/package.json

@@ -22,7 +22,6 @@ export default defineComponent({
     },
     setup(_: PropsStateMap, ctx: SetupContext) {
         const clickHandler = () => {
-            console.log('got click!');
             ctx.emit('click');
         };
 

packages/example/src/Button/button.test.ts

@@ -1,5 +1,6 @@
 import { mount } from '@tybalt/test-utils';
-import CookieBanner from './cookie-banner.component';
+
+import CookieBanner from './cookie-banner.component.ts';
 
 const mountCookieBanner = async () => {
     const wrapper = await mount(CookieBanner);
@@ -16,14 +17,13 @@ describe('cookie banner', () => {
         expect(actual.attributes('href')).toBe('http://www.example.com');
     });
 
-    it.skip('emits a click event when the button is clicked', async () => {
+    it('emits a click event when the button is clicked', async () => {
         const wrapper = await mountCookieBanner();
 
-        const actual = wrapper.find('button');
+        const actual = wrapper.find('example-button');
         actual.trigger('click');
 
-        // TODO: Enable as part of #64
-        // expect(wrapper.emitted('click')).toHaveLength(1);
+        expect(wrapper.emitted('click')).toHaveLength(1);
     });
 
     it('has a primary button', async () => {

packages/example/src/CookieBanner/cookie-banner.component.ts

@@ -1,5 +1,6 @@
 import { mount } from '@tybalt/test-utils';
-import Link from './link.component';
+
+import Link from './link.component.ts';
 
 const href = 'http://www.example.com';
 const slot = '<div slot="content">mock slot value</div>';

packages/example/src/CookieBanner/cookie-banner.test.ts

@@ -1,9 +1,11 @@
 {
     "$schema": "https://json.schemastore.org/tsconfig",
     "compilerOptions": {
-        "lib": ["es2021", "dom"],
+        "allowJs": true,
+        "allowImportingTsExtensions": true,
+        "lib": ["es2022", "dom"],
         "module": "nodenext",
-        "target": "es2021",
+        "target": "es2022",
         "outDir": "dist",
         "strict": true,
         "esModuleInterop": true,

packages/example/src/Link/link.test.ts

@@ -1,9 +1,9 @@
 {
     "$schema": "https://json.schemastore.org/tsconfig",
     "compilerOptions": {
-        "lib": ["es2021", "dom"],
+        "lib": ["es2022", "dom"],
         "module": "nodenext",
-        "target": "es2021",
+        "target": "es2022",
         "outDir": "dist",
         "strict": true,
         "esModuleInterop": true,

packages/example/tsconfig.json

@@ -2,14 +2,22 @@
     "name": "@tybalt/reactive",
     "version": "0.1.4",
     "description": "A library for managing reactivity with proxies",
-    "module": "dist/mjs/index.js",
+    "module": "dist/mjs/index.mjs",
     "main": "dist/cjs/index.js",
+    "types": "dist/types/index.d.ts",
+    "exports": {
+        ".": {
+            "import": "./dist/mjs/index.mjs",
+            "require": "./dist/cjs/index.js",
+            "types": "./dist/types/index.d.ts"
+        }
+    },
     "scripts": {
         "build": "yarn run compile && yarn run generate-types",
         "ci-test": "jest --coverage",
         "clean": "rimraf dist/",
         "compile": "yarn run compile-esm && yarn run compile-commonjs",
-        "compile-esm": "esbuild src/index.ts --bundle --format=esm --outfile=dist/mjs/index.js",
+        "compile-esm": "esbuild src/index.ts --bundle --format=esm --platform=browser --target=es2022 --outfile=dist/mjs/index.mjs",
         "compile-commonjs": "esbuild src/index.ts --bundle --format=cjs --outfile=dist/cjs/index.js",
         "debug": "yarn node --inspect-brk $(yarn bin jest) --runInBand",
         "generate-types": "tsc && rsync -a dist/types/ dist/mjs/ && rsync -a dist/types/ dist/cjs/",

packages/parser/tsconfig.json

@@ -2,9 +2,9 @@
     "$schema": "https://json.schemastore.org/tsconfig",
     "compilerOptions": {
         "baseUrl": ".",
-        "lib": ["es2021", "dom"],
+        "lib": ["es2022", "dom"],
         "module": "node16",
-        "target": "es2021",
+        "target": "es2022",
         "outDir": "dist/types",
         "strict": true,
         "esModuleInterop": true,

packages/reactive/package.json

@@ -1,11 +1,10 @@
 {
     "$schema": "https://json.schemastore.org/tsconfig",
     "display": "Node 16",
-
     "compilerOptions": {
-        "lib": ["es2021"],
+        "lib": ["es2022"],
         "module": "nodenext",
-        "target": "es2021",
+        "target": "es2022",
         "experimentalDecorators": true,
         "strict": true,
         "esModuleInterop": true,

packages/reactive/tsconfig.json

@@ -6,7 +6,9 @@ module.exports = {
     },
     moduleNameMapper: {
         '#src/(.*)': '<rootDir>/src/$1',
+        // Force module uuid to resolve with the CJS entry point, because Jest does not support package.json.exports. See https://github.com/uuidjs/uuid/issues/451
+        "uuid": require.resolve('uuid'),
     },
     testEnvironment: 'jest-environment-jsdom',
-    setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+    setupFilesAfterEnv: ['<rootDir>/jest.setup.js']
 };