Use webpack-dev-server for test app

lukehorvat · lukehorvat · commit e91e7b5fa0ba · 2024-03-03T19:40:34.000+01:00
diff --git a/README.md b/README.md
@@ -9,7 +9,7 @@ Uses [Window.getComputedStyle](https://developer.mozilla.org/en-US/docs/Web/API/
 Install the package via npm:
 
 ```sh
-$ npm install computed-style-to-inline-style
+npm install computed-style-to-inline-style
 ```
 
 Or download it from the unpkg CDN:
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,16 +12,16 @@
   ],
   "scripts": {
     "build": "webpack --mode production",
-    "test": "electron test/main.js",
-    "pretest": "npm run build"
+    "test": "webpack serve --mode development --config ./test/webpack.config.js"
   },
   "dependencies": {},
   "devDependencies": {
-    "electron": "^26.1.0",
+    "html-webpack-plugin": "^5.5.0",
     "ts-loader": "^9.4.1",
     "typescript": "^5.1.6",
     "webpack": "^5.75.0",
-    "webpack-cli": "^4.10.0"
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.11.1"
   },
   "keywords": [
     "css",
diff --git a/test/index.html b/test/index.html
@@ -1,11 +1,9 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta
-      http-equiv="Content-Security-Policy"
-      content="script-src 'unsafe-inline'; style-src 'unsafe-inline';"
-    />
+    <title>computed-style-to-inline-style</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <style>
       html,
       body {
@@ -26,20 +24,5 @@
       }
     </style>
   </head>
-  <body>
-    <h1 style="color: #aaa">Hello, <span>World!</span></h1>
-    <button type="button">Test</button>
-    <script>
-      document.querySelector('button').addEventListener(
-        'click',
-        () => {
-          window.computedStyleToInlineStyle(document.querySelector('h1'), {
-            recursive: true,
-            properties: ['font-size', 'text-decoration'],
-          });
-        },
-        false
-      );
-    </script>
-  </body>
+  <body></body>
 </html>
diff --git a/test/index.ts b/test/index.ts
@@ -0,0 +1,26 @@
+import computedStyleToInlineStyle from '../lib';
+
+const h1 = document.createElement('h1');
+h1.style.color = '#aaa';
+document.body.appendChild(h1);
+
+const textStart = document.createTextNode('Hello, ');
+h1.appendChild(textStart);
+
+const span = document.createElement('span');
+span.textContent = 'World';
+h1.appendChild(span);
+
+const textEnd = document.createTextNode('!');
+h1.appendChild(textEnd);
+
+const button = document.createElement('button');
+button.type = 'button';
+button.textContent = 'Test';
+button.addEventListener('click', () => {
+  computedStyleToInlineStyle(h1, {
+    recursive: true,
+    properties: ['font-size', 'text-decoration'],
+  });
+});
+document.body.appendChild(button);
diff --git a/test/main.js b/test/main.js
diff --git a/test/preload.js b/test/preload.js
diff --git a/test/tsconfig.json b/test/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "declaration": false
+  }
+}
diff --git a/test/webpack.config.js b/test/webpack.config.js
@@ -0,0 +1,36 @@
+const path = require('path');
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+/** @type { webpack.Configuration } */
+module.exports = {
+  devServer: {
+    port: 9000,
+    open: true,
+    hot: false,
+    client: {
+      logging: 'warn',
+    },
+  },
+  entry: path.join(__dirname, 'index.ts'),
+  resolve: {
+    extensions: ['.ts', '...'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        loader: 'ts-loader',
+        exclude: /node_modules/,
+        options: {
+          onlyCompileBundledFiles: true,
+        },
+      },
+    ],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: path.join(__dirname, 'index.html'),
+    }),
+  ],
+};
diff --git a/tsconfig.json b/tsconfig.json
@@ -7,6 +7,5 @@
     "noEmitOnError": true,
     "declaration": true
   },
-  "include": ["lib"],
-  "exclude": ["node_modules"]
+  "include": ["lib"]
 }

Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,5 @@`
`7`	`7`	`"noEmitOnError": true,`
`8`	`8`	`"declaration": true`
`9`	`9`	`},`
`10`		`- "include": ["lib"],`
`11`		`- "exclude": ["node_modules"]`
	`10`	`+ "include": ["lib"]`
`12`	`11`	`}`