Skip to content

Commit

Permalink
fix(menu): remove hardcoded max-height (#122)
Browse files Browse the repository at this point in the history 
Closes #65
  • Loading branch information
@yggg @nnixaa
yggg authored and nnixaa committed Jan 18, 2018
1 parent 4704d9e commit a753bee
Show file tree
Hide file tree
Showing 6 changed files with 308 additions and 197 deletions.
268 changes: 148 additions & 120 deletions e2e/menu.e2e-spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* Licensed under the MIT License. See License.txt in the project root for license information.
*/

import { browser, element, by } from 'protractor';
import { browser, element, by, ExpectedConditions as ec } from 'protractor';

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

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

const waitTime = 20 * 1000;

describe('nb-menu', () => {

beforeEach((done) => {
Expand Down Expand Up @@ -94,125 +96,151 @@ describe('nb-menu', () => {
});
});

// it('should be selected - Menu #3.1', () => {
// expect(hasClass(element.all(menu3SubMenu).first(), 'collapsed')).toBeTruthy();
//
// element.all(menu3).first().click()
// .then(() => {
// element.all(menu31).first().getText()
// .then(val => {
// expect(val).toEqual('Menu #3.1');
// });
//
// element.all(menu31).first().click()
// .then(() => {
// expect(browser.getCurrentUrl()).toContain('#/menu/3/1');
// });
// });
// });
//
// it('should be selected - Menu #3.2', () => {
// element.all(menu3).first().click()
// .then(() => {
// element.all(menu32).first().getText()
// .then(val => {
// expect(val).toEqual('Menu #3.2');
// });
//
// element.all(menu32).first().click()
// .then(() => {
// expect(browser.getCurrentUrl()).toContain('#/menu/3/2');
// });
// });
// });

// TODO: Fix test
// it('should be expanded - Menu #3.3', () => {
// element.all(menu3).first().click()
// .then(() => {
// element.all(menu33).first().getText()
// .then(val => {
// expect(val).toEqual('Menu #3.3');
// });

// element.all(menu33).first().click()
// .then(() => {
// expect(hasClass(element.all(menu33SubMenu).first(), 'expanded')).toBeTruthy();
// expect(browser.getCurrentUrl()).toContain('#/menu/1');

// element.all(menu33).first().click()
// .then(() => {
// expect(hasClass(element.all(menu33SubMenu).first(), 'collapsed')).toBeTruthy();
// expect(browser.getCurrentUrl()).toContain('#/menu/1');
// });
// });
// });
// });

// it('should be selected - Menu #3.3.1', () => {
// element.all(menu3).first().click()
// .then(() => {
// element.all(menu33).first().click()
// .then(() => {
// element.all(menu331).first().getText()
// .then(val => {
// expect(val).toEqual('Menu #3.3.1');
// });

// element.all(menu331).first().click()
// .then(() => {
// expect(hasClass(element.all(menu331).first(), 'active')).toBeTruthy();
// expect(browser.getCurrentUrl()).toContain('#/menu/3/3/1');
// });
// });
// });
// });

// it('should be selected - Menu #3.3.2', () => {
// element.all(menu3).first().click()
// .then(() => {
// element.all(menu33).first().click()
// .then(() => {
// element.all(menu332).first().getText()
// .then(val => {
// expect(val).toEqual('Menu #3.3.2');
// });

// element.all(menu332).first().click()
// .then(() => {
// expect(hasClass(element.all(menu332).first(), 'active')).toBeTruthy();
// expect(browser.getCurrentUrl()).toContain('#/menu/3/3/2');
// });
// });
// });
// });

// it('should be selected - Menu #3.3.3', () => {
// element.all(menu3).first().click()
// .then(() => {
// element.all(menu33).first().click()
// .then(() => {
// element.all(menu333).first().getText()
// .then(val => {
// expect(val).toEqual('@nebular/theme');
// });

// element.all(menu333).first().click()
// .then(() => {
// expect(hasClass(element.all(menu333).first(), 'active')).toBeTruthy();
// expect(browser.getCurrentUrl()).toContain('#/menu/1');
// });
// });
// });
// });

// it('should be selected - Menu #3.2.2', () => {
// element(homeButton).click()
// .then(() => {
// expect(hasClass(element.all(menu332).first(), 'active')).toBeTruthy();
// expect(browser.getCurrentUrl()).toContain('#/menu/3/3/2');
// });
// });
it('should be selected - Menu #3.1', () => {
expect(hasClass(element.all(menu3SubMenu).first(), 'collapsed')).toBeTruthy();

element.all(menu3).first().click()
.then(() => {
const menu31el = element.all(menu31).first();
browser.wait(ec.elementToBeClickable(menu31el), waitTime);

menu31el.getText()
.then(val => {
expect(val).toEqual('Menu #3.1');
});

menu31el.click()
.then(() => {
expect(browser.getCurrentUrl()).toContain('#/menu/3/1');
});
});
});

it('should be selected - Menu #3.2', () => {
element.all(menu3).first().click()
.then(() => {
const menu32el = element.all(menu32).first();
browser.wait(ec.elementToBeClickable(menu32el), waitTime);

menu32el.getText()
.then(val => {
expect(val).toEqual('Menu #3.2');
});

menu32el.click()
.then(() => {
expect(browser.getCurrentUrl()).toContain('#/menu/3/2');
});
});
});

it('should be expanded - Menu #3.3', () => {
element.all(menu3).first().click()
.then(() => {
const menu33el = element.all(menu33).first();
browser.wait(ec.elementToBeClickable(menu33el), waitTime);

menu33el.getText()
.then(val => {
expect(val).toEqual('Menu #3.3');
});

menu33el.click()
.then(() => {
expect(hasClass(element.all(menu33SubMenu).first(), 'expanded')).toBeTruthy();
expect(browser.getCurrentUrl()).toContain('#/menu/1');

menu33el.click()
.then(() => {
expect(hasClass(element.all(menu33SubMenu).first(), 'collapsed')).toBeTruthy();
expect(browser.getCurrentUrl()).toContain('#/menu/1');
});
});
});
});

it('should be selected - Menu #3.3.1', () => {
element.all(menu3).first().click()
.then(() => {
const menu33el = element.all(menu33).first();
browser.wait(ec.elementToBeClickable(menu33el), waitTime);

menu33el.click()
.then(() => {
const menu331el = element.all(menu331).first();
browser.wait(ec.elementToBeClickable(menu331el), waitTime);

menu331el.getText()
.then(val => {
expect(val).toEqual('Menu #3.3.1');
});

menu331el.click()
.then(() => {
expect(hasClass(menu331el, 'active')).toBeTruthy();
expect(browser.getCurrentUrl()).toContain('#/menu/3/3/1');
});
});
});
});

it('should be selected - Menu #3.3.2', () => {
element.all(menu3).first().click()
.then(() => {
const menu33el = element.all(menu33).first();
browser.wait(ec.elementToBeClickable(menu33el), waitTime);

menu33el.click()
.then(() => {
const menu332el = element.all(menu332).first();
browser.wait(ec.elementToBeClickable(menu332el), waitTime);

menu332el.getText()
.then(val => {
expect(val).toEqual('Menu #3.3.2');
});

menu332el.click()
.then(() => {
expect(hasClass(menu332el, 'active')).toBeTruthy();
expect(browser.getCurrentUrl()).toContain('#/menu/3/3/2');
});
});
});
});

it('should be selected - Menu #3.3.3', () => {
element.all(menu3).first().click()
.then(() => {
const menu33el = element.all(menu33).first();
browser.wait(ec.elementToBeClickable(menu33el), waitTime);

menu33el.click()
.then(() => {
const menu333el = element.all(menu333).first();
browser.wait(ec.elementToBeClickable(menu333el), waitTime);

menu333el.getText()
.then(val => {
expect(val).toEqual('@nebular/theme');
});

menu333el.click()
.then(() => {
expect(hasClass(menu333el, 'active')).toBeTruthy();
expect(browser.getCurrentUrl()).toContain('#/menu/1');
});
});
});
});

it('should be selected - Menu #3.2.2 (navigate home)', () => {
element(homeButton).click()
.then(() => {
expect(hasClass(element.all(menu332).first(), 'active')).toBeTruthy();
expect(browser.getCurrentUrl()).toContain('#/menu/3/3/2');
});
});

it('should add new menu item', () => {
element(addButton).click()
Expand Down
7 changes: 7 additions & 0 deletions src/framework/theme/components/helpers.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,10 @@ export function convertToBoolProperty(val: any): boolean {

return !!val;
}

export function getElementHeight (el) {
const style = window.getComputedStyle(el);
const marginTop = parseInt(style.getPropertyValue('margin-top'), 10);
const marginBottom = parseInt(style.getPropertyValue('margin-bottom'), 10);
return el.offsetHeight + marginTop + marginBottom;
}
6 changes: 3 additions & 3 deletions src/framework/theme/components/menu/menu-item.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,7 @@
[attr.target]="menuItem.target"
[attr.title]="menuItem.title"
[class.active]="menuItem.selected"
(mouseenter)="onHoverItem(menuItem)"
(click)="onSelectItem(menuItem)">
(mouseenter)="onHoverItem(menuItem)">
<i class="menu-icon {{ menuItem.icon }}" *ngIf="menuItem.icon"></i>
<span class="menu-title">{{ menuItem.title }}</span>
</a>
Expand Down Expand Up @@ -47,7 +46,8 @@
<ul *ngIf="menuItem.children && !menuItem.hidden"
[class.collapsed]="!(menuItem.children && menuItem.expanded)"
[class.expanded]="menuItem.expanded"
class="menu-items">
class="menu-items"
[style.max-height.px]="maxHeight">
<li nbMenuItem *ngFor="let item of menuItem.children"
[menuItem]="item"
[class.menu-group]="item.group"
Expand Down
11 changes: 1 addition & 10 deletions src/framework/theme/components/menu/menu.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,7 @@
.menu-item > .menu-items {
list-style-type: none;
overflow: hidden;

&.collapsed {
max-height: 0;
transition: max-height 0.15s ease-out;
}

&.expanded {
max-height: 300px;
transition: max-height 0.3s ease-in;
}
transition: max-height 0.3s ease-in;
}

.menu-item a {
Expand Down
Loading

0 comments on commit a753bee

Please sign in to comment.