E2E tests

Author: JLiscom

.jshintrc

@@ -1,5 +1,5 @@
 {
-    "esversion":5,
+    "esversion":6,
     "node": true,
     "undef": true,
     "unused": true,

Gruntfile.js

@@ -5,18 +5,25 @@ var bundleFiles=[
     "openNote/**/*.html"
 ];
 
+// Helper function
+var serverConfig = function(keepalive){
+    if(keepalive==undefined)
+        keepalive = true;
+    return {
+        options: {
+            port: 8080,
+            base: ".",
+            keepalive: keepalive
+        }
+    };
+};
 
 module.exports = function(grunt) {
     //Initializing the configuration object
     grunt.initConfig({
         connect: {
-            server: {
-                options: {
-                    port: 8080,
-                    base: ".",
-                    keepalive: true
-                }
-            }
+            server: serverConfig(),
+            serverNoAlive: serverConfig(false)
         },
         compress: {
             main: {
@@ -33,8 +40,10 @@ module.exports = function(grunt) {
             }
         },
         jshint: {
-            options: {},
-            all: ["**/*.js*", //Order matters
+            options: {
+                "esversion":6,
+            },
+            all: ["openNote/**/*.js*", //Order matters
                 "!node_modules/**",
                 "!OpenNote/node_moduless/**"
             ]
@@ -100,6 +109,9 @@ module.exports = function(grunt) {
                     "rm -rf dark light"
                 ].join("&&")
             },
+            test: {
+                command: ["npm run test"].join("&&")
+            },
             dev: {
                 command: ["npm run dev"].join("&&")
             },
@@ -148,5 +160,5 @@ module.exports = function(grunt) {
 
     //testing
     grunt.registerTask("devmode", ["karma:unit", "watch"]);
-    grunt.registerTask("ci", ["build", "jshint:all"]);
+    grunt.registerTask("ci", "Build the app and runs tests on it", ["jshint:all", "buildProd", "connect:serverNoAlive", "shell:test" ]);
 };

docs/Build.md

@@ -12,3 +12,20 @@ Then run
 this will start a webpack dev server.
 
 To test production bundles run `grunt testDeploy`
+
+//TODO new stuff and note in an ascii tree how the shared services are are expected to be neighbors of the cli and OpenNoteFolder
+
+
+//TODO grunt --help to get steps
+
+Super important
+grunt default or grunt
+grunt ci
+grunt deploy //TODO
+
+
+To develop tests
+```
+grunt dev # in terminal A
+npm run testChrome # in terminal B. Iterate on this terminal
+```

openNote/controllers/folderController.js

@@ -24,6 +24,7 @@ openNote.controller("folderController", ["$scope",
         //add buttons
         if ($routeParams.id)
             $rootScope.buttons.push({
+                id: "newNote",
                 text: "New note",
                 action: function() {
                     $scope.fadeOutFoldersAndNotes(function() {
@@ -34,6 +35,7 @@ openNote.controller("folderController", ["$scope",
 
         //Create a folder
         $rootScope.buttons.push({
+            id: "newFolder",
             text: "New folder",
             action: function() {
                 var prompt = "Please enter a name for the new folder";
@@ -244,10 +246,6 @@ openNote.controller("folderController", ["$scope",
             storageService.loadFolderContents($scope.currentFolder._id, function(results) {
                 $scope.currentFolderContents = results.rows;
 
-                //Do they have anything to display?
-                if (!$scope.currentFolder._id && !$scope.currentFolderContents.length)
-                    alertify.alert("It looks like you dont have any folders. You can create one using the \"New Folder\" button in the top right of the page. If you need to pull your remote notes <a href='#/settings/database'>click here</a>.");
-
                 $scope.$apply();
             });
         };

openNote/controllers/noteController.js

@@ -35,6 +35,7 @@ openNote.controller("noteController", ["$scope",
          */
         var saveButton = function() {
             return {
+                id: "save",
                 text: "Save",
                 action: function() {
                     save();
@@ -44,6 +45,7 @@ openNote.controller("noteController", ["$scope",
 
         var copyButton = function(note) {
             return {
+                id: "cut",
                 text: "Cut",
                 action: function() {
                     $rootScope.clipboard = note;
@@ -57,6 +59,7 @@ openNote.controller("noteController", ["$scope",
          */
         var clearButton = function() {
             return {
+                id: "clear",
                 text: "Clear",
                 action: function() {
                     $scope.clear();
@@ -66,6 +69,7 @@ openNote.controller("noteController", ["$scope",
 
         var editButton = function() {
             return {
+                id: "edit",
                 text: "Edit",
                 action: function() {
                     activateEditMode();
@@ -75,6 +79,7 @@ openNote.controller("noteController", ["$scope",
 
         var upButton = function(folderID) {
             return {
+                id: "goToParentFolder",
                 text: "Go up a folder",
                 action: function() {
                     $location.url("/folder/" + folderID);

openNote/controllers/tagListController.js

@@ -50,13 +50,13 @@ openNote.controller("tagListController", [
             //Confirm action
             alertify.confirm("Are you sure you want to move " + (request.moveObject.name || request.moveObject.title) + " into " + request.destFolder.name + "?", function(confirm) {
                 if (confirm) {
-                    var origParrentFolderID = request.moveObject.parentFolderID;
+                    var origParentFolderID = request.moveObject.parentFolderID;
 
                     request.moveObject.parentFolderID = request.destFolder._id;
                     storageService.database().put(request.moveObject).then(function() {
                         $rootScope.$emit("changedFolder", { //fire off an event to tell everyone we just modified a folder
                             folder: request.moveObject,
-                            oldParrentFolderID: origParrentFolderID
+                            oldParentFolderID: origParentFolderID
                         });
                     }).catch(function(error) {
                         throw error;

openNote/partials/folderPartial.html

@@ -4,14 +4,14 @@
 		  	<li id="parentFolder" ng-if="parentFolder!=null">
 		  		<a href="#/folder/{{parentFolder._id}}">{{parentFolder.name}}</a>
 		  	</li>
-		  	<li class="active" ng-click="activateFolderEditMode();">
+		  	<li id="currentFolder" class="active" ng-click="activateFolderEditMode();">
 		  		{{currentFolder.name}}
 		  	</li>
 		</ol>
 		<div ng-show="folderEditMode" class="ng-hide fadeIn">
 			<button class="customButton ng-hide" ng-click="loadParentFolder();">Go up a folder</button>
-			<button class="customButton" ng-click="renameFolder();">Rename</button>
-			<button class="customButton" ng-click="removeFolder();">Delete</button>
+			<button id="rename" class="customButton" ng-click="renameFolder();">Rename</button>
+			<button id="delete" class="customButton" ng-click="removeFolder();">Delete</button>
 		</div>
 
 	</div>
@@ -39,4 +39,9 @@ <h4>
 			<span class="right">Note</span>
 		</p>
 	</div>
+
+	<div class="noFolderHelp startHidden randomFadeInDirective" ng-if="!currentFolderContents.length">
+		<h4 ng-if="!currentFolder._id">It looks like you dont have any folders. You can create one using the "New Folder" button in the top right of the page. If you need to pull your remote notes <a href='#/settings/database'>click here</a>.</h4>
+		<h4 ng-if="currentFolder._id">This folder is empty.</h4>
+	</div>
 </div>

openNote/partials/navBarPartial.html

@@ -11,10 +11,10 @@
 <div class="navbar-collapse collapse noShadow">
 	<ul class="nav navbar-nav navbar-right">
 		<li ng-repeat="button in buttons">
-        	<button  type="button" class="customButton" ng-click="button.action();">{{button.text}}</button>
+        	<button id="{{button.id}}" type="button" class="customButton" ng-click="button.action();">{{button.text}}</button>
         </li>
         <li>
-        	<button  type="button" class="customButton" onclick="window.location='#/settings'">Settings</button>
+        	<button id="setting" type="button" class="customButton" onclick="window.location='#/settings'">Settings</button>
         </li>
 	</ul>
 </div>

openNote/style/invert/style.less

@@ -19,7 +19,7 @@
 	@treeHandleBackgroundColor: negation(#0b0908, @offset);
 	@treeHandleBorderColor: negation(#231d17, @offset);
 
-	@copyRightColor: negation(#656565, @offset);
+	@copyRightColor: negation(#777777, @offset);
 	@loginInputColor: negation(#444, @offset);
 
 body{
@@ -93,33 +93,6 @@ input:focus, select:focus, textarea:focus, button:focus {
 	border-radius:4px;/*round the corners*/
 }
 
-#folderTitleBar{
-	padding: 0px 0px 15px 0px;
-	overflow: hidden;
-	font-size: 18px;
-
-	.breadcrumb{
-		margin-bottom:0;
-		padding: 0 15px 0 0;
-		background: none;
-		float:left;
-
-		>.active{
-			color:inherit;
-		}
-
-		li{
-			font-size: 20px;
-		}
-	}
-}
-
-	#folderTitle{
-		float:left;
-		padding-right:15px;
-		font-size: 20px;
-	}
-
 .customButton{ /*custom button class that removes all browser formating*/
 	border: none;
 	background:transparent;
@@ -146,21 +119,6 @@ img {
 	float: right;
 }
 
-#sideBar{
-	background: @navBackground;
-
-	/*round the corners*/
-	border-radius:4px ;
-	margin-bottom: 15px;
-	padding: 15px 15px 15px 30px;
-}
-
-#sideBar ul{
-	padding-left: 20px;
-}
-
-
-
 .box{
 	width: 250px;
 	height: 150px;
@@ -193,7 +151,7 @@ img {
 			resize:none;
 
 			/* copied from div.event */
-			color: inherit; /*inherit from parrent*/
+			color: inherit; /*inherit from parent*/
 
 			/*coped from body to prevent glitch*/
 			font-family: inherit;
@@ -259,7 +217,7 @@ img {
 			resize:none;
 
 			/* copied from div.event */
-			color: inherit; /*inherit from parrent*/
+			color: inherit; /*inherit from parent*/
 
 			/*coped from body to prevent glitch*/
 			font-family: inherit;
@@ -295,13 +253,68 @@ img {
 		box-shadow: none;
 	}
 
-	#copyRight{
-		color: @copyRightColor;
-		padding-left: 50px;
-	}
+
+
+// Main
+#copyRight{
+	color: @copyRightColor;
+	padding-left: 50px;
+}
+
+#sideBar{
+	background: @navBackground;
+
+	/*round the corners*/
+	border-radius:4px ;
+	margin-bottom: 15px;
+	padding: 15px 15px 15px 30px;
+}
+
+#sideBar ul{
+	padding-left: 20px;
+}
 
 // Note partial
-.notePartial .CodeMirror{
-	border-radius:0 0 4px 4px;/*round the corners*/
-	size: 75vh;
+.notePartial{
+	 .CodeMirror{
+		border-radius:0 0 4px 4px;/*round the corners*/
+		size: 75vh;
+	}
+}
+
+
+// Folder partial
+.folderPartial{
+	#folderTitleBar{
+		padding: 0px 0px 15px 0px;
+		overflow: hidden;
+		font-size: 18px;
+
+		.breadcrumb{
+			margin-bottom:0;
+			padding: 0 15px 0 0;
+			background: none;
+			float:left;
+
+			>.active{
+				color:inherit;
+			}
+
+			li{
+				font-size: 20px;
+			}
+		}
+	}
+
+		#folderTitle{
+			float:left;
+			padding-right:15px;
+			font-size: 20px;
+		}
+
+	.noFolderHelp{
+		margin-top: 25px;
+	    text-align: center;
+	    color: @copyRightColor
+	}
 }

package.json

@@ -34,12 +34,13 @@
     "grunt-shell": "^0.7.0",
     "script-loader": "^0.7.2",
     "style-loader": "^0.19.0",
+    "testcafe": "^0.18.6",
     "url-loader": "^0.6.2",
     "webpack": "^3.8.1",
     "webpack-dev-server": "^2.9.5"
   },
   "scripts": {
-    "test": "grunt ci",
+    "test": "testcafe chrome ./test/e2e/test.js -e -c 3",
     "dev": "webpack-dev-server --open --hot --config ./build/webpack.dev.config.js",
     "build": "webpack --progress --hide-modules --config ./build/webpack.prod.config.js"
   }