angular-cn/public/docs/_examples/structural-directives/e2e-spec.ts

67 lines
3.5 KiB
TypeScript

/// <reference path='../_protractor/e2e.d.ts' />
'use strict';
describe('Structural Directives', function () {
// tests interact - so we need beforeEach instead of beforeAll
beforeEach(function () {
browser.get('');
});
it('should be able to use ngFor, ngIf and ngWhen together', function () {
let allDivEles = element.all(by.css('structural-directives > div'));
expect(allDivEles.get(0).getText()).toEqual('Mr. Nice');
expect(allDivEles.get(1).getText()).toEqual('Mr. Nice');
expect(allDivEles.get(4).getText()).toEqual('Ready');
});
it('should be able to toggle ngIf with a button', function () {
let setConditionButtonEle = element.all(by.css('button')).get(0);
let conditionTrueEles = element.all(by.cssContainingText('p', 'condition is true'));
let conditionFalseEles = element.all(by.cssContainingText('p', 'condition is false'));
expect(conditionTrueEles.count()).toBe(2, 'should be two condition true elements');
expect(conditionFalseEles.count()).toBe(0, 'should be no condition false elements');
setConditionButtonEle.click().then(function() {
expect(conditionTrueEles.count()).toBe(0, 'should be no condition true elements');
expect(conditionFalseEles.count()).toBe(2, 'should be two condition false elements');
});
});
it('should be able to compare use of ngIf with changing css visibility', function () {
let setConditionButtonEle = element.all(by.css('button')).get(0);
let ngIfButtonEle = element(by.cssContainingText('button', 'if | !if'));
let ngIfParentEle = ngIfButtonEle.element(by.xpath('..'));
let ngIfSiblingEle = ngIfParentEle.element(by.css('heavy-loader'));
let cssButtonEle = element(by.cssContainingText('button', 'show | hide'));
let cssSiblingEle = cssButtonEle.element(by.xpath('..')).element(by.css('heavy-loader'));
let setConditionText: string;
setConditionButtonEle.getText().then(function(text) {
setConditionText = text;
expect(ngIfButtonEle.isPresent()).toBe(true, 'should be able to find ngIfButton');
expect(cssButtonEle.isPresent()).toBe(true, 'should be able to find cssButton');
expect(ngIfParentEle.isPresent()).toBe(true, 'should be able to find ngIfButton parent');
expect(ngIfSiblingEle.isPresent()).toBe(true, 'should be able to find ngIfButton sibling');
expect(cssSiblingEle.isPresent()).toBe(true, 'should be able to find cssButton sibling');
return ngIfButtonEle.click();
}).then(function() {
expect(ngIfSiblingEle.isPresent()).toBe(false, 'now should NOT be able to find ngIfButton sibling');
expect(setConditionButtonEle.getText()).not.toEqual(setConditionText);
return cssButtonEle.click();
}).then(function() {
expect(cssSiblingEle.isPresent()).toBe(true, 'now should still be able to find cssButton sibling');
expect(cssSiblingEle.isDisplayed()).toBe(false, 'now cssButton sibling should NOT be visible');
return ngIfButtonEle.click();
}).then(function() {
expect(setConditionButtonEle.getText()).toEqual(setConditionText);
});
});
it('should be able to use *ngIf ', function () {
let setConditionButtonEle = element.all(by.css('button')).get(0);
let displayEles = element.all(by.cssContainingText('p', 'Our heroes are true!'));
expect(displayEles.count()).toBe(2, 'should be displaying two ngIf elements');
setConditionButtonEle.click().then(function() {
expect(displayEles.count()).toBe(0, 'should nog longer be displaying ngIf elements');
});
});
});