Merge pull request #270 from veghdev/manual_lasttestcase

Manual, fix last selected test case

Author: simzer

test/integration/modules/manual/client/index.js

@@ -7,46 +7,32 @@ let urlTestIndex = urlParams.get("testIndex");
 let urlVizzuUrl = urlParams.get("vizzuUrl");
 let urlVizzuRefUrl = urlParams.get("vizzuRefUrl");
 
-let vizzuUrl = document.getElementById("vizzuUrl");
-let vizzuRef = document.getElementById("vizzuRef");
-let testCase = document.getElementById("testCase");
-let frame = document.getElementById("frame");
-let frameRef = document.getElementById("frame-ref");
-let difCanvas = document.getElementById("canvas-dif");
-let replay = document.getElementById("replay");
-let play = document.getElementById("play");
+let vizzuUrl = document.querySelector("#vizzuUrl");
+let vizzuRef = document.querySelector("#vizzuRef");
+let testCase = document.querySelector("#testCase");
+let frame = document.querySelector("#frame");
+let frameRef = document.querySelector("#frame-ref");
+let difCanvas = document.querySelector("#canvas-dif");
+let replay = document.querySelector("#replay");
+let play = document.querySelector("#play");
 
 function getDiff() {
   let doc = frame.contentWindow.document;
   let docRef = frameRef.contentWindow.document;
-  if (
-    doc.vizzuImgData !== undefined &&
-    docRef.vizzuImgData !== undefined &&
-    doc.vizzuImgIndex == docRef.vizzuImgIndex
-  ) {
-    let w = doc.vizzuImgData.width;
-    let h = doc.vizzuImgData.height;
-    let res = ImgDiff.compare(
-      "move",
-      doc.vizzuImgData.data,
-      docRef.vizzuImgData.data,
-      w,
-      h
-    );
+  if (doc.vizzuImgData && docRef.vizzuImgData && doc.vizzuImgIndex === docRef.vizzuImgIndex) {
+    let { width: w, height: h, data } = doc.vizzuImgData;
+    let res = ImgDiff.compare("move", data, docRef.vizzuImgData.data, w, h);
 
     let dif = new ImageData(res.diffData, w, h);
     difCanvas.width = 800;
     difCanvas.height = 500;
     const ctx = difCanvas.getContext("2d");
     ctx.clearRect(0, 0, w, h);
     ctx.putImageData(dif, 0, 0);
-    doc.vizzuImgData = undefined;
-    docRef.vizzuImgData = undefined;
-    difCanvas.style = `border:1px solid ${res.match ? "green" : "red"}`;
-    setTimeout(getDiff, 100);
-  } else {
-    setTimeout(getDiff, 100);
+    doc.vizzuImgData = docRef.vizzuImgData = undefined;
+    difCanvas.style.border = `1px solid ${res.match ? "green" : "red"}`;
   }
+  setTimeout(getDiff, 100);
 }
 
 function update() {
@@ -69,6 +55,10 @@ function update() {
       run(charts);
     }, 0);
   });
+
+  testCase.querySelectorAll("option").forEach((option) => {
+    option.style.backgroundColor = option.selected ? "rgba(206,206,206,255)" : option.getAttribute("background-color");
+  });
 }
 
 function connectSliders() {
@@ -122,37 +112,20 @@ function setupSelects() {
   vizzuRef.addEventListener("change", update);
   testCase.addEventListener("change", update);
   replay.addEventListener("click", update);
-  play.addEventListener("click", () => {
-    run([undefined, undefined]);
-  });
+  play.addEventListener("click", () => run([undefined, undefined]));
 }
 
 function populateLibs() {
   fetch("/getLibList")
     .then((response) => response.json())
     .then((data) => {
-      for (let name in data) {
-        let url = data[name];
+      Object.entries(data).forEach(([name, url]) => {
         vizzuUrl.appendChild(getVizzuOption(url, name));
         vizzuRef.appendChild(getVizzuOption(url, name));
-      }
-      let lastSelected = localStorage.getItem("vizzuUrl");
-      if (urlVizzuUrl) {
-        lastSelected = data[urlVizzuUrl];
-      }
-      if (!lastSelected) lastSelected = data["localhost"];
+      });
+      let lastSelected = data[urlVizzuUrl] || localStorage.getItem("vizzuUrl") || data["localhost"];
       vizzuUrl.value = lastSelected;
-      let lastSelectedRef = localStorage.getItem("vizzuRef");
-      if (urlVizzuRefUrl) {
-        lastSelectedRef = data[urlVizzuRefUrl];
-      }
-      if (!lastSelectedRef) {
-        if (data["HEAD"]) {
-          lastSelectedRef = data["HEAD"];
-        } else {
-          lastSelectedRef = data["localhost"];
-        }
-      } 
+      let lastSelectedRef = data[urlVizzuRefUrl] || localStorage.getItem("vizzuRef") || data["HEAD"] || data["localhost"];
       vizzuRef.value = lastSelectedRef;
       populateCases();
     });
@@ -163,19 +136,19 @@ function getVizzuOption(url, name) {
   option.value = url;
   const text = document.createTextNode(name);
   option.appendChild(text);
-  return option
+  return option;
 }
 
 function populateCases() {
   fetch("/getTestList")
     .then((response) => response.json())
     .then((data) => {
-      let lastSelected = "";
+      let lastSelected = localStorage.getItem("testCase");
       for (let i = 0; i < data.length; i++) {
         let actcase = JSON.stringify(data[i]);
         if (
           data[i].testFile === urlTestFile &&
-          data[i].testIndex === urlTestIndex
+          data[i].testIndex == urlTestIndex
         ) {
           lastSelected = actcase;
         }
@@ -184,7 +157,7 @@ function populateCases() {
         let selected = i == 0 ? 'selected="selected"' : "";
         testCase.appendChild(getTestCaseOption(actcase, actcaseName, actcaseResult, selected));
       }
-      if (lastSelected === "") lastSelected = JSON.stringify(data[0]);
+      if (!lastSelected) lastSelected = JSON.stringify(data[0]);
       testCase.value = lastSelected;
 
       setupSelects();
@@ -193,26 +166,23 @@ function populateCases() {
 }
 
 function getTestCaseOption(testCase, testCaseName, testCaseResult, selected) {
-  const option = document.createElement('option');
-  option.setAttribute('style', getTestCaseStyle(testCaseResult));
+  const option = document.createElement("option");
   option.value = testCase;
   option.selected = selected;
-  let textValue = testCaseName;
-  if (testCaseResult) textValue = `${testCaseName} | ${testCaseResult}`;
-  const text = document.createTextNode(textValue);
-  option.appendChild(text);
+  option.textContent = testCaseResult ? `${testCaseName} | ${testCaseResult}` : testCaseName;
+  option.setAttribute("background-color", getTestCaseBackgroundColorByResult(testCaseResult));
   return option;
 }
 
-function getTestCaseStyle(testCaseResult) {
+function getTestCaseBackgroundColorByResult(testCaseResult) {
   if (testCaseResult === "PASS") {
-    return "background-color: rgba(152, 251, 152, 0.8) !important;";
+    return "rgba(152,251,152,0.8)";
   } else if (testCaseResult === "FAIL") {
-    return "background-color: rgba(255, 153, 153, 0.8) !important;";
+    return "rgba(255,153,153,0.8)";
   } else if (testCaseResult === "WARN") {
-    return "background-color: rgba(255, 255, 153, 0.8) !important;";
+    return "rgba(255,255,153,0.8)";
   }
-  return ";"
+  return "";
 }
 
 populateLibs();