test: add manual test for the issue #110

webdiscus · Aug 12, 2024 · fbf7414 · fbf7414
1 parent 2cb4dca
commit fbf7414
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 0 deletions.
diff --git a/test/manual/watch-integrity-import-js/README.md b/test/manual/watch-integrity-import-js/README.md
@@ -0,0 +1,28 @@
+# Manual test for the issue [#110](https://github.com/webdiscus/html-bundler-webpack-plugin/issues/110)
+
+Cache issue with `integrity: true` and `output.filename = '[name].[contenthash].js'`
+in watch mode  after adding a new import statement to a JS file.
+
+
+Try to reproduce the issue:
+
+1. Start in serv mode:
+   `npm start`
+2. Open URL in browser: `http://localhost:8080/`
+3. Open `./src/main.js`
+4. Change the file:
+```diff
+import str from './module';
+
+// test in serv mode: add new import JS file
+- //import str2 from './module-new'; // <= uncomment
+- //console.log('>> main', { str2 }); // <= uncomment
++ import str2 from './module-new';
++ console.log('>> main', { str2 });
+
+console.log('>> main', { str });
+```
+
+Currently: This simple test works fine w/o errors.
+
+TODO: reproduce issue described in the issue #110.
diff --git a/test/manual/watch-integrity-import-js/package.json b/test/manual/watch-integrity-import-js/package.json
@@ -0,0 +1,11 @@
+{
+  "description": "IMPORTANT: don't install webpack here because the Webpack instance MUST be one, otherwise appear the error: The 'compilation' argument must be an instance of Compilation.",
+  "scripts": {
+    "start": "webpack serve --mode development",
+    "watch": "webpack watch --mode development",
+    "build": "webpack --mode=production --progress"
+  },
+  "devDependencies": {
+    "html-bundler-webpack-plugin": "file:../../.."
+  }
+}
diff --git a/test/manual/watch-integrity-import-js/src/index.html b/test/manual/watch-integrity-import-js/src/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>Home</title>
+    <script src="./main.js" defer="defer"></script>
+  </head>
+  <body>
+    <h1>Hello World!</h1>
+    <p>Change the content of an imported JS file.</p>
+  </body>
+</html>
diff --git a/test/manual/watch-integrity-import-js/src/main.js b/test/manual/watch-integrity-import-js/src/main.js
@@ -0,0 +1,7 @@
+import str from './module';
+
+// test in serv mode: add new import JS file
+// import str2 from './module-new'; // <= uncomment
+// console.log('>> main', { str2 }); // <= uncomment
+
+console.log('>> main', { str });
diff --git a/test/manual/watch-integrity-import-js/src/module-new.js b/test/manual/watch-integrity-import-js/src/module-new.js
@@ -0,0 +1 @@
+module.exports = 'New added module: 123';
diff --git a/test/manual/watch-integrity-import-js/src/module.js b/test/manual/watch-integrity-import-js/src/module.js
@@ -0,0 +1 @@
+module.exports = 'Test 123';
diff --git a/test/manual/watch-integrity-import-js/webpack.config.js b/test/manual/watch-integrity-import-js/webpack.config.js
@@ -0,0 +1,37 @@
+const path = require('path');
+const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');
+
+module.exports = {
+  mode: 'production', // 1. test in production mode
+  //mode: 'development', // 2. test in development mode
+  stats: 'minimal',
+
+  output: {
+    path: path.join(__dirname, 'dist/'),
+    filename: '[name].[contenthash].js',
+    crossOriginLoading: 'anonymous',
+  },
+
+  plugins: [
+    new HtmlBundlerPlugin({
+      entry: {
+        index: './src/index.html',
+      },
+      integrity: true, // test integrity in serv mode after adding new import JS in main.js
+      verbose: true,
+    }),
+  ],
+
+  // enable live reload
+  devServer: {
+    static: {
+      directory: path.join(__dirname, 'dist'),
+    },
+    watchFiles: {
+      paths: ['src/**/*.*'],
+      options: {
+        usePolling: true,
+      },
+    },
+  },
+};