refactor(client): overlay (#2003)

client-src/default/overlay.js

@@ -4,10 +4,9 @@
 // They, in turn, got inspired by webpack-hot-middleware (https://github.com/glenjamin/webpack-hot-middleware).
 
 const ansiHTML = require('ansi-html');
-const Entities = require('html-entities').AllHtmlEntities;
-
-const entities = new Entities();
+const { AllHtmlEntities } = require('html-entities');
 
+const entities = new AllHtmlEntities();
 const colors = {
   reset: ['transparent', 'transparent'],
   black: '181818',
@@ -20,6 +19,11 @@ const colors = {
   lightgrey: 'EBE7E3',
   darkgrey: '6D7891',
 };
+
+let overlayIframe = null;
+let overlayDiv = null;
+let lastOnOverlayDivReady = null;
+
 ansiHTML.setColors(colors);
 
 function createOverlayIframe(onIframeLoad) {
@@ -62,10 +66,6 @@ function addOverlayDivTo(iframe) {
   return div;
 }
 
-let overlayIframe = null;
-let overlayDiv = null;
-let lastOnOverlayDivReady = null;
-
 function ensureOverlayDivExists(onOverlayDivReady) {
   if (overlayDiv) {
     // Everything is ready, call the callback right away.
@@ -78,7 +78,7 @@ function ensureOverlayDivExists(onOverlayDivReady) {
   lastOnOverlayDivReady = onOverlayDivReady;
 
   if (overlayIframe) {
-    // We're already creating it.
+    // We've already created it.
     return;
   }
 
@@ -95,16 +95,8 @@ function ensureOverlayDivExists(onOverlayDivReady) {
   document.body.appendChild(overlayIframe);
 }
 
-function showMessageOverlay(message) {
-  ensureOverlayDivExists((div) => {
-    // Make it look similar to our terminal.
-    div.innerHTML = `<span style="color: #${
-      colors.red
-    }">Failed to compile.</span><br><br>${ansiHTML(entities.encode(message))}`;
-  });
-}
-
-function destroyErrorOverlay() {
+// Successful compilation.
+function clear() {
   if (!overlayDiv) {
     // It is not there in the first place.
     return;
@@ -117,12 +109,19 @@ function destroyErrorOverlay() {
   lastOnOverlayDivReady = null;
 }
 
-// Successful compilation.
-exports.clear = function handleSuccess() {
-  destroyErrorOverlay();
-};
-
 // Compilation with errors (e.g. syntax error or missing modules).
-exports.showMessage = function handleMessage(messages) {
-  showMessageOverlay(messages[0]);
+function showMessage(messages) {
+  ensureOverlayDivExists((div) => {
+    // Make it look similar to our terminal.
+    div.innerHTML = `<span style="color: #${
+      colors.red
+    }">Failed to compile.</span><br><br>${ansiHTML(
+      entities.encode(messages[0])
+    )}`;
+  });
+}
+
+module.exports = {
+  clear,
+  showMessage,
 };

examples/cli/overlay/app.js

@@ -6,4 +6,4 @@ target.classList.add('pass');
 target.innerHTML = 'Success!';
 
 // This results in an error:
-// if(!window) require("test");
+// if (!window) require('test');

test/client/__snapshots__/overlay.test.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`overlay should run clear 1`] = `"<div id=\\"webpack-dev-server-client-overlay-div\\" style=\\"position: fixed; box-sizing: border-box; left: 0px; top: 0px; right: 0px; bottom: 0px; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.85); color: rgb(232, 232, 232); font-family: Menlo, Consolas, monospace; font-size: large; padding: 2rem; line-height: 1.2; white-space: pre-wrap; overflow: auto;\\"><span style=\\"color: #E36049\\">Failed to compile.</span><br><br>test!</div>"`;
+
+exports[`overlay should run clear 2`] = `""`;
+
+exports[`overlay should run showMessage 1`] = `""`;
+
+exports[`overlay should run showMessage 2`] = `"<div id=\\"webpack-dev-server-client-overlay-div\\" style=\\"position: fixed; box-sizing: border-box; left: 0px; top: 0px; right: 0px; bottom: 0px; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.85); color: rgb(232, 232, 232); font-family: Menlo, Consolas, monospace; font-size: large; padding: 2rem; line-height: 1.2; white-space: pre-wrap; overflow: auto;\\"><span style=\\"color: #E36049\\">Failed to compile.</span><br><br>test!</div>"`;

test/client/overlay.test.js

@@ -0,0 +1,27 @@
+'use strict';
+
+const overlay = require('../../client-src/default/overlay');
+
+describe('overlay', () => {
+  it('should run showMessage', () => {
+    expect(document.body.innerHTML).toMatchSnapshot();
+
+    overlay.showMessage(['test!']);
+
+    expect(
+      document.getElementsByTagName('iframe')[0].contentDocument.body.innerHTML
+    ).toMatchSnapshot();
+  });
+
+  it('should run clear', () => {
+    overlay.showMessage(['test!']);
+
+    expect(
+      document.getElementsByTagName('iframe')[0].contentDocument.body.innerHTML
+    ).toMatchSnapshot();
+
+    overlay.clear();
+
+    expect(document.body.innerHTML).toMatchSnapshot();
+  });
+});