angular-cn/aio/content/examples/reactive-forms/e2e-spec.ts

1021 lines
41 KiB
TypeScript

'use strict'; // necessary for es6 output in node
import { browser, element, by } from 'protractor';
function finalDemoAddressForm(element: any, index: number) {
let form = {
street: element.all(by.css('input[formcontrolname=street]')).get(index).getAttribute('value'),
city: element.all(by.css('input[formcontrolname=city]')).get(index).getAttribute('value'),
state: element.all(by.css('select[formcontrolname=state]')).get(index).getAttribute('value'),
zip: element.all(by.css('input[formcontrolname=zip]')).get(index).getAttribute('value')
};
return form;
}
describe('Reactive forms', function() {
let select: any;
beforeEach(function() {
browser.get('');
select = element(by.css('.container > h4 > select'));
});
describe('navigation', function() {
it('should display the title', function() {
let title = element(by.css('.container > h1'));
expect(title.getText()).toBe('Reactive Forms');
});
it('should contain a dropdown with each example', function() {
expect(select.isDisplayed()).toBe(true);
});
it('should have 9 options for different demos', function() {
let options = select.all(by.tagName('option'));
expect(options.count()).toBe(9);
});
it('should start with Final Demo', function() {
select.getAttribute('value').then(function(demo: string) {
expect(demo).toBe('Final Demo');
});
});
});
// *************Begin Final Demo test*******************************
describe('final demo', function() {
it('does not select any hero by default', function() {
let heroSection = element(by.css('hero-list > div'));
expect(heroSection.isPresent()).toBe(false);
});
it('refreshes the page upon button click', function() {
// We move to another page...
let whirlwindButton = element.all(by.css('nav a')).get(0);
whirlwindButton.click();
let refresh = element(by.css('button'));
refresh.click();
let heroSection = element(by.css('hero-list > div'));
expect(heroSection.isPresent()).toBe(false);
});
describe('Whirlwind form', function() {
beforeEach(function() {
let whirlwindButton = element.all(by.css('nav a')).get(0);
whirlwindButton.click();
});
it('should show a hero information when the button is clicked', function() {
let editMessage = element(by.css('hero-list > div > h3'));
expect(editMessage.getText()).toBe('Editing: Whirlwind');
});
it('should show a form with the selected hero information', function() {
let nameInput = element(by.css('input[formcontrolname=name]'));
expect(nameInput.getAttribute('value')).toBe('Whirlwind');
let address1 = finalDemoAddressForm(element, 0);
expect(address1.street).toBe('123 Main');
expect(address1.state).toBe('CA');
expect(address1.zip).toBe('94801');
expect(address1.city).toBe('Anywhere');
let address2 = finalDemoAddressForm(element, 1);
expect(address2.street).toBe('456 Maple');
expect(address2.state).toBe('VA');
expect(address2.zip).toBe('23226');
expect(address2.city).toBe('Somewhere');
});
it('shows a json output from the form', function() {
let json = element(by.css('hero-detail > p'));
expect(json.getText()).toContain('Whirlwind');
expect(json.getText()).toContain('Anywhere');
expect(json.getText()).toContain('Somewhere');
expect(json.getText()).toContain('VA');
});
it('has two disabled buttons by default', function() {
let buttons = element.all(by.css('hero-detail > form > div > button'));
expect(buttons.get(0).getAttribute('disabled')).toBe('true');
expect(buttons.get(1).getAttribute('disabled')).toBe('true');
});
it('enables the buttons after we edit the form', function() {
let nameInput = element(by.css('input[formcontrolname=name]'));
nameInput.sendKeys('a');
let buttons = element.all(by.css('hero-detail > form > div > button'));
expect(buttons.get(0).getAttribute('disabled')).toBeNull();
expect(buttons.get(1).getAttribute('disabled')).toBeNull();
});
it('saves the changes when the save button is clicked', function() {
let nameInput = element(by.css('input[formcontrolname=name]'));
nameInput.sendKeys('a');
let save = element.all(by.css('hero-detail > form > div > button')).get(0);
save.click();
let editMessage = element(by.css('hero-list > div > h3'));
expect(editMessage.getText()).toBe('Editing: Whirlwinda');
});
it('reverts the changes when the revert button is clicked', function() {
let nameInput = element(by.css('input[formcontrolname=name]'));
nameInput.sendKeys('a');
let revert = element.all(by.css('hero-detail > form > div > button')).get(1);
revert.click();
let editMessage = element(by.css('hero-list > div > h3'));
expect(editMessage.getText()).toBe('Editing: Whirlwind');
expect(nameInput.getAttribute('value')).toBe('Whirlwind');
});
it('is able to add a new empty address', function() {
let newLairButton = element.all(by.css('button')).get(3);
newLairButton.click();
let address3 = finalDemoAddressForm(element, 2);
expect(address3.street).toBe('');
expect(address3.state).toBe('');
expect(address3.zip).toBe('');
expect(address3.city).toBe('');
});
it('should show three radio buttons', function() {
let radioButtons = element.all(by.css('input[formcontrolname=power]'));
expect(radioButtons.get(0).getAttribute('value')).toBe('flight');
expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision');
expect(radioButtons.get(2).getAttribute('value')).toBe('strength');
});
it('should show a checkbox', function() {
let checkbox = element(by.css('input[formcontrolname=sidekick]'));
expect(checkbox.getAttribute('checked')).toBe(null);
});
});
describe('Bombastic form', function() {
beforeEach(function() {
let bombastaButton = element.all(by.css('nav a')).get(1);
bombastaButton.click();
});
it('should show a hero information when the button is clicked', function() {
let editMessage = element(by.css('hero-list > div > h3'));
expect(editMessage.getText()).toBe('Editing: Bombastic');
});
it('should show a form with the selected hero information', function() {
let nameInput = element(by.css('input[formcontrolname=name]'));
expect(nameInput.getAttribute('value')).toBe('Bombastic');
let address1 = finalDemoAddressForm(element, 0);
expect(address1.street).toBe('789 Elm');
// expect(address1.state).toBe('OH');
expect(address1.zip).toBe('04501');
expect(address1.city).toBe('Smallville');
});
it('shows a json output from the form', function() {
let json = element(by.css('hero-detail > p'));
expect(json.getText()).toContain('Bombastic');
expect(json.getText()).toContain('Smallville');
expect(json.getText()).toContain('OH');
expect(json.getText()).toContain('04501');
});
it('has two disabled buttons by default', function() {
let buttons = element.all(by.css('hero-detail > form > div > button'));
expect(buttons.get(0).getAttribute('disabled')).toBe('true');
expect(buttons.get(1).getAttribute('disabled')).toBe('true');
});
it('enables the buttons after we edit the form', function() {
let nameInput = element(by.css('input[formcontrolname=name]'));
nameInput.sendKeys('a');
let buttons = element.all(by.css('hero-detail > form > div > button'));
expect(buttons.get(0).getAttribute('disabled')).toBeNull();
expect(buttons.get(1).getAttribute('disabled')).toBeNull();
});
it('saves the changes when the save button is clicked', function() {
let nameInput = element(by.css('input[formcontrolname=name]'));
nameInput.sendKeys('a');
let save = element.all(by.css('hero-detail > form > div > button')).get(0);
save.click();
let editMessage = element(by.css('hero-list > div > h3'));
expect(editMessage.getText()).toBe('Editing: Bombastica');
});
it('reverts the changes when the revert button is clicked', function() {
let nameInput = element(by.css('input[formcontrolname=name]'));
nameInput.sendKeys('a');
let revert = element.all(by.css('hero-detail > form > div > button')).get(1);
revert.click();
let editMessage = element(by.css('hero-list > div > h3'));
expect(editMessage.getText()).toBe('Editing: Bombastic');
expect(nameInput.getAttribute('value')).toBe('Bombastic');
});
it('is able to add a new empty address', function() {
let newLairButton = element.all(by.css('button')).get(3);
newLairButton.click();
let address2 = finalDemoAddressForm(element, 1);
expect(address2.street).toBe('');
expect(address2.state).toBe('');
expect(address2.zip).toBe('');
expect(address2.city).toBe('');
});
it('should show three radio buttons', function() {
let radioButtons = element.all(by.css('input[formcontrolname=power]'));
expect(radioButtons.get(0).getAttribute('value')).toBe('flight');
expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision');
expect(radioButtons.get(2).getAttribute('value')).toBe('strength');
});
it('should show a checbox', function() {
let checkbox = element(by.css('input[formcontrolname=sidekick]'));
expect(checkbox.getAttribute('checked')).toBe(null);
});
});
describe('Magneta form', function() {
beforeEach(function() {
let magnetaButton = element.all(by.css('nav a')).get(2);
magnetaButton.click();
});
it('should show hero information when the button is clicked', function() {
let editMessage = element(by.css('hero-list > div > h3'));
expect(editMessage.getText()).toBe('Editing: Magneta');
});
it('should show a form with the selected hero information', function() {
let nameInput = element(by.css('input[formcontrolname=name]'));
expect(nameInput.getAttribute('value')).toBe('Magneta');
});
it('shows a json output from the form', function() {
let json = element(by.css('hero-detail > p'));
expect(json.getText()).toContain('Magneta');
});
it('has two disabled buttons by default', function() {
let buttons = element.all(by.css('hero-detail > form > div > button'));
expect(buttons.get(0).getAttribute('disabled')).toBe('true');
expect(buttons.get(1).getAttribute('disabled')).toBe('true');
});
it('enables the buttons after we edit the form', function() {
let nameInput = element(by.css('input[formcontrolname=name]'));
nameInput.sendKeys('a');
let buttons = element.all(by.css('hero-detail > form > div > button'));
expect(buttons.get(0).getAttribute('disabled')).toBeNull();
expect(buttons.get(1).getAttribute('disabled')).toBeNull();
});
it('saves the changes when the save button is clicked', function() {
let nameInput = element(by.css('input[formcontrolname=name]'));
nameInput.sendKeys('a');
let save = element.all(by.css('hero-detail > form > div > button')).get(0);
save.click();
let editMessage = element(by.css('hero-list > div > h3'));
expect(editMessage.getText()).toBe('Editing: Magnetaa');
});
it('reverts the changes when the revert button is clicked', function() {
let nameInput = element(by.css('input[formcontrolname=name]'));
nameInput.sendKeys('a');
let revert = element.all(by.css('hero-detail > form > div > button')).get(1);
revert.click();
let editMessage = element(by.css('hero-list > div > h3'));
expect(editMessage.getText()).toBe('Editing: Magneta');
expect(nameInput.getAttribute('value')).toBe('Magneta');
});
it('is able to add a new empty address', function() {
let newLairButton = element.all(by.css('button')).get(3);
newLairButton.click();
let address = finalDemoAddressForm(element, 0);
expect(address.street).toBe('');
expect(address.state).toBe('');
expect(address.zip).toBe('');
expect(address.city).toBe('');
});
it('should show three radio buttons', function() {
let radioButtons = element.all(by.css('input[formcontrolname=power]'));
expect(radioButtons.get(0).getAttribute('value')).toBe('flight');
expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision');
expect(radioButtons.get(2).getAttribute('value')).toBe('strength');
});
it('should show a checkbox', function() {
let checkbox = element(by.css('input[formcontrolname=sidekick]'));
expect(checkbox.getAttribute('checked')).toBe(null);
});
});
}); // final demo
// *************Begin FormArray Demo test*******************************
describe('formArray demo', function() {
beforeEach(function() {
let FormArrayOption = element.all(by.css('select option')).get(7);
FormArrayOption.click();
});
it('should show FormArray Demo', function() {
select.getAttribute('value').then(function(demo: string) {
expect(demo).toBe('FormArray Demo');
});
});
it('does not select any hero by default', function() {
let heroSection = element(by.css('hero-list > div'));
expect(heroSection.isPresent()).toBe(false);
});
it('refreshes the page upon button click', function() {
// We move to another page...
let whirlwindButton = element.all(by.css('nav a')).get(0);
whirlwindButton.click();
let refresh = element(by.css('button'));
refresh.click();
let heroSection = element(by.css('hero-list > div'));
expect(heroSection.isPresent()).toBe(false);
});
describe('Whirlwind form', function() {
beforeEach(function() {
let whirlwindButton = element.all(by.css('nav a')).get(0);
whirlwindButton.click();
});
it('should show hero information when the button is clicked', function() {
let editMessage = element(by.css('div.demo > div > div > h3'));
expect(editMessage.getText()).toBe('Editing: Whirlwind');
});
it('should show a form with the selected hero information', function() {
let nameInput = element(by.css('input[formcontrolname=name]'));
expect(nameInput.getAttribute('value')).toBe('Whirlwind');
let address1 = finalDemoAddressForm(element, 0);
expect(address1.street).toBe('123 Main');
expect(address1.state).toBe('CA');
expect(address1.zip).toBe('94801');
expect(address1.city).toBe('Anywhere');
let address2 = finalDemoAddressForm(element, 1);
expect(address2.street).toBe('456 Maple');
expect(address2.state).toBe('VA');
expect(address2.zip).toBe('23226');
expect(address2.city).toBe('Somewhere');
});
it('shows a json output from the form', function() {
let json = element(by.css('hero-detail-8 > p'));
expect(json.getText()).toContain('Whirlwind');
expect(json.getText()).toContain('Anywhere');
expect(json.getText()).toContain('Somewhere');
expect(json.getText()).toContain('VA');
});
it('is able to add a new empty address', function() {
let newLairButton = element.all(by.css('button')).get(1);
newLairButton.click();
let address2 = finalDemoAddressForm(element, 2);
expect(address2.street).toBe('');
expect(address2.state).toBe('');
expect(address2.zip).toBe('');
expect(address2.city).toBe('');
});
it('should show three radio buttons', function() {
let radioButtons = element.all(by.css('input[formcontrolname=power]'));
expect(radioButtons.get(0).getAttribute('value')).toBe('flight');
expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision');
expect(radioButtons.get(2).getAttribute('value')).toBe('strength');
});
it('should show a checkbox', function() {
let checkbox = element(by.css('input[formcontrolname=sidekick]'));
expect(checkbox.getAttribute('checked')).toBe(null);
});
}); // Whirlwind form
describe('Bombastic FormArray form', function() {
beforeEach(function() {
let bombasticButton = element.all(by.css('nav a')).get(1);
bombasticButton.click();
});
it('should show a hero information when the button is clicked', function() {
let editMessage = element(by.css('div.demo > div > div > h3'));
expect(editMessage.getText()).toBe('Editing: Bombastic');
});
it('should show a form with the selected hero information', function() {
let nameInput = element(by.css('input[formcontrolname=name]'));
// nameInput.getAttribute('value').then(function(name: string) {
// expect(name).toBe('Whirlwind');
// });
expect(nameInput.getAttribute('value')).toBe('Bombastic');
let address1 = finalDemoAddressForm(element, 0);
expect(address1.street).toBe('789 Elm');
// expect(address1.state).toBe('OH');
// This select should be OH not CA, which it shows in the UI, the JSON shows OH.
expect(address1.zip).toBe('04501');
expect(address1.city).toBe('Smallville');
});
it('shows a json output from the form', function() {
let json = element(by.css('hero-detail-8 > p'));
expect(json.getText()).toContain('Bombastic');
expect(json.getText()).toContain('Smallville');
expect(json.getText()).toContain('04501');
expect(json.getText()).toContain('789 Elm');
});
it('is able to add a new empty address', function() {
let newLairButton = element.all(by.css('button')).get(1);
newLairButton.click();
let address1 = finalDemoAddressForm(element, 1);
expect(address1.street).toBe('');
expect(address1.state).toBe('');
expect(address1.zip).toBe('');
expect(address1.city).toBe('');
});
it('should show three radio buttons', function() {
let radioButtons = element.all(by.css('input[formcontrolname=power]'));
expect(radioButtons.get(0).getAttribute('value')).toBe('flight');
expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision');
expect(radioButtons.get(2).getAttribute('value')).toBe('strength');
});
it('should show a checkbox', function() {
let checkbox = element(by.css('input[formcontrolname=sidekick]'));
expect(checkbox.getAttribute('checked')).toBe(null);
});
}); // Bombastic FormArray form
describe('Magneta FormArray form', function() {
beforeEach(function() {
let magnetaButton = element.all(by.css('nav a')).get(2);
magnetaButton.click();
});
it('should show a hero information when the button is clicked', function() {
let editMessage = element(by.css('div.demo > div > div > h3'));
expect(editMessage.getText()).toBe('Editing: Magneta');
});
it('should show a form with the selected hero information', function() {
let nameInput = element(by.css('input[formcontrolname=name]'));
expect(nameInput.getAttribute('value')).toBe('Magneta');
});
it('shows a json output from the form', function() {
let json = element(by.css('hero-detail-8 > p'));
expect(json.getText()).toContain('Magneta');
});
it('is able to add a new empty address', function() {
let newLairButton = element.all(by.css('button')).get(1);
newLairButton.click();
let address1 = finalDemoAddressForm(element, 0);
expect(address1.street).toBe('');
expect(address1.state).toBe('');
expect(address1.zip).toBe('');
expect(address1.city).toBe('');
});
it('should show three radio buttons', function() {
let radioButtons = element.all(by.css('input[formcontrolname=power]'));
expect(radioButtons.get(0).getAttribute('value')).toBe('flight');
expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision');
expect(radioButtons.get(2).getAttribute('value')).toBe('strength');
});
it('should show a checkbox', function() {
let checkbox = element(by.css('input[formcontrolname=sidekick]'));
expect(checkbox.getAttribute('checked')).toBe(null);
});
}); // Magneta FormArray form
}); // formArray demo
// *************Begin SetValue Demo test*******************************
describe('SetValue demo', function() {
beforeEach(function() {
let SetValueOption = element.all(by.css('select option')).get(6);
SetValueOption.click();
});
it('should show SetValue Demo', function() {
select.getAttribute('value').then(function(demo: string) {
expect(demo).toBe('SetValue Demo');
});
});
it('does not select any hero by default', function() {
let heroSection = element(by.css('hero-list > div'));
expect(heroSection.isPresent()).toBe(false);
});
it('refreshes the page upon button click', function() {
// We move to another page...
let whirlwindButton = element.all(by.css('nav a')).get(0);
whirlwindButton.click();
let refresh = element(by.css('button'));
refresh.click();
let heroSection = element(by.css('hero-list > div'));
expect(heroSection.isPresent()).toBe(false);
});
describe('Whirlwind setValue form', function() {
beforeEach(function() {
let whirlwindButton = element.all(by.css('nav a')).get(0);
whirlwindButton.click();
});
it('should show a hero information when the button is clicked', function() {
let editMessage = element(by.css('.demo > div > div > h3'));
expect(editMessage.getText()).toBe('Editing: Whirlwind');
});
it('should show a form with the selected hero information', function() {
let nameInput = element(by.css('input[formcontrolname=name]'));
expect(nameInput.getAttribute('value')).toBe('Whirlwind');
let address1 = finalDemoAddressForm(element, 0);
expect(address1.street).toBe('123 Main');
expect(address1.state).toBe('CA');
expect(address1.zip).toBe('94801');
expect(address1.city).toBe('Anywhere');
});
it('shows a json output from the form', function() {
let json = element(by.css('hero-detail-7 > p'));
expect(json.getText()).toContain('Whirlwind');
expect(json.getText()).toContain('Anywhere');
let nameOutput = element(by.css('hero-detail-7 > p ~ p'));
expect(nameOutput.getText()).toContain('Name value: Whirlwind');
let streetOutput = element(by.css('hero-detail-7 > p ~ p ~ p'));
expect(streetOutput.getText()).toContain('Street value: 123 Main');
});
it('should show three radio buttons', function() {
let radioButtons = element.all(by.css('input[formcontrolname=power]'));
expect(radioButtons.get(0).getAttribute('value')).toBe('flight');
expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision');
expect(radioButtons.get(2).getAttribute('value')).toBe('strength');
});
it('should show a checkbox', function() {
let checkbox = element(by.css('input[formcontrolname=sidekick]'));
expect(checkbox.getAttribute('checked')).toBe(null);
});
}); // Whirlwind setValue form
describe('Bombastic setValue form', function() {
beforeEach(function() {
let bombasticButton = element.all(by.css('nav a')).get(1);
bombasticButton.click();
});
it('should show a hero information when the button is clicked', function() {
let editMessage = element(by.css('.demo > div > div > h3'));
expect(editMessage.getText()).toBe('Editing: Bombastic');
});
it('should show a form with the selected hero information', function() {
let nameInput = element(by.css('input[formcontrolname=name]'));
expect(nameInput.getAttribute('value')).toBe('Bombastic');
let address1 = finalDemoAddressForm(element, 0);
expect(address1.street).toBe('789 Elm');
expect(address1.state).toBe('OH');
expect(address1.zip).toBe('04501');
expect(address1.city).toBe('Smallville');
});
it('shows a json output from the form', function() {
let json = element(by.css('hero-detail-7 > p'));
expect(json.getText()).toContain('Bombastic');
expect(json.getText()).toContain('Smallville');
expect(json.getText()).toContain('04501');
expect(json.getText()).toContain('789 Elm');
let nameOutput = element(by.css('hero-detail-7 > p ~ p'));
expect(nameOutput.getText()).toContain('Name value: Bombastic');
let streetOutput = element(by.css('hero-detail-7 > p ~ p ~ p'));
expect(streetOutput.getText()).toContain('Street value: 789 Elm');
});
it('should show three radio buttons', function() {
let radioButtons = element.all(by.css('input[formcontrolname=power]'));
expect(radioButtons.get(0).getAttribute('value')).toBe('flight');
expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision');
expect(radioButtons.get(2).getAttribute('value')).toBe('strength');
});
it('should show a checkbox', function() {
let checkbox = element(by.css('input[formcontrolname=sidekick]'));
expect(checkbox.getAttribute('checked')).toBe(null);
});
}); // Bombastic setValue form
describe('Magneta setValue form', function() {
beforeEach(function() {
let magnetaButton = element.all(by.css('nav a')).get(2);
magnetaButton.click();
});
it('should show a hero information when the button is clicked', function() {
let editMessage = element(by.css('.demo > div > div > h3'));
expect(editMessage.getText()).toBe('Editing: Magneta');
});
it('should show a form with the selected hero information', function() {
let nameInput = element(by.css('input[formcontrolname=name]'));
expect(nameInput.getAttribute('value')).toBe('Magneta');
});
it('should show three radio buttons', function() {
let radioButtons = element.all(by.css('input[formcontrolname=power]'));
expect(radioButtons.get(0).getAttribute('value')).toBe('flight');
expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision');
expect(radioButtons.get(2).getAttribute('value')).toBe('strength');
});
it('should show a checkbox', function() {
let checkbox = element(by.css('input[formcontrolname=sidekick]'));
expect(checkbox.getAttribute('checked')).toBe(null);
});
it('shows a json output from the form', function() {
let json = element(by.css('hero-detail-7 > p'));
expect(json.getText()).toContain('Magneta');
let nameOutput = element(by.css('hero-detail-7 > p ~ p'));
expect(nameOutput.getText()).toContain('Name value: Magneta');
let streetOutput = element(by.css('hero-detail-7 > p ~ p ~ p'));
expect(streetOutput.getText()).toContain('Street value:');
});
}); // Magneta setValue form
}); // SetValue demo
// *************Begin patchValue Demo test*******************************
describe('patchValue demo', function() {
beforeEach(function() {
let SetValueOption = element.all(by.css('select option')).get(5);
SetValueOption.click();
});
it('should show patchValue Demo', function() {
select.getAttribute('value').then(function(demo: string) {
expect(demo).toBe('PatchValue Demo');
});
});
it('does not select any hero by default', function() {
let heroSection = element(by.css('.demo > div > div'));
expect(heroSection.isPresent()).toBe(false);
});
it('refreshes the page upon button click', function() {
// We move to another page...
let whirlwindButton = element.all(by.css('nav a')).get(0);
whirlwindButton.click();
let refresh = element(by.css('button'));
refresh.click();
let heroSection = element(by.css('.demo > div > div'));
expect(heroSection.isPresent()).toBe(false);
});
describe('Whirlwind patchValue form', function() {
beforeEach(function() {
let whirlwindButton = element.all(by.css('nav a')).get(0);
whirlwindButton.click();
});
it('should show a hero information when the button is clicked', function() {
let editMessage = element(by.css('h2 ~ h3'));
expect(editMessage.getText()).toBe('Editing: Whirlwind');
});
it('should show a form with the selected hero information', function() {
let nameInput = element(by.css('input[formcontrolname=name]'));
expect(nameInput.getAttribute('value')).toBe('Whirlwind');
let address1 = finalDemoAddressForm(element, 0);
expect(address1.street).toBe('');
expect(address1.state).toBe('');
expect(address1.zip).toBe('');
expect(address1.city).toBe('');
});
it('should show three radio buttons', function() {
let radioButtons = element.all(by.css('input[formcontrolname=power]'));
expect(radioButtons.get(0).getAttribute('value')).toBe('flight');
expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision');
expect(radioButtons.get(2).getAttribute('value')).toBe('strength');
});
it('should show a checkbox', function() {
let checkbox = element(by.css('input[formcontrolname=sidekick]'));
expect(checkbox.getAttribute('checked')).toBe(null);
});
it('shows a json output from the form', function() {
let json = element(by.css('hero-detail-6 > p'));
expect(json.getText()).toContain('Whirlwind');
let nameOutput = element(by.css('hero-detail-6 > p ~ p'));
expect(nameOutput.getText()).toContain('Name value: Whirlwind');
let streetOutput = element(by.css('hero-detail-6 > p ~ p ~ p'));
expect(streetOutput.getText()).toContain('Street value:');
});
}); // Bombastic patchValue form
describe('Bombastic patchValue form', function() {
beforeEach(function() {
let bombasticButton = element.all(by.css('nav a')).get(1);
bombasticButton.click();
});
it('should show a hero information when the button is clicked', function() {
let editMessage = element(by.css('h2 ~ h3'));
expect(editMessage.getText()).toBe('Editing: Bombastic');
});
it('should show a form with the selected hero information', function() {
let nameInput = element(by.css('input[formcontrolname=name]'));
expect(nameInput.getAttribute('value')).toBe('Bombastic');
let address1 = finalDemoAddressForm(element, 0);
expect(address1.street).toBe('');
expect(address1.state).toBe('');
expect(address1.zip).toBe('');
expect(address1.city).toBe('');
});
it('should show three radio buttons', function() {
let radioButtons = element.all(by.css('input[formcontrolname=power]'));
expect(radioButtons.get(0).getAttribute('value')).toBe('flight');
expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision');
expect(radioButtons.get(2).getAttribute('value')).toBe('strength');
});
it('should show a checkbox', function() {
let checkbox = element(by.css('input[formcontrolname=sidekick]'));
expect(checkbox.getAttribute('checked')).toBe(null);
});
it('shows a json output from the form', function() {
let json = element(by.css('hero-detail-6 > p'));
expect(json.getText()).toContain('Bombastic');
let nameOutput = element(by.css('hero-detail-6 > p ~ p'));
expect(nameOutput.getText()).toContain('Name value: Bombastic');
let streetOutput = element(by.css('hero-detail-6 > p ~ p ~ p'));
expect(streetOutput.getText()).toContain('Street value:');
});
}); // Bombastic patchValue form
describe('Magneta patchValue form', function() {
beforeEach(function() {
let magnetaButton = element.all(by.css('nav a')).get(2);
magnetaButton.click();
});
it('should show a hero information when the button is clicked', function() {
let editMessage = element(by.css('h2 ~ h3'));
expect(editMessage.getText()).toBe('Editing: Magneta');
});
it('should show a form with the selected hero information', function() {
let nameInput = element(by.css('input[formcontrolname=name]'));
expect(nameInput.getAttribute('value')).toBe('Magneta');
let address1 = finalDemoAddressForm(element, 0);
expect(address1.street).toBe('');
expect(address1.state).toBe('');
expect(address1.zip).toBe('');
expect(address1.city).toBe('');
});
it('should show three radio buttons', function() {
let radioButtons = element.all(by.css('input[formcontrolname=power]'));
expect(radioButtons.get(0).getAttribute('value')).toBe('flight');
expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision');
expect(radioButtons.get(2).getAttribute('value')).toBe('strength');
});
it('should show a checkbox', function() {
let checkbox = element(by.css('input[formcontrolname=sidekick]'));
expect(checkbox.getAttribute('checked')).toBe(null);
});
it('shows a json output from the form', function() {
let json = element(by.css('hero-detail-6 > p'));
expect(json.getText()).toContain('Magneta');
let nameOutput = element(by.css('hero-detail-6 > p ~ p'));
expect(nameOutput.getText()).toContain('Name value: Magneta');
let streetOutput = element(by.css('hero-detail-6 > p ~ p ~ p'));
expect(streetOutput.getText()).toContain('Street value:');
});
}); // Magneta patchValue form
}); // PatchValue demo
// *************Begin Nested FormBuilder Demo test*******************************
describe('Nested FormBuilder demo', function() {
beforeEach(function() {
let NestedFormBuilderOption = element.all(by.css('select option')).get(4);
NestedFormBuilderOption.click();
});
it('should show Nested FormBuilder Demo', function() {
select.getAttribute('value').then(function(demo: string) {
expect(demo).toBe('Nested FormBuilder group Demo');
});
});
it('should show a form for hero information', function() {
let nameInput = element(by.css('input[formcontrolname=name]'));
expect(nameInput.getAttribute('value')).toBe('');
let address1 = finalDemoAddressForm(element, 0);
expect(address1.street).toBe('');
expect(address1.state).toBe('');
expect(address1.zip).toBe('');
expect(address1.city).toBe('');
});
it('should show three radio buttons', function() {
let radioButtons = element.all(by.css('input[formcontrolname=power]'));
expect(radioButtons.get(0).getAttribute('value')).toBe('flight');
expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision');
expect(radioButtons.get(2).getAttribute('value')).toBe('strength');
});
it('should show a checkbox', function() {
let checkbox = element(by.css('input[formcontrolname=sidekick]'));
expect(checkbox.getAttribute('checked')).toBe(null);
});
it('shows a json output from the form', function() {
let json = element(by.css('hero-detail-5 > p'));
expect(json.getText()).toContain('address');
let nameOutput = element(by.css('hero-detail-5 > p ~ p'));
expect(nameOutput.getText()).toContain('Name value:');
let streetOutput = element(by.css('hero-detail-5 > p ~ p ~ p'));
expect(streetOutput.getText()).toContain('Street value:');
});
}); // Nested FormBuilder demo
// *************Begin Group with multiple controls Demo test*******************************
describe('Group with multiple controls demo', function() {
beforeEach(function() {
let NestedFormBuilderOption = element.all(by.css('select option')).get(3);
NestedFormBuilderOption.click();
});
it('should show Group with multiple controls Demo', function() {
select.getAttribute('value').then(function(demo: string) {
expect(demo).toBe('Group with multiple controls Demo');
});
});
it('should show header', function() {
let header = element(by.css('hero-detail-4 > h3'));
expect(header.getText()).toBe('A FormGroup with multiple FormControls');
});
it('should show a form for hero information', function() {
let nameInput = element(by.css('input[formcontrolname=name]'));
expect(nameInput.getAttribute('value')).toBe('');
let address1 = finalDemoAddressForm(element, 0);
expect(address1.street).toBe('');
expect(address1.state).toBe('');
expect(address1.zip).toBe('');
expect(address1.city).toBe('');
});
it('should show three radio buttons', function() {
let radioButtons = element.all(by.css('input[formcontrolname=power]'));
expect(radioButtons.get(0).getAttribute('value')).toBe('flight');
expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision');
expect(radioButtons.get(2).getAttribute('value')).toBe('strength');
});
it('should show a checkbox', function() {
let checkbox = element(by.css('input[formcontrolname=sidekick]'));
expect(checkbox.getAttribute('checked')).toBe(null);
});
it('shows a json output from the form', function() {
let json = element(by.css('hero-detail-4 > p'));
expect(json.getText()).toContain('power');
});
}); // Group with multiple controls demo
// *************Begin Group with multiple controls Demo test*******************************
describe('Simple FormBuilder Group demo', function() {
beforeEach(function() {
let SimpleFormBuilderOption = element.all(by.css('select option')).get(2);
SimpleFormBuilderOption.click();
});
it('should show Simple FormBuilder group Demo', function() {
select.getAttribute('value').then(function(demo: string) {
expect(demo).toBe('Simple FormBuilder group Demo');
});
});
it('should show header', function() {
let header = element(by.css('hero-detail-3 > h3'));
expect(header.getText()).toBe('A FormGroup with a single FormControl using FormBuilder');
});
it('should show a form for hero information', function() {
let nameInput = element(by.css('input[formcontrolname=name]'));
expect(nameInput.getAttribute('value')).toBe('');
});
it('shows a json output from the form', function() {
let json = element(by.css('hero-detail-3 > p'));
expect(json.getText()).toContain('name');
let validStatus = element(by.css('hero-detail-3 > p ~ p'));
expect(validStatus.getText()).toContain('INVALID');
});
}); // Group with multiple controls demo
// *************Begin FormControl in a FormGroup Demo test*******************************
describe('FormControl in a FormGroup demo', function() {
beforeEach(function() {
let SimpleFormBuilderOption = element.all(by.css('select option')).get(1);
SimpleFormBuilderOption.click();
});
it('should show FormControl in a FormGroup Demo', function() {
select.getAttribute('value').then(function(demo: string) {
expect(demo).toBe('FormControl in a FormGroup Demo');
});
});
it('should show header', function() {
let header = element(by.css('hero-detail-2 > h3'));
expect(header.getText()).toBe('FormControl in a FormGroup');
});
it('should show a form for hero information', function() {
let nameInput = element(by.css('input[formcontrolname=name]'));
expect(nameInput.getAttribute('value')).toBe('');
});
it('shows a json output from the form', function() {
let json = element(by.css('hero-detail-2 > p'));
expect(json.getText()).toContain('name');
});
}); // Group with multiple controls demo
// *************Begin Just A FormControl Demo test*******************************
describe('Just a FormControl demo', function() {
beforeEach(function() {
let FormControlOption = element.all(by.css('select option')).get(0);
FormControlOption.click();
});
it('should show Just a FormControl demo', function() {
select.getAttribute('value').then(function(demo: string) {
expect(demo).toBe('Just a FormControl Demo');
});
});
it('should show header', function() {
let header = element(by.css('hero-detail-1 > h3'));
expect(header.getText()).toBe('Just a FormControl');
});
it('should show a form for hero information', function() {
let nameInput = element(by.css('input'));
expect(nameInput.getAttribute('value')).toBe('');
});
}); // Just a FormControl demo test
}); // reactive forms