[tests] Add tests

openwisp · Jul 18, 2022 · cc6efa6 · cc6efa6
1 parent 21ef9cb
commit cc6efa6
Show file tree

Hide file tree

Showing 14 changed files with 705 additions and 301 deletions.
diff --git a/dist/netjsongraph.min.js b/dist/netjsongraph.min.js
diff --git a/examples/netjsonmap-indoormap2.html b/examples/netjsonmap-indoormap2.html
diff --git a/examples/netjsonmap-plugins.html b/examples/netjsonmap-plugins.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>netjsongraph.js: Dark Colors</title>
+    <title>netjsongraph.js: Leaflet plugins</title>
     <meta charset="utf-8" />
     <link
       rel="stylesheet"

diff --git a/examples/realtime_update/assets/netjsongraph-theme.css b/examples/realtime_update/assets/netjsongraph-theme.css
@@ -168,6 +168,7 @@ p {
   transition: left 0.5s;
   display: flex;
   flex-direction: column;
+  user-select: text;
 }
 
 .hidden {
@@ -183,8 +184,8 @@ p {
   border-radius: 5px;
   outline: none;
   font-size: 24px;
-  width: 50px;
-  height: 40px;
+  width: 45px;
+  height: 45px;
   cursor: pointer;
   padding: 0;
   transition: all 0.5s;
@@ -207,7 +208,7 @@ p {
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
-  padding: 20px;
+  padding: 20px 0px;
 }
 
 .njg-metaData,
@@ -224,30 +225,65 @@ p {
 .njg-keyLabel {
   font-size: 14px;
   font-weight: 600;
+  flex: 1 1 50%;
+  word-break: break-word;
+}
+
+.njg-valueLabel {
+  flex: 1 1 50%;
+  word-break: break-word;
 }
 
 .njg-metaDataItems,
 .njg-infoItems {
   display: flex;
   align-items: center;
   width: 100%;
-  justify-content: space-between;
   text-transform: capitalize;
   padding: 5px 0;
 }
 
-.njg-headerContainer {
+.njg-tooltip {
+  background: #fff !important;
+  border: none !important;
+}
+
+.njg-tooltip-item {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  text-transform: capitalize;
   width: 100%;
+  padding: 1px 0;
+  flex-wrap: wrap;
+}
+
+.njg-tooltip-key {
+  display: inline-flex;
+  flex-basis: 40%;
+  flex-wrap: wrap;
+  text-transform: capitalize;
+  font-weight: 600;
+  color: #000;
+}
+.njg-tooltip-value {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  flex-basis: 60%;
+  color: #000;
 }
 
-.njg-headerContainer h2 {
-  transform: translate(100%, 0);
+.njg-headerContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-transform: capitalize;
+  width: 100%;
+  padding: 0 15px;
+  position: relative;
 }
 
 .njg-headerContainer #closeButton {
+  position: absolute;
+  right: 20px;
   cursor: pointer;
 }
diff --git a/examples/realtime_update/assets/netjsongraph.css b/examples/realtime_update/assets/netjsongraph.css
@@ -2,6 +2,7 @@
   margin: 0;
   padding: 0;
   outline: none;
+  box-sizing: border-box;
 }
 html,
 body {
@@ -73,7 +74,6 @@ body {
   height: 100%;
   width: 100%;
   z-index: 100;
-  /* background-color: red; */
 }
 
 .loadingElement {
@@ -99,13 +99,8 @@ body {
   text-align: center;
 }
 
-.njg-tooltip {
-  background: rgba(251, 251, 251, 0.9) !important;
-  border: none !important;
-}
-
 .leaflet-control-zoom {
-  top: 55px;
+  top: 5px;
   border: 0 !important;
 }
 
@@ -115,10 +110,27 @@ body {
   color: #fff !important;
 }
 
+.leaflet-control-zoom-in {
+  border-top-left-radius: 5px !important;
+  border-top-right-radius: 5px !important;
+}
+
+.leaflet-control-zoom-out {
+  border-bottom-left-radius: 5px !important;
+  border-bottom-right-radius: 5px !important;
+}
+
 .leaflet-control-layers {
   background: rgba(217, 79, 52, 0.85) !important;
   color: #fff !important;
   border: none !important;
+  right: 3px !important;
+}
+
+.leaflet-control-layers-toggle {
+  height: 35px !important;
+  width: 35px !important;
+  background-size: 20px 20px !important;
 }
 
 .leaflet-zoom-animated {

diff --git a/examples/realtime_update/assets/netjsongraph.min.js b/examples/realtime_update/assets/netjsongraph.min.js
diff --git a/index.html b/index.html
@@ -108,11 +108,6 @@ <h1>NetJSONGraph.js Example Demos</h1>
           >Indoor map</a
         >
       </div>
-      <div class="cards">
-        <a href="./examples/netjsonmap-indoormap2.html" target="_blank"
-          >Indoor map 2</a
-        >
-      </div>
       <div class="cards">
         <a href="./examples/netjsonmap-plugins.html" target="_blank"
           >Leaflet plugins</a

diff --git a/package.json b/package.json
@@ -39,6 +39,8 @@
   ],
   "devDependencies": {
     "@babel/preset-env": "^7.18.2",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@types/jest": "^28.1.6",
     "acorn": "^8.7.1",
     "coveralls": "^3.1.1",
     "eslint": "^8.18.0",

diff --git a/src/js/netjsongraph.render.js b/src/js/netjsongraph.render.js
@@ -122,7 +122,10 @@ class NetJSONGraphRender {
 
       nodeResult.itemStyle = nodeStyleConfig;
       nodeResult.symbolSize = nodeSizeConfig;
-      nodeResult.emphasis = {itemStyle: nodeEmphasisConfig};
+      nodeResult.emphasis = {
+        itemStyle: nodeEmphasisConfig.nodeStyle,
+        symbolSize: nodeEmphasisConfig.nodeSize,
+      };
       nodeResult.name = typeof node.label === "string" ? node.label : node.id;
 
       return nodeResult;
@@ -136,7 +139,7 @@ class NetJSONGraphRender {
       );
 
       linkResult.lineStyle = linkStyleConfig;
-      linkResult.emphasis = {lineStyle: linkEmphasisConfig};
+      linkResult.emphasis = {lineStyle: linkEmphasisConfig.linkStyle};
 
       return linkResult;
     });
@@ -202,7 +205,10 @@ class NetJSONGraphRender {
             value: [location.lng, location.lat],
             symbolSize: nodeSizeConfig,
             itemStyle: nodeStyleConfig,
-            emphasis: {itemStyle: nodeEmphasisConfig},
+            emphasis: {
+              itemStyle: nodeEmphasisConfig.nodeStyle,
+              symbolSize: nodeEmphasisConfig.nodeSize,
+            },
             node,
           });
           if (!JSONData.flatNodes) {
@@ -234,7 +240,7 @@ class NetJSONGraphRender {
             ],
           ],
           lineStyle: linkStyleConfig,
-          emphasis: {lineStyle: linkEmphasisConfig},
+          emphasis: {lineStyle: linkEmphasisConfig.linkStyle},
           link,
         });
       }