[Snapshots]

.travis.yml

@@ -8,7 +8,6 @@ script:
 branches:
   only:
     - master
-    - develop
 
 after_script:
   - cat ./coverage/lcov.info | yarn coveralls

__test__/.eslintrc

@@ -1,6 +1,6 @@
 {
-  "globals": [
-    "inject",
-    "angular"
-  ]
+  "globals": {
+    "inject": 1,
+    "angular": 1
+  }
 }

__test__/components/TodoItem.test.js

@@ -3,6 +3,7 @@ import createControllerFactory from '../../__utils__/createControllerFactory';
 
 describe('TodoItem', function() {
 
+  let createElement;
   let createController;
 
   beforeEach(() => {
@@ -11,9 +12,10 @@ describe('TodoItem', function() {
 
   });
 
-  beforeEach(inject(createControllerFactory('todoItem', creator => {
+  beforeEach(inject(createControllerFactory('todoItem', (controllerCreator, elementCreator) => {
 
-    createController = creator;
+    createElement = elementCreator;
+    createController = controllerCreator;
 
   })));
 
@@ -58,4 +60,43 @@ describe('TodoItem', function() {
 
   });
 
+  describe("Snapshot Testing", function() {
+
+    it('should render the element when no todo is provided', function() {
+
+      const element = createElement('todoItem');
+
+      expect(element).toBeDefined();
+      expect(element[0]).toMatchSnapshot();
+
+    });
+
+    it('should render the element when todo is provided with id', function() {
+
+      const element = createElement('todoItem', {
+        todo: {
+          id: 5
+        }
+      });
+
+      expect(element).toBeDefined();
+      expect(element[0]).toMatchSnapshot();
+
+    });
+
+    it('should render the element when todo is provided with a title', function() {
+
+      const element = createElement('todoItem', {
+        todo: {
+          title: "Hello!"
+        }
+      });
+
+      expect(element).toBeDefined();
+      expect(element[0]).toMatchSnapshot();
+
+    });
+
+  });
+
 });

__test__/components/__snapshots__/TodoItem.test.js.snap

@@ -0,0 +1,158 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TodoItem Snapshot Testing should render the element when no todo is provided 1`] = `
+<todo-item
+  class="ng-scope ng-isolate-scope"
+>
+
+
+  <div
+    class="todo"
+  >
+
+
+    <input
+      data-ng-checked="todoItem.todo.completed"
+      id="check-"
+      type="checkbox"
+    />
+
+
+
+    <label
+      class="todo-title"
+      data-ng-click="::todoItem.toggleTodo()"
+    >
+
+
+      <h4
+        class="ng-binding"
+        data-ng-bind="::todoItem.todo.title"
+      />
+
+
+    </label>
+
+
+
+    <span
+      class="svg-icon delete-icon action small"
+      data-ng-click="::todoItem.removeTodo()"
+    >
+
+        svg-icon
+
+    </span>
+
+
+  </div>
+
+
+</todo-item>
+`;
+
+exports[`TodoItem Snapshot Testing should render the element when todo is provided with a title 1`] = `
+<todo-item
+  class="ng-scope ng-isolate-scope"
+  todo="todo"
+>
+
+
+  <div
+    class="todo"
+  >
+
+
+    <input
+      data-ng-checked="todoItem.todo.completed"
+      id="check-"
+      type="checkbox"
+    />
+
+
+
+    <label
+      class="todo-title"
+      data-ng-click="::todoItem.toggleTodo()"
+    >
+
+
+      <h4
+        class="ng-binding"
+        data-ng-bind="::todoItem.todo.title"
+      >
+        Hello!
+      </h4>
+
+
+    </label>
+
+
+
+    <span
+      class="svg-icon delete-icon action small"
+      data-ng-click="::todoItem.removeTodo()"
+    >
+
+        svg-icon
+
+    </span>
+
+
+  </div>
+
+
+</todo-item>
+`;
+
+exports[`TodoItem Snapshot Testing should render the element when todo is provided with id 1`] = `
+<todo-item
+  class="ng-scope ng-isolate-scope"
+  todo="todo"
+>
+
+
+  <div
+    class="todo"
+  >
+
+
+    <input
+      data-ng-checked="todoItem.todo.completed"
+      id="check-5"
+      type="checkbox"
+    />
+
+
+
+    <label
+      class="todo-title"
+      data-ng-click="::todoItem.toggleTodo()"
+    >
+
+
+      <h4
+        class="ng-binding"
+        data-ng-bind="::todoItem.todo.title"
+      />
+
+
+    </label>
+
+
+
+    <span
+      class="svg-icon delete-icon action small"
+      data-ng-click="::todoItem.removeTodo()"
+    >
+
+        svg-icon
+
+    </span>
+
+
+  </div>
+
+
+</todo-item>
+`;

__test__/services/TodoService.test.js

@@ -31,6 +31,8 @@ describe("TodoService", function() {
     expect(todo.completed).toEqual(false);
     expect(todo.title).toEqual(data.title);
 
+    expect(todo).toMatchSnapshot();
+
   });
 
   it('should store a new todo on the "datasource" collection', async function() {
@@ -43,6 +45,8 @@ describe("TodoService", function() {
     expect(todos.length).toEqual(1);
     expect(R.last(todos)).toEqual(todo);
 
+    expect(todo).toMatchSnapshot();
+
   });
 
   it('should allow you to update an existing todo', async function() {
@@ -57,6 +61,8 @@ describe("TodoService", function() {
     expect(updatedTodo.title).toEqual('Hello 2');
     expect(updatedTodo.completed).toEqual(todo.completed);
 
+    expect(updatedTodo).toMatchSnapshot();
+
   });
 
   it('should allow you to delete existing todos', async function() {
@@ -72,6 +78,8 @@ describe("TodoService", function() {
     expect(deleted).toEqual(true);
     expect(allTodos.length).toEqual(0);
 
+    expect(allTodos).toMatchSnapshot();
+
   });
 
   it('should throw an error if todo id does not exist when trying to update', async function() {
@@ -84,6 +92,8 @@ describe("TodoService", function() {
 
       expect(e.message).toEqual('Todo not found');
 
+      expect(e).toMatchSnapshot();
+
     }
 
   });
@@ -98,6 +108,8 @@ describe("TodoService", function() {
 
       expect(e.message).toEqual('Todo not found');
 
+      expect(e).toMatchSnapshot();
+
     }
 
   });

__test__/services/__snapshots__/TodoService.test.js.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TodoService should allow you to delete existing todos 1`] = `Array []`;
+
+exports[`TodoService should allow you to update an existing todo 1`] = `
+Object {
+  "completed": false,
+  "id": 8,
+  "title": "Hello 2",
+}
+`;
+
+exports[`TodoService should return a new instance of a Todo object on \`new\` call 1`] = `
+Todo {
+  "completed": false,
+  "id": 6,
+  "title": "Hello",
+}
+`;
+
+exports[`TodoService should store a new todo on the "datasource" collection 1`] = `
+Todo {
+  "completed": false,
+  "id": 7,
+  "title": "Hello",
+}
+`;
+
+exports[`TodoService should throw an error if todo id does not exist when trying to delete 1`] = `[Error: Todo not found]`;
+
+exports[`TodoService should throw an error if todo id does not exist when trying to update 1`] = `[Error: Todo not found]`;

__utils__/createControllerFactory.js

@@ -1,6 +1,6 @@
 export default function(controllerName, cb) {
 
-  return function($componentController) {
+  return function($componentController, $rootScope, $compile) {
 
     cb(function(params) {
 
@@ -10,6 +10,27 @@ export default function(controllerName, cb) {
 
       return controller;
 
+    }, function(elementName, props = {}) {
+        const scope = $rootScope.$new();
+        const keys = Object.keys(props);
+        Object.assign(scope, props);
+
+        const htmlElementName = camelCaseToDashCase(elementName);
+
+        const htmlProps = keys.map(key => {
+          return `${camelCaseToDashCase(key)}="${key}"`
+        }, '').join(' ');
+
+        const element = $compile(`<${htmlElementName} ${htmlProps}></${htmlElementName}>`)(scope);
+
+        scope.$apply(); // Make sure we actually perform any HTML change
+
+        return element;
+
+        function camelCaseToDashCase(str) {
+          return str.replace(/[A-Z]/g, $1 => `-${$1.toLowerCase()}`);
+        }
+
     });
 
   };

__utils__/htmlLoader.js

@@ -1 +1,7 @@
-module.exports = ""
+const htmlLoader = require('html-loader');
+
+module.exports = {
+  process(src) {
+    return htmlLoader(src);
+  }
+};

__utils__/styleMock.js

@@ -1 +1 @@
-module.exports = {};
+module.exports = "styling-file";

__utils__/svgLoader.js

@@ -0,0 +1 @@
+module.exports = "svg-icon";