screenshot-test-server - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

dist/server.js

@@ -252,2 +252,5 @@ "use strict";
 })
-    .listen(port);
+    .listen(port, () => {
+    console.log(`Screenshot-test-server running on port ${port}`);
+    console.log('Render the tests on your emulator / device and hit the "Capture and Compare" button.');
+});

dist/utils.js

@@ -92,3 +92,3 @@ "use strict";
   </div>`;
-function difHtml(newPath, oldPath, diffPath, path, maxWidthOuter, metadata) {
+function failedHtml(diffPath, path, maxWidthOuter, metadata) {
     return __awaiter(this, void 0, void 0, function* () {
@@ -106,3 +106,3 @@ let htmlStr = '', length = 0;
                 const metaDataHtml = getMetaDataHtml(title, description, id);
-                htmlStr += `<div style="border: 2px solid #D45553; border-radius: 4px; margin: 12px 5px 20px 5px; padding: 5px; overflow: scroll; font-size: 14px">
+                htmlStr += `<div style="border: 2px solid #D45553; border-radius: 2px; margin: 12px 5px 20px 5px; padding: 5px; overflow: scroll; font-size: 14px">
         ${metaDataHtml}
@@ -123,3 +123,3 @@ <div style="${rowStyle} background-color: ${backgroundColor};">
 }
-function allHtml(newPath, oldPath, diffPath, path, maxWidthOuter, metadata) {
+function passedHtml(newPath, oldPath, diffPath, maxWidthOuter, metadata) {
     return __awaiter(this, void 0, void 0, function* () {
@@ -139,13 +139,5 @@ let htmlStr = '', length = 0;
                     fs.existsSync(`${diffPath}/${file}`)) {
-                    htmlStr += `<div style="border: 2px solid #D45553; border-radius: 4px; margin: 12px 5px 20px 5px; padding: 5px; overflow: scroll; font-size: 14px">
-          ${metaDataHtml}
-          <div style="${rowStyle} background-color: ${backgroundColor};">
-          <div><h3>Original:</h3><img style="max-width: ${maxWidth}px;" src="./old/${file}" alt="./old/${file}"/><button onclick="accept('${path}','${id}',${maxWidth})" style="background-color: #23569E; color: white; padding: 4px 8px;">Accept Changes</button></div>
-          <div><h3>Modified:</h3><img style="max-width: ${maxWidth}px;" src="./new/${file}" alt="./new/${file}"/></div>
-          <div><h3>Diff:</h3><img style="max-width: ${maxWidth}px;" src="./diff/${file}" alt="./diff/${file}"/></div>
-          </div>
-        </div>`;
                 }
                 else {
-                    htmlStr += `<div style="border: 2px solid #89AB59; border-radius: 4px; margin: 12px 5px 20px 5px; padding: 5px; overflow: scroll; font-size: 14px">
+                    htmlStr += `<div style="border: 2px solid #89AB59; border-radius: 2px; margin: 12px 5px 20px 5px; padding: 5px; overflow: scroll; font-size: 14px">
           ${metaDataHtml}
@@ -165,3 +157,49 @@ <div style="${rowStyle} background-color: ${backgroundColor};">
 }
-function getHtmlContent(allHtmlString, diffHtmlString, path, maxWidth, all, failed, metadata) {
+// async function allHtml(
+//   newPath: string,
+//   oldPath: string,
+//   diffPath: string,
+//   path: string,
+//   maxWidthOuter: number,
+//   metadata: any
+// ) {
+//   let htmlStr = '',
+//     length = 0
+//   try {
+//     const files = await fs.readdirSync(oldPath)
+//     length = files.length
+//     files.forEach((file) => {
+//       const len = file.length
+//       const id = file.substring(0, len - 4)
+//       const component = metadata.components.find((item: any) => item.id === id)
+//       let { title, description, backgroundColor, maxWidth } = component
+//       maxWidth = maxWidth || maxWidthOuter
+//       const metaDataHtml = getMetaDataHtml(title, description, id)
+//       if (
+//         fs.existsSync(`${newPath}/${file}`) &&
+//         fs.existsSync(`${diffPath}/${file}`)
+//       ) {
+//         htmlStr += `<div style="border: 2px solid #D45553; border-radius: 2px; margin: 12px 5px 20px 5px; padding: 5px; overflow: scroll; font-size: 14px">
+//           ${metaDataHtml}
+//           <div style="${rowStyle} background-color: ${backgroundColor};">
+//           <div><h3>Original:</h3><img style="max-width: ${maxWidth}px;" src="./old/${file}" alt="./old/${file}"/><button onclick="accept('${path}','${id}',${maxWidth})" style="background-color: #23569E; color: white; padding: 4px 8px;">Accept Changes</button></div>
+//           <div><h3>Modified:</h3><img style="max-width: ${maxWidth}px;" src="./new/${file}" alt="./new/${file}"/></div>
+//           <div><h3>Diff:</h3><img style="max-width: ${maxWidth}px;" src="./diff/${file}" alt="./diff/${file}"/></div>
+//           </div>
+//         </div>`
+//       } else {
+//         htmlStr += `<div style="border: 2px solid #89AB59; border-radius: 2px; margin: 12px 5px 20px 5px; padding: 5px; overflow: scroll; font-size: 14px">
+//           ${metaDataHtml}
+//           <div style="${rowStyle} background-color: ${backgroundColor};">
+//           <img style="max-width: ${maxWidth}px;" src="./old/${file}" alt="./old/${file}"/>
+//           </div>
+//           </div>`
+//       }
+//     })
+//   } catch (err) {
+//     console.error('Unable to scan directory: ' + err)
+//   }
+//   return { htmlStr, length }
+// }
+function getHtmlContent(allHtmlString, diffHtmlString, passedHtmlString, path, maxWidth, all, failed, metadata) {
     const { port } = metadata;
@@ -176,2 +214,4 @@ const localhostUrl = 'http://127.0.0.1';
               <script>
+                  var diffHtmlString = \`${diffHtmlString}\`
+                  var passedHtmlString = \`${passedHtmlString}\`
                   async function update (path,id,maxWidth) {
@@ -209,7 +249,10 @@ await fetch(\`${urlForUpdate}?path=\${path}&id=\${id}&maxWidth=\${maxWidth}\`)
                 function showAll() {
-                  document.getElementById("mainBody").innerHTML = \`${allHtmlString}\`
+                  document.getElementById("mainBody").innerHTML = diffHtmlString + passedHtmlString
                 }
                 function showDiff() {
-                  document.getElementById("mainBody").innerHTML = \`${diffHtmlString}\`
+                  document.getElementById("mainBody").innerHTML = diffHtmlString
                 }
+                function showPassed() {
+                  document.getElementById("mainBody").innerHTML = passedHtmlString}
+                }
                 function onloaded () {
@@ -226,2 +269,7 @@ let node = document.getElementById('acceptAll')
                   node.setAttribute('style', style+\` background-color: ${failed ? '#EEB6B3' : '#C6E0C4'}\`)
+
+                  node = document.getElementById('reportBox')
+                  style = node.getAttribute('style')
+                  node.setAttribute('style', style+\` background-color: ${failed ? '#350505' : '#001e03'}\`)
+
                   showAll();
@@ -235,7 +283,8 @@ }
               <div>
-                <input type="radio" name="choice" onclick="showAll()" checked> Show All </input>
-                <input type="radio" name="choice" onclick="showDiff()"> Show modified only </input>
+                <input type="radio" name="choice" onclick="showAll()" checked> All </input>
+                <input type="radio" name="choice" onclick="showDiff()"> Failed </input>
+                <input type="radio" name="choice" onclick="showPassed()"> Passed </input>
   
                 <div id="acceptAll">
-                    <button style="margin: 10px; padding: 6px 16px; background-color: #23569E; color: white; font-size: 14px; font-weight: bold; border-radius: 6px; cursor: pointer;" onclick="acceptAll('${path}',${maxWidth})">
+                    <button style="margin: 10px; padding: 6px 16px; background-color: #23569E; color: white; font-size: 14px; font-weight: bold; border-radius: 4px; cursor: pointer;" onclick="acceptAll('${path}',${maxWidth})">
                       Accept all changes
@@ -246,3 +295,3 @@ </button>
   
-              <div style="background-color: #0E1117; padding: 10px 24px; border-radius: 4px; width: 140px; margin-left: 10px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;">
+              <div id="reportBox" style="padding: 10px 24px; border-radius: 2px; width: 140px; margin-left: 10px; font-family: Arial, Helvetica, sans-serif;">
                 <div style="color: wheat; display: flex; justify-content: space-between; margin-bottom: 4px;">
@@ -277,3 +326,3 @@ <div>Total: </div>
   `;
-function generateHtml(path, maxWidth, backgroundColor, metadata) {
+function generateHtml(path, maxWidth, backgroundColor, metadataParam) {
     return __awaiter(this, void 0, void 0, function* () {
@@ -283,6 +332,8 @@ const oldPath = path + '/old';
         const diffPath = path + '/diff';
+        let metadata = metadataParam;
         if (metadata) {
+            metadata = Object.assign(Object.assign({}, metadata), { components: metadata.components.map((item) => (Object.assign(Object.assign({}, item), { title: item.title.replaceAll('`', '"').replaceAll("'", '"'), id: item.id.replaceAll('`', '"').replaceAll("'", '"'), backgroundColor: item.backgroundColor || backgroundColor }))) });
             try {
                 const metadataPath = path + '/metadata.json';
-                yield fs.writeFileSync(metadataPath, JSON.stringify(Object.assign(Object.assign({}, metadata), { components: metadata.components.map((item) => (Object.assign(Object.assign({}, item), { backgroundColor: item.backgroundColor || backgroundColor }))) })));
+                yield fs.writeFileSync(metadataPath, JSON.stringify(metadata));
                 console.log(`Metadata file saved as ${metadataPath}`);
@@ -298,5 +349,7 @@ }
         }
-        const { htmlStr: allHtmlString, length: all } = yield allHtml(newPath, oldPath, diffPath, path, maxWidth, metadata);
-        const { htmlStr: diffHtmlString, length: failed } = yield difHtml(newPath, oldPath, diffPath, path, maxWidth, metadata);
-        const finalHtmlString = getHtmlContent(allHtmlString, diffHtmlString, path, maxWidth, all, failed, metadata);
+        const { htmlStr: diffHtmlString, length: failed } = yield failedHtml(diffPath, path, maxWidth, metadata);
+        const { htmlStr: passedHtmlString, length: passed } = yield passedHtml(newPath, oldPath, diffPath, maxWidth, metadata);
+        const allHtmlString = diffHtmlString + passedHtmlString;
+        const all = failed + passed;
+        const finalHtmlString = getHtmlContent(allHtmlString, diffHtmlString, passedHtmlString, path, maxWidth, all, failed, metadata);
         try {
@@ -303,0 +356,0 @@ yield fs.writeFileSync(path + '/test.html', finalHtmlString);

package.json

 {
   "name": "screenshot-test-server",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "A node server for screenshot testing that takes base64 string for captured screenshot and compares it with exisiting screenshot and generates diff image and a test report as an html file.",
@@ -10,3 +10,3 @@ "main": "./dist/server.js",
   "scripts": {
-    "build": "tsc -p . && cp './src/resemble.js' './dist/resemble.js' && mv './src/utils.js' './dist/utils.js' && mv './src/server.js' './dist/server.js'",
+    "build": "rm -rf dist && tsc -p . && ./build.sh",
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -13,0 +13,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

67587

increased by3.53%

Lines of code

1501

increased by3.8%

No dependency changes