Skip to content

Commit d1c5a13

Browse files
karudedioskarudedios
authored
Merge pull request #2 from karudedios/develop
[Snapshots]
2 parents 0034158 + 6f74f1a commit d1c5a13

File tree

14 files changed

+347
-16
lines changed

14 files changed

+347
-16
lines changed

‎.travis.yml‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ script:
88
branches:
99
only:
1010
- master
11-
- develop
1211

1312
after_script:
1413
- cat ./coverage/lcov.info | yarn coveralls

‎__test__/.eslintrc‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
2-
"globals": [
3-
"inject",
4-
"angular"
5-
]
2+
"globals": {
3+
"inject": 1,
4+
"angular": 1
5+
}
66
}

‎__test__/components/TodoItem.test.js‎

Lines changed: 43 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import createControllerFactory from '../../__utils__/createControllerFactory';
33

44
describe('TodoItem', function() {
55

6+
let createElement;
67
let createController;
78

89
beforeEach(() => {
@@ -11,9 +12,10 @@ describe('TodoItem', function() {
1112

1213
});
1314

14-
beforeEach(inject(createControllerFactory('todoItem', creator => {
15+
beforeEach(inject(createControllerFactory('todoItem', (controllerCreator, elementCreator) => {
1516

16-
createController = creator;
17+
createElement = elementCreator;
18+
createController = controllerCreator;
1719

1820
})));
1921

@@ -58,4 +60,43 @@ describe('TodoItem', function() {
5860

5961
});
6062

63+
describe("Snapshot Testing", function() {
64+
65+
it('should render the element when no todo is provided', function() {
66+
67+
const element = createElement('todoItem');
68+
69+
expect(element).toBeDefined();
70+
expect(element[0]).toMatchSnapshot();
71+
72+
});
73+
74+
it('should render the element when todo is provided with id', function() {
75+
76+
const element = createElement('todoItem', {
77+
todo: {
78+
id: 5
79+
}
80+
});
81+
82+
expect(element).toBeDefined();
83+
expect(element[0]).toMatchSnapshot();
84+
85+
});
86+
87+
it('should render the element when todo is provided with a title', function() {
88+
89+
const element = createElement('todoItem', {
90+
todo: {
91+
title: "Hello!"
92+
}
93+
});
94+
95+
expect(element).toBeDefined();
96+
expect(element[0]).toMatchSnapshot();
97+
98+
});
99+
100+
});
101+
61102
});

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

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`TodoItem Snapshot Testing should render the element when no todo is provided 1`] = `
4+
<todo-item
5+
class="ng-scope ng-isolate-scope"
6+
>
7+
8+
9+
<div
10+
class="todo"
11+
>
12+
13+
14+
<input
15+
data-ng-checked="todoItem.todo.completed"
16+
id="check-"
17+
type="checkbox"
18+
/>
19+
20+
21+
22+
<label
23+
class="todo-title"
24+
data-ng-click="::todoItem.toggleTodo()"
25+
>
26+
27+
28+
<h4
29+
class="ng-binding"
30+
data-ng-bind="::todoItem.todo.title"
31+
/>
32+
33+
34+
</label>
35+
36+
37+
38+
<span
39+
class="svg-icon delete-icon action small"
40+
data-ng-click="::todoItem.removeTodo()"
41+
>
42+
43+
svg-icon
44+
45+
</span>
46+
47+
48+
</div>
49+
50+
51+
</todo-item>
52+
`;
53+
54+
exports[`TodoItem Snapshot Testing should render the element when todo is provided with a title 1`] = `
55+
<todo-item
56+
class="ng-scope ng-isolate-scope"
57+
todo="todo"
58+
>
59+
60+
61+
<div
62+
class="todo"
63+
>
64+
65+
66+
<input
67+
data-ng-checked="todoItem.todo.completed"
68+
id="check-"
69+
type="checkbox"
70+
/>
71+
72+
73+
74+
<label
75+
class="todo-title"
76+
data-ng-click="::todoItem.toggleTodo()"
77+
>
78+
79+
80+
<h4
81+
class="ng-binding"
82+
data-ng-bind="::todoItem.todo.title"
83+
>
84+
Hello!
85+
</h4>
86+
87+
88+
</label>
89+
90+
91+
92+
<span
93+
class="svg-icon delete-icon action small"
94+
data-ng-click="::todoItem.removeTodo()"
95+
>
96+
97+
svg-icon
98+
99+
</span>
100+
101+
102+
</div>
103+
104+
105+
</todo-item>
106+
`;
107+
108+
exports[`TodoItem Snapshot Testing should render the element when todo is provided with id 1`] = `
109+
<todo-item
110+
class="ng-scope ng-isolate-scope"
111+
todo="todo"
112+
>
113+
114+
115+
<div
116+
class="todo"
117+
>
118+
119+
120+
<input
121+
data-ng-checked="todoItem.todo.completed"
122+
id="check-5"
123+
type="checkbox"
124+
/>
125+
126+
127+
128+
<label
129+
class="todo-title"
130+
data-ng-click="::todoItem.toggleTodo()"
131+
>
132+
133+
134+
<h4
135+
class="ng-binding"
136+
data-ng-bind="::todoItem.todo.title"
137+
/>
138+
139+
140+
</label>
141+
142+
143+
144+
<span
145+
class="svg-icon delete-icon action small"
146+
data-ng-click="::todoItem.removeTodo()"
147+
>
148+
149+
svg-icon
150+
151+
</span>
152+
153+
154+
</div>
155+
156+
157+
</todo-item>
158+
`;

‎__test__/services/TodoService.test.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ describe("TodoService", function() {
3131
expect(todo.completed).toEqual(false);
3232
expect(todo.title).toEqual(data.title);
3333

34+
expect(todo).toMatchSnapshot();
35+
3436
});
3537

3638
it('should store a new todo on the "datasource" collection', async function() {
@@ -43,6 +45,8 @@ describe("TodoService", function() {
4345
expect(todos.length).toEqual(1);
4446
expect(R.last(todos)).toEqual(todo);
4547

48+
expect(todo).toMatchSnapshot();
49+
4650
});
4751

4852
it('should allow you to update an existing todo', async function() {
@@ -57,6 +61,8 @@ describe("TodoService", function() {
5761
expect(updatedTodo.title).toEqual('Hello 2');
5862
expect(updatedTodo.completed).toEqual(todo.completed);
5963

64+
expect(updatedTodo).toMatchSnapshot();
65+
6066
});
6167

6268
it('should allow you to delete existing todos', async function() {
@@ -72,6 +78,8 @@ describe("TodoService", function() {
7278
expect(deleted).toEqual(true);
7379
expect(allTodos.length).toEqual(0);
7480

81+
expect(allTodos).toMatchSnapshot();
82+
7583
});
7684

7785
it('should throw an error if todo id does not exist when trying to update', async function() {
@@ -84,6 +92,8 @@ describe("TodoService", function() {
8492

8593
expect(e.message).toEqual('Todo not found');
8694

95+
expect(e).toMatchSnapshot();
96+
8797
}
8898

8999
});
@@ -98,6 +108,8 @@ describe("TodoService", function() {
98108

99109
expect(e.message).toEqual('Todo not found');
100110

111+
expect(e).toMatchSnapshot();
112+
101113
}
102114

103115
});

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`TodoService should allow you to delete existing todos 1`] = `Array []`;
4+
5+
exports[`TodoService should allow you to update an existing todo 1`] = `
6+
Object {
7+
"completed": false,
8+
"id": 8,
9+
"title": "Hello 2",
10+
}
11+
`;
12+
13+
exports[`TodoService should return a new instance of a Todo object on \`new\` call 1`] = `
14+
Todo {
15+
"completed": false,
16+
"id": 6,
17+
"title": "Hello",
18+
}
19+
`;
20+
21+
exports[`TodoService should store a new todo on the "datasource" collection 1`] = `
22+
Todo {
23+
"completed": false,
24+
"id": 7,
25+
"title": "Hello",
26+
}
27+
`;
28+
29+
exports[`TodoService should throw an error if todo id does not exist when trying to delete 1`] = `[Error: Todo not found]`;
30+
31+
exports[`TodoService should throw an error if todo id does not exist when trying to update 1`] = `[Error: Todo not found]`;

‎__utils__/createControllerFactory.js‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export default function(controllerName, cb) {
22

3-
return function($componentController) {
3+
return function($componentController, $rootScope, $compile) {
44

55
cb(function(params) {
66

@@ -10,6 +10,27 @@ export default function(controllerName, cb) {
1010

1111
return controller;
1212

13+
}, function(elementName, props = {}) {
14+
const scope = $rootScope.$new();
15+
const keys = Object.keys(props);
16+
Object.assign(scope, props);
17+
18+
const htmlElementName = camelCaseToDashCase(elementName);
19+
20+
const htmlProps = keys.map(key => {
21+
return `${camelCaseToDashCase(key)}="${key}"`
22+
}, '').join(' ');
23+
24+
const element = $compile(`<${htmlElementName} ${htmlProps}></${htmlElementName}>`)(scope);
25+
26+
scope.$apply(); // Make sure we actually perform any HTML change
27+
28+
return element;
29+
30+
function camelCaseToDashCase(str) {
31+
return str.replace(/[A-Z]/g, $1 => `-${$1.toLowerCase()}`);
32+
}
33+
1334
});
1435

1536
};

‎__utils__/htmlLoader.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,7 @@
1-
module.exports = ""
1+
const htmlLoader = require('html-loader');
2+
3+
module.exports = {
4+
process(src) {
5+
return htmlLoader(src);
6+
}
7+
};

‎__utils__/styleMock.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
module.exports = {};
1+
module.exports = "styling-file";

‎__utils__/svgLoader.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = "svg-icon";

0 commit comments

Comments
 (0)