test(manual): add async failure test

Author: cwalten

test/manual/index.html

@@ -42,6 +42,11 @@
     <p>Preloaded inlined CSS: Must be green.</p>
     <p><button class="preloaded-button2">Pressing this button</button> displays an alert and should turn red.</p>
   </div>
+  <div class="test lazy-failure-css">
+    <p>Lazy CSS: Turn off the network and <button class="lazy-failure-button">press this button</button>.</p>
+    <p>An error should have appeared.</p>
+    <p>Now if you turn the network back on and click it again, it should turn aqua.</p>
+  </div>
   <div class="errors"></div>
   <script async defer src="/dist/main.js"></script>
 </body>

test/manual/src/index.js

@@ -5,10 +5,12 @@ const handleError = (err) => {
   console.error(err);
 }
 
-const makeButton = (className, fn) => {
+const makeButton = (className, fn, shouldDisable = true) => {
   const button = document.querySelector(className);
   button.addEventListener("click", () => {
-    button.disabled = true;
+    if(shouldDisable) {
+      button.disabled = true;
+    }
     fn().then(() => {
       button.disabled = false;
     }).catch(handleError);
@@ -20,3 +22,5 @@ makeButton(".lazy-button2", () => import('./lazy2.css'));
 
 makeButton(".preloaded-button1", () => import(/* webpackChunkName: "preloaded1" */ './preloaded1'));
 makeButton(".preloaded-button2", () => import(/* webpackChunkName: "preloaded2" */ './preloaded2'));
+
+makeButton(".lazy-failure-button", () => import('./lazy-failure.js'), false);

test/manual/src/lazy-failure.css

@@ -0,0 +1,3 @@
+.lazy-failure-css {
+  background: aqua;
+}

test/manual/src/lazy-failure.js

@@ -0,0 +1 @@
+import './lazy-failure.css';