add infrastructure for manual in browser testing

webpack-contrib · Mar 26, 2018 · 7a98d7b · 7a98d7b
1 parent e86fa3b
commit 7a98d7b
Show file tree

Hide file tree

Showing 15 changed files with 1,863 additions and 70 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -2,3 +2,4 @@
 /dist
 /test/cases
 /test/js
+/test/manual
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "test": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "jest --collectCoverageFrom='src/**/*.js' --coverage",
+    "test:manual": "webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js",
     "travis:lint": "npm run lint && npm run security",
     "travis:test": "npm run test -- --runInBand",
     "travis:coverage": "npm run test:coverage -- --runInBand"
@@ -44,7 +45,9 @@
     "pre-commit": "^1.2.2",
     "standard-version": "^4.3.0",
     "webpack": "^4.1.0",
-    "webpack-defaults": "^1.6.0"
+    "webpack-cli": "^2.0.13",
+    "webpack-defaults": "^1.6.0",
+    "webpack-dev-server": "^3.1.1"
   },
   "files": [
     "dist"

diff --git a/test/manual/README.md b/test/manual/README.md
diff --git a/test/manual/index.html b/test/manual/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>mini-css-extract-plugin testcase</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" type="text/css" href="/dist/preloaded1.css" />
+  <style>
+    .test {
+      background: lightcoral;
+    }
+    .errors {
+      font-weight: bold;
+      color: darkred;
+    }
+    .preloaded-css1 {
+      background: lightgreen;
+    }
+  </style>
+  <style data-href="preloaded2.css">
+    .preloaded-css2 {
+      background: lightgreen;
+    }
+  </style>
+  <link rel="stylesheet" type="text/css" href="/dist/main.css" />
+</head>
+<body>
+  <div class="test initial-css">
+    Initial CSS: Must be green
+  </div>
+  <div class="test lazy-css">
+    <p>Lazy CSS: Must be red, but turn green when <button class="lazy-button">pressing this button</button>.</p>
+    <p>But turn orange, when <button class="lazy-button2">pressing this button</button>. Additional clicks have no effect.</p>
+    <p>Refresh and press buttons in reverse order: This should turn green instead.</p>
+  </div>
+  <div class="test preloaded-css1">
+    <p>Preloaded CSS: Must be green.</p>
+    <p><button class="preloaded-button1">Pressing this button</button> displays an alert but has no styling effect.</p>
+  </div>
+  <div class="test preloaded-css2">
+    <p>Preloaded inlined CSS: Must be green.</p>
+    <p><button class="preloaded-button2">Pressing this button</button> displays an alert but has no styling effect.</p>
+  </div>
+  <div class="errors"></div>
+  <script async defer src="/dist/main.js"></script>
+</body>
+</html>
diff --git a/test/manual/src/index.js b/test/manual/src/index.js
@@ -0,0 +1,22 @@
+import './initial.css';
+
+const handleError = (err) => {
+  document.querySelector(".errors").textContent += `\n${err.toString()}`;
+  console.error(err);
+}
+
+const makeButton = (className, fn) => {
+  const button = document.querySelector(className);
+  button.addEventListener("click", () => {
+    button.disabled = true;
+    fn().then(() => {
+      button.disabled = false;
+    }).catch(handleError);
+  });
+}
+
+makeButton(".lazy-button", () => import('./lazy.js'));
+makeButton(".lazy-button2", () => import('./lazy2.css'));
+
+makeButton(".preloaded-button1", () => import(/* webpackChunkName: "preloaded1" */ './preloaded1'));
+makeButton(".preloaded-button2", () => import(/* webpackChunkName: "preloaded2" */ './preloaded2'));
diff --git a/test/manual/src/initial.css b/test/manual/src/initial.css
@@ -0,0 +1,3 @@
+.initial-css {
+  background: lightgreen;
+}
diff --git a/test/manual/src/lazy.css b/test/manual/src/lazy.css
@@ -0,0 +1,3 @@
+.lazy-css {
+  background: lightgreen;
+}
diff --git a/test/manual/src/lazy.js b/test/manual/src/lazy.js
@@ -0,0 +1 @@
+import './lazy.css';
diff --git a/test/manual/src/lazy2.css b/test/manual/src/lazy2.css
@@ -0,0 +1,3 @@
+.lazy-css {
+  background: peru;
+}
diff --git a/test/manual/src/preloaded1.css b/test/manual/src/preloaded1.css
@@ -0,0 +1,3 @@
+.preloaded-css1 {
+  background: red;
+}
diff --git a/test/manual/src/preloaded1.js b/test/manual/src/preloaded1.js
@@ -0,0 +1,3 @@
+import './preloaded1.css';
+
+alert('Ok');
diff --git a/test/manual/src/preloaded2.css b/test/manual/src/preloaded2.css
@@ -0,0 +1,3 @@
+.preloaded-css2 {
+  background: red;
+}
diff --git a/test/manual/src/preloaded2.js b/test/manual/src/preloaded2.js
@@ -0,0 +1,3 @@
+import './preloaded2.css';
+
+alert('Ok');
diff --git a/test/manual/webpack.config.js b/test/manual/webpack.config.js
@@ -0,0 +1,27 @@
+const Self = require('../../');
+
+module.exports = {
+  mode: 'development',
+  output: {
+    publicPath: '/dist/',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          Self.loader,
+          'css-loader',
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new Self({
+      filename: '[name].css',
+    }),
+  ],
+  devServer: {
+    contentBase: __dirname,
+  },
+};