MAAS

Merge ~ya-bo-ng/maas:enable-fix-js-tests into maas:master

  1. Git
  2. lp:~ya-bo-ng/maas
  3. enable-fix-js-tests
  4. Merge into master
Proposed by Anthony Dillon
Status: Merged
Approved by: Andres Rodriguez
Approved revision: 2a352f401a54e59857389b9d9108f68e35da6716
Merge reported by: MAAS Lander
Merged at revision: not available
Proposed branch: ~ya-bo-ng/maas:enable-fix-js-tests
Merge into: maas:master
Diff against target: 843 lines (+139/-166)
7 files modified
src/maasserver/static/js/angular/directives/call_to_action.js (+1/-1)
src/maasserver/static/js/angular/directives/maas_obj_form.js (+2/-2)
src/maasserver/static/js/angular/directives/tests/test_accordion.js (+17/-12)
src/maasserver/static/js/angular/directives/tests/test_call_to_action.js (+20/-19)
src/maasserver/static/js/angular/directives/tests/test_code_lines.js (+2/-2)
src/maasserver/static/js/angular/directives/tests/test_controller_status.js (+3/-2)
src/maasserver/static/js/angular/directives/tests/test_maas_obj_form.js (+94/-128)
Reviewer Review Type Date Requested Status
Blake Rouse (community) Approve
Review via email: mp+338427@code.launchpad.net

Commit message

LP: #1750092 - Enable and fix js tests

Description of the change

Enabled all the disabled JavaScript tests. Updated the tests to use the new Vanilla classes and mark up. All tests should still pass.

To post a comment you must log in.
Revision history for this message
Blake Rouse (blake-rouse) wrote :

Thank you for fixing these tests.

review: Approve
Revision history for this message
MAAS Lander (maas-lander) wrote :

LANDING
-b enable-fix-js-tests lp:~ya-bo-ng/maas/+git/maas into -b master lp:~maas-committers/maas

STATUS: FAILED BUILD
LOG: http://maas-ci-jenkins.internal:8080/job/maas/job/branch-tester/1661/consoleText

~ya-bo-ng/maas:enable-fix-js-tests updated
2a352f4... by Anthony Dillon

Fix js-lint issues

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
diff --git a/src/maasserver/static/js/angular/directives/call_to_action.js b/src/maasserver/static/js/angular/directives/call_to_action.js
index 9416530..b82d57c 100644
--- a/src/maasserver/static/js/angular/directives/call_to_action.js
+++ b/src/maasserver/static/js/angular/directives/call_to_action.js
@@ -16,7 +16,7 @@ angular.module('MAAS').run(['$templateCache', function ($templateCache) {
16 'data-ng-click="shown=!shown"',16 'data-ng-click="shown=!shown"',
17 '>',17 '>',
18 '{$ getTitle() $}',18 '{$ getTitle() $}',
19 '&nbsp;&nbsp;<i class="p-icon--chevron"></i>',19 '<i class="p-icon--chevron"></i>',
20 '</button>',20 '</button>',
21 '<div class="p-contextual-menu__dropdown" ',21 '<div class="p-contextual-menu__dropdown" ',
22 'id="cta-menu" ',22 'id="cta-menu" ',
diff --git a/src/maasserver/static/js/angular/directives/maas_obj_form.js b/src/maasserver/static/js/angular/directives/maas_obj_form.js
index b9f3a3c..954b94b 100644
--- a/src/maasserver/static/js/angular/directives/maas_obj_form.js
+++ b/src/maasserver/static/js/angular/directives/maas_obj_form.js
@@ -337,7 +337,7 @@ angular.module('MAAS').directive('maasObjForm', ['JSONService',
337 },337 },
338 transclude: true,338 transclude: true,
339 template: (339 template: (
340 '<form class="form" data-ng-class="{saving: saving, ' +340 '<form class="p-form" data-ng-class="{saving: saving, ' +
341 '\'p-form--inline\': inline, ' +341 '\'p-form--inline\': inline, ' +
342 '\'p-form--stacked\': tableForm}" ' +342 '\'p-form--stacked\': tableForm}" ' +
343 'ng-transclude></form>'),343 'ng-transclude></form>'),
@@ -963,7 +963,7 @@ angular.module('MAAS').directive('maasObjField', ['$compile',
963963
964 // Called by controller to see if error is set on field.964 // Called by controller to see if error is set on field.
965 scope.hasErrors = function() {965 scope.hasErrors = function() {
966 return inputElement.hasClass("has-error");966 return inputWrapper.hasClass("is-error");
967 };967 };
968968
969 // Subtle text element.969 // Subtle text element.
diff --git a/src/maasserver/static/js/angular/directives/tests/test_accordion.js b/src/maasserver/static/js/angular/directives/tests/test_accordion.js
index 66305db..b1ad60f 100644
--- a/src/maasserver/static/js/angular/directives/tests/test_accordion.js
+++ b/src/maasserver/static/js/angular/directives/tests/test_accordion.js
@@ -22,7 +22,7 @@ describe("maasAccodion", function() {
22 var html = [22 var html = [
23 '<div>',23 '<div>',
24 '<div class="maas-accordion">',24 '<div class="maas-accordion">',
25 '<h4 class="maas-accordion-tab is-active">One</h4>',25 '<h4 class="maas-accordion-tab is-selected">One</h4>',
26 '<h4 class="maas-accordion-tab">Two</h4>',26 '<h4 class="maas-accordion-tab">Two</h4>',
27 '<h4 class="maas-accordion-tab">Three</h4>',27 '<h4 class="maas-accordion-tab">Three</h4>',
28 '</div>',28 '</div>',
@@ -46,23 +46,28 @@ describe("maasAccodion", function() {
46 tabs = directive.find('.maas-accordion-tab');46 tabs = directive.find('.maas-accordion-tab');
47 });47 });
4848
49 xit("sets a new active removing other actives", function() {49 it("sets a new selected and leaves others open", function() {
50 angular.element(tabs[1]).click();50 angular.element(tabs[1]).click();
51 expect(angular.element(tabs[0]).hasClass("is-active")).toBe(false);51 expect(angular.element(tabs[0]).hasClass("is-selected")).toBe(true);
52 expect(angular.element(tabs[1]).hasClass("is-active")).toBe(true);52 expect(angular.element(tabs[1]).hasClass("is-selected")).toBe(true);
53 expect(angular.element(tabs[2]).hasClass("is-active")).toBe(false);53 expect(angular.element(tabs[2]).hasClass("is-selected")).toBe(false);
5454
55 angular.element(tabs[2]).click();55 angular.element(tabs[2]).click();
56 expect(angular.element(tabs[0]).hasClass("is-active")).toBe(false);56 expect(angular.element(tabs[0]).hasClass("is-selected")).toBe(true);
57 expect(angular.element(tabs[1]).hasClass("is-active")).toBe(false);57 expect(angular.element(tabs[1]).hasClass("is-selected")).toBe(true);
58 expect(angular.element(tabs[2]).hasClass("is-active")).toBe(true);58 expect(angular.element(tabs[2]).hasClass("is-selected")).toBe(true);
59 });59 });
6060
61 it("leaves current active if clicked", function() {61 it("closes a section when clicked and open", function() {
62 angular.element(tabs[1]).click();
63 expect(angular.element(tabs[0]).hasClass("is-selected")).toBe(true);
64 expect(angular.element(tabs[1]).hasClass("is-selected")).toBe(true);
65 expect(angular.element(tabs[2]).hasClass("is-selected")).toBe(false);
66
62 angular.element(tabs[0]).click();67 angular.element(tabs[0]).click();
63 expect(angular.element(tabs[0]).hasClass("is-active")).toBe(true);68 expect(angular.element(tabs[0]).hasClass("is-selected")).toBe(false);
64 expect(angular.element(tabs[1]).hasClass("is-active")).toBe(false);69 expect(angular.element(tabs[1]).hasClass("is-selected")).toBe(true);
65 expect(angular.element(tabs[2]).hasClass("is-active")).toBe(false);70 expect(angular.element(tabs[2]).hasClass("is-selected")).toBe(false);
66 });71 });
6772
68 it("removes all click handlers on $destroy", function() {73 it("removes all click handlers on $destroy", function() {
diff --git a/src/maasserver/static/js/angular/directives/tests/test_call_to_action.js b/src/maasserver/static/js/angular/directives/tests/test_call_to_action.js
index 696e019..97fe8d1 100644
--- a/src/maasserver/static/js/angular/directives/tests/test_call_to_action.js
+++ b/src/maasserver/static/js/angular/directives/tests/test_call_to_action.js
@@ -4,7 +4,7 @@
4 * Unit tests for Call-To-Action dropdown directive.4 * Unit tests for Call-To-Action dropdown directive.
5 */5 */
66
7xdescribe("maasCta", function() {7describe("maasCta", function() {
88
9 // Load the MAAS module.9 // Load the MAAS module.
10 beforeEach(module("MAAS"));10 beforeEach(module("MAAS"));
@@ -66,25 +66,26 @@ xdescribe("maasCta", function() {
66 it("sets default title to 'Take action'", function() {66 it("sets default title to 'Take action'", function() {
67 var directive = compileDirective("items", "active");67 var directive = compileDirective("items", "active");
68 expect(68 expect(
69 directive.find("button.button-group__link").text())69 directive.find("button.p-contextual-menu__toggle").text())
70 .toBe("Take action");70 .toBe("Take action");
71 });71 });
7272
73 it("sets default title to another name", function() {73 it("sets default title to another name", function() {
74 var name = makeName("title");74 var name = makeName("title");
75 var directive = compileDirective("items", "active", null, null, name);75 var directive = compileDirective("items", "active", null, null, name);
76 expect(directive.find("button.button-group__link").text()).toBe(name);76 var selector = "button.p-contextual-menu__toggle";
77 expect(directive.find(selector).text()).toBe(name);
77 });78 });
7879
79 it("click link sets shown to true", function() {80 it("click link sets shown to true", function() {
80 var directive = compileDirective("items", "active");81 var directive = compileDirective("items", "active");
81 directive.find("button.button-group__link").click();82 directive.find("button.p-contextual-menu__toggle").click();
82 expect(directive.isolateScope().shown).toBe(true);83 expect(directive.isolateScope().shown).toBe(true);
83 });84 });
8485
85 it("dropdown hidden when shown is false", function() {86 it("dropdown hidden when shown is false", function() {
86 var directive = compileDirective("items", "active");87 var directive = compileDirective("items", "active");
87 var dropdown = directive.find("ul.button-group__dropdown");88 var dropdown = directive.find("div.p-contextual-menu__dropdown");
88 expect(dropdown.hasClass("ng-hide")).toBe(true);89 expect(dropdown.hasClass("ng-hide")).toBe(true);
89 });90 });
9091
@@ -93,7 +94,7 @@ xdescribe("maasCta", function() {
93 directive.isolateScope().shown = true;94 directive.isolateScope().shown = true;
94 $scope.$digest();95 $scope.$digest();
9596
96 var dropdown = directive.find("ul.button-group__dropdown");97 var dropdown = directive.find("div.p-contextual-menu__dropdown");
97 expect(dropdown.hasClass("ng-hide")).toBe(false);98 expect(dropdown.hasClass("ng-hide")).toBe(false);
98 });99 });
99100
@@ -107,7 +108,7 @@ xdescribe("maasCta", function() {
107108
108 it("dropdown list options", function() {109 it("dropdown list options", function() {
109 var directive = compileDirective("items", "active");110 var directive = compileDirective("items", "active");
110 var links = directive.find("li.button-group__item > button");111 var links = directive.find("div.p-contextual-menu__dropdown > button");
111112
112 var listItems = [];113 var listItems = [];
113 angular.forEach(links, function(ele, i) {114 angular.forEach(links, function(ele, i) {
@@ -123,10 +124,10 @@ xdescribe("maasCta", function() {
123124
124 it("dropdown select sets shown to false", function() {125 it("dropdown select sets shown to false", function() {
125 var directive = compileDirective("items", "active");126 var directive = compileDirective("items", "active");
126 var links = directive.find("li.button-group__item > button");127 var links = directive.find("div.p-contextual-menu__dropdown > button");
127128
128 // Open the dropdown.129 // Open the dropdown.
129 directive.find("button.button-group__link").click();130 directive.find("button.p-contextual-menu__toggle").click();
130 expect(directive.isolateScope().shown).toBe(true);131 expect(directive.isolateScope().shown).toBe(true);
131132
132 // Clicking a link should close the dropdown.133 // Clicking a link should close the dropdown.
@@ -136,7 +137,7 @@ xdescribe("maasCta", function() {
136137
137 it("dropdown select sets model", function() {138 it("dropdown select sets model", function() {
138 var directive = compileDirective("items", "active");139 var directive = compileDirective("items", "active");
139 var links = directive.find("li.button-group__item > button");140 var links = directive.find("div.p-contextual-menu__dropdown > button");
140141
141 angular.element(links[0]).click();142 angular.element(links[0]).click();
142 expect(directive.scope().active).toBe($scope.items[0]);143 expect(directive.scope().active).toBe($scope.items[0]);
@@ -144,16 +145,16 @@ xdescribe("maasCta", function() {
144145
145 it("dropdown select sets title", function() {146 it("dropdown select sets title", function() {
146 var directive = compileDirective("items", "active");147 var directive = compileDirective("items", "active");
147 var links = directive.find("li.button-group__item > button");148 var links = directive.find("div.p-contextual-menu__dropdown > button");
148149
149 angular.element(links[0]).click();150 angular.element(links[0]).click();
150 var title = directive.find("button.button-group__link").text();151 var title = directive.find("button.p-contextual-menu__toggle").text();
151 expect(title).toBe($scope.items[0].title);152 expect(title).toBe($scope.items[0].title);
152 });153 });
153154
154 it("dropdown select sets secondary", function() {155 it("dropdown select sets secondary", function() {
155 var directive = compileDirective("items", "active");156 var directive = compileDirective("items", "active");
156 var links = directive.find("li.button-group__item > button");157 var links = directive.find("div.p-contextual-menu__dropdown > button");
157158
158 angular.element(links[0]).click();159 angular.element(links[0]).click();
159 expect(directive.isolateScope().secondary).toBe(true);160 expect(directive.isolateScope().secondary).toBe(true);
@@ -162,7 +163,7 @@ xdescribe("maasCta", function() {
162 it("dropdown select sets selectedTitle", function() {163 it("dropdown select sets selectedTitle", function() {
163 $scope.items[0].selectedTitle = "Different if Selected";164 $scope.items[0].selectedTitle = "Different if Selected";
164 var directive = compileDirective("items", "active");165 var directive = compileDirective("items", "active");
165 var links = directive.find("li.button-group__item > button");166 var links = directive.find("div.p-contextual-menu__dropdown > button");
166167
167 var iscope = directive.isolateScope();168 var iscope = directive.isolateScope();
168 expect(iscope.getTitle()).toBe("Take action");169 expect(iscope.getTitle()).toBe("Take action");
@@ -173,7 +174,7 @@ xdescribe("maasCta", function() {
173 it("dropdown select sets other options' selectedTitle", function() {174 it("dropdown select sets other options' selectedTitle", function() {
174 $scope.items[1].selectedTitle = "Different if Selected";175 $scope.items[1].selectedTitle = "Different if Selected";
175 var directive = compileDirective("items", "active");176 var directive = compileDirective("items", "active");
176 var links = directive.find("li.button-group__item > button");177 var links = directive.find("div.p-contextual-menu__dropdown > button");
177178
178 var iscope = directive.isolateScope();179 var iscope = directive.isolateScope();
179 expect(iscope.getTitle()).toBe("Take action");180 expect(iscope.getTitle()).toBe("Take action");
@@ -184,10 +185,10 @@ xdescribe("maasCta", function() {
184185
185 it("clicking body will set shown to false", function() {186 it("clicking body will set shown to false", function() {
186 var directive = compileDirective("items", "active");187 var directive = compileDirective("items", "active");
187 var links = directive.find("li.button-group__item > button");188 var links = directive.find("div.p-contextual-menu__dropdown > button");
188189
189 // Open the dropdown.190 // Open the dropdown.
190 directive.find("button.button-group__link").click();191 directive.find("button.p-contextual-menu__toggle").click();
191 expect(directive.isolateScope().shown).toBe(true);192 expect(directive.isolateScope().shown).toBe(true);
192193
193 // Click the body.194 // Click the body.
@@ -203,10 +204,10 @@ xdescribe("maasCta", function() {
203 it("clicking button will fire ng-click", function() {204 it("clicking button will fire ng-click", function() {
204 $scope.clicked = jasmine.createSpy("clicked");205 $scope.clicked = jasmine.createSpy("clicked");
205 var directive = compileDirective("items", "active", null, "clicked()");206 var directive = compileDirective("items", "active", null, "clicked()");
206 var links = directive.find("li.button-group__item > button");207 var links = directive.find("div.p-contextual-menu__dropdown > button");
207208
208 // Open the dropdown.209 // Open the dropdown.
209 directive.find("button.button-group__link").click();210 directive.find("button.p-contextual-menu__toggle").click();
210 expect($scope.clicked).toHaveBeenCalled();211 expect($scope.clicked).toHaveBeenCalled();
211 });212 });
212});213});
diff --git a/src/maasserver/static/js/angular/directives/tests/test_code_lines.js b/src/maasserver/static/js/angular/directives/tests/test_code_lines.js
index 398f37f..80028b4 100644
--- a/src/maasserver/static/js/angular/directives/tests/test_code_lines.js
+++ b/src/maasserver/static/js/angular/directives/tests/test_code_lines.js
@@ -4,7 +4,7 @@
4 * Unit tests for placeholder directive.4 * Unit tests for placeholder directive.
5 */5 */
66
7xdescribe("maasCodeLines", function() {7describe("maasCodeLines", function() {
88
9// Load the MAAS module.9// Load the MAAS module.
10beforeEach(module("MAAS"));10beforeEach(module("MAAS"));
@@ -41,6 +41,6 @@ beforeEach(module("MAAS"));
41 };41 };
4242
43 var directive = compileDirective("getText()");43 var directive = compileDirective("getText()");
44 expect(directive.find('code').hasClass("code-block__line")).toBe(true);44 expect(directive.find('code span').hasClass("code-line")).toBe(true);
45 });45 });
46});46});
diff --git a/src/maasserver/static/js/angular/directives/tests/test_controller_status.js b/src/maasserver/static/js/angular/directives/tests/test_controller_status.js
index 387a6f6..3e77bff 100644
--- a/src/maasserver/static/js/angular/directives/tests/test_controller_status.js
+++ b/src/maasserver/static/js/angular/directives/tests/test_controller_status.js
@@ -65,13 +65,14 @@ describe("maasControllerStatus", function() {
65 return directive.find("div");65 return directive.find("div");
66 }66 }
6767
68 xit("sets serviceClass in the class for element", function() {68 it("sets serviceClass in the class for element", function() {
69 var directive = compileDirective();69 var directive = compileDirective();
70 var serviceClass = makeName("serviceClass");70 var serviceClass = makeName("serviceClass");
71 directive.isolateScope().serviceClass = serviceClass;71 directive.isolateScope().serviceClass = serviceClass;
72 $scope.$digest();72 $scope.$digest();
73 expect(73 expect(
74 directive.find("span").hasClass("icon--" + serviceClass)).toBe(true);74 directive.find("span").hasClass("p-icon--" + serviceClass)
75 ).toBe(true);
75 });76 });
7677
77 it("services is ServicesManager.getItems()", function() {78 it("services is ServicesManager.getItems()", function() {
diff --git a/src/maasserver/static/js/angular/directives/tests/test_maas_obj_form.js b/src/maasserver/static/js/angular/directives/tests/test_maas_obj_form.js
index 95c0aed..d37b891 100644
--- a/src/maasserver/static/js/angular/directives/tests/test_maas_obj_form.js
+++ b/src/maasserver/static/js/angular/directives/tests/test_maas_obj_form.js
@@ -4,7 +4,7 @@
4 * Unit tests for MAAS object form.4 * Unit tests for MAAS object form.
5 */5 */
66
7xdescribe("maasObjForm", function() {7describe("maasObjForm", function() {
88
9 // Load the MAAS module.9 // Load the MAAS module.
10 beforeEach(module("MAAS"));10 beforeEach(module("MAAS"));
@@ -42,20 +42,10 @@ xdescribe("maasObjForm", function() {
42 $scope.$digest();42 $scope.$digest();
43 }43 }
4444
45 // Return the list of rendered errors on the field.
46 function getFieldErrorList(field) {
47 var errors = [];
48 var lis = field.siblings("ul.form__error").children();
49 lis.each(function() {
50 errors.push(angular.element(this).text());
51 });
52 return errors;
53 }
54
55 // Return the list of rendered errors in the element.45 // Return the list of rendered errors in the element.
56 function getErrorList(element) {46 function getErrorList(element) {
57 var errors = [];47 var errors = [];
58 var lis = element.find("ul.form__error").children();48 var lis = element.find("ul.p-list").children();
59 lis.each(function() {49 lis.each(function() {
60 errors.push(angular.element(this).text());50 errors.push(angular.element(this).text());
61 });51 });
@@ -64,7 +54,7 @@ xdescribe("maasObjForm", function() {
6454
65 describe("inline form", function() {55 describe("inline form", function() {
6656
67 it("adds 'form--inline'", function() {57 it("adds 'p-form--inline'", function() {
68 $scope.obj = {};58 $scope.obj = {};
69 $scope.manager = {};59 $scope.manager = {};
70 var html = [60 var html = [
@@ -73,7 +63,7 @@ xdescribe("maasObjForm", function() {
73 ].join('');63 ].join('');
74 var directive = compileDirective(html);64 var directive = compileDirective(html);
75 var form = directive.find("form");65 var form = directive.find("form");
76 expect(form.hasClass("form--inline")).toBe(true);66 expect(form.hasClass("p-form--inline")).toBe(true);
77 });67 });
78 });68 });
7969
@@ -89,8 +79,8 @@ xdescribe("maasObjForm", function() {
89 var html = [79 var html = [
90 '<maas-obj-form obj="obj" manager="manager">',80 '<maas-obj-form obj="obj" manager="manager">',
91 '<maas-obj-field type="text" key="key" label="Key" ',81 '<maas-obj-field type="text" key="key" label="Key" ',
92 'placeholder="Placeholder" label-width="two" ',82 'placeholder="Placeholder" label-width="2" ',
93 'input-width="three"></maas-obj-field>',83 'input-width="3"></maas-obj-field>',
94 '</maas-obj-form>'84 '</maas-obj-form>'
95 ].join('');85 ].join('');
96 directive = compileDirective(html);86 directive = compileDirective(html);
@@ -110,14 +100,13 @@ xdescribe("maasObjForm", function() {
110 it("adds label with width", function() {100 it("adds label with width", function() {
111 var labelField = angular.element(directive.find("label"));101 var labelField = angular.element(directive.find("label"));
112 expect(labelField.text()).toBe("Key");102 expect(labelField.text()).toBe("Key");
113 expect(labelField.hasClass("two-col")).toBe(true);103 expect(labelField.hasClass("col-2")).toBe(true);
114 });104 });
115105
116 it("adds inputWrapper with width", function() {106 it("adds inputWrapper with width", function() {
117 var labelField = angular.element(directive.find("label "));107 var labelField = angular.element(directive.find("label "));
118 var inputWrapper = angular.element(labelField.next("div"));108 var inputWrapper = angular.element(labelField.next("div"));
119 expect(inputWrapper.hasClass("three-col")).toBe(true);109 expect(inputWrapper.hasClass("col-3")).toBe(true);
120 expect(inputWrapper.hasClass("last-col")).toBe(true);
121 });110 });
122111
123 it("reverts value on esc", function() {112 it("reverts value on esc", function() {
@@ -137,9 +126,9 @@ xdescribe("maasObjForm", function() {
137 expect($scope.obj.$maasForm).toBeDefined();126 expect($scope.obj.$maasForm).toBeDefined();
138 });127 });
139128
140 it("hasErrors returns true if has-error class exists", function() {129 it("hasErrors returns true if is-error class exists", function() {
141 var inputField = angular.element(directive.find("#key"));130 var control = angular.element(directive.find('.p-form__control'));
142 inputField.addClass('has-error');131 control.addClass('is-error');
143 expect($scope.obj.$maasForm.hasErrors()).toBe(true);132 expect($scope.obj.$maasForm.hasErrors()).toBe(true);
144 });133 });
145 });134 });
@@ -153,8 +142,8 @@ xdescribe("maasObjForm", function() {
153 var html = [142 var html = [
154 '<maas-obj-form obj="obj" manager="manager">',143 '<maas-obj-form obj="obj" manager="manager">',
155 '<maas-obj-field type="textarea" key="key" label="Key" ',144 '<maas-obj-field type="textarea" key="key" label="Key" ',
156 'placeholder="Placeholder" label-width="two" ',145 'placeholder="Placeholder" label-width="2" ',
157 'input-width="three"></maas-obj-field>',146 'input-width="3"></maas-obj-field>',
158 '</maas-obj-form>'147 '</maas-obj-form>'
159 ].join('');148 ].join('');
160 directive = compileDirective(html);149 directive = compileDirective(html);
@@ -173,14 +162,13 @@ xdescribe("maasObjForm", function() {
173 it("adds label with width", function() {162 it("adds label with width", function() {
174 var labelField = angular.element(directive.find("label"));163 var labelField = angular.element(directive.find("label"));
175 expect(labelField.text()).toBe("Key");164 expect(labelField.text()).toBe("Key");
176 expect(labelField.hasClass("two-col")).toBe(true);165 expect(labelField.hasClass("col-2")).toBe(true);
177 });166 });
178167
179 it("adds inputWrapper with width", function() {168 it("adds inputWrapper with width", function() {
180 var labelField = angular.element(directive.find("label "));169 var labelField = angular.element(directive.find("label "));
181 var inputWrapper = angular.element(labelField.next("div"));170 var inputWrapper = angular.element(labelField.next("div"));
182 expect(inputWrapper.hasClass("three-col")).toBe(true);171 expect(inputWrapper.hasClass("col-3")).toBe(true);
183 expect(inputWrapper.hasClass("last-col")).toBe(true);
184 });172 });
185 });173 });
186174
@@ -196,8 +184,8 @@ xdescribe("maasObjForm", function() {
196 var html = [184 var html = [
197 '<maas-obj-form obj="obj" manager="manager">',185 '<maas-obj-form obj="obj" manager="manager">',
198 '<maas-obj-field type="password" key="key" label="Key" ',186 '<maas-obj-field type="password" key="key" label="Key" ',
199 'placeholder="Placeholder" label-width="two" ',187 'placeholder="Placeholder" label-width="2" ',
200 'input-width="three"></maas-obj-field>',188 'input-width="3"></maas-obj-field>',
201 '</maas-obj-form>'189 '</maas-obj-form>'
202 ].join('');190 ].join('');
203 directive = compileDirective(html);191 directive = compileDirective(html);
@@ -217,14 +205,13 @@ xdescribe("maasObjForm", function() {
217 it("adds label with width", function() {205 it("adds label with width", function() {
218 var labelField = angular.element(directive.find("label"));206 var labelField = angular.element(directive.find("label"));
219 expect(labelField.text()).toBe("Key");207 expect(labelField.text()).toBe("Key");
220 expect(labelField.hasClass("two-col")).toBe(true);208 expect(labelField.hasClass("col-2")).toBe(true);
221 });209 });
222210
223 it("adds inputWrapper with width", function() {211 it("adds inputWrapper with width", function() {
224 var labelField = angular.element(directive.find("label "));212 var labelField = angular.element(directive.find("label "));
225 var inputWrapper = angular.element(labelField.next("div"));213 var inputWrapper = angular.element(labelField.next("div"));
226 expect(inputWrapper.hasClass("three-col")).toBe(true);214 expect(inputWrapper.hasClass("col-3")).toBe(true);
227 expect(inputWrapper.hasClass("last-col")).toBe(true);
228 });215 });
229216
230 it("reverts value on esc", function() {217 it("reverts value on esc", function() {
@@ -245,8 +232,8 @@ xdescribe("maasObjForm", function() {
245 });232 });
246233
247 it("hasErrors returns true if has-error class exists", function() {234 it("hasErrors returns true if has-error class exists", function() {
248 var inputField = angular.element(directive.find("#key"));235 var control = angular.element(directive.find('.p-form__control'));
249 inputField.addClass('has-error');236 control.addClass('is-error');
250 expect($scope.obj.$maasForm.hasErrors()).toBe(true);237 expect($scope.obj.$maasForm.hasErrors()).toBe(true);
251 });238 });
252 });239 });
@@ -265,8 +252,8 @@ xdescribe("maasObjForm", function() {
265 var html = [252 var html = [
266 '<maas-obj-form obj="obj" manager="manager">',253 '<maas-obj-form obj="obj" manager="manager">',
267 '<maas-obj-field type="options" key="key" label="Key" ',254 '<maas-obj-field type="options" key="key" label="Key" ',
268 'placeholder="Placeholder" label-width="two" ',255 'placeholder="Placeholder" label-width="2" ',
269 'input-width="three" options="' + options + '">',256 'input-width="3" options="' + options + '">',
270 '</maas-obj-field>',257 '</maas-obj-field>',
271 '</maas-obj-form>'258 '</maas-obj-form>'
272 ].join('');259 ].join('');
@@ -304,14 +291,13 @@ xdescribe("maasObjForm", function() {
304 it("adds label with width", function() {291 it("adds label with width", function() {
305 var labelField = angular.element(directive.find("label"));292 var labelField = angular.element(directive.find("label"));
306 expect(labelField.text()).toBe("Key");293 expect(labelField.text()).toBe("Key");
307 expect(labelField.hasClass("two-col")).toBe(true);294 expect(labelField.hasClass("col-2")).toBe(true);
308 });295 });
309296
310 it("adds inputWrapper with width", function() {297 it("adds inputWrapper with width", function() {
311 var labelField = angular.element(directive.find("label "));298 var labelField = angular.element(directive.find("label "));
312 var inputWrapper = angular.element(labelField.next("div"));299 var inputWrapper = angular.element(labelField.next("div"));
313 expect(inputWrapper.hasClass("three-col")).toBe(true);300 expect(inputWrapper.hasClass("col-3")).toBe(true);
314 expect(inputWrapper.hasClass("last-col")).toBe(true);
315 });301 });
316302
317 it("calls on-change function", function() {303 it("calls on-change function", function() {
@@ -332,13 +318,13 @@ xdescribe("maasObjForm", function() {
332 var html = [318 var html = [
333 '<maas-obj-form obj="obj" manager="manager">',319 '<maas-obj-form obj="obj" manager="manager">',
334 '<maas-obj-field type="options" key="key" label="Key" ',320 '<maas-obj-field type="options" key="key" label="Key" ',
335 'placeholder="Placeholder" label-width="two" ',321 'placeholder="Placeholder" label-width="2" ',
336 'on-change="changeForm" ',322 'on-change="changeForm" ',
337 'input-width="three" options="' + options + '">',323 'input-width="3" options="' + options + '">',
338 '</maas-obj-field>',324 '</maas-obj-field>',
339 '<maas-obj-field type="text" key="key2" label="Key2" ',325 '<maas-obj-field type="text" key="key2" label="Key2" ',
340 'placeholder="" label-width="two" ',326 'placeholder="" label-width="2" ',
341 'input-width="three"',327 'input-width="3"',
342 '</maas-obj-field>',328 '</maas-obj-field>',
343 '</maas-obj-form>'329 '</maas-obj-form>'
344 ].join('');330 ].join('');
@@ -365,7 +351,7 @@ xdescribe("maasObjForm", function() {
365 var html = [351 var html = [
366 '<maas-obj-form obj="obj" manager="manager">',352 '<maas-obj-form obj="obj" manager="manager">',
367 '<maas-obj-field type="checkboxes" key="key" label="Key" ',353 '<maas-obj-field type="checkboxes" key="key" label="Key" ',
368 'label-width="two" input-width="three" ',354 'label-width="2" input-width="3" ',
369 'values="values">',355 'values="values">',
370 '</maas-obj-field>',356 '</maas-obj-field>',
371 '</maas-obj-form>'357 '</maas-obj-form>'
@@ -390,7 +376,7 @@ xdescribe("maasObjForm", function() {
390 var labelField = angular.element(376 var labelField = angular.element(
391 directive.find('label[for="key"]'));377 directive.find('label[for="key"]'));
392 expect(labelField.text()).toBe("Key");378 expect(labelField.text()).toBe("Key");
393 expect(labelField.hasClass("two-col")).toBe(true);379 expect(labelField.hasClass("col-2")).toBe(true);
394 });380 });
395 });381 });
396382
@@ -405,7 +391,7 @@ xdescribe("maasObjForm", function() {
405 var html = [391 var html = [
406 '<maas-obj-form obj="obj" manager="manager">',392 '<maas-obj-form obj="obj" manager="manager">',
407 '<maas-obj-field type="tags" key="key" label="Key" ',393 '<maas-obj-field type="tags" key="key" label="Key" ',
408 'label-width="two" input-width="three">',394 'label-width="2" input-width="3">',
409 '</maas-obj-field>',395 '</maas-obj-field>',
410 '</maas-obj-form>'396 '</maas-obj-form>'
411 ].join('');397 ].join('');
@@ -421,7 +407,7 @@ xdescribe("maasObjForm", function() {
421 var labelField = angular.element(407 var labelField = angular.element(
422 directive.find('label[for="key"]'));408 directive.find('label[for="key"]'));
423 expect(labelField.text()).toBe("Key");409 expect(labelField.text()).toBe("Key");
424 expect(labelField.hasClass("two-col")).toBe(true);410 expect(labelField.hasClass("col-2")).toBe(true);
425 });411 });
426 });412 });
427413
@@ -436,7 +422,7 @@ xdescribe("maasObjForm", function() {
436 var html = [422 var html = [
437 '<maas-obj-form obj="obj" manager="manager">',423 '<maas-obj-form obj="obj" manager="manager">',
438 '<maas-obj-field type="onoffswitch" key="key" label="Key" ',424 '<maas-obj-field type="onoffswitch" key="key" label="Key" ',
439 'label-width="two" input-width="three">',425 'label-width="2" input-width="3">',
440 '</maas-obj-field>',426 '</maas-obj-field>',
441 '</maas-obj-form>'427 '</maas-obj-form>'
442 ].join('');428 ].join('');
@@ -444,21 +430,15 @@ xdescribe("maasObjForm", function() {
444 });430 });
445431
446 it("creates onoffswitch", function() {432 it("creates onoffswitch", function() {
447 var onoff = angular.element(directive.find("div.onoffswitch"));433 var onoff = angular.element(directive.find("div.maas-p-switch"));
448 var input = angular.element(
449 onoff.find("input.onoffswitch-checkbox"));
450 var label = angular.element(
451 onoff.find("label.onoffswitch-label u-no-margin--top"));
452 expect(onoff.length).toBe(1);434 expect(onoff.length).toBe(1);
453 expect(input.length).toBe(1);
454 expect(label.length).toBe(1);
455 });435 });
456436
457 it("adds label with width", function() {437 it("adds label with width", function() {
458 var labelField = angular.element(438 var labelField = angular.element(
459 directive.find('label[for="key"]'));439 directive.find('label[for="key"]'));
460 expect(labelField.text()).toBe("Key");440 expect(labelField.text()).toBe("Key");
461 expect(labelField.hasClass("two-col")).toBe(true);441 expect(labelField.hasClass("col-2")).toBe(true);
462 });442 });
463 });443 });
464444
@@ -478,8 +458,8 @@ xdescribe("maasObjForm", function() {
478 var html = [458 var html = [
479 '<maas-obj-form obj="obj" manager="manager">',459 '<maas-obj-form obj="obj" manager="manager">',
480 '<maas-obj-field type="text" key="key" label="Key" ',460 '<maas-obj-field type="text" key="key" label="Key" ',
481 'placeholder="Placeholder" label-width="two" ',461 'placeholder="Placeholder" label-width="2" ',
482 'input-width="three"></maas-obj-field>',462 'input-width="3"></maas-obj-field>',
483 '</maas-obj-form>'463 '</maas-obj-form>'
484 ].join('');464 ].join('');
485 directive = compileDirective(html);465 directive = compileDirective(html);
@@ -558,18 +538,20 @@ xdescribe("maasObjForm", function() {
558538
559 it("sets string error on field", function() {539 it("sets string error on field", function() {
560 var field = angular.element(directive.find("#key"));540 var field = angular.element(directive.find("#key"));
541 var control = angular.element(directive.find('.p-form__control'));
561 changeFieldValue(field, makeName("new_key"));542 changeFieldValue(field, makeName("new_key"));
562543
563 var error = makeName("error");544 var error = makeName("error");
564 saveDefer.reject(error);545 saveDefer.reject(error);
565 $scope.$digest();546 $scope.$digest();
566547
567 var errorsList = getFieldErrorList(field);548 var errorsList = getErrorList(control);
568 expect(errorsList).toEqual([error]);549 expect(errorsList).toEqual(["Error: " + error]);
569 });550 });
570551
571 it("sets field error on field", function() {552 it("sets field error on field", function() {
572 var field = angular.element(directive.find("#key"));553 var field = angular.element(directive.find("#key"));
554 var control = angular.element(directive.find('.p-form__control'));
573 changeFieldValue(field, makeName("new_key"));555 changeFieldValue(field, makeName("new_key"));
574556
575 var error = makeName("error");557 var error = makeName("error");
@@ -578,13 +560,14 @@ xdescribe("maasObjForm", function() {
578 }));560 }));
579 $scope.$digest();561 $scope.$digest();
580562
581 var errorsList = getFieldErrorList(field);563 var errorsList = getErrorList(control);
582 expect(errorsList).toEqual([error]);564 expect(errorsList).toEqual(["Error: " + error]);
583 expect(field.hasClass("has-error")).toBe(true);565 expect(control.hasClass("is-error")).toBe(true);
584 });566 });
585567
586 it("sets field error on another field", function() {568 it("sets field error on another field", function() {
587 var field = angular.element(directive.find("#key"));569 var field = angular.element(directive.find("#key"));
570 var control = angular.element(directive.find('.p-form__control'));
588 changeFieldValue(field, makeName("new_key"));571 changeFieldValue(field, makeName("new_key"));
589572
590 var error = makeName("error");573 var error = makeName("error");
@@ -593,13 +576,14 @@ xdescribe("maasObjForm", function() {
593 }));576 }));
594 $scope.$digest();577 $scope.$digest();
595578
596 var errorsList = getFieldErrorList(field);579 var errorsList = getErrorList(control);
597 expect(errorsList).toEqual(["otherKey: " + error]);580 expect(errorsList).toEqual(["Error: otherKey: " + error]);
598 expect(field.hasClass("has-error")).toBe(true);581 expect(control.hasClass("is-error")).toBe(true);
599 });582 });
600583
601 it("sets multiple errors on field", function() {584 it("sets multiple errors on field", function() {
602 var field = angular.element(directive.find("#key"));585 var field = angular.element(directive.find("#key"));
586 var control = angular.element(directive.find('.p-form__control'));
603 changeFieldValue(field, makeName("new_key"));587 changeFieldValue(field, makeName("new_key"));
604588
605 var error1 = makeName("error");589 var error1 = makeName("error");
@@ -609,9 +593,9 @@ xdescribe("maasObjForm", function() {
609 }));593 }));
610 $scope.$digest();594 $scope.$digest();
611595
612 var errorsList = getFieldErrorList(field);596 var errList = getErrorList(control);
613 expect(errorsList).toEqual([error1, error2]);597 expect(errList).toEqual(["Error: " + error1, "Error: " + error2]);
614 expect(field.hasClass("has-error")).toBe(true);598 expect(control.hasClass("is-error")).toBe(true);
615 });599 });
616 });600 });
617601
@@ -633,8 +617,8 @@ xdescribe("maasObjForm", function() {
633 '<maas-obj-form obj="obj" manager="manager" ',617 '<maas-obj-form obj="obj" manager="manager" ',
634 'pre-process="process">',618 'pre-process="process">',
635 '<maas-obj-field type="text" key="key" label="Key" ',619 '<maas-obj-field type="text" key="key" label="Key" ',
636 'placeholder="Placeholder" label-width="two" ',620 'placeholder="Placeholder" label-width="2" ',
637 'input-width="three"></maas-obj-field>',621 'input-width="3"></maas-obj-field>',
638 '</maas-obj-form>'622 '</maas-obj-form>'
639 ].join('');623 ].join('');
640 var directive = compileDirective(html);624 var directive = compileDirective(html);
@@ -662,11 +646,11 @@ xdescribe("maasObjForm", function() {
662 var html = [646 var html = [
663 '<maas-obj-form obj="obj" manager="manager">',647 '<maas-obj-form obj="obj" manager="manager">',
664 '<maas-obj-field type="text" key="key1" label="Key1" ',648 '<maas-obj-field type="text" key="key1" label="Key1" ',
665 'placeholder="Placeholder" label-width="two" ',649 'placeholder="Placeholder" label-width="2" ',
666 'input-width="three"></maas-obj-field>',650 'input-width="3"></maas-obj-field>',
667 '<maas-obj-field type="text" key="key2" label="Key2" ',651 '<maas-obj-field type="text" key="key2" label="Key2" ',
668 'placeholder="Placeholder" label-width="two" ',652 'placeholder="Placeholder" label-width="2" ',
669 'input-width="three"></maas-obj-field>',653 'input-width="3"></maas-obj-field>',
670 '</maas-obj-form>'654 '</maas-obj-form>'
671 ].join('');655 ].join('');
672 directive = compileDirective(html);656 directive = compileDirective(html);
@@ -675,6 +659,10 @@ xdescribe("maasObjForm", function() {
675 it("sets field error on both fields", function() {659 it("sets field error on both fields", function() {
676 var field1 = angular.element(directive.find("#key1"));660 var field1 = angular.element(directive.find("#key1"));
677 var field2 = angular.element(directive.find("#key2"));661 var field2 = angular.element(directive.find("#key2"));
662 var selector1 = "label[for='key1'] + .p-form__control";
663 var selector2 = "label[for='key2'] + .p-form__control";
664 var control1 = angular.element(directive.find(selector1));
665 var control2 = angular.element(directive.find(selector2));
678 changeFieldValue(field1, makeName("new_key"));666 changeFieldValue(field1, makeName("new_key"));
679667
680 var error1 = makeName("error");668 var error1 = makeName("error");
@@ -685,8 +673,8 @@ xdescribe("maasObjForm", function() {
685 }));673 }));
686 $scope.$digest();674 $scope.$digest();
687675
688 expect(getFieldErrorList(field1)).toEqual([error1]);676 expect(getErrorList(control1)).toEqual(["Error: " + error1]);
689 expect(getFieldErrorList(field2)).toEqual([error2]);677 expect(getErrorList(control2)).toEqual(["Error: " + error2]);
690 });678 });
691 });679 });
692680
@@ -708,11 +696,11 @@ xdescribe("maasObjForm", function() {
708 '<maas-obj-form obj="obj" manager="manager">',696 '<maas-obj-form obj="obj" manager="manager">',
709 '<maas-obj-field-group>',697 '<maas-obj-field-group>',
710 '<maas-obj-field type="text" key="key1" label="Key1" ',698 '<maas-obj-field type="text" key="key1" label="Key1" ',
711 'placeholder="Placeholder" label-width="two" ',699 'placeholder="Placeholder" label-width="2" ',
712 'input-width="three"></maas-obj-field>',700 'input-width="3"></maas-obj-field>',
713 '<maas-obj-field type="text" key="key2" label="Key2" ',701 '<maas-obj-field type="text" key="key2" label="Key2" ',
714 'placeholder="Placeholder" label-width="two" ',702 'placeholder="Placeholder" label-width="2" ',
715 'input-width="three"></maas-obj-field>',703 'input-width="3"></maas-obj-field>',
716 '</maas-obj-field-group>',704 '</maas-obj-field-group>',
717 '</maas-obj-form>'705 '</maas-obj-form>'
718 ].join('');706 ].join('');
@@ -795,11 +783,11 @@ xdescribe("maasObjForm", function() {
795 '<maas-obj-form obj="obj" manager="manager" ' +783 '<maas-obj-form obj="obj" manager="manager" ' +
796 'data-ng-disabled="disabled">',784 'data-ng-disabled="disabled">',
797 '<maas-obj-field type="text" key="key" label="Key" ',785 '<maas-obj-field type="text" key="key" label="Key" ',
798 'placeholder="Placeholder" label-width="two" ',786 'placeholder="Placeholder" label-width="2" ',
799 'input-width="three"></maas-obj-field>',787 'input-width="3"></maas-obj-field>',
800 '<maas-obj-field type="options" key="key2" label="Key 2" ',788 '<maas-obj-field type="options" key="key2" label="Key 2" ',
801 'placeholder="Placeholder 2" label-width="two" ',789 'placeholder="Placeholder 2" label-width="2" ',
802 'input-width="three" options="' + options + '">',790 'input-width="3" options="' + options + '">',
803 '</maas-obj-field>',791 '</maas-obj-field>',
804 '</maas-obj-form>'792 '</maas-obj-form>'
805 ].join('');793 ].join('');
@@ -839,8 +827,8 @@ xdescribe("maasObjForm", function() {
839 '<maas-obj-form obj="obj" manager="manager" ',827 '<maas-obj-form obj="obj" manager="manager" ',
840 'after-save="saved">',828 'after-save="saved">',
841 '<maas-obj-field type="text" key="key" label="Key" ',829 '<maas-obj-field type="text" key="key" label="Key" ',
842 'placeholder="Placeholder" label-width="two" ',830 'placeholder="Placeholder" label-width="2" ',
843 'input-width="three"></maas-obj-field>',831 'input-width="3"></maas-obj-field>',
844 '</maas-obj-form>'832 '</maas-obj-form>'
845 ].join('');833 ].join('');
846 var directive = compileDirective(html);834 var directive = compileDirective(html);
@@ -867,40 +855,17 @@ xdescribe("maasObjForm", function() {
867 var html = [855 var html = [
868 '<maas-obj-form obj="obj" manager="manager">',856 '<maas-obj-form obj="obj" manager="manager">',
869 '<maas-obj-field type="text" key="key" label="Key" ',857 '<maas-obj-field type="text" key="key" label="Key" ',
870 'placeholder="Placeholder" label-width="two" ',858 'placeholder="Placeholder" label-width="2" ',
871 'input-width="three"></maas-obj-field>',859 'input-width="3"></maas-obj-field>',
872 '</maas-obj-form>'
873 ].join('');
874 var directive = compileDirective(html);
875 var group = angular.element(
876 directive.find('maas-obj-field[key="key"]'));
877 var field = angular.element(directive.find("#key"));
878 expect(group.hasClass("form__group")).toBe(true);
879 expect(group.hasClass("form__group--subtle")).toBe(true);
880 expect(
881 field.parent("div").hasClass("form__group-input")).toBe(true);
882 });
883
884 it("adds form__group classes without subtle", function() {
885 $scope.obj = {
886 key: makeName("key")
887 };
888 $scope.manager = {};
889 var html = [
890 '<maas-obj-form obj="obj" manager="manager">',
891 '<maas-obj-field type="text" key="key" label="Key" ',
892 'placeholder="Placeholder" label-width="two" ',
893 'input-width="three" subtle="false"></maas-obj-field>',
894 '</maas-obj-form>'860 '</maas-obj-form>'
895 ].join('');861 ].join('');
896 var directive = compileDirective(html);862 var directive = compileDirective(html);
897 var group = angular.element(863 var group = angular.element(
898 directive.find('maas-obj-field[key="key"]'));864 directive.find('maas-obj-field[key="key"]'));
899 var field = angular.element(directive.find("#key"));865 var field = angular.element(directive.find("#key"));
900 expect(group.hasClass("form__group")).toBe(true);866 expect(group.hasClass("p-form__group")).toBe(true);
901 expect(group.hasClass("form__group--subtle")).toBe(false);
902 expect(867 expect(
903 field.parent("div").hasClass("form__group-input")).toBe(true);868 field.parent("div").hasClass("p-form__control")).toBe(true);
904 });869 });
905 });870 });
906871
@@ -920,8 +885,8 @@ xdescribe("maasObjForm", function() {
920 '<maas-obj-form obj="obj" manager="manager" ',885 '<maas-obj-form obj="obj" manager="manager" ',
921 'save-on-blur="false">',886 'save-on-blur="false">',
922 '<maas-obj-field type="text" key="key" label="Key" ',887 '<maas-obj-field type="text" key="key" label="Key" ',
923 'placeholder="Placeholder" label-width="two" ',888 'placeholder="Placeholder" label-width="2" ',
924 'input-width="three"></maas-obj-field>',889 'input-width="3"></maas-obj-field>',
925 '</maas-obj-form>'890 '</maas-obj-form>'
926 ].join('');891 ].join('');
927 var directive = compileDirective(html);892 var directive = compileDirective(html);
@@ -947,8 +912,8 @@ xdescribe("maasObjForm", function() {
947 '<maas-obj-form obj="obj" manager="manager" ',912 '<maas-obj-form obj="obj" manager="manager" ',
948 'save-on-blur="false">',913 'save-on-blur="false">',
949 '<maas-obj-field type="text" key="key" label="Key" ',914 '<maas-obj-field type="text" key="key" label="Key" ',
950 'placeholder="Placeholder" label-width="two" ',915 'placeholder="Placeholder" label-width="2" ',
951 'input-width="three"></maas-obj-field>',916 'input-width="3"></maas-obj-field>',
952 '<button maas-obj-save></button>',917 '<button maas-obj-save></button>',
953 '</maas-obj-form>'918 '</maas-obj-form>'
954 ].join('');919 ].join('');
@@ -981,14 +946,14 @@ xdescribe("maasObjForm", function() {
981 '<maas-obj-form obj="obj" manager="manager" ',946 '<maas-obj-form obj="obj" manager="manager" ',
982 'save-on-blur="false">',947 'save-on-blur="false">',
983 '<maas-obj-field type="text" key="key" label="Key" ',948 '<maas-obj-field type="text" key="key" label="Key" ',
984 'placeholder="Placeholder" label-width="two" ',949 'placeholder="Placeholder" label-width="2" ',
985 'input-width="three"></maas-obj-field>',950 'input-width="3"></maas-obj-field>',
986 '<maas-obj-errors></maas-obj-errors>',951 '<maas-obj-errors></maas-obj-errors>',
987 '<button maas-obj-save></button>',952 '<button maas-obj-save></button>',
988 '</maas-obj-form>'953 '</maas-obj-form>'
989 ].join('');954 ].join('');
990 var directive = compileDirective(html);955 var directive = compileDirective(html);
991 var field = angular.element(directive.find("#key"));956 var field = angular.element(directive.find(".p-form__group"));
992 var errors = angular.element(directive.find("maas-obj-errors"));957 var errors = angular.element(directive.find("maas-obj-errors"));
993 var button = angular.element(directive.find("button"));958 var button = angular.element(directive.find("button"));
994959
@@ -1005,8 +970,8 @@ xdescribe("maasObjForm", function() {
1005 $scope.$digest();970 $scope.$digest();
1006971
1007 // Error is placed on the input and in the global section.972 // Error is placed on the input and in the global section.
1008 expect(getFieldErrorList(field)).toEqual([keyError]);973 expect(getErrorList(field)).toEqual(["Error: " + keyError]);
1009 expect(getErrorList(errors)).toEqual([error]);974 expect(getErrorList(errors)).toEqual([' ' + error]);
1010975
1011 // Has error returns true.976 // Has error returns true.
1012 expect($scope.obj.$maasForm.hasErrors()).toBe(true);977 expect($scope.obj.$maasForm.hasErrors()).toBe(true);
@@ -1054,11 +1019,12 @@ xdescribe("maasObjForm", function() {
1054 it("icon add with tooltip added in label", function() {1019 it("icon add with tooltip added in label", function() {
1055 var label = directive.find("label");1020 var label = directive.find("label");
1056 var icon = label.find("i");1021 var icon = label.find("i");
1057 expect(label.text()).toBe("key ");1022 var tooltip = directive.find("span");
1058 expect(icon.hasClass("icon")).toBe(true);1023 var tooltipMessage = directive.find(".p-tooltip__message");
1059 expect(icon.hasClass("icon--info")).toBe(true);1024 expect(label.text()).toContain("key");
1060 expect(icon.hasClass("tooltip")).toBe(true);1025 expect(icon.hasClass("p-icon--information")).toBe(true);
1061 expect(icon.attr('aria-label')).toBe("My Info");1026 expect(tooltip.hasClass("p-tooltip")).toBe(true);
1027 expect(tooltipMessage.text()).toBe("My Info");
1062 });1028 });
10631029
1064 it('should call preventDefault on click', function() {1030 it('should call preventDefault on click', function() {

Subscribers

People subscribed via source and target branches