mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
749cd3829c
Starting a couple of versions ago, animations in navbar stopped working. I took this as a chance to fix this, and ddo a refactor to make the code more modular and testable. Lots of manual dom manipulation was offloaded to angular directives, and now we will not have bugs with end-user using interpolated class attribute on their own nav-bar and overriding our own manually added classes.
177 lines
7.2 KiB
JavaScript
177 lines
7.2 KiB
JavaScript
'use strict';
|
|
|
|
describe('Ionic View', function() {
|
|
var compile, scope, listElement, listCtrl;
|
|
|
|
beforeEach(module('ionic.ui.viewState'));
|
|
|
|
beforeEach(inject(function($compile, $rootScope, $controller) {
|
|
compile = $compile;
|
|
scope = $rootScope;
|
|
}));
|
|
|
|
it('should init a view', function() {
|
|
var element = compile('<view>me view</view>')(scope);
|
|
expect(element.html()).toEqual('me view');
|
|
});
|
|
|
|
it('should add pane classname and remove title from view', function() {
|
|
var element = compile('<view title="\'Me Title\'"></view>')(scope);
|
|
expect(element.attr('title')).toBeUndefined();
|
|
expect(element.hasClass('pane')).toEqual(true);
|
|
});
|
|
|
|
it('should broacast view enter on link', function() {
|
|
spyOn(scope, '$broadcast');
|
|
var element = compile('<view title="\'Me Title\'"></view>')(scope);
|
|
expect(scope.$broadcast).toHaveBeenCalledWith('viewState.viewEnter', { title: 'Me Title', navDirection: undefined });
|
|
|
|
scope.$navDirection = 'forward';
|
|
element = compile('<view title="\'Me Title\'"></view>')(scope);
|
|
expect(scope.$broadcast).toHaveBeenCalledWith('viewState.viewEnter', { title: 'Me Title', navDirection: 'forward' });
|
|
});
|
|
|
|
it('should set hide back button', function() {
|
|
spyOn(scope, '$broadcast');
|
|
|
|
var element = compile('<view></view>')(scope);
|
|
var viewScope = element.isolateScope();
|
|
expect(viewScope.hideBackButton).toBeUndefined();
|
|
expect(scope.$broadcast).not.toHaveBeenCalledWith('viewState.showBackButton', false);
|
|
|
|
element = compile('<view hide-back-button="true"></view>')(scope);
|
|
viewScope = element.isolateScope();
|
|
expect(viewScope.hideBackButton).toEqual(true);
|
|
expect(scope.$broadcast).toHaveBeenCalledWith('viewState.showBackButton', false);
|
|
});
|
|
|
|
it('should add/remove back button based on events', function() {
|
|
var element = compile('<nav-bar back-button-label="Back"></nav-bar>')(scope);
|
|
scope.$apply();
|
|
function backButton() {
|
|
return angular.element(element[0].querySelector('.back-button'));
|
|
};
|
|
expect(backButton().length).toEqual(1);
|
|
|
|
scope.$broadcast('viewState.showBackButton', false);
|
|
scope.$apply();
|
|
expect(backButton().length).toEqual(0);
|
|
|
|
scope.$broadcast('viewState.showBackButton', true);
|
|
scope.$apply();
|
|
expect(backButton().length).toEqual(1);
|
|
|
|
scope.$broadcast('$viewHistory.historyChange', { showBack: false });
|
|
scope.$apply();
|
|
expect(backButton().length).toEqual(0);
|
|
|
|
scope.$broadcast('$viewHistory.historyChange', { showBack: true });
|
|
scope.$apply();
|
|
expect(backButton().length).toEqual(1);
|
|
});
|
|
|
|
it('should show/hide navBar', function() {
|
|
var element = compile('<nav-bar></nav-bar>')(scope);
|
|
scope.$digest();
|
|
expect(element.hasClass('invisible')).toEqual(true);
|
|
scope.$broadcast('viewState.showNavBar', true);
|
|
scope.$digest();
|
|
expect(element.hasClass('invisible')).toEqual(false);
|
|
scope.$broadcast('viewState.showNavBar', false);
|
|
scope.$digest();
|
|
expect(element.hasClass('invisible')).toEqual(true);
|
|
});
|
|
|
|
it('should hide navBar when using view attr', function() {
|
|
var element = compile('<div><nav-bar></nav-bar><view hide-nav-bar="true"></view></div>')(scope);
|
|
scope.$digest();
|
|
var navBar = element.find('header')
|
|
expect(navBar.hasClass('invisible')).toEqual(true);
|
|
});
|
|
|
|
it('should show navbar when not using view attr', function() {
|
|
var element = compile('<div><nav-bar></nav-bar><view></view></div>')(scope);
|
|
scope.$digest();
|
|
var navBar = element.find('header')
|
|
expect(navBar.hasClass('invisible')).toEqual(false);
|
|
});
|
|
|
|
it('should set the navBar type', function() {
|
|
var element = compile('<nav-bar type="bar-positive"></nav-bar>')(scope);
|
|
scope.$digest();
|
|
expect(element.hasClass('bar-positive')).toEqual(true);
|
|
});
|
|
|
|
it('should not have the back button if no back button attributes set', function() {
|
|
var element = compile('<nav-bar></nav-bar>')(scope);
|
|
scope.$digest();
|
|
var backButton = angular.element(element[0].querySelector('.back-button'));
|
|
expect(backButton.length).toEqual(0);
|
|
});
|
|
|
|
it('should have the back button if back-button-type attributes set', function() {
|
|
var element = compile('<nav-bar back-button-type="button-icon"></nav-bar>')(scope);
|
|
scope.$digest();
|
|
var backButton = angular.element(element[0].querySelector('.back-button'));
|
|
expect(backButton.length).toEqual(1);
|
|
});
|
|
|
|
it('should have the back button if back-button-icon attributes set', function() {
|
|
var element = compile('<nav-bar back-button-icon="ion-back"></nav-bar>')(scope);
|
|
scope.$digest();
|
|
var backButton = angular.element(element[0].querySelector('.back-button'));
|
|
expect(backButton.length).toEqual(1);
|
|
});
|
|
|
|
it('should have the back button if back-button-label attributes set', function() {
|
|
var element = compile('<nav-bar back-button-label="Button"></nav-bar>')(scope);
|
|
scope.$digest();
|
|
var backButton = angular.element(element[0].querySelector('.back-button'));
|
|
expect(backButton.length).toEqual(1);
|
|
});
|
|
|
|
it('should have the back button if all back button attributes set', function() {
|
|
var element = compile('<nav-bar back-button-type="button-icon" back-button-icon="ion-back" back-button-label="Button"></nav-bar>')(scope);
|
|
scope.$digest();
|
|
var backButton = angular.element(element[0].querySelector('.back-button'));
|
|
expect(backButton.length).toEqual(1);
|
|
});
|
|
|
|
it('should set just a back button icon, no text', function() {
|
|
var element = compile('<nav-bar back-button-icon="ion-back" back-button-type="button-icon"></nav-bar>')(scope);
|
|
scope.$digest();
|
|
var backButton = angular.element(element[0].querySelector('.back-button'));
|
|
expect(backButton.hasClass('button')).toEqual(true);
|
|
expect(backButton.hasClass('button-icon')).toEqual(true);
|
|
expect(backButton.hasClass('icon')).toEqual(true);
|
|
expect(backButton.hasClass('ion-back')).toEqual(true);
|
|
expect(backButton.children().length).toEqual(0);
|
|
expect(backButton.text().trim()).toEqual('');
|
|
});
|
|
|
|
it('should set just a back button with only text, button-clear', function() {
|
|
var element = compile('<nav-bar back-button-label="Back" back-button-type="button-clear"></nav-bar>')(scope);
|
|
scope.$apply();
|
|
var backButton = angular.element(element[0].querySelector('.back-button'));
|
|
expect(backButton.hasClass('button')).toEqual(true);
|
|
expect(backButton.hasClass('button-clear')).toEqual(true);
|
|
expect(backButton.hasClass('icon')).toEqual(false);
|
|
expect(backButton.text().trim()).toEqual('Back');
|
|
});
|
|
|
|
it('should set a back button with an icon and text, button-icon', function() {
|
|
var element = compile('<nav-bar back-button-icon="ion-back" back-button-label="Back" back-button-type="button-icon"></nav-bar>')(scope);
|
|
scope.$digest();
|
|
var backButton = angular.element(element[0].querySelector('.back-button'));
|
|
expect(backButton.hasClass('button')).toEqual(true);
|
|
expect(backButton.hasClass('button-icon')).toEqual(true);
|
|
var icon = backButton.find('i');
|
|
expect(icon.hasClass('icon')).toEqual(true);
|
|
expect(backButton.children()[0].tagName.toLowerCase()).toBe('i');
|
|
expect(backButton.children()[0].className).toBe('icon ion-back');
|
|
expect(backButton.text().trim()).toBe('Back');
|
|
});
|
|
|
|
});
|
|
|