refactor the tests

Author: Narretz

docs/app/e2e/api-docs/directive-pages.scenario.js

@@ -0,0 +1,72 @@
+'use strict';
+
+describe('directives', function() {
+
+  describe('parameter section', function() {
+
+    describe('when directive name is a param with a value', function() {
+
+      it('it should show the directive name', function() {
+        browser.get('build/docs/index.html#!/api/ng/directive/ngInclude');
+        expect(getParamNames().getText()).toContain('ngInclude | src');
+      });
+    });
+
+    describe('when directive name is a void param', function() {
+
+      it('should not show the directive name in the parameters', function() {
+        browser.get('build/docs/index.html#!/api/ngRoute/directive/ngView');
+        expect(getParamNames().getText()).not.toContain('ngView');
+      });
+    });
+  });
+
+  describe('usage section', function() {
+
+    describe('when directive name is a param with a value', function() {
+
+      it('it should show the directive name in usage', function() {
+        browser.get('build/docs/index.html#!/api/ng/directive/ngInclude');
+
+        expect(getUsageAs('element', 'ng-include').isPresent()).toBe(true);
+        expect(getUsageAs('attribute', 'ng-include').isPresent()).toBe(true);
+        expect(getUsageAs('CSS class', 'ng-include').isPresent()).toBe(true);
+      });
+    });
+
+    describe('when directive name is a void param', function() {
+
+      it('should show the directive name in usage', function() {
+        browser.get('build/docs/index.html#!/api/ngRoute/directive/ngView');
+
+        expect(getUsageAs('element', 'ng-view').isPresent()).toBe(true);
+        expect(getUsageAs('attribute', 'ng-view').isPresent()).toBe(true);
+        expect(getUsageAs('CSS class', 'ng-view').isPresent()).toBe(true);
+      });
+    });
+  });
+});
+
+function getParamNames() {
+  var argsSection = element(by.className('input-arguments'));
+
+  var paramNames = argsSection.all(by.css('tr td:nth-child(1)'));
+
+  return paramNames;
+}
+
+// Based on the type of directive usage, the directive name will show up in the code block
+// with a specific class
+var typeClassMap = {
+  element: 'tag',
+  attribute: 'atn',
+  'CSS class': 'atv'
+};
+
+function getUsageAs(type, directiveName) {
+  var usage = element(by.className('usage'));
+
+  var as = usage.element(by.cssContainingText('li', 'as ' + type));
+
+  return as.element(by.cssContainingText('span.' + typeClassMap[type], directiveName));
+}