Skip to content

Commit a753bee

Browse files
ygggnnixaa
yggg
authored and
nnixaa
committed
fix(menu): remove hardcoded max-height (#122)
Closes #65
1 parent 4704d9e commit a753bee

File tree

6 files changed

+308
-197
lines changed

6 files changed

+308
-197
lines changed

‎e2e/menu.e2e-spec.ts

Lines changed: 148 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
* Licensed under the MIT License. See License.txt in the project root for license information.
55
*/
66

7-
import { browser, element, by } from 'protractor';
7+
import { browser, element, by, ExpectedConditions as ec } from 'protractor';
88

99
import { hasClass } from './e2e-helper';
1010

@@ -24,6 +24,8 @@ const newMenu = by.css('nb-menu ul li:nth-child(5) a');
2424
const addButton = by.css('#addBtn');
2525
const homeButton = by.css('#homeBtn');
2626

27+
const waitTime = 20 * 1000;
28+
2729
describe('nb-menu', () => {
2830

2931
beforeEach((done) => {
@@ -94,125 +96,151 @@ describe('nb-menu', () => {
9496
});
9597
});
9698

97-
// it('should be selected - Menu #3.1', () => {
98-
// expect(hasClass(element.all(menu3SubMenu).first(), 'collapsed')).toBeTruthy();
99-
//
100-
// element.all(menu3).first().click()
101-
// .then(() => {
102-
// element.all(menu31).first().getText()
103-
// .then(val => {
104-
// expect(val).toEqual('Menu #3.1');
105-
// });
106-
//
107-
// element.all(menu31).first().click()
108-
// .then(() => {
109-
// expect(browser.getCurrentUrl()).toContain('#/menu/3/1');
110-
// });
111-
// });
112-
// });
113-
//
114-
// it('should be selected - Menu #3.2', () => {
115-
// element.all(menu3).first().click()
116-
// .then(() => {
117-
// element.all(menu32).first().getText()
118-
// .then(val => {
119-
// expect(val).toEqual('Menu #3.2');
120-
// });
121-
//
122-
// element.all(menu32).first().click()
123-
// .then(() => {
124-
// expect(browser.getCurrentUrl()).toContain('#/menu/3/2');
125-
// });
126-
// });
127-
// });
128-
129-
// TODO: Fix test
130-
// it('should be expanded - Menu #3.3', () => {
131-
// element.all(menu3).first().click()
132-
// .then(() => {
133-
// element.all(menu33).first().getText()
134-
// .then(val => {
135-
// expect(val).toEqual('Menu #3.3');
136-
// });
137-
138-
// element.all(menu33).first().click()
139-
// .then(() => {
140-
// expect(hasClass(element.all(menu33SubMenu).first(), 'expanded')).toBeTruthy();
141-
// expect(browser.getCurrentUrl()).toContain('#/menu/1');
142-
143-
// element.all(menu33).first().click()
144-
// .then(() => {
145-
// expect(hasClass(element.all(menu33SubMenu).first(), 'collapsed')).toBeTruthy();
146-
// expect(browser.getCurrentUrl()).toContain('#/menu/1');
147-
// });
148-
// });
149-
// });
150-
// });
151-
152-
// it('should be selected - Menu #3.3.1', () => {
153-
// element.all(menu3).first().click()
154-
// .then(() => {
155-
// element.all(menu33).first().click()
156-
// .then(() => {
157-
// element.all(menu331).first().getText()
158-
// .then(val => {
159-
// expect(val).toEqual('Menu #3.3.1');
160-
// });
161-
162-
// element.all(menu331).first().click()
163-
// .then(() => {
164-
// expect(hasClass(element.all(menu331).first(), 'active')).toBeTruthy();
165-
// expect(browser.getCurrentUrl()).toContain('#/menu/3/3/1');
166-
// });
167-
// });
168-
// });
169-
// });
170-
171-
// it('should be selected - Menu #3.3.2', () => {
172-
// element.all(menu3).first().click()
173-
// .then(() => {
174-
// element.all(menu33).first().click()
175-
// .then(() => {
176-
// element.all(menu332).first().getText()
177-
// .then(val => {
178-
// expect(val).toEqual('Menu #3.3.2');
179-
// });
180-
181-
// element.all(menu332).first().click()
182-
// .then(() => {
183-
// expect(hasClass(element.all(menu332).first(), 'active')).toBeTruthy();
184-
// expect(browser.getCurrentUrl()).toContain('#/menu/3/3/2');
185-
// });
186-
// });
187-
// });
188-
// });
189-
190-
// it('should be selected - Menu #3.3.3', () => {
191-
// element.all(menu3).first().click()
192-
// .then(() => {
193-
// element.all(menu33).first().click()
194-
// .then(() => {
195-
// element.all(menu333).first().getText()
196-
// .then(val => {
197-
// expect(val).toEqual('@nebular/theme');
198-
// });
199-
200-
// element.all(menu333).first().click()
201-
// .then(() => {
202-
// expect(hasClass(element.all(menu333).first(), 'active')).toBeTruthy();
203-
// expect(browser.getCurrentUrl()).toContain('#/menu/1');
204-
// });
205-
// });
206-
// });
207-
// });
208-
209-
// it('should be selected - Menu #3.2.2', () => {
210-
// element(homeButton).click()
211-
// .then(() => {
212-
// expect(hasClass(element.all(menu332).first(), 'active')).toBeTruthy();
213-
// expect(browser.getCurrentUrl()).toContain('#/menu/3/3/2');
214-
// });
215-
// });
99+
it('should be selected - Menu #3.1', () => {
100+
expect(hasClass(element.all(menu3SubMenu).first(), 'collapsed')).toBeTruthy();
101+
102+
element.all(menu3).first().click()
103+
.then(() => {
104+
const menu31el = element.all(menu31).first();
105+
browser.wait(ec.elementToBeClickable(menu31el), waitTime);
106+
107+
menu31el.getText()
108+
.then(val => {
109+
expect(val).toEqual('Menu #3.1');
110+
});
111+
112+
menu31el.click()
113+
.then(() => {
114+
expect(browser.getCurrentUrl()).toContain('#/menu/3/1');
115+
});
116+
});
117+
});
118+
119+
it('should be selected - Menu #3.2', () => {
120+
element.all(menu3).first().click()
121+
.then(() => {
122+
const menu32el = element.all(menu32).first();
123+
browser.wait(ec.elementToBeClickable(menu32el), waitTime);
124+
125+
menu32el.getText()
126+
.then(val => {
127+
expect(val).toEqual('Menu #3.2');
128+
});
129+
130+
menu32el.click()
131+
.then(() => {
132+
expect(browser.getCurrentUrl()).toContain('#/menu/3/2');
133+
});
134+
});
135+
});
136+
137+
it('should be expanded - Menu #3.3', () => {
138+
element.all(menu3).first().click()
139+
.then(() => {
140+
const menu33el = element.all(menu33).first();
141+
browser.wait(ec.elementToBeClickable(menu33el), waitTime);
142+
143+
menu33el.getText()
144+
.then(val => {
145+
expect(val).toEqual('Menu #3.3');
146+
});
147+
148+
menu33el.click()
149+
.then(() => {
150+
expect(hasClass(element.all(menu33SubMenu).first(), 'expanded')).toBeTruthy();
151+
expect(browser.getCurrentUrl()).toContain('#/menu/1');
152+
153+
menu33el.click()
154+
.then(() => {
155+
expect(hasClass(element.all(menu33SubMenu).first(), 'collapsed')).toBeTruthy();
156+
expect(browser.getCurrentUrl()).toContain('#/menu/1');
157+
});
158+
});
159+
});
160+
});
161+
162+
it('should be selected - Menu #3.3.1', () => {
163+
element.all(menu3).first().click()
164+
.then(() => {
165+
const menu33el = element.all(menu33).first();
166+
browser.wait(ec.elementToBeClickable(menu33el), waitTime);
167+
168+
menu33el.click()
169+
.then(() => {
170+
const menu331el = element.all(menu331).first();
171+
browser.wait(ec.elementToBeClickable(menu331el), waitTime);
172+
173+
menu331el.getText()
174+
.then(val => {
175+
expect(val).toEqual('Menu #3.3.1');
176+
});
177+
178+
menu331el.click()
179+
.then(() => {
180+
expect(hasClass(menu331el, 'active')).toBeTruthy();
181+
expect(browser.getCurrentUrl()).toContain('#/menu/3/3/1');
182+
});
183+
});
184+
});
185+
});
186+
187+
it('should be selected - Menu #3.3.2', () => {
188+
element.all(menu3).first().click()
189+
.then(() => {
190+
const menu33el = element.all(menu33).first();
191+
browser.wait(ec.elementToBeClickable(menu33el), waitTime);
192+
193+
menu33el.click()
194+
.then(() => {
195+
const menu332el = element.all(menu332).first();
196+
browser.wait(ec.elementToBeClickable(menu332el), waitTime);
197+
198+
menu332el.getText()
199+
.then(val => {
200+
expect(val).toEqual('Menu #3.3.2');
201+
});
202+
203+
menu332el.click()
204+
.then(() => {
205+
expect(hasClass(menu332el, 'active')).toBeTruthy();
206+
expect(browser.getCurrentUrl()).toContain('#/menu/3/3/2');
207+
});
208+
});
209+
});
210+
});
211+
212+
it('should be selected - Menu #3.3.3', () => {
213+
element.all(menu3).first().click()
214+
.then(() => {
215+
const menu33el = element.all(menu33).first();
216+
browser.wait(ec.elementToBeClickable(menu33el), waitTime);
217+
218+
menu33el.click()
219+
.then(() => {
220+
const menu333el = element.all(menu333).first();
221+
browser.wait(ec.elementToBeClickable(menu333el), waitTime);
222+
223+
menu333el.getText()
224+
.then(val => {
225+
expect(val).toEqual('@nebular/theme');
226+
});
227+
228+
menu333el.click()
229+
.then(() => {
230+
expect(hasClass(menu333el, 'active')).toBeTruthy();
231+
expect(browser.getCurrentUrl()).toContain('#/menu/1');
232+
});
233+
});
234+
});
235+
});
236+
237+
it('should be selected - Menu #3.2.2 (navigate home)', () => {
238+
element(homeButton).click()
239+
.then(() => {
240+
expect(hasClass(element.all(menu332).first(), 'active')).toBeTruthy();
241+
expect(browser.getCurrentUrl()).toContain('#/menu/3/3/2');
242+
});
243+
});
216244

217245
it('should add new menu item', () => {
218246
element(addButton).click()

‎src/framework/theme/components/helpers.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,3 +13,10 @@ export function convertToBoolProperty(val: any): boolean {
1313

1414
return !!val;
1515
}
16+
17+
export function getElementHeight (el) {
18+
const style = window.getComputedStyle(el);
19+
const marginTop = parseInt(style.getPropertyValue('margin-top'), 10);
20+
const marginBottom = parseInt(style.getPropertyValue('margin-bottom'), 10);
21+
return el.offsetHeight + marginTop + marginBottom;
22+
}

‎src/framework/theme/components/menu/menu-item.component.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,7 @@
88
[attr.target]="menuItem.target"
99
[attr.title]="menuItem.title"
1010
[class.active]="menuItem.selected"
11-
(mouseenter)="onHoverItem(menuItem)"
12-
(click)="onSelectItem(menuItem)">
11+
(mouseenter)="onHoverItem(menuItem)">
1312
<i class="menu-icon {{ menuItem.icon }}" *ngIf="menuItem.icon"></i>
1413
<span class="menu-title">{{ menuItem.title }}</span>
1514
</a>
@@ -47,7 +46,8 @@
4746
<ul *ngIf="menuItem.children && !menuItem.hidden"
4847
[class.collapsed]="!(menuItem.children && menuItem.expanded)"
4948
[class.expanded]="menuItem.expanded"
50-
class="menu-items">
49+
class="menu-items"
50+
[style.max-height.px]="maxHeight">
5151
<li nbMenuItem *ngFor="let item of menuItem.children"
5252
[menuItem]="item"
5353
[class.menu-group]="item.group"

‎src/framework/theme/components/menu/menu.component.scss

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,7 @@
1111
.menu-item > .menu-items {
1212
list-style-type: none;
1313
overflow: hidden;
14-
15-
&.collapsed {
16-
max-height: 0;
17-
transition: max-height 0.15s ease-out;
18-
}
19-
20-
&.expanded {
21-
max-height: 300px;
22-
transition: max-height 0.3s ease-in;
23-
}
14+
transition: max-height 0.3s ease-in;
2415
}
2516

2617
.menu-item a {

0 commit comments

Comments
 (0)