angular · Mar 3, 2015 · Mar 4, 2015 · Mar 6, 2015
Showing with 705 additions and 0 deletions.

+130 −0 modules/examples/e2e_test/menu/menu_spec.es6

+136 −0 modules/examples/src/menu/menu.css

+12 −0 modules/examples/src/menu/menu.html

+8 −0 modules/examples/src/menu/menu.js

+419 −0 modules/examples/src/menu/menu_common.js
diff --git a/modules/examples/e2e_test/menu/menu_spec.es6 b/modules/examples/e2e_test/menu/menu_spec.es6
@@ -0,0 +1,130 @@
+var testUtil = require('angular2/src/test_lib/e2e_util');
+var wd = require('selenium-webdriver');
+
+describe('menu', function () {
+  afterEach(testUtil.verifyNoBrowserErrors);
+  describe('Menu: dynamic reflection', function() {
+    var URL = 'examples/src/menu/menu.html';
+
+    it('should insert the menu into the DOM', function() {
+      browser.get(URL);
+
+      expect(getMenuLength('#mymenu')).toBe(1);
+    });
+    it('should support arrow key navigation that wraps around at the menubar level', function () {
+      browser.get(URL);
+      setFocusIntoMenu();
+      expect(getMenuFocusedText()).toBe('One');
+      sendMenuKey(wd.Key.RIGHT);
+      expect(getMenuFocusedText()).toBe('Two');
+      sendMenuKey(wd.Key.RIGHT);
+      expect(getMenuFocusedText()).toBe('Three');
+      sendMenuKey(wd.Key.RIGHT);
+      expect(getMenuFocusedText()).toBe('Überhaupt');
+      // wrap
+      sendMenuKey(wd.Key.RIGHT);
+      expect(getMenuFocusedText()).toBe('One');
+      // wrap back
+      sendMenuKey(wd.Key.LEFT);
+      expect(getMenuFocusedText()).toBe('Überhaupt');
+    });
+    it('should support arrow key navigation that opens and closes the sub-menus, sub menus should wrap', function () {
+      browser.get(URL);
+      setFocusIntoMenu();
+      expect(getMenuFocusedText()).toBe('One');
+      sendMenuKey(wd.Key.RIGHT);
+      expect(getMenuFocusedText()).toBe('Two');
+      // open and focus
+      sendMenuKey(wd.Key.DOWN);
+      expect(getMenuFocusedText()).toBe('Two One');
+      // open and focus
+      sendMenuKey(wd.Key.RIGHT);
+      expect(getMenuFocusedText()).toBe('Two One One');
+      // close
+      sendMenuKey(wd.Key.ESCAPE);
+      expect(getMenuFocusedText()).toBe('Two One');
+
+      // Test wrapping of the sub-menu
+      sendMenuKey(wd.Key.DOWN);
+      expect(getMenuFocusedText()).toBe('Two Two');
+      sendMenuKey(wd.Key.DOWN);
+      expect(getMenuFocusedText()).toBe('Two Three');
+      sendMenuKey(wd.Key.DOWN);
+      expect(getMenuFocusedText()).toBe('Two Four');
+      sendMenuKey(wd.Key.DOWN);
+      expect(getMenuFocusedText()).toBe('Two One');
+      sendMenuKey(wd.Key.UP);
+      expect(getMenuFocusedText()).toBe('Two Four');
+
+      // close
+      sendMenuKey(wd.Key.ESCAPE);
+      expect(getMenuFocusedText()).toBe('Two');
+    });
+    it('should support arrow key navigation and enter that opens the sub-menus', function () {
+      browser.get(URL);
+      setFocusIntoMenu();
+      expect(getMenuFocusedText()).toBe('One');
+      sendMenuKey(wd.Key.RIGHT);
+      expect(getMenuFocusedText()).toBe('Two');
+      // open and focus
+      sendMenuKey(wd.Key.ENTER);
+      expect(getMenuFocusedText()).toBe('Two One');
+      // open and focus
+      sendMenuKey(wd.Key.ENTER);
+      expect(getMenuFocusedText()).toBe('Two One One');
+      // close
+      sendMenuKey(wd.Key.LEFT);
+      expect(getMenuFocusedText()).toBe('Two One');
+      // close
+      sendMenuKey(wd.Key.LEFT);
+      expect(getMenuFocusedText()).toBe('Two');
+    });
+    it('should support keypress navigation that focusses the next item with a 1st character that matches the key pressed', function () {
+      browser.get(URL);
+      setFocusIntoMenu();
+      expect(getMenuFocusedText()).toBe('One');
+      sendMenuKey('t');
+      expect(getMenuFocusedText()).toBe('Two');
+      sendMenuKey('t');
+      expect(getMenuFocusedText()).toBe('Three');
+      sendMenuKey('t');
+      expect(getMenuFocusedText()).toBe('Two');
+    });
+    it('should support enter selecting a menu item', function () {
+      browser.get(URL);
+      setFocusIntoMenu();
+      expect(getMenuFocusedText()).toBe('One');
+      // wrap
+      sendMenuKey(wd.Key.LEFT);
+      expect(getMenuFocusedText()).toBe('Überhaupt');
+      sendMenuKey(wd.Key.ENTER);
+      expect(getURLFragment()).toBe('#four');
+    });
+  });
+});
+
+function getMenuLength(innerSelector) {
+  return browser.executeScript('return document.querySelector("menu-app").shadowRoot.querySelectorAll("'+innerSelector+'").length');
+}
+
+function getMenuFocusedText() {
+  return browser.executeScript(
+    `var sr = document.querySelector("menu-app").shadowRoot;
+    if (sr.activeElement.querySelector('li')) {
+      return sr.activeElement.firstChild.textContent.trim();
+    } else {
+      return sr.activeElement.querySelector('a').firstChild.textContent.trim();
+    }`);
+}
+
+function setFocusIntoMenu() {
+  browser.findElement(By.tagName('body')).sendKeys('\t');
+}
+
+function sendMenuKey(keys) {
+  browser.findElement(By.tagName('menu-app')).sendKeys(keys);
+}
+
+function getURLFragment() {
+  return browser.executeScript('return window.location.hash;');
+}
diff --git a/modules/examples/src/menu/menu.css b/modules/examples/src/menu/menu.css
@@ -0,0 +1,136 @@
+.offscreen {
+    border: 0;
+    clip: rect(0 0 0 0);
+    clip: rect(0, 0, 0, 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    width: 1px;
+    position: absolute;
+}
+
+.a11yfy-top-level-menu li:focus {
+    outline: 2px dotted black;
+    z-index: 100;
+}
+.a11yfy-third-level-menu {
+    position: absolute;
+    top: 0;
+    right: -150px;
+    width: 150px;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: none;
+}
+
+.a11yfy-mega .a11yfy-third-level-menu {
+    position: static;
+    top: auto;
+    right: auto;
+    width: auto;
+    display:block;
+}
+
+.a11yfy-third-level-menu > li { 
+    min-height: 30px;
+    background: #999999;
+}
+.a11yfy-third-level-menu > li:hover,
+.a11yfy-third-level-menu > li:focus {
+    background: #CCCCCC;
+    color: #000000;
+}
+
+.a11yfy-second-level-menu {
+    position: absolute;
+    top: 30px;
+    left: 0;
+    width: 150px;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: none;
+}
+
+.a11yfy-second-level-menu > li {
+    min-height: 30px;
+    background: #999999;
+}
+.a11yfy-second-level-menu > li:hover,
+.a11yfy-second-level-menu > li:focus  {
+    background: #CCCCCC;
+    color: #000000;
+}
+
+.a11yfy-top-level-menu {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.a11yfy-top-level-menu > li {
+    position: relative;
+    float: left;
+    height: 30px;
+    width: 150px;
+    background: #999999;
+}
+.a11yfy-top-level-menu > li:hover,
+.a11yfy-top-level-menu > li:focus  {
+    background: #CCCCCC;
+    color: #000000;
+}
+
+.a11yfy-top-level-menu li:hover > ul,
+.a11yfy-top-level-menu li.open > ul {
+    display: inline;
+}
+
+li.a11yfy-has-submenu:after {
+    content: "\2b46";
+}
+.a11yfy-mega li.a11yfy-has-submenu:after {
+    content: none;
+}
+
+ul.a11yfy-top-level-menu>li.a11yfy-has-submenu:after {
+    content: "\290b";
+}
+.a11yfy-two_col {
+    width:300px;
+}
+
+.a11yfy-three_col {
+    width: 450px;
+}
+
+.a11yfy-four_col {
+    width: 600px;
+}
+
+.a11yfy-col {
+    display:inline;
+    float:left;
+    width: 140px;
+}
+.a11yfy-top-level-menu a {
+    text-decoration: none;
+    color: #FFFFFF;
+}
+
+.a11yfy-top-level-menu li:focus>a, .a11yfy-top-level-menu li:hover>a  {
+    color: #000000;
+}
+
+.a11yfy-top-level-menu li {
+    font: bold 14px Arial, Helvetica, sans-serif;
+    color: #FFFFFF;
+    text-decoration: none;
+    padding: 0 0 0 10px;
+
+    display: block;
+    line-height: 30px;
+}
+.a11yfy-top-level-menu li:hover { color: #000000; }
diff --git a/modules/examples/src/menu/menu.html b/modules/examples/src/menu/menu.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html>
+<head>
+  <title>Menu Angular 2.0 (Reflection)</title>
+</head>
+<body>
+    <menu-app>
+    Loading...
+    </menu-app>
+    $SCRIPTS$
+</body>
+</html>
diff --git a/modules/examples/src/menu/menu.js b/modules/examples/src/menu/menu.js
@@ -0,0 +1,8 @@
+import *  as app from './menu_common';
+import {reflector} from 'angular2/src/reflection/reflection';
+import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
+
+export function main() {
+  reflector.reflectionCapabilities = new ReflectionCapabilities();
+  app.main();
+}