test: add the manual test for the issue #74

webdiscus · webdiscus · commit 7cb5f6497b6b · 2024-02-19T22:50:54.000+01:00
diff --git a/test/manual/watch-imported-css-inline/README.md b/test/manual/watch-imported-css-inline/README.md
@@ -0,0 +1,14 @@
+# Manual test
+
+The issue [Inclining imported css doesn't work in watch mode if a leaf component content is changed](https://github.com/webdiscus/html-bundler-webpack-plugin/issues/74).
+
+TODO: describe steps to reproduce the issue
+
+1. start development: `npm start`
+2. change `src/home.html` => ok
+3. change `src/style.css` => ok
+4. change `src/main.js` => ok
+5. change `src/component-a/style.css` => ok
+6. change `src/component-a/index.js` => ok
+7. change `src/component-b/style.css` => ok
+8. change `src/component-b/index.js` => ok
diff --git a/test/manual/watch-imported-css-inline/package.json b/test/manual/watch-imported-css-inline/package.json
@@ -0,0 +1,10 @@
+{
+  "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-imported-css-inline/src/components/a/index.js b/test/manual/watch-imported-css-inline/src/components/a/index.js
@@ -0,0 +1,9 @@
+// local style
+import './style.css';
+
+// node module component importing an own css file
+import '@test/import-css';
+
+console.log('>> component a');
+
+export default `<div class="component-a">Component A</div>`;
diff --git a/test/manual/watch-imported-css-inline/src/components/a/style.css b/test/manual/watch-imported-css-inline/src/components/a/style.css
@@ -0,0 +1,3 @@
+.component-a {
+  color: red;
+}
diff --git a/test/manual/watch-imported-css-inline/src/components/b/index.js b/test/manual/watch-imported-css-inline/src/components/b/index.js
@@ -0,0 +1,5 @@
+import './style.css';
+
+console.log('>> component b');
+
+export default `<div class="component-b">Component B</div>`;
diff --git a/test/manual/watch-imported-css-inline/src/components/b/style.css b/test/manual/watch-imported-css-inline/src/components/b/style.css
@@ -0,0 +1,3 @@
+.component-b {
+  color: blue;
+}
diff --git a/test/manual/watch-imported-css-inline/src/home.html b/test/manual/watch-imported-css-inline/src/home.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Home</title>
+  </head>
+  <body>
+    <h1>Hello World!</h1>
+    <div id="root"></div>
+    <div class="toolbar">Component Toolbar from node_modules</div>
+    <script src="./main.js"></script>
+  </body>
+</html>
diff --git a/test/manual/watch-imported-css-inline/src/main.js b/test/manual/watch-imported-css-inline/src/main.js
@@ -0,0 +1,8 @@
+import './style.css';
+
+import componentA from './components/a';
+import componentB from './components/b';
+
+document.getElementById('root').innerHTML = componentA + componentB;
+
+console.log('>> main');
diff --git a/test/manual/watch-imported-css-inline/src/style.css b/test/manual/watch-imported-css-inline/src/style.css
@@ -0,0 +1,3 @@
+h1 {
+  color: seagreen;
+}
diff --git a/test/manual/watch-imported-css-inline/webpack.config.js b/test/manual/watch-imported-css-inline/webpack.config.js
@@ -0,0 +1,46 @@
+const path = require('path');
+const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');
+
+module.exports = {
+  mode: 'production',
+  stats: 'minimal',
+
+  output: {
+    path: path.join(__dirname, 'dist/'),
+  },
+
+  plugins: [
+    new HtmlBundlerPlugin({
+      entry: {
+        index: './src/home.html',
+      },
+      js: {
+        inline: true,
+      },
+      css: {
+        inline: true,
+      },
+    }),
+  ],
+
+  module: {
+    rules: [
+      {
+        test: /\.(css)$/,
+        use: ['css-loader'],
+      },
+    ],
+  },
+
+  devServer: {
+    static: {
+      directory: path.join(__dirname, 'dist'),
+    },
+    watchFiles: {
+      paths: ['src/**/*.*'],
+      options: {
+        usePolling: true,
+      },
+    },
+  },
+};

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+.component-a {`
	`2`	`+ color: red;`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+.component-b {`
	`2`	`+ color: blue;`
	`3`	`+}`