4acbef19a8
closes #1538 This is a major reorganization of the Upgrade guide. * Compatible with the new version of the AngularJS 1 PhoneCat tutorial. * No longer switching Angular 1 code to SystemJS for PhoneCat, to allow beginning Angular 2 migration with fewer preparation steps. SystemJS switch now happens simultaneously with upgrade. (This is based on input from @joeeames) * Testing moved to an appendix to make the main narrative shorter and easier to follow. * Use component methods to do phone filtering and ordering instead of introducing pipes to replace filterFilter and orderByFilter. * Cover issue with camelCase inputs on downgraded components. For authors: * All examples now fully integrated with the example boilerplate. Uses the same Angular 2 version as all other guides. E2E tests are executed along with all the others. * Reduced number of PhoneCat versions from five to three. * Each directory has a README explaining how to run it and what might be peculiar about it. Closes angular/angular#8622 Relates to angular/angular.js#14416 Relates to angular/angular-phonecat#326
105 lines
3.0 KiB
JavaScript
105 lines
3.0 KiB
JavaScript
'use strict';
|
|
|
|
// Angular E2E Testing Guide:
|
|
// https://docs.angularjs.org/guide/e2e-testing
|
|
|
|
describe('PhoneCat Application', function() {
|
|
|
|
beforeAll(function() {
|
|
setProtractorToNg1Mode();
|
|
});
|
|
|
|
it('should redirect `index.html` to `index.html#!/phones', function() {
|
|
browser.get('index.html');
|
|
expect(browser.getLocationAbsUrl()).toBe('/phones');
|
|
});
|
|
|
|
describe('View: Phone list', function() {
|
|
|
|
beforeEach(function() {
|
|
browser.get('index.html#!/phones');
|
|
});
|
|
|
|
it('should filter the phone list as a user types into the search box', function() {
|
|
var phoneList = element.all(by.css('.phones li'));
|
|
var query = element(by.css('input'));
|
|
|
|
expect(phoneList.count()).toBe(20);
|
|
|
|
sendKeys(query, 'nexus');
|
|
expect(phoneList.count()).toBe(1);
|
|
|
|
query.clear();
|
|
sendKeys(query, 'motorola');
|
|
expect(phoneList.count()).toBe(8);
|
|
});
|
|
|
|
it('should be possible to control phone order via the drop-down menu', function() {
|
|
var queryField = element(by.css('input'));
|
|
var orderSelect = element(by.css('select'));
|
|
var nameOption = orderSelect.element(by.css('option[value="name"]'));
|
|
var phoneNameColumn = element.all(by.css('.phones .name'));
|
|
|
|
function getNames() {
|
|
return phoneNameColumn.map(function(elem) {
|
|
return elem.getText();
|
|
});
|
|
}
|
|
|
|
sendKeys(queryField, 'tablet'); // Let's narrow the dataset to make the assertions shorter
|
|
|
|
expect(getNames()).toEqual([
|
|
'Motorola XOOM\u2122 with Wi-Fi',
|
|
'MOTOROLA XOOM\u2122'
|
|
]);
|
|
|
|
nameOption.click();
|
|
|
|
expect(getNames()).toEqual([
|
|
'MOTOROLA XOOM\u2122',
|
|
'Motorola XOOM\u2122 with Wi-Fi'
|
|
]);
|
|
});
|
|
|
|
it('should render phone specific links', function() {
|
|
var query = element(by.css('input'));
|
|
sendKeys(query, 'nexus');
|
|
|
|
element.all(by.css('.phones li a')).first().click();
|
|
browser.refresh(); // Not sure why this is needed but it is. The route change works fine.
|
|
expect(browser.getLocationAbsUrl()).toBe('/phones/nexus-s');
|
|
});
|
|
|
|
});
|
|
|
|
describe('View: Phone detail', function() {
|
|
|
|
beforeEach(function() {
|
|
browser.get('index.html#!/phones/nexus-s');
|
|
});
|
|
|
|
it('should display the `nexus-s` page', function() {
|
|
expect(element(by.css('h1')).getText()).toBe('Nexus S');
|
|
});
|
|
|
|
it('should display the first phone image as the main phone image', function() {
|
|
var mainImage = element(by.css('img.phone.selected'));
|
|
|
|
expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/);
|
|
});
|
|
|
|
it('should swap the main image when clicking on a thumbnail image', function() {
|
|
var mainImage = element(by.css('img.phone.selected'));
|
|
var thumbnails = element.all(by.css('.phone-thumbs img'));
|
|
|
|
thumbnails.get(2).click();
|
|
expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.2.jpg/);
|
|
|
|
thumbnails.get(0).click();
|
|
expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/);
|
|
});
|
|
|
|
});
|
|
|
|
});
|