|
1 |
| -describe('menu', function () { |
| 1 | +import { MenuPage } from './menu-page'; |
| 2 | + |
| 3 | +describe('menu', () => { |
| 4 | + let page: MenuPage; |
| 5 | + |
2 | 6 | beforeEach(function() {
|
3 |
| - browser.get('/menu'); |
| 7 | + page = new MenuPage(); |
4 | 8 | });
|
5 | 9 |
|
6 |
| - it('should open menu when the trigger is clicked', function () { |
7 |
| - expectMenuPresent(false); |
8 |
| - element(by.id('trigger')).click(); |
| 10 | + it('should open menu when the trigger is clicked', () => { |
| 11 | + page.expectMenuPresent(false); |
| 12 | + page.trigger().click(); |
9 | 13 |
|
10 |
| - expectMenuPresent(true); |
11 |
| - expect(element(by.css('.md-menu')).getText()).toEqual("One\nTwo\nThree"); |
| 14 | + page.expectMenuPresent(true); |
| 15 | + expect(page.menu().getText()).toEqual("One\nTwo\nThree"); |
12 | 16 | });
|
13 | 17 |
|
14 |
| - it('should align menu when open', function() { |
15 |
| - element(by.id('trigger')).click(); |
16 |
| - expectMenuAlignedWith('trigger'); |
| 18 | + it('should close menu when area outside menu is clicked', () => { |
| 19 | + page.trigger().click(); |
| 20 | + page.body().click(); |
| 21 | + page.expectMenuPresent(false); |
17 | 22 | });
|
18 | 23 |
|
19 |
| - it('should close menu when area outside menu is clicked', function () { |
20 |
| - element(by.id('trigger')).click(); |
21 |
| - element(by.tagName('body')).click(); |
22 |
| - expectMenuPresent(false); |
| 24 | + it('should close menu when menu item is clicked', () => { |
| 25 | + page.trigger().click(); |
| 26 | + page.items(0).click(); |
| 27 | + page.expectMenuPresent(false); |
23 | 28 | });
|
24 | 29 |
|
25 |
| - it('should close menu when menu item is clicked', function () { |
26 |
| - element(by.id('trigger')).click(); |
27 |
| - element(by.id('one')).click(); |
28 |
| - expectMenuPresent(false); |
| 30 | + it('should run click handlers on regular menu items', () => { |
| 31 | + page.trigger().click(); |
| 32 | + page.items(0).click(); |
| 33 | + expect(page.getResultText()).toEqual('one'); |
| 34 | + |
| 35 | + page.trigger().click(); |
| 36 | + page.items(1).click(); |
| 37 | + expect(page.getResultText()).toEqual('two'); |
29 | 38 | });
|
30 | 39 |
|
31 |
| - it('should run click handlers on regular menu items', function() { |
32 |
| - element(by.id('trigger')).click(); |
33 |
| - element(by.id('one')).click(); |
34 |
| - expect(element(by.id('text')).getText()).toEqual('one'); |
| 40 | + it('should run not run click handlers on disabled menu items', () => { |
| 41 | + page.trigger().click(); |
| 42 | + page.items(2).click(); |
| 43 | + expect(page.getResultText()).toEqual(''); |
| 44 | + }); |
| 45 | + |
| 46 | + it('should support multiple triggers opening the same menu', () => { |
| 47 | + page.triggerTwo().click(); |
| 48 | + expect(page.menu().getText()).toEqual("One\nTwo\nThree"); |
| 49 | + page.expectMenuAlignedWith(page.menu(), 'trigger-two'); |
| 50 | + |
| 51 | + page.body().click(); |
| 52 | + page.expectMenuPresent(false); |
| 53 | + |
| 54 | + page.trigger().click(); |
| 55 | + expect(page.menu().getText()).toEqual("One\nTwo\nThree"); |
| 56 | + page.expectMenuAlignedWith(page.menu(), 'trigger'); |
35 | 57 |
|
36 |
| - element(by.id('trigger')).click(); |
37 |
| - element(by.id('two')).click(); |
38 |
| - expect(element(by.id('text')).getText()).toEqual('two'); |
| 58 | + page.body().click(); |
| 59 | + page.expectMenuPresent(false); |
39 | 60 | });
|
40 | 61 |
|
41 |
| - it('should run not run click handlers on disabled menu items', function() { |
42 |
| - element(by.id('trigger')).click(); |
43 |
| - element(by.id('three')).click(); |
44 |
| - expect(element(by.id('text')).getText()).toEqual(''); |
| 62 | + it('should mirror classes on host to menu template in overlay', () => { |
| 63 | + page.trigger().click(); |
| 64 | + page.menu().getAttribute('class').then((classes) => { |
| 65 | + expect(classes).toEqual('md-menu custom'); |
| 66 | + }); |
45 | 67 | });
|
46 | 68 |
|
47 |
| - it('should support multiple triggers opening the same menu', function() { |
48 |
| - element(by.id('trigger-two')).click(); |
49 |
| - expect(element(by.css('.md-menu')).getText()).toEqual("One\nTwo\nThree"); |
50 |
| - expectMenuAlignedWith('trigger-two'); |
| 69 | + describe('position - ', () => { |
51 | 70 |
|
52 |
| - element(by.tagName('body')).click(); |
53 |
| - expectMenuPresent(false); |
| 71 | + it('should default menu alignment to "after below" when not set', () => { |
| 72 | + page.trigger().click(); |
54 | 73 |
|
55 |
| - element(by.id('trigger')).click(); |
56 |
| - expect(element(by.css('.md-menu')).getText()).toEqual("One\nTwo\nThree"); |
57 |
| - expectMenuAlignedWith('trigger'); |
| 74 | + // menu.x should equal trigger.x, menu.y should equal trigger.y |
| 75 | + page.expectMenuAlignedWith(page.menu(), 'trigger'); |
| 76 | + }); |
58 | 77 |
|
59 |
| - element(by.tagName('body')).click(); |
60 |
| - expectMenuPresent(false); |
61 |
| - }); |
| 78 | + it('should align overlay end to origin end when x-position is "before"', () => { |
| 79 | + page.beforeTrigger().click(); |
| 80 | + page.beforeTrigger().getLocation().then((trigger) => { |
62 | 81 |
|
63 |
| - function expectMenuPresent(bool: boolean) { |
64 |
| - return browser.isElementPresent(by.css('.md-menu')).then((isPresent) => { |
65 |
| - expect(isPresent).toBe(bool); |
| 82 | + // the menu's right corner must be attached to the trigger's right corner. |
| 83 | + // menu = 112px wide. trigger = 60px wide. 112 - 60 = 52px of menu to the left of trigger. |
| 84 | + // trigger.x (left corner) - 52px (menu left of trigger) = expected menu.x (left corner) |
| 85 | + // menu.y should equal trigger.y because only x position has changed. |
| 86 | + page.expectMenuLocation(page.beforeMenu(), {x: trigger.x - 52, y: trigger.y}); |
| 87 | + }); |
66 | 88 | });
|
67 |
| - } |
68 | 89 |
|
69 |
| - function expectMenuAlignedWith(id: string) { |
70 |
| - element(by.id(id)).getLocation().then((loc) => { |
71 |
| - expectMenuLocation({x: loc.x, y: loc.y}); |
| 90 | + it('should align overlay bottom to origin bottom when y-position is "above"', () => { |
| 91 | + page.aboveTrigger().click(); |
| 92 | + page.aboveTrigger().getLocation().then((trigger) => { |
| 93 | + |
| 94 | + // the menu's bottom corner must be attached to the trigger's bottom corner. |
| 95 | + // menu.x should equal trigger.x because only y position has changed. |
| 96 | + // menu = 64px high. trigger = 20px high. 64 - 20 = 44px of menu extending up past trigger. |
| 97 | + // trigger.y (top corner) - 44px (menu above trigger) = expected menu.y (top corner) |
| 98 | + page.expectMenuLocation(page.aboveMenu(), {x: trigger.x, y: trigger.y - 44}); |
| 99 | + }); |
72 | 100 | });
|
73 |
| - } |
74 | 101 |
|
75 |
| - function expectMenuLocation({x,y}: {x: number, y: number}) { |
76 |
| - element(by.css('.md-menu')).getLocation().then((loc) => { |
77 |
| - expect(loc.x).toEqual(x); |
78 |
| - expect(loc.y).toEqual(y); |
| 102 | + it('should align menu to top left of trigger when "below" and "above"', () => { |
| 103 | + page.combinedTrigger().click(); |
| 104 | + page.combinedTrigger().getLocation().then((trigger) => { |
| 105 | + |
| 106 | + // trigger.x (left corner) - 52px (menu left of trigger) = expected menu.x |
| 107 | + // trigger.y (top corner) - 44px (menu above trigger) = expected menu.y |
| 108 | + page.expectMenuLocation(page.combinedMenu(), {x: trigger.x - 52, y: trigger.y - 44}); |
| 109 | + }); |
79 | 110 | });
|
80 |
| - } |
| 111 | + |
| 112 | + }); |
81 | 113 | });
|
0 commit comments