#6 added jest unit tests

SpartaSystems · Apr 7, 2017 · 22a298c · 22a298c
1 parent 0f4aaa5
commit 22a298c
Show file tree

Hide file tree

Showing 27 changed files with 1,562 additions and 162 deletions.
diff --git a/package.json b/package.json
@@ -13,17 +13,20 @@
     "material-ui": "^0.17.1",
     "moment": "^2.17.1",
     "ng-infinite-scroll": "1.3.0",
+    "react-bootstrap-alert": "^1.0.7",
+    "react-dom": "^15.4.2",
+    "react-growl": "^0.1.2",
     "react-loading": "0.0.9",
     "react-modal-bootstrap": "^1.1.0",
+    "react-s-alert": "^1.2.2",
     "react-tabs": "^0.8.2",
     "react-tap-event-plugin": "^2.0.1"
   },
   "scripts": {
     "postinstall": "browserify src/main/resources/static/js/*.js | uglifyjs -c -o src/main/resources/static/js/bundle/holdmail.js",
     "test": "jest",
     "license-report": "license-report --output=table --only=prod",
-    "buildReact": "watchify src/main/resources/static/js/react/app.js -o src/main/resources/static/js/bundle/babelify.js -t [ babelify --presets [ es2015 react ] ]",
-    "test-debug": "./node_modules/.bin/node-debug ./node_modules/.bin/jest -i --watch"
+    "buildReact": "watchify src/main/resources/static/js/react/app.js -o src/main/resources/static/js/bundle/babelify.js -t [ babelify --presets [ es2015 react ] ]"
   },
   "devDependencies": {
     "angular-mocks": "^1.5.8",
@@ -32,27 +35,23 @@
     "babel-preset-react": "^6.23.0",
     "babelify": "^7.3.0",
     "browserify": "^14.1.0",
+    "enzyme": "^2.8.0",
+    "fetch-mock": "^5.9.4",
     "jasmine-core": "^2.4.1",
     "jest": "^19.0.2",
     "jest-enzyme": "^2.1.2",
-    "jest-fetch-mock": "^1.0.8",
     "karma": "^1.2.0",
     "karma-browserify": "^5.1.0",
     "karma-chrome-launcher": "^2.0.0",
     "karma-jasmine": "^1.0.2",
     "karma-jasmine-jquery": "^0.1.1",
     "karma-phantomjs-launcher": "^1.0.1",
     "karma-spec-reporter": "^0.0.26",
+    "react-addons-test-utils": "^15.4.2",
     "react-test-renderer": "^15.4.2",
     "uglify-js": "^2.7.3",
     "watchify": "^3.9.0"
   },
-  "jest": {
-    "automock": false,
-    "setupFiles": [
-      "./src/test/js/spec/setupJest.js"
-    ]
-  },
   "author": "Barry O'Neill / Sparta Systems",
   "license": "Apache-2.0"
 }
diff --git a/src/main/resources/static/css/holdmail.css b/src/main/resources/static/css/holdmail.css
@@ -17,7 +17,7 @@
  ******************************************************************************/
 
 
-html, body {
+ body {
     height: 100%;
     margin: 0;
 }

diff --git a/src/main/resources/static/css/s-alert-css-effects/bouncyflip.css b/src/main/resources/static/css/s-alert-css-effects/bouncyflip.css
@@ -0,0 +1,249 @@
+/* Bouncy Flip adapted from animate.css by Dan Eden: http://daneden.github.io/animate.css/ */
+
+.s-alert-bottom-left.s-alert-effect-bouncyflip,
+.s-alert-bottom-right.s-alert-effect-bouncyflip,
+.s-alert-bottom.s-alert-effect-bouncyflip {
+    -webkit-transform-origin: 50% 100%;
+    transform-origin: 50% 100%;
+}
+.s-alert-top-left.s-alert-effect-bouncyflip,
+.s-alert-top-right.s-alert-effect-bouncyflip
+.s-alert-top.s-alert-effect-bouncyflip {
+    -webkit-transform-origin: 50% 0%;
+    transform-origin: 50% 0%;
+}
+
+.s-alert-effect-bouncyflip p {
+    padding: 0.5em 0.8em 0.5em 0.8em;
+}
+
+.s-alert-effect-bouncyflip .s-alert-close::after,
+.s-alert-effect-bouncyflip .s-alert-close::before {
+    background: #fff;
+}
+
+.s-alert-effect-bouncyflip .s-alert-close:hover::after,
+.s-alert-effect-bouncyflip .s-alert-close:hover::before {
+    background: #fff;
+}
+
+.s-alert-top-left.s-alert-effect-bouncyflip.s-alert-hide,
+.s-alert-top-right.s-alert-effect-bouncyflip.s-alert-hide,
+.s-alert-top-left.s-alert-effect-bouncyflip.s-alert-show,
+.s-alert-top-right.s-alert-effect-bouncyflip.s-alert-show,
+.s-alert-top.s-alert-effect-bouncyflip.s-alert-hide,
+.s-alert-top.s-alert-effect-bouncyflip.s-alert-show  {
+    -webkit-animation-name: flipInXTop;
+    animation-name: flipInXTop;
+    -webkit-animation-duration: 0.8s;
+    animation-duration: 0.8s;
+}
+
+.s-alert-bottom-left.s-alert-effect-bouncyflip.s-alert-hide,
+.s-alert-bottom-right.s-alert-effect-bouncyflip.s-alert-hide,
+.s-alert-bottom-left.s-alert-effect-bouncyflip.s-alert-show,
+.s-alert-bottom-right.s-alert-effect-bouncyflip.s-alert-show,
+.s-alert-bottom.s-alert-effect-bouncyflip.s-alert-show,
+.s-alert-bottom.s-alert-effect-bouncyflip.s-alert-hide {
+    -webkit-animation-name: flipInXBottom;
+    animation-name: flipInXBottom;
+    -webkit-animation-duration: 0.8s;
+    animation-duration: 0.8s;
+}
+
+@-webkit-keyframes flipInXTop {
+    0% {
+        -webkit-transform: perspective(400px) rotate3d(1,0,0,-90deg);
+        -webkit-transition-timing-function: ease-in;
+    }
+
+    40% {
+        -webkit-transform: perspective(400px) rotate3d(1,0,0,20deg);
+        -webkit-transition-timing-function: ease-out;
+    }
+
+    60% {
+        -webkit-transform: perspective(400px) rotate3d(1,0,0,-10deg);
+        -webkit-transition-timing-function: ease-in;
+        opacity: 1;
+    }
+
+    80% {
+        -webkit-transform: perspective(400px) rotate3d(1,0,0,5deg);
+        -webkit-transition-timing-function: ease-out;
+    }
+
+    100% {
+        -webkit-transform: perspective(400px);
+    }
+}
+
+@keyframes flipInXTop {
+    0% {
+        -webkit-transform: perspective(400px) rotate3d(1,0,0,-90deg);
+        transform: perspective(400px) rotate3d(1,0,0,-90deg);
+        -webkit-transition-timing-function: ease-in;
+        transition-timing-function: ease-in;
+    }
+
+    40% {
+        -webkit-transform: perspective(400px) rotate3d(1,0,0,20deg);
+        transform: perspective(400px) rotate3d(1,0,0,20deg);
+        -webkit-transition-timing-function: ease-out;
+        transition-timing-function: ease-out;
+    }
+
+    60% {
+        -webkit-transform: perspective(400px) rotate3d(1,0,0,-10deg);
+        transform: perspective(400px) rotate3d(1,0,0,-10deg);
+        -webkit-transition-timing-function: ease-in;
+        transition-timing-function: ease-in;
+        opacity: 1;
+    }
+
+    80% {
+        -webkit-transform: perspective(400px) rotate3d(1,0,0,5deg);
+        transform: perspective(400px) rotate3d(1,0,0,5deg);
+        -webkit-transition-timing-function: ease-out;
+        transition-timing-function: ease-out;
+    }
+
+    100% {
+        -webkit-transform: perspective(400px);
+        transform: perspective(400px);
+    }
+}
+
+@-webkit-keyframes flipInXBottom {
+    0% {
+        -webkit-transform: perspective(400px) rotate3d(1,0,0,90deg);
+        -webkit-transition-timing-function: ease-in;
+    }
+
+    40% {
+        -webkit-transform: perspective(400px) rotate3d(1,0,0,-20deg);
+        -webkit-transition-timing-function: ease-out;
+    }
+
+    60% {
+        -webkit-transform: perspective(400px) rotate3d(1,0,0,10deg);
+        -webkit-transition-timing-function: ease-in;
+        opacity: 1;
+    }
+
+    80% {
+        -webkit-transform: perspective(400px) rotate3d(1,0,0,-5deg);
+        -webkit-transition-timing-function: ease-out;
+    }
+
+    100% {
+        -webkit-transform: perspective(400px);
+    }
+}
+
+@keyframes flipInXBottom {
+    0% {
+        -webkit-transform: perspective(400px) rotate3d(1,0,0,90deg);
+        transform: perspective(400px) rotate3d(1,0,0,90deg);
+        -webkit-transition-timing-function: ease-in;
+        transition-timing-function: ease-in;
+    }
+
+    40% {
+        -webkit-transform: perspective(400px) rotate3d(1,0,0,-20deg);
+        transform: perspective(400px) rotate3d(1,0,0,-20deg);
+        -webkit-transition-timing-function: ease-out;
+        transition-timing-function: ease-out;
+    }
+
+    60% {
+        -webkit-transform: perspective(400px) rotate3d(1,0,0,10deg);
+        transform: perspective(400px) rotate3d(1,0,0,10deg);
+        -webkit-transition-timing-function: ease-in;
+        transition-timing-function: ease-in;
+        opacity: 1;
+    }
+
+    80% {
+        -webkit-transform: perspective(400px) rotate3d(1,0,0,-5deg);
+        transform: perspective(400px) rotate3d(1,0,0,-5deg);
+        -webkit-transition-timing-function: ease-out;
+        transition-timing-function: ease-out;
+    }
+
+    100% {
+        -webkit-transform: perspective(400px);
+        transform: perspective(400px);
+    }
+}
+
+.s-alert-top-right.s-alert-effect-bouncyflip.s-alert-hide,
+.s-alert-top-left.s-alert-effect-bouncyflip.s-alert-hide,
+.s-alert-top.s-alert-effect-bouncyflip.s-alert-hide {
+    -webkit-animation-name: flipInXSimpleTop;
+    animation-name: flipInXSimpleTop;
+    -webkit-animation-duration: 0.3s;
+    animation-duration: 0.3s;
+}
+.s-alert-bottom-right.s-alert-effect-bouncyflip.s-alert-hide,
+.s-alert-bottom-left.s-alert-effect-bouncyflip.s-alert-hide,
+.s-alert-bottom.s-alert-effect-bouncyflip.s-alert-hide  {
+    -webkit-animation-name: flipInXSimpleBottom;
+    animation-name: flipInXSimpleBottom;
+    -webkit-animation-duration: 0.3s;
+    animation-duration: 0.3s;
+}
+
+@-webkit-keyframes flipInXSimpleTop {
+  0% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
+    -webkit-transition-timing-function: ease-in;
+  }
+  100% {
+    -webkit-transform: perspective(400px);
+  }
+}
+
+@keyframes flipInXSimpleTop {
+  0% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
+    -webkit-transition-timing-function: ease-in;
+    transition-timing-function: ease-in;
+  }
+  100% {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+  }
+}
+
+@-webkit-keyframes flipInXSimpleBottom {
+  0% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    -webkit-transition-timing-function: ease-in;
+  }
+  100% {
+    -webkit-transform: perspective(400px);
+  }
+}
+
+@keyframes flipInXSimpleBottom {
+  0% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    -webkit-transition-timing-function: ease-in;
+    transition-timing-function: ease-in;
+  }
+  100% {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+  }
+}
+
+@media screen and (max-width: 25em) {
+    .s-alert-attached {
+        left: 30px;
+        max-width: none;
+        right: 30px;
+    }
+}