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

[Anthony Dillon]

LP: #1750092 - Enable and fix js tests

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

[Blake Rouse (blake-rouse)]

Thank you for fixing these tests.

review: Approve

[MAAS Lander (maas-lander)]

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

2a352f4... by Anthony Dillon on 2018-02-21

Fix js-lint issues

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) {
           'data-ng-click="shown=!shown"',
         '>',
           '{$ getTitle() $}',
-          '&nbsp;&nbsp;<i class="p-icon--chevron"></i>',
+          '<i class="p-icon--chevron"></i>',
         '</button>',
         '<div class="p-contextual-menu__dropdown" ',
           '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',
             },
             transclude: true,
             template: (
-                '<form class="form" data-ng-class="{saving: saving, ' +
+                '<form class="p-form" data-ng-class="{saving: saving, ' +
                 '\'p-form--inline\': inline, ' +
                 '\'p-form--stacked\': tableForm}" ' +
                 'ng-transclude></form>'),
@@ -963,7 +963,7 @@ angular.module('MAAS').directive('maasObjField', ['$compile',
 
                 // Called by controller to see if error is set on field.
                 scope.hasErrors = function() {
-                    return inputElement.hasClass("has-error");
+                    return inputWrapper.hasClass("is-error");
                 };
 
                 // 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() {
         var html = [
             '<div>',
                 '<div class="maas-accordion">',
-                    '<h4 class="maas-accordion-tab is-active">One</h4>',
+                    '<h4 class="maas-accordion-tab is-selected">One</h4>',
                     '<h4 class="maas-accordion-tab">Two</h4>',
                     '<h4 class="maas-accordion-tab">Three</h4>',
                 '</div>',
@@ -46,23 +46,28 @@ describe("maasAccodion", function() {
         tabs = directive.find('.maas-accordion-tab');
     });
 
-    xit("sets a new active removing other actives", function() {
+    it("sets a new selected and leaves others open", function() {
         angular.element(tabs[1]).click();
-        expect(angular.element(tabs[0]).hasClass("is-active")).toBe(false);
-        expect(angular.element(tabs[1]).hasClass("is-active")).toBe(true);
-        expect(angular.element(tabs[2]).hasClass("is-active")).toBe(false);
+        expect(angular.element(tabs[0]).hasClass("is-selected")).toBe(true);
+        expect(angular.element(tabs[1]).hasClass("is-selected")).toBe(true);
+        expect(angular.element(tabs[2]).hasClass("is-selected")).toBe(false);
 
         angular.element(tabs[2]).click();
-        expect(angular.element(tabs[0]).hasClass("is-active")).toBe(false);
-        expect(angular.element(tabs[1]).hasClass("is-active")).toBe(false);
-        expect(angular.element(tabs[2]).hasClass("is-active")).toBe(true);
+        expect(angular.element(tabs[0]).hasClass("is-selected")).toBe(true);
+        expect(angular.element(tabs[1]).hasClass("is-selected")).toBe(true);
+        expect(angular.element(tabs[2]).hasClass("is-selected")).toBe(true);
     });
 
-    it("leaves current active if clicked", function() {
+    it("closes a section when clicked and open", function() {
+        angular.element(tabs[1]).click();
+        expect(angular.element(tabs[0]).hasClass("is-selected")).toBe(true);
+        expect(angular.element(tabs[1]).hasClass("is-selected")).toBe(true);
+        expect(angular.element(tabs[2]).hasClass("is-selected")).toBe(false);
+
         angular.element(tabs[0]).click();
-        expect(angular.element(tabs[0]).hasClass("is-active")).toBe(true);
-        expect(angular.element(tabs[1]).hasClass("is-active")).toBe(false);
-        expect(angular.element(tabs[2]).hasClass("is-active")).toBe(false);
+        expect(angular.element(tabs[0]).hasClass("is-selected")).toBe(false);
+        expect(angular.element(tabs[1]).hasClass("is-selected")).toBe(true);
+        expect(angular.element(tabs[2]).hasClass("is-selected")).toBe(false);
     });
 
     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 @@
  * Unit tests for Call-To-Action dropdown directive.
  */
 
-xdescribe("maasCta", function() {
+describe("maasCta", function() {
 
     // Load the MAAS module.
     beforeEach(module("MAAS"));
@@ -66,25 +66,26 @@ xdescribe("maasCta", function() {
     it("sets default title to 'Take action'", function() {
         var directive = compileDirective("items", "active");
         expect(
-          directive.find("button.button-group__link").text())
+          directive.find("button.p-contextual-menu__toggle").text())
             .toBe("Take action");
     });
 
     it("sets default title to another name", function() {
         var name = makeName("title");
         var directive = compileDirective("items", "active", null, null, name);
-        expect(directive.find("button.button-group__link").text()).toBe(name);
+        var selector = "button.p-contextual-menu__toggle";
+        expect(directive.find(selector).text()).toBe(name);
     });
 
     it("click link sets shown to true", function() {
         var directive = compileDirective("items", "active");
-        directive.find("button.button-group__link").click();
+        directive.find("button.p-contextual-menu__toggle").click();
         expect(directive.isolateScope().shown).toBe(true);
     });
 
     it("dropdown hidden when shown is false", function() {
         var directive = compileDirective("items", "active");
-        var dropdown = directive.find("ul.button-group__dropdown");
+        var dropdown = directive.find("div.p-contextual-menu__dropdown");
         expect(dropdown.hasClass("ng-hide")).toBe(true);
     });
 
@@ -93,7 +94,7 @@ xdescribe("maasCta", function() {
         directive.isolateScope().shown = true;
         $scope.$digest();
 
-        var dropdown = directive.find("ul.button-group__dropdown");
+        var dropdown = directive.find("div.p-contextual-menu__dropdown");
         expect(dropdown.hasClass("ng-hide")).toBe(false);
     });
 
@@ -107,7 +108,7 @@ xdescribe("maasCta", function() {
 
     it("dropdown list options", function() {
         var directive = compileDirective("items", "active");
-        var links = directive.find("li.button-group__item > button");
+        var links = directive.find("div.p-contextual-menu__dropdown > button");
 
         var listItems = [];
         angular.forEach(links, function(ele, i) {
@@ -123,10 +124,10 @@ xdescribe("maasCta", function() {
 
     it("dropdown select sets shown to false", function() {
         var directive = compileDirective("items", "active");
-        var links = directive.find("li.button-group__item > button");
+        var links = directive.find("div.p-contextual-menu__dropdown > button");
 
         // Open the dropdown.
-        directive.find("button.button-group__link").click();
+        directive.find("button.p-contextual-menu__toggle").click();
         expect(directive.isolateScope().shown).toBe(true);
 
         // Clicking a link should close the dropdown.
@@ -136,7 +137,7 @@ xdescribe("maasCta", function() {
 
     it("dropdown select sets model", function() {
         var directive = compileDirective("items", "active");
-        var links = directive.find("li.button-group__item > button");
+        var links = directive.find("div.p-contextual-menu__dropdown > button");
 
         angular.element(links[0]).click();
         expect(directive.scope().active).toBe($scope.items[0]);
@@ -144,16 +145,16 @@ xdescribe("maasCta", function() {
 
     it("dropdown select sets title", function() {
         var directive = compileDirective("items", "active");
-        var links = directive.find("li.button-group__item > button");
+        var links = directive.find("div.p-contextual-menu__dropdown > button");
 
         angular.element(links[0]).click();
-        var title = directive.find("button.button-group__link").text();
+        var title = directive.find("button.p-contextual-menu__toggle").text();
         expect(title).toBe($scope.items[0].title);
     });
 
     it("dropdown select sets secondary", function() {
         var directive = compileDirective("items", "active");
-        var links = directive.find("li.button-group__item > button");
+        var links = directive.find("div.p-contextual-menu__dropdown > button");
 
         angular.element(links[0]).click();
         expect(directive.isolateScope().secondary).toBe(true);
@@ -162,7 +163,7 @@ xdescribe("maasCta", function() {
     it("dropdown select sets selectedTitle", function() {
         $scope.items[0].selectedTitle = "Different if Selected";
         var directive = compileDirective("items", "active");
-        var links = directive.find("li.button-group__item > button");
+        var links = directive.find("div.p-contextual-menu__dropdown > button");
 
         var iscope = directive.isolateScope();
         expect(iscope.getTitle()).toBe("Take action");
@@ -173,7 +174,7 @@ xdescribe("maasCta", function() {
     it("dropdown select sets other options' selectedTitle", function() {
         $scope.items[1].selectedTitle = "Different if Selected";
         var directive = compileDirective("items", "active");
-        var links = directive.find("li.button-group__item > button");
+        var links = directive.find("div.p-contextual-menu__dropdown > button");
 
         var iscope = directive.isolateScope();
         expect(iscope.getTitle()).toBe("Take action");
@@ -184,10 +185,10 @@ xdescribe("maasCta", function() {
 
     it("clicking body will set shown to false", function() {
         var directive = compileDirective("items", "active");
-        var links = directive.find("li.button-group__item > button");
+        var links = directive.find("div.p-contextual-menu__dropdown > button");
 
         // Open the dropdown.
-        directive.find("button.button-group__link").click();
+        directive.find("button.p-contextual-menu__toggle").click();
         expect(directive.isolateScope().shown).toBe(true);
 
         // Click the body.
@@ -203,10 +204,10 @@ xdescribe("maasCta", function() {
     it("clicking button will fire ng-click", function() {
         $scope.clicked = jasmine.createSpy("clicked");
         var directive = compileDirective("items", "active", null, "clicked()");
-        var links = directive.find("li.button-group__item > button");
+        var links = directive.find("div.p-contextual-menu__dropdown > button");
 
         // Open the dropdown.
-        directive.find("button.button-group__link").click();
+        directive.find("button.p-contextual-menu__toggle").click();
         expect($scope.clicked).toHaveBeenCalled();
     });
 });
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 @@
  * Unit tests for placeholder directive.
  */
 
-xdescribe("maasCodeLines", function() {
+describe("maasCodeLines", function() {
 
 // Load the MAAS module.
 beforeEach(module("MAAS"));
@@ -41,6 +41,6 @@ beforeEach(module("MAAS"));
         };
 
         var directive = compileDirective("getText()");
-        expect(directive.find('code').hasClass("code-block__line")).toBe(true);
+        expect(directive.find('code span').hasClass("code-line")).toBe(true);
     });
 });
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() {
         return directive.find("div");
     }
 
-    xit("sets serviceClass in the class for element", function() {
+    it("sets serviceClass in the class for element", function() {
         var directive = compileDirective();
         var serviceClass = makeName("serviceClass");
         directive.isolateScope().serviceClass = serviceClass;
         $scope.$digest();
         expect(
-          directive.find("span").hasClass("icon--" + serviceClass)).toBe(true);
+          directive.find("span").hasClass("p-icon--" + serviceClass)
+        ).toBe(true);
     });
 
     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 @@
  * Unit tests for MAAS object form.
  */
 
-xdescribe("maasObjForm", function() {
+describe("maasObjForm", function() {
 
     // Load the MAAS module.
     beforeEach(module("MAAS"));
@@ -42,20 +42,10 @@ xdescribe("maasObjForm", function() {
         $scope.$digest();
     }
 
-    // Return the list of rendered errors on the field.
-    function getFieldErrorList(field) {
-        var errors = [];
-        var lis = field.siblings("ul.form__error").children();
-        lis.each(function() {
-            errors.push(angular.element(this).text());
-        });
-        return errors;
-    }
-
     // Return the list of rendered errors in the element.
     function getErrorList(element) {
         var errors = [];
-        var lis = element.find("ul.form__error").children();
+        var lis = element.find("ul.p-list").children();
         lis.each(function() {
             errors.push(angular.element(this).text());
         });
@@ -64,7 +54,7 @@ xdescribe("maasObjForm", function() {
 
     describe("inline form", function() {
 
-        it("adds 'form--inline'", function() {
+        it("adds 'p-form--inline'", function() {
             $scope.obj = {};
             $scope.manager = {};
             var html = [
@@ -73,7 +63,7 @@ xdescribe("maasObjForm", function() {
                 ].join('');
             var directive = compileDirective(html);
             var form = directive.find("form");
-            expect(form.hasClass("form--inline")).toBe(true);
+            expect(form.hasClass("p-form--inline")).toBe(true);
         });
     });
 
@@ -89,8 +79,8 @@ xdescribe("maasObjForm", function() {
             var html = [
                 '<maas-obj-form obj="obj" manager="manager">',
                     '<maas-obj-field type="text" key="key" label="Key" ',
-                        'placeholder="Placeholder" label-width="two" ',
-                        'input-width="three"></maas-obj-field>',
+                        'placeholder="Placeholder" label-width="2" ',
+                        'input-width="3"></maas-obj-field>',
                 '</maas-obj-form>'
                 ].join('');
             directive = compileDirective(html);
@@ -110,14 +100,13 @@ xdescribe("maasObjForm", function() {
         it("adds label with width", function() {
             var labelField = angular.element(directive.find("label"));
             expect(labelField.text()).toBe("Key");
-            expect(labelField.hasClass("two-col")).toBe(true);
+            expect(labelField.hasClass("col-2")).toBe(true);
         });
 
         it("adds inputWrapper with width", function() {
             var labelField = angular.element(directive.find("label "));
             var inputWrapper = angular.element(labelField.next("div"));
-            expect(inputWrapper.hasClass("three-col")).toBe(true);
-            expect(inputWrapper.hasClass("last-col")).toBe(true);
+            expect(inputWrapper.hasClass("col-3")).toBe(true);
         });
 
         it("reverts value on esc", function() {
@@ -137,9 +126,9 @@ xdescribe("maasObjForm", function() {
             expect($scope.obj.$maasForm).toBeDefined();
         });
 
-        it("hasErrors returns true if has-error class exists", function() {
-            var inputField = angular.element(directive.find("#key"));
-            inputField.addClass('has-error');
+        it("hasErrors returns true if is-error class exists", function() {
+            var control = angular.element(directive.find('.p-form__control'));
+            control.addClass('is-error');
             expect($scope.obj.$maasForm.hasErrors()).toBe(true);
         });
     });
@@ -153,8 +142,8 @@ xdescribe("maasObjForm", function() {
             var html = [
                 '<maas-obj-form obj="obj" manager="manager">',
                     '<maas-obj-field type="textarea" key="key" label="Key" ',
-                        'placeholder="Placeholder" label-width="two" ',
-                        'input-width="three"></maas-obj-field>',
+                        'placeholder="Placeholder" label-width="2" ',
+                        'input-width="3"></maas-obj-field>',
                 '</maas-obj-form>'
                 ].join('');
             directive = compileDirective(html);
@@ -173,14 +162,13 @@ xdescribe("maasObjForm", function() {
         it("adds label with width", function() {
             var labelField = angular.element(directive.find("label"));
             expect(labelField.text()).toBe("Key");
-            expect(labelField.hasClass("two-col")).toBe(true);
+            expect(labelField.hasClass("col-2")).toBe(true);
         });
 
         it("adds inputWrapper with width", function() {
             var labelField = angular.element(directive.find("label "));
             var inputWrapper = angular.element(labelField.next("div"));
-            expect(inputWrapper.hasClass("three-col")).toBe(true);
-            expect(inputWrapper.hasClass("last-col")).toBe(true);
+            expect(inputWrapper.hasClass("col-3")).toBe(true);
         });
     });
 
@@ -196,8 +184,8 @@ xdescribe("maasObjForm", function() {
             var html = [
                 '<maas-obj-form obj="obj" manager="manager">',
                     '<maas-obj-field type="password" key="key" label="Key" ',
-                        'placeholder="Placeholder" label-width="two" ',
-                        'input-width="three"></maas-obj-field>',
+                        'placeholder="Placeholder" label-width="2" ',
+                        'input-width="3"></maas-obj-field>',
                 '</maas-obj-form>'
                 ].join('');
             directive = compileDirective(html);
@@ -217,14 +205,13 @@ xdescribe("maasObjForm", function() {
         it("adds label with width", function() {
             var labelField = angular.element(directive.find("label"));
             expect(labelField.text()).toBe("Key");
-            expect(labelField.hasClass("two-col")).toBe(true);
+            expect(labelField.hasClass("col-2")).toBe(true);
         });
 
         it("adds inputWrapper with width", function() {
             var labelField = angular.element(directive.find("label "));
             var inputWrapper = angular.element(labelField.next("div"));
-            expect(inputWrapper.hasClass("three-col")).toBe(true);
-            expect(inputWrapper.hasClass("last-col")).toBe(true);
+            expect(inputWrapper.hasClass("col-3")).toBe(true);
         });
 
         it("reverts value on esc", function() {
@@ -245,8 +232,8 @@ xdescribe("maasObjForm", function() {
         });
 
         it("hasErrors returns true if has-error class exists", function() {
-            var inputField = angular.element(directive.find("#key"));
-            inputField.addClass('has-error');
+            var control = angular.element(directive.find('.p-form__control'));
+            control.addClass('is-error');
             expect($scope.obj.$maasForm.hasErrors()).toBe(true);
         });
     });
@@ -265,8 +252,8 @@ xdescribe("maasObjForm", function() {
             var html = [
                 '<maas-obj-form obj="obj" manager="manager">',
                     '<maas-obj-field type="options" key="key" label="Key" ',
-                        'placeholder="Placeholder" label-width="two" ',
-                        'input-width="three" options="' + options + '">',
+                        'placeholder="Placeholder" label-width="2" ',
+                        'input-width="3" options="' + options + '">',
                     '</maas-obj-field>',
                 '</maas-obj-form>'
                 ].join('');
@@ -304,14 +291,13 @@ xdescribe("maasObjForm", function() {
         it("adds label with width", function() {
             var labelField = angular.element(directive.find("label"));
             expect(labelField.text()).toBe("Key");
-            expect(labelField.hasClass("two-col")).toBe(true);
+            expect(labelField.hasClass("col-2")).toBe(true);
         });
 
         it("adds inputWrapper with width", function() {
             var labelField = angular.element(directive.find("label "));
             var inputWrapper = angular.element(labelField.next("div"));
-            expect(inputWrapper.hasClass("three-col")).toBe(true);
-            expect(inputWrapper.hasClass("last-col")).toBe(true);
+            expect(inputWrapper.hasClass("col-3")).toBe(true);
         });
 
         it("calls on-change function", function() {
@@ -332,13 +318,13 @@ xdescribe("maasObjForm", function() {
             var html = [
                 '<maas-obj-form obj="obj" manager="manager">',
                     '<maas-obj-field type="options" key="key" label="Key" ',
-                        'placeholder="Placeholder" label-width="two" ',
+                        'placeholder="Placeholder" label-width="2" ',
                         'on-change="changeForm" ',
-                        'input-width="three" options="' + options + '">',
+                        'input-width="3" options="' + options + '">',
                     '</maas-obj-field>',
                     '<maas-obj-field type="text" key="key2" label="Key2" ',
-                        'placeholder="" label-width="two" ',
-                        'input-width="three"',
+                        'placeholder="" label-width="2" ',
+                        'input-width="3"',
                     '</maas-obj-field>',
                 '</maas-obj-form>'
                 ].join('');
@@ -365,7 +351,7 @@ xdescribe("maasObjForm", function() {
             var html = [
                 '<maas-obj-form obj="obj" manager="manager">',
                     '<maas-obj-field type="checkboxes" key="key" label="Key" ',
-                        'label-width="two" input-width="three" ',
+                        'label-width="2" input-width="3" ',
                         'values="values">',
                     '</maas-obj-field>',
                 '</maas-obj-form>'
@@ -390,7 +376,7 @@ xdescribe("maasObjForm", function() {
             var labelField = angular.element(
                 directive.find('label[for="key"]'));
             expect(labelField.text()).toBe("Key");
-            expect(labelField.hasClass("two-col")).toBe(true);
+            expect(labelField.hasClass("col-2")).toBe(true);
         });
     });
 
@@ -405,7 +391,7 @@ xdescribe("maasObjForm", function() {
             var html = [
                 '<maas-obj-form obj="obj" manager="manager">',
                     '<maas-obj-field type="tags" key="key" label="Key" ',
-                        'label-width="two" input-width="three">',
+                        'label-width="2" input-width="3">',
                     '</maas-obj-field>',
                 '</maas-obj-form>'
                 ].join('');
@@ -421,7 +407,7 @@ xdescribe("maasObjForm", function() {
             var labelField = angular.element(
                 directive.find('label[for="key"]'));
             expect(labelField.text()).toBe("Key");
-            expect(labelField.hasClass("two-col")).toBe(true);
+            expect(labelField.hasClass("col-2")).toBe(true);
         });
     });
 
@@ -436,7 +422,7 @@ xdescribe("maasObjForm", function() {
             var html = [
                 '<maas-obj-form obj="obj" manager="manager">',
                     '<maas-obj-field type="onoffswitch" key="key" label="Key" ',
-                        'label-width="two" input-width="three">',
+                        'label-width="2" input-width="3">',
                     '</maas-obj-field>',
                 '</maas-obj-form>'
                 ].join('');
@@ -444,21 +430,15 @@ xdescribe("maasObjForm", function() {
         });
 
         it("creates onoffswitch", function() {
-            var onoff = angular.element(directive.find("div.onoffswitch"));
-            var input = angular.element(
-                onoff.find("input.onoffswitch-checkbox"));
-            var label = angular.element(
-                onoff.find("label.onoffswitch-label u-no-margin--top"));
+            var onoff = angular.element(directive.find("div.maas-p-switch"));
             expect(onoff.length).toBe(1);
-            expect(input.length).toBe(1);
-            expect(label.length).toBe(1);
         });
 
         it("adds label with width", function() {
             var labelField = angular.element(
                 directive.find('label[for="key"]'));
             expect(labelField.text()).toBe("Key");
-            expect(labelField.hasClass("two-col")).toBe(true);
+            expect(labelField.hasClass("col-2")).toBe(true);
         });
     });
 
@@ -478,8 +458,8 @@ xdescribe("maasObjForm", function() {
             var html = [
                 '<maas-obj-form obj="obj" manager="manager">',
                     '<maas-obj-field type="text" key="key" label="Key" ',
-                        'placeholder="Placeholder" label-width="two" ',
-                        'input-width="three"></maas-obj-field>',
+                        'placeholder="Placeholder" label-width="2" ',
+                        'input-width="3"></maas-obj-field>',
                 '</maas-obj-form>'
                 ].join('');
             directive = compileDirective(html);
@@ -558,18 +538,20 @@ xdescribe("maasObjForm", function() {
 
         it("sets string error on field", function() {
             var field = angular.element(directive.find("#key"));
+            var control = angular.element(directive.find('.p-form__control'));
             changeFieldValue(field, makeName("new_key"));
 
             var error = makeName("error");
             saveDefer.reject(error);
             $scope.$digest();
 
-            var errorsList = getFieldErrorList(field);
-            expect(errorsList).toEqual([error]);
+            var errorsList = getErrorList(control);
+            expect(errorsList).toEqual(["Error: " + error]);
         });
 
         it("sets field error on field", function() {
             var field = angular.element(directive.find("#key"));
+            var control = angular.element(directive.find('.p-form__control'));
             changeFieldValue(field, makeName("new_key"));
 
             var error = makeName("error");
@@ -578,13 +560,14 @@ xdescribe("maasObjForm", function() {
             }));
             $scope.$digest();
 
-            var errorsList = getFieldErrorList(field);
-            expect(errorsList).toEqual([error]);
-            expect(field.hasClass("has-error")).toBe(true);
+            var errorsList = getErrorList(control);
+            expect(errorsList).toEqual(["Error: " + error]);
+            expect(control.hasClass("is-error")).toBe(true);
         });
 
         it("sets field error on another field", function() {
             var field = angular.element(directive.find("#key"));
+            var control = angular.element(directive.find('.p-form__control'));
             changeFieldValue(field, makeName("new_key"));
 
             var error = makeName("error");
@@ -593,13 +576,14 @@ xdescribe("maasObjForm", function() {
             }));
             $scope.$digest();
 
-            var errorsList = getFieldErrorList(field);
-            expect(errorsList).toEqual(["otherKey: " + error]);
-            expect(field.hasClass("has-error")).toBe(true);
+            var errorsList = getErrorList(control);
+            expect(errorsList).toEqual(["Error: otherKey: " + error]);
+            expect(control.hasClass("is-error")).toBe(true);
         });
 
         it("sets multiple errors on field", function() {
             var field = angular.element(directive.find("#key"));
+            var control = angular.element(directive.find('.p-form__control'));
             changeFieldValue(field, makeName("new_key"));
 
             var error1 = makeName("error");
@@ -609,9 +593,9 @@ xdescribe("maasObjForm", function() {
             }));
             $scope.$digest();
 
-            var errorsList = getFieldErrorList(field);
-            expect(errorsList).toEqual([error1, error2]);
-            expect(field.hasClass("has-error")).toBe(true);
+            var errList = getErrorList(control);
+            expect(errList).toEqual(["Error: " + error1, "Error: " + error2]);
+            expect(control.hasClass("is-error")).toBe(true);
         });
     });
 
@@ -633,8 +617,8 @@ xdescribe("maasObjForm", function() {
                 '<maas-obj-form obj="obj" manager="manager" ',
                     'pre-process="process">',
                     '<maas-obj-field type="text" key="key" label="Key" ',
-                        'placeholder="Placeholder" label-width="two" ',
-                        'input-width="three"></maas-obj-field>',
+                        'placeholder="Placeholder" label-width="2" ',
+                        'input-width="3"></maas-obj-field>',
                 '</maas-obj-form>'
                 ].join('');
             var directive = compileDirective(html);
@@ -662,11 +646,11 @@ xdescribe("maasObjForm", function() {
             var html = [
                 '<maas-obj-form obj="obj" manager="manager">',
                     '<maas-obj-field type="text" key="key1" label="Key1" ',
-                        'placeholder="Placeholder" label-width="two" ',
-                        'input-width="three"></maas-obj-field>',
+                        'placeholder="Placeholder" label-width="2" ',
+                        'input-width="3"></maas-obj-field>',
                     '<maas-obj-field type="text" key="key2" label="Key2" ',
-                        'placeholder="Placeholder" label-width="two" ',
-                        'input-width="three"></maas-obj-field>',
+                        'placeholder="Placeholder" label-width="2" ',
+                        'input-width="3"></maas-obj-field>',
                 '</maas-obj-form>'
                 ].join('');
             directive = compileDirective(html);
@@ -675,6 +659,10 @@ xdescribe("maasObjForm", function() {
         it("sets field error on both fields", function() {
             var field1 = angular.element(directive.find("#key1"));
             var field2 = angular.element(directive.find("#key2"));
+            var selector1 = "label[for='key1'] + .p-form__control";
+            var selector2 = "label[for='key2'] + .p-form__control";
+            var control1 = angular.element(directive.find(selector1));
+            var control2 = angular.element(directive.find(selector2));
             changeFieldValue(field1, makeName("new_key"));
 
             var error1 = makeName("error");
@@ -685,8 +673,8 @@ xdescribe("maasObjForm", function() {
             }));
             $scope.$digest();
 
-            expect(getFieldErrorList(field1)).toEqual([error1]);
-            expect(getFieldErrorList(field2)).toEqual([error2]);
+            expect(getErrorList(control1)).toEqual(["Error: " + error1]);
+            expect(getErrorList(control2)).toEqual(["Error: " + error2]);
         });
     });
 
@@ -708,11 +696,11 @@ xdescribe("maasObjForm", function() {
                 '<maas-obj-form obj="obj" manager="manager">',
                     '<maas-obj-field-group>',
                         '<maas-obj-field type="text" key="key1" label="Key1" ',
-                            'placeholder="Placeholder" label-width="two" ',
-                            'input-width="three"></maas-obj-field>',
+                            'placeholder="Placeholder" label-width="2" ',
+                            'input-width="3"></maas-obj-field>',
                         '<maas-obj-field type="text" key="key2" label="Key2" ',
-                            'placeholder="Placeholder" label-width="two" ',
-                            'input-width="three"></maas-obj-field>',
+                            'placeholder="Placeholder" label-width="2" ',
+                            'input-width="3"></maas-obj-field>',
                     '</maas-obj-field-group>',
                 '</maas-obj-form>'
                 ].join('');
@@ -795,11 +783,11 @@ xdescribe("maasObjForm", function() {
                 '<maas-obj-form obj="obj" manager="manager" ' +
                     'data-ng-disabled="disabled">',
                     '<maas-obj-field type="text" key="key" label="Key" ',
-                        'placeholder="Placeholder" label-width="two" ',
-                        'input-width="three"></maas-obj-field>',
+                        'placeholder="Placeholder" label-width="2" ',
+                        'input-width="3"></maas-obj-field>',
                     '<maas-obj-field type="options" key="key2" label="Key 2" ',
-                        'placeholder="Placeholder 2" label-width="two" ',
-                        'input-width="three" options="' + options + '">',
+                        'placeholder="Placeholder 2" label-width="2" ',
+                        'input-width="3" options="' + options + '">',
                     '</maas-obj-field>',
                 '</maas-obj-form>'
                 ].join('');
@@ -839,8 +827,8 @@ xdescribe("maasObjForm", function() {
                 '<maas-obj-form obj="obj" manager="manager" ',
                     'after-save="saved">',
                     '<maas-obj-field type="text" key="key" label="Key" ',
-                        'placeholder="Placeholder" label-width="two" ',
-                        'input-width="three"></maas-obj-field>',
+                        'placeholder="Placeholder" label-width="2" ',
+                        'input-width="3"></maas-obj-field>',
                 '</maas-obj-form>'
                 ].join('');
             var directive = compileDirective(html);
@@ -867,40 +855,17 @@ xdescribe("maasObjForm", function() {
             var html = [
                 '<maas-obj-form obj="obj" manager="manager">',
                     '<maas-obj-field type="text" key="key" label="Key" ',
-                        'placeholder="Placeholder" label-width="two" ',
-                        'input-width="three"></maas-obj-field>',
-                '</maas-obj-form>'
-                ].join('');
-            var directive = compileDirective(html);
-            var group = angular.element(
-                directive.find('maas-obj-field[key="key"]'));
-            var field = angular.element(directive.find("#key"));
-            expect(group.hasClass("form__group")).toBe(true);
-            expect(group.hasClass("form__group--subtle")).toBe(true);
-            expect(
-                field.parent("div").hasClass("form__group-input")).toBe(true);
-        });
-
-        it("adds form__group classes without subtle", function() {
-            $scope.obj = {
-                key: makeName("key")
-            };
-            $scope.manager = {};
-            var html = [
-                '<maas-obj-form obj="obj" manager="manager">',
-                    '<maas-obj-field type="text" key="key" label="Key" ',
-                        'placeholder="Placeholder" label-width="two" ',
-                        'input-width="three" subtle="false"></maas-obj-field>',
+                        'placeholder="Placeholder" label-width="2" ',
+                        'input-width="3"></maas-obj-field>',
                 '</maas-obj-form>'
                 ].join('');
             var directive = compileDirective(html);
             var group = angular.element(
                 directive.find('maas-obj-field[key="key"]'));
             var field = angular.element(directive.find("#key"));
-            expect(group.hasClass("form__group")).toBe(true);
-            expect(group.hasClass("form__group--subtle")).toBe(false);
+            expect(group.hasClass("p-form__group")).toBe(true);
             expect(
-                field.parent("div").hasClass("form__group-input")).toBe(true);
+                field.parent("div").hasClass("p-form__control")).toBe(true);
         });
     });
 
@@ -920,8 +885,8 @@ xdescribe("maasObjForm", function() {
                 '<maas-obj-form obj="obj" manager="manager" ',
                     'save-on-blur="false">',
                     '<maas-obj-field type="text" key="key" label="Key" ',
-                        'placeholder="Placeholder" label-width="two" ',
-                        'input-width="three"></maas-obj-field>',
+                        'placeholder="Placeholder" label-width="2" ',
+                        'input-width="3"></maas-obj-field>',
                 '</maas-obj-form>'
                 ].join('');
             var directive = compileDirective(html);
@@ -947,8 +912,8 @@ xdescribe("maasObjForm", function() {
                 '<maas-obj-form obj="obj" manager="manager" ',
                     'save-on-blur="false">',
                     '<maas-obj-field type="text" key="key" label="Key" ',
-                        'placeholder="Placeholder" label-width="two" ',
-                        'input-width="three"></maas-obj-field>',
+                        'placeholder="Placeholder" label-width="2" ',
+                        'input-width="3"></maas-obj-field>',
                     '<button maas-obj-save></button>',
                 '</maas-obj-form>'
                 ].join('');
@@ -981,14 +946,14 @@ xdescribe("maasObjForm", function() {
                 '<maas-obj-form obj="obj" manager="manager" ',
                     'save-on-blur="false">',
                     '<maas-obj-field type="text" key="key" label="Key" ',
-                        'placeholder="Placeholder" label-width="two" ',
-                        'input-width="three"></maas-obj-field>',
+                        'placeholder="Placeholder" label-width="2" ',
+                        'input-width="3"></maas-obj-field>',
                     '<maas-obj-errors></maas-obj-errors>',
                     '<button maas-obj-save></button>',
                 '</maas-obj-form>'
                 ].join('');
             var directive = compileDirective(html);
-            var field = angular.element(directive.find("#key"));
+            var field = angular.element(directive.find(".p-form__group"));
             var errors = angular.element(directive.find("maas-obj-errors"));
             var button = angular.element(directive.find("button"));
 
@@ -1005,8 +970,8 @@ xdescribe("maasObjForm", function() {
             $scope.$digest();
 
             // Error is placed on the input and in the global section.
-            expect(getFieldErrorList(field)).toEqual([keyError]);
-            expect(getErrorList(errors)).toEqual([error]);
+            expect(getErrorList(field)).toEqual(["Error: " + keyError]);
+            expect(getErrorList(errors)).toEqual([' ' + error]);
 
             // Has error returns true.
             expect($scope.obj.$maasForm.hasErrors()).toBe(true);
@@ -1054,11 +1019,12 @@ xdescribe("maasObjForm", function() {
         it("icon add with tooltip added in label", function() {
             var label = directive.find("label");
             var icon = label.find("i");
-            expect(label.text()).toBe("key ");
-            expect(icon.hasClass("icon")).toBe(true);
-            expect(icon.hasClass("icon--info")).toBe(true);
-            expect(icon.hasClass("tooltip")).toBe(true);
-            expect(icon.attr('aria-label')).toBe("My Info");
+            var tooltip = directive.find("span");
+            var tooltipMessage = directive.find(".p-tooltip__message");
+            expect(label.text()).toContain("key");
+            expect(icon.hasClass("p-icon--information")).toBe(true);
+            expect(tooltip.hasClass("p-tooltip")).toBe(true);
+            expect(tooltipMessage.text()).toBe("My Info");
         });
 
         it('should call preventDefault on click', function() {