honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: support e2e-specs written in TypeScript 

Update gulpfile and project to add a tsconfig to protractor test folders
Change all sample e2e-spec.js -> e2e-spec.ts
Split typings between e2e-spec & app code
Use same config for all e2e tests
Only 1/3 e2e specs truly converted.
Most don't pass because they fail TS transpile by Protractor due to missing type annotations
This commit is contained in:
Ward Bell 2016-05-30 11:05:09 -07:00
parent ae2d8f2730
commit 8a5df4cfa9
44 changed files with 954 additions and 693 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.travis.yml
View File

@ -18,7 +18,8 @@ before_script:
install: install:
- npm install --no-optional - npm install --no-optional
- npm install --prefix public/docs/_examples - npm install --prefix public/docs/_examples
- npm run webdriver:update --prefix public/docs/_examples - npm install --prefix public/docs/_examples/_protractor
- npm run webdriver:update --prefix public/docs/_examples/_protractor
- gulp add-example-boilerplate - gulp add-example-boilerplate
script: script:
- gulp $SCRIPT - gulp $SCRIPT

151
gulpfile.js
View File

@ -38,6 +38,7 @@ var TEMP_PATH = './_temp';
var DOCS_PATH = path.join(PUBLIC_PATH, 'docs'); var DOCS_PATH = path.join(PUBLIC_PATH, 'docs');
var EXAMPLES_PATH = path.join(DOCS_PATH, '_examples'); var EXAMPLES_PATH = path.join(DOCS_PATH, '_examples');
var EXAMPLES_PROTRACTOR_PATH = path.join(EXAMPLES_PATH, '_protractor');
var NOT_API_DOCS_GLOB = path.join(PUBLIC_PATH, './{docs/*/latest/!(api),!(docs)}/**/*'); var NOT_API_DOCS_GLOB = path.join(PUBLIC_PATH, './{docs/*/latest/!(api),!(docs)}/**/*');
var RESOURCES_PATH = path.join(PUBLIC_PATH, 'resources'); var RESOURCES_PATH = path.join(PUBLIC_PATH, 'resources');
var LIVE_EXAMPLES_PATH = path.join(RESOURCES_PATH, 'live-examples'); var LIVE_EXAMPLES_PATH = path.join(RESOURCES_PATH, 'live-examples');
@ -86,28 +87,41 @@ var _exampleBoilerplateFiles = [
var _exampleDartWebBoilerPlateFiles = ['styles.css']; var _exampleDartWebBoilerPlateFiles = ['styles.css'];
var _exampleProtractorBoilerplateFiles = [
'tsconfig.json'
];
/**
* Run Protractor End-to-End Specs for Doc Samples
* Alias for 'run-e2e-tests'
*/
gulp.task('e2e', runE2e);
gulp.task('run-e2e-tests', runE2e);
/** /**
* Run Protractor End-to-End Tests for Doc Samples * Run Protractor End-to-End Tests for Doc Samples
* *
* Flags * Flags
* --filter to filter/select _example app subdir names * --filter to filter/select _example app subdir names
* e.g. gulp run-e2e-tests --filter=foo // all example apps with 'foo' in their folder names. * e.g. gulp e2e --filter=foo // all example apps with 'foo' in their folder names.
* *
* --fast by-passes the npm install and webdriver update * --fast by-passes the npm install and webdriver update
* Use it for repeated test runs (but not the FIRST run) * Use it for repeated test runs (but not the FIRST run)
* e.g. gulp run-e2e-tests --fast * e.g. gulp e2e --fast
* *
* --lang to filter by code language * --lang to filter by code language
* e.g. gulp run-e2e-tests --lang=ts // only TypeScript apps * e.g. gulp e2e --lang=ts // only TypeScript apps
* default is (ts|js) * default is (ts|js)
* all means (ts|js|dart) * all means (ts|js|dart)
*/ */
gulp.task('run-e2e-tests', function() { function runE2e() {
var promise; var promise;
if (argv.fast) { if (argv.fast) {
// fast; skip all setup // fast; skip all setup
promise = Promise.resolve(true); promise = Promise.resolve(true);
} else { } else {
/*
// Not 'fast'; do full setup // Not 'fast'; do full setup
var spawnInfo = spawnExt('npm', ['install'], { cwd: EXAMPLES_PATH}); var spawnInfo = spawnExt('npm', ['install'], { cwd: EXAMPLES_PATH});
promise = spawnInfo.promise.then(function() { promise = spawnInfo.promise.then(function() {
@ -115,78 +129,92 @@ gulp.task('run-e2e-tests', function() {
spawnInfo = spawnExt('npm', ['run', 'webdriver:update'], {cwd: EXAMPLES_PATH}); spawnInfo = spawnExt('npm', ['run', 'webdriver:update'], {cwd: EXAMPLES_PATH});
return spawnInfo.promise; return spawnInfo.promise;
}); });
} */
// Not 'fast'; do full setup
gutil.log('runE2e: install _protractor stuff');
var spawnInfo = spawnExt('npm', ['install'], { cwd: EXAMPLES_PROTRACTOR_PATH});
promise = spawnInfo.promise
.then(function() {
gutil.log('runE2e: install _examples stuff');
spawnInfo = spawnExt('npm', ['install'], { cwd: EXAMPLES_PATH})
return spawnInfo.promise;
})
.then(function() {
copyExampleBoilerplate();
gutil.log('runE2e: update webdriver');
spawnInfo = spawnExt('npm', ['run', 'webdriver:update'], {cwd: EXAMPLES_PROTRACTOR_PATH});
return spawnInfo.promise;
});
};
var outputFile = path.join(process.cwd(), 'protractor-results.txt');
promise.then(function() { promise.then(function() {
return findAndRunE2eTests(argv.filter); return findAndRunE2eTests(argv.filter, outputFile);
}).then(function(status) { }).then(function(status) {
reportStatus(status); reportStatus(status, outputFile);
if (status.failed.length > 0){ if (status.failed.length > 0){
return Promise.reject('Some test suites failed'); return Promise.reject('Some test suites failed');
} }
}).catch(function(e) { }).catch(function(e) {
gutil.log(e); gutil.log(e);
process.exit(1); process.exitCode = 1;
});
}); });
return promise;
}
// finds all of the *e2e-spec.tests under the _examples folder along // finds all of the *e2e-spec.tests under the _examples folder along
// with the corresponding apps that they should run under. Then run // with the corresponding apps that they should run under. Then run
// each app/spec collection sequentially. // each app/spec collection sequentially.
function findAndRunE2eTests(filter) { function findAndRunE2eTests(filter, outputFile) {
// create an output file with header.
var lang = (argv.lang || '(ts|js)').toLowerCase(); var lang = (argv.lang || '(ts|js)').toLowerCase();
if (lang === 'all') { lang = '(ts|js|dart)'; } if (lang === 'all') { lang = '(ts|js|dart)'; }
var startTime = new Date().getTime(); var startTime = new Date().getTime();
// create an output file with header.
var outputFile = path.join(process.cwd(), 'protractor-results.txt');
var header = `Doc Sample Protractor Results for ${lang} on ${new Date().toLocaleString()}\n`; var header = `Doc Sample Protractor Results for ${lang} on ${new Date().toLocaleString()}\n`;
header += argv.fast ? header += argv.fast ?
' Fast Mode (--fast): no npm install, webdriver update, or boilerplate copy\n' : ' Fast Mode (--fast): no npm install, webdriver update, or boilerplate copy\n' :
' Slow Mode: npm install, webdriver update, and boilerplate copy\n'; ' Slow Mode: npm install, webdriver update, and boilerplate copy\n';
header += ` Filter: ${filter ? filter : 'All tests'}\n\n`; header += ` Filter: ${filter ? filter : 'All tests'}\n\n`;
fs.writeFileSync(outputFile, header); fs.writeFileSync(outputFile, header);
// create an array of combos where each // create an array of combos where each
// combo consists of { examplePath: ... , protractorConfigFilename: ... } // combo consists of { examplePath: ... , protractorConfigFilename: ... }
var exeConfigs = []; var examplePaths = [];
var e2eSpecPaths = getE2eSpecPaths(EXAMPLES_PATH); var e2eSpecPaths = getE2eSpecPaths(EXAMPLES_PATH);
var srcConfig = path.join(EXAMPLES_PATH, 'protractor.config.js');
e2eSpecPaths.forEach(function(specPath) { e2eSpecPaths.forEach(function(specPath) {
var destConfig = path.join(specPath, 'protractor.config.js'); var destConfig = path.join(specPath, 'protractor.config.js');
fsExtra.copySync(srcConfig, destConfig);
// get all of the examples under each dir where a pcFilename is found // get all of the examples under each dir where a pcFilename is found
examplePaths = getExamplePaths(specPath, true); localExamplePaths = getExamplePaths(specPath, true);
// Filter by language // Filter by language
examplePaths = examplePaths.filter(function (fn) { localExamplePaths = localExamplePaths.filter(function (fn) {
return fn.match('/'+lang+'$') != null; return fn.match('/'+lang+'$') != null;
}); });
if (filter) { if (filter) {
examplePaths = examplePaths.filter(function (fn) { localExamplePaths = localExamplePaths.filter(function (fn) {
return fn.match(filter) != null; return fn.match(filter) != null;
}) })
} }
examplePaths.forEach(function(exPath) { localExamplePaths.forEach(function(examplePath) {
exeConfigs.push( { examplePath: exPath, protractorConfigFilename: destConfig }); examplePaths.push(examplePath);
}) })
}); });
// run the tests sequentially // run the tests sequentially
var status = { passed: [], failed: [] }; var status = { passed: [], failed: [] };
return exeConfigs.reduce(function (promise, combo) { return examplePaths.reduce(function (promise, examplePath) {
return promise.then(function () { return promise.then(function () {
var isDart = combo.examplePath.indexOf('/dart') > -1; var isDart = examplePath.indexOf('/dart') > -1;
var runTests = isDart ? runE2eDartTests : runE2eTsTests; var runTests = isDart ? runE2eDartTests : runE2eTsTests;
return runTests(combo.examplePath, combo.protractorConfigFilename, outputFile).then(function(ok) { return runTests(examplePath, outputFile).then(function(ok) {
var arr = ok ? status.passed : status.failed; var arr = ok ? status.passed : status.failed;
arr.push(combo.examplePath); arr.push(examplePath);
}) })
}); });
}, Q.resolve()).then(function() { }, Q.resolve()).then(function() {
var stopTime = new Date().getTime(); var stopTime = new Date().getTime();
status.elapsedTime = (stopTime - startTime)/1000; status.elapsedTime = (stopTime - startTime)/1000;
fs.appendFileSync(outputFile, '\nElaped Time: ' + status.elapsedTime + ' seconds');
return status; return status;
}); });
} }
@ -194,15 +222,15 @@ function findAndRunE2eTests(filter) {
// start the example in appDir; then run protractor with the specified // start the example in appDir; then run protractor with the specified
// fileName; then shut down the example. All protractor output is appended // fileName; then shut down the example. All protractor output is appended
// to the outputFile. // to the outputFile.
function runE2eTsTests(appDir, protractorConfigFilename, outputFile) { function runE2eTsTests(appDir, outputFile) {
// start the app // start the app
var appRunSpawnInfo = spawnExt('npm',['run','http-server:e2e', '--', '-s' ], { cwd: appDir }); var appRunSpawnInfo = spawnExt('npm',['run','http-server:e2e', '--', '-s' ], { cwd: appDir });
var tscRunSpawnInfo = spawnExt('npm',['run','tsc'], { cwd: appDir }); var tscRunSpawnInfo = spawnExt('npm',['run','tsc'], { cwd: appDir });
return runProtractor(tscRunSpawnInfo.promise, appDir, appRunSpawnInfo, protractorConfigFilename, outputFile); return runProtractor(tscRunSpawnInfo.promise, appDir, appRunSpawnInfo, outputFile);
} }
function runProtractor(prepPromise, appDir, appRunSpawnInfo, protractorConfigFilename, outputFile) { function runProtractor(prepPromise, appDir, appRunSpawnInfo, outputFile) {
return prepPromise return prepPromise
.catch(function(){ .catch(function(){
var emsg = `AppDir failed during compile: ${appDir}\n\n`; var emsg = `AppDir failed during compile: ${appDir}\n\n`;
@ -212,10 +240,10 @@ function runProtractor(prepPromise, appDir, appRunSpawnInfo, protractorConfigFil
}) })
.then(function (data) { .then(function (data) {
// start protractor // start protractor
var pcFilename = path.resolve(protractorConfigFilename); // need to resolve because we are going to be running from a different dir var specFilename = path.resolve(`${appDir}/../e2e-spec.ts`);
var spawnInfo = spawnExt('npm', [ 'run', 'protractor', '--', pcFilename, var spawnInfo = spawnExt('npm', [ 'run', 'protractor', '--', 'protractor.config.js',
'--params.appDir=' + appDir, '--params.outputFile=' + outputFile], { cwd: EXAMPLES_PATH }); `--specs=${specFilename}`, '--params.appDir=' + appDir, '--params.outputFile=' + outputFile], { cwd: EXAMPLES_PROTRACTOR_PATH });
return spawnInfo.promise return spawnInfo.promise;
}) })
.then( .then(
function() { return finish(true);}, function() { return finish(true);},
@ -233,7 +261,7 @@ function runProtractor(prepPromise, appDir, appRunSpawnInfo, protractorConfigFil
// start the server in appDir/build/web; then run protractor with the specified // start the server in appDir/build/web; then run protractor with the specified
// fileName; then shut down the example. All protractor output is appended // fileName; then shut down the example. All protractor output is appended
// to the outputFile. // to the outputFile.
function runE2eDartTests(appDir, protractorConfigFilename, outputFile) { function runE2eDartTests(appDir, outputFile) {
var deployDir = path.resolve(path.join(appDir, 'build/web')); var deployDir = path.resolve(path.join(appDir, 'build/web'));
gutil.log('AppDir for Dart e2e: ' + appDir); gutil.log('AppDir for Dart e2e: ' + appDir);
gutil.log('Deploying from: ' + deployDir); gutil.log('Deploying from: ' + deployDir);
@ -247,24 +275,28 @@ function runE2eDartTests(appDir, protractorConfigFilename, outputFile) {
var prepPromise = pubUpgradeSpawnInfo.promise.then(function (data) { var prepPromise = pubUpgradeSpawnInfo.promise.then(function (data) {
return spawnExt('pub', ['build'], { cwd: appDir }).promise; return spawnExt('pub', ['build'], { cwd: appDir }).promise;
}); });
return runProtractor(prepPromise, appDir, appRunSpawnInfo, protractorConfigFilename, outputFile); return runProtractor(prepPromise, appDir, appRunSpawnInfo, outputFile);
} }
function reportStatus(status) { function reportStatus(status, outputFile) {
gutil.log('Suites passed:'); var log = [''];
log.push('Suites passed:');
status.passed.forEach(function(val) { status.passed.forEach(function(val) {
gutil.log(' ' + val); log.push(' ' + val);
}); });
if (status.failed.length == 0) { if (status.failed.length == 0) {
gutil.log('All tests passed'); log.push('All tests passed');
} else { } else {
gutil.log('Suites failed:'); log.push('Suites failed:');
status.failed.forEach(function (val) { status.failed.forEach(function (val) {
gutil.log(' ' + val); log.push(' ' + val);
}); });
} }
gutil.log('Elapsed time: ' + status.elapsedTime + ' seconds'); log.push('\nElapsed time: ' + status.elapsedTime + ' seconds');
var log = log.join('\n');
gutil.log(log);
fs.appendFileSync(outputFile, log);
} }
// returns both a promise and the spawned process so that it can be killed if needed. // returns both a promise and the spawned process so that it can be killed if needed.
@ -312,7 +344,7 @@ gulp.task('help', taskListing.withFilters(function(taskName) {
return shouldRemove; return shouldRemove;
})); }));
// requires admin access // requires admin access because it adds symlinks
gulp.task('add-example-boilerplate', function() { gulp.task('add-example-boilerplate', function() {
var realPath = path.join(EXAMPLES_PATH, '/node_modules'); var realPath = path.join(EXAMPLES_PATH, '/node_modules');
var nodeModulesPaths = getNodeModulesPaths(EXAMPLES_PATH); var nodeModulesPaths = getNodeModulesPaths(EXAMPLES_PATH);
@ -332,11 +364,18 @@ gulp.task('add-example-boilerplate', function() {
return copyExampleBoilerplate(); return copyExampleBoilerplate();
}); });
// copies boilerplate files to locations
// where an example app is found
gulp.task('_copy-example-boilerplate', copyExampleBoilerplate);
// copies boilerplate files to locations // copies boilerplate files to locations
// where an example app is found // where an example app is found
// also copies certain web files (e.g., styles.css) to ~/_examples/**/dart/**/web // also copies certain web files (e.g., styles.css) to ~/_examples/**/dart/**/web
// also copies protractor.config.js file // also copies protractor.config.js file
function copyExampleBoilerplate() { function copyExampleBoilerplate() {
gutil.log('Copying example boilerplate files');
var sourceFiles = _exampleBoilerplateFiles.map(function(fn) { var sourceFiles = _exampleBoilerplateFiles.map(function(fn) {
return path.join(EXAMPLES_PATH, fn); return path.join(EXAMPLES_PATH, fn);
}); });
@ -351,12 +390,14 @@ function copyExampleBoilerplate() {
.then(function() { .then(function() {
return copyFiles(dartWebSourceFiles, dartExampleWebPaths); return copyFiles(dartWebSourceFiles, dartExampleWebPaths);
}) })
// copy protractor.config.js from _examples dir to each subdir that // copy files from _examples/_protractor dir to each subdir that
// contains a e2e-spec file. // contains a e2e-spec file.
.then(function() { .then(function() {
var sourceFiles = [ path.join(EXAMPLES_PATH, 'protractor.config.js') ]; var protractorSourceFiles =
_exampleProtractorBoilerplateFiles
.map(function(name) {return path.join(EXAMPLES_PROTRACTOR_PATH, name);});;
var e2eSpecPaths = getE2eSpecPaths(EXAMPLES_PATH); var e2eSpecPaths = getE2eSpecPaths(EXAMPLES_PATH);
return copyFiles(sourceFiles, e2eSpecPaths); return copyFiles(protractorSourceFiles, e2eSpecPaths);
}); });
} }
@ -371,6 +412,15 @@ gulp.task('remove-example-boilerplate', function() {
fsUtils.removeSymlink(linkPath); fsUtils.removeSymlink(linkPath);
}); });
deleteExampleBoilerPlate();
});
// deletes boilerplate files that were added by copyExampleBoilerplate
// from locations where an example app is found
gulp.task('_delete-example-boilerplate', deleteExampleBoilerPlate);
function deleteExampleBoilerPlate() {
gutil.log('Deleting example boilerplate files');
var examplePaths = getExamplePaths(EXAMPLES_PATH); var examplePaths = getExamplePaths(EXAMPLES_PATH);
var dartExampleWebPaths = getDartExampleWebPaths(EXAMPLES_PATH); var dartExampleWebPaths = getDartExampleWebPaths(EXAMPLES_PATH);
@ -379,10 +429,11 @@ gulp.task('remove-example-boilerplate', function() {
return deleteFiles(_exampleDartWebBoilerPlateFiles, dartExampleWebPaths); return deleteFiles(_exampleDartWebBoilerPlateFiles, dartExampleWebPaths);
}) })
.then(function() { .then(function() {
var protractorFiles = _exampleProtractorBoilerplateFiles;
var e2eSpecPaths = getE2eSpecPaths(EXAMPLES_PATH); var e2eSpecPaths = getE2eSpecPaths(EXAMPLES_PATH);
return deleteFiles(['protractor.config.js'], e2eSpecPaths); return deleteFiles(protractorFiles, e2eSpecPaths);
})
}); });
}
gulp.task('serve-and-sync', ['build-docs'], function (cb) { gulp.task('serve-and-sync', ['build-docs'], function (cb) {
// watchAndSync({devGuide: true, apiDocs: true, apiExamples: true, localFiles: true}, cb); // watchAndSync({devGuide: true, apiDocs: true, apiExamples: true, localFiles: true}, cb);
@ -744,7 +795,7 @@ function deleteFiles(baseFileNames, destPaths) {
// TODO: filter out all paths that are subdirs of another // TODO: filter out all paths that are subdirs of another
// path in the result. // path in the result.
function getE2eSpecPaths(basePath) { function getE2eSpecPaths(basePath) {
var paths = getPaths(basePath, '*e2e-spec.js', true); var paths = getPaths(basePath, '*e2e-spec.+(js|ts)', true);
return _.uniq(paths); return _.uniq(paths);
} }

14
public/docs/_examples/_protractor/e2e.d.ts vendored Normal file
View File

@ -0,0 +1,14 @@
/// <reference path="typings/index.d.ts" />
// Defined in protractor.config.js
declare function setProtractorToNg1Mode(): void;
declare function sendKeys(element: protractor.ElementFinder, str: string): webdriver.promise.Promise<void>;
declare function describeIf(cond: boolean, name: string, func: Function): void;
declare function itIf(cond: boolean, name: string, func: Function): void;
declare namespace protractor {
interface IBrowser {
appIsTs: boolean;
appIsJs: boolean;
}
}

19
public/docs/_examples/_protractor/package.json Normal file
View File

@ -0,0 +1,19 @@
{
"name": "angular2-examples-protractor",
"version": "1.0.0",
"description": "Manage _protractor folder installations",
"scripts": {
"postinstall": "typings install",
"typings": "typings",
"protractor": "protractor",
"webdriver:update": "webdriver-manager update"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"protractor": "^3.3.0",
"typings": "^1.0.4"
},
"repository": {}
}

11
public/docs/_examples/protractor.config.js → public/docs/_examples/_protractor/protractor.config.js
View File

@ -26,10 +26,6 @@ exports.config = {
// Framework to use. Jasmine is recommended. // Framework to use. Jasmine is recommended.
framework: 'jasmine', framework: 'jasmine',
// Spec patterns are relative to this config file
specs: ['**/*e2e-spec.js' ],
// For angular2 tests // For angular2 tests
useAllAngular2AppRoots: true, useAllAngular2AppRoots: true,
@ -87,6 +83,11 @@ exports.config = {
defaultTimeoutInterval: 10000, defaultTimeoutInterval: 10000,
showTiming: true, showTiming: true,
print: function() {} print: function() {}
},
beforeLaunch: function() {
// add TS support for specs
require('ts-node').register();
} }
}; };
@ -118,7 +119,7 @@ function sendKeys(element, str) {
} }
function Reporter(options) { function Reporter(options) {
var _defaultOutputFile = path.resolve(process.cwd(), "../../", 'protractor-results.txt'); var _defaultOutputFile = path.resolve(process.cwd(), "../../../../", 'protractor-results.txt');
options.outputFile = options.outputFile || _defaultOutputFile; options.outputFile = options.outputFile || _defaultOutputFile;
var _root = { appDir: options.appDir, suites: [] }; var _root = { appDir: options.appDir, suites: [] };

16
public/docs/_examples/_protractor/tsconfig.json Normal file
View File

@ -0,0 +1,16 @@
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
},
"files": [
"e2e-spec.ts"
]
}

9
public/docs/_examples/_protractor/typings.json Normal file
View File

@ -0,0 +1,9 @@
{
"globalDependencies": {
"angular-protractor": "registry:dt/angular-protractor#1.5.0+20160425143459",
"core-js": "registry:dt/core-js#0.0.0+20160317120654",
"jasmine": "registry:dt/jasmine#2.2.0+20160505161446",
"node": "registry:dt/node#4.0.0+20160509154515",
"selenium-webdriver": "registry:dt/selenium-webdriver#2.44.0+20160317120654"
}
}

27
public/docs/_examples/architecture/e2e-spec.js → public/docs/_examples/architecture/e2e-spec.ts
View File

@ -1,48 +1,49 @@
/// <reference path='../_protractor/e2e.d.ts' />
describe('Architecture', function () { describe('Architecture', function () {
var _title = "Hero List"; let title = 'Hero List';
beforeAll(function () { beforeAll(function () {
browser.get(''); browser.get('');
}); });
function itReset(name, func) { function itReset(name: string, func: (v: void) => any) {
it(name, function() { it(name, function() {
browser.get('').then(func); browser.get('').then(func);
}); });
} }
it('should display correct title: ' + _title, function () { it('should display correct title: ' + title, function () {
expect(element(by.css('h2')).getText()).toEqual(_title); expect(element(by.css('h2')).getText()).toEqual(title);
}); });
it('should display correct detail after selection', function() { it('should display correct detail after selection', function() {
var detailView = element(by.css('hero-detail')); let detailView = element(by.css('hero-detail'));
expect(detailView.isPresent()).toBe(false); expect(detailView.isPresent()).toBe(false);
// select the 2nd element // select the 2nd element
var selectEle = element.all(by.css('hero-list > div')).get(1); let selectEle = element.all(by.css('hero-list > div')).get(1);
selectEle.click().then(function() { selectEle.click().then(function() {
return selectEle.getText(); return selectEle.getText();
}).then(function(selectedHeroName) { }).then(function(selectedHeroName) {
// works but too specific if we change the app // works but too specific if we change the app
// expect(selectedHeroName).toEqual('Mr. Nice'); // expect(selectedHeroName).toEqual('Mr. Nice');
expect(detailView.isDisplayed()).toBe(true); expect(detailView.isDisplayed()).toBe(true);
var detailTitleEle = element(by.css('hero-detail > h4')); let detailTitleEle = element(by.css('hero-detail > h4'));
expect(detailTitleEle.getText()).toContain(selectedHeroName); expect(detailTitleEle.getText()).toContain(selectedHeroName);
}); });
}) });
itReset('should display correct detail after modification', function() { itReset('should display correct detail after modification', function() {
var detailView = element(by.css('hero-detail')); let detailView = element(by.css('hero-detail'));
expect(detailView.isPresent()).toBe(false); expect(detailView.isPresent()).toBe(false);
// select the 2nd element // select the 2nd element
var selectEle = element.all(by.css('hero-list > div')).get(1); let selectEle = element.all(by.css('hero-list > div')).get(1);
selectEle.click().then(function () { selectEle.click().then(function () {
return selectEle.getText(); return selectEle.getText();
}).then(function (selectedHeroName) { }).then(function (selectedHeroName) {
var detailTitleEle = element(by.css('hero-detail > h4')); let detailTitleEle = element(by.css('hero-detail > h4'));
expect(detailTitleEle.getText()).toContain(selectedHeroName); expect(detailTitleEle.getText()).toContain(selectedHeroName);
var heroNameEle = element.all(by.css('hero-detail input')).get(0); let heroNameEle = element.all(by.css('hero-detail input')).get(0);
// check that both the initial selected item and the detail title reflect changes // check that both the initial selected item and the detail title reflect changes
// made to the input box. // made to the input box.
@ -56,6 +57,6 @@ describe('Architecture', function () {
// expect(heroNameEle.getText()).toEqual(selectedHeroName); // expect(heroNameEle.getText()).toEqual(selectedHeroName);
expect(heroNameEle.getAttribute('value')).toEqual(selectedHeroName + 'foo'); expect(heroNameEle.getAttribute('value')).toEqual(selectedHeroName + 'foo');
}); });
}) });
}); });

14
public/docs/_examples/attribute-directives/e2e-spec.js → public/docs/_examples/attribute-directives/e2e-spec.ts
View File

@ -1,6 +1,7 @@
/// <reference path='../_protractor/e2e.d.ts' />
describe('Attribute directives', function () { describe('Attribute directives', function () {
var _title = "My First Attribute Directive"; let _title = 'My First Attribute Directive';
beforeAll(function () { beforeAll(function () {
browser.get(''); browser.get('');
@ -11,14 +12,15 @@ describe('Attribute directives', function () {
}); });
it('should be able to select green highlight', function () { it('should be able to select green highlight', function () {
var highlightedEle = element(by.cssContainingText('p', 'Highlight me')); let highlightedEle = element(by.cssContainingText('p', 'Highlight me'));
var lightGreen = "rgba(144, 238, 144, 1)"; let lightGreen = 'rgba(144, 238, 144, 1)';
expect(highlightedEle.getCssValue('background-color')).not.toEqual(lightGreen); expect(highlightedEle.getCssValue('background-color')).not.toEqual(lightGreen);
// var greenRb = element(by.cssContainingText('input', 'Green')); // let greenRb = element(by.cssContainingText('input', 'Green'));
var greenRb = element.all(by.css('input')).get(0); let greenRb = element.all(by.css('input')).get(0);
greenRb.click().then(function() { greenRb.click().then(function() {
browser.actions().mouseMove(highlightedEle).perform(); // TypeScript Todo: find the right type for highlightedEle
browser.actions().mouseMove(highlightedEle as any).perform();
expect(highlightedEle.getCssValue('background-color')).toEqual(lightGreen); expect(highlightedEle.getCssValue('background-color')).toEqual(lightGreen);
}); });

49
public/docs/_examples/cb-a1-a2-quick-reference/e2e-spec.js → public/docs/_examples/cb-a1-a2-quick-reference/e2e-spec.ts
View File

@ -1,3 +1,4 @@
/// <reference path='../_protractor/e2e.d.ts' />
describe('Angular 1 to 2 Quick Reference Tests', function () { describe('Angular 1 to 2 Quick Reference Tests', function () {
beforeAll(function () { beforeAll(function () {
@ -10,7 +11,7 @@ describe('Angular 1 to 2 Quick Reference Tests', function () {
it('should display proper movie data', function () { it('should display proper movie data', function () {
// We check only a few samples // We check only a few samples
var expectedSamples = [ let expectedSamples: any[] = [
{row: 0, column: 0, element: 'img', attr: 'src', value: 'images/hero.png', contains: true}, {row: 0, column: 0, element: 'img', attr: 'src', value: 'images/hero.png', contains: true},
{row: 0, column: 2, value: 'Celeritas'}, {row: 0, column: 2, value: 'Celeritas'},
{row: 1, column: 3, matches: /Dec 1[678], 2015/}, // absorb timezone dif; we care about date format {row: 1, column: 3, matches: /Dec 1[678], 2015/}, // absorb timezone dif; we care about date format
@ -21,18 +22,18 @@ describe('Angular 1 to 2 Quick Reference Tests', function () {
]; ];
// Go through the samples // Go through the samples
var movieRows = getMovieRows(); let movieRows = getMovieRows();
for (var i = 0; i < expectedSamples.length; i++) { for (let i = 0; i < expectedSamples.length; i++) {
var sample = expectedSamples[i]; let sample = expectedSamples[i];
var tableCell = movieRows.get(sample.row) let tableCell = movieRows.get(sample.row)
.all(by.tagName('td')).get(sample.column); .all(by.tagName('td')).get(sample.column);
// Check the cell or its nested element // Check the cell or its nested element
var elementToCheck = sample.element let elementToCheck = sample.element
? tableCell.element(by.tagName(sample.element)) ? tableCell.element(by.tagName(sample.element))
: tableCell; : tableCell;
// Check element attribute or text // Check element attribute or text
var valueToCheck = sample.attr let valueToCheck = sample.attr
? elementToCheck.getAttribute(sample.attr) ? elementToCheck.getAttribute(sample.attr)
: elementToCheck.getText(); : elementToCheck.getText();
@ -48,38 +49,38 @@ describe('Angular 1 to 2 Quick Reference Tests', function () {
}); });
it('should display images after Show Poster', function () { it('should display images after Show Poster', function () {
testPosterButtonClick("Show Poster", true); testPosterButtonClick('Show Poster', true);
}); });
it('should hide images after Hide Poster', function () { it('should hide images after Hide Poster', function () {
testPosterButtonClick("Hide Poster", false); testPosterButtonClick('Hide Poster', false);
}); });
it('should display no movie when no favorite hero is specified', function () { it('should display no movie when no favorite hero is specified', function () {
testFavoriteHero(null, "Please enter your favorite hero."); testFavoriteHero(null, 'Please enter your favorite hero.');
}); });
it('should display no movie for Magneta', function () { it('should display no movie for Magneta', function () {
testFavoriteHero("Magneta", "No movie, sorry!"); testFavoriteHero('Magneta', 'No movie, sorry!');
}); });
it('should display a movie for Mr. Nice', function () { it('should display a movie for Mr. Nice', function () {
testFavoriteHero("Mr. Nice", "Excellent choice!"); testFavoriteHero('Mr. Nice', 'Excellent choice!');
}); });
function testImagesAreDisplayed(isDisplayed) { function testImagesAreDisplayed(isDisplayed: boolean) {
var expectedMovieCount = 3; let expectedMovieCount = 3;
var movieRows = getMovieRows(); let movieRows = getMovieRows();
expect(movieRows.count()).toBe(expectedMovieCount); expect(movieRows.count()).toBe(expectedMovieCount);
for (var i = 0; i < expectedMovieCount; i++) { for (let i = 0; i < expectedMovieCount; i++) {
var movieImage = movieRows.get(i).element(by.css('td > img')); let movieImage = movieRows.get(i).element(by.css('td > img'));
expect(movieImage.isDisplayed()).toBe(isDisplayed); expect(movieImage.isDisplayed()).toBe(isDisplayed);
} }
} }
function testPosterButtonClick(expectedButtonText, isDisplayed) { function testPosterButtonClick(expectedButtonText: string, isDisplayed: boolean) {
var posterButton = element(by.css('movie-list tr > th > button')); let posterButton = element(by.css('movie-list tr > th > button'));
expect(posterButton.getText()).toBe(expectedButtonText); expect(posterButton.getText()).toBe(expectedButtonText);
posterButton.click().then(function () { posterButton.click().then(function () {
@ -91,11 +92,11 @@ describe('Angular 1 to 2 Quick Reference Tests', function () {
return element.all(by.css('movie-list tbody > tr')); return element.all(by.css('movie-list tbody > tr'));
} }
function testFavoriteHero(heroName, expectedLabel) { function testFavoriteHero(heroName: string, expectedLabel: string) {
var movieListComp = element(by.tagName('movie-list')); let movieListComp = element(by.tagName('movie-list'));
var heroInput = movieListComp.element(by.tagName('input')); let heroInput = movieListComp.element(by.tagName('input'));
var favoriteHeroLabel = movieListComp.element(by.tagName('h3')); let favoriteHeroLabel = movieListComp.element(by.tagName('h3'));
var resultLabel = movieListComp.element(by.css('span > p')); let resultLabel = movieListComp.element(by.css('span > p'));
heroInput.clear().then(function () { heroInput.clear().then(function () {
sendKeys(heroInput, heroName || '').then(function () { sendKeys(heroInput, heroName || '').then(function () {

119
public/docs/_examples/cb-component-communication/e2e-spec.js → public/docs/_examples/cb-component-communication/e2e-spec.ts
View File

@ -1,3 +1,4 @@
/// <reference path='../_protractor/e2e.d.ts' />
describe('Component Communication Cookbook Tests', function () { describe('Component Communication Cookbook Tests', function () {
// Note: '?e2e' which app can read to know it is running in protractor // Note: '?e2e' which app can read to know it is running in protractor
@ -9,16 +10,16 @@ describe('Component Communication Cookbook Tests', function () {
describe('Parent-to-child communication', function() { describe('Parent-to-child communication', function() {
// #docregion parent-to-child // #docregion parent-to-child
// ... // ...
var _heroNames = ['Mr. IQ', 'Magneta', 'Bombasto']; let _heroNames = ['Mr. IQ', 'Magneta', 'Bombasto'];
var _masterName = 'Master'; let _masterName = 'Master';
it('should pass properties to children properly', function () { it('should pass properties to children properly', function () {
var parent = element.all(by.tagName('hero-parent')).get(0); let parent = element.all(by.tagName('hero-parent')).get(0);
var heroes = parent.all(by.tagName('hero-child')); let heroes = parent.all(by.tagName('hero-child'));
for (var i = 0; i < _heroNames.length; i++) { for (let i = 0; i < _heroNames.length; i++) {
var childTitle = heroes.get(i).element(by.tagName('h3')).getText(); let childTitle = heroes.get(i).element(by.tagName('h3')).getText();
var childDetail = heroes.get(i).element(by.tagName('p')).getText(); let childDetail = heroes.get(i).element(by.tagName('p')).getText();
expect(childTitle).toEqual(_heroNames[i] + ' says:') expect(childTitle).toEqual(_heroNames[i] + ' says:')
expect(childDetail).toContain(_masterName) expect(childDetail).toContain(_masterName)
} }
@ -31,22 +32,22 @@ describe('Component Communication Cookbook Tests', function () {
// #docregion parent-to-child-setter // #docregion parent-to-child-setter
// ... // ...
it('should display trimmed, non-empty names', function () { it('should display trimmed, non-empty names', function () {
var _nonEmptyNameIndex = 0; let _nonEmptyNameIndex = 0;
var _nonEmptyName = '"Mr. IQ"'; let _nonEmptyName = '"Mr. IQ"';
var parent = element.all(by.tagName('name-parent')).get(0); let parent = element.all(by.tagName('name-parent')).get(0);
var hero = parent.all(by.tagName('name-child')).get(_nonEmptyNameIndex); let hero = parent.all(by.tagName('name-child')).get(_nonEmptyNameIndex);
var displayName = hero.element(by.tagName('h3')).getText(); let displayName = hero.element(by.tagName('h3')).getText();
expect(displayName).toEqual(_nonEmptyName) expect(displayName).toEqual(_nonEmptyName)
}); });
it('should replace empty name with default name', function () { it('should replace empty name with default name', function () {
var _emptyNameIndex = 1; let _emptyNameIndex = 1;
var _defaultName = '"<no name set>"'; let _defaultName = '"<no name set>"';
var parent = element.all(by.tagName('name-parent')).get(0); let parent = element.all(by.tagName('name-parent')).get(0);
var hero = parent.all(by.tagName('name-child')).get(_emptyNameIndex); let hero = parent.all(by.tagName('name-child')).get(_emptyNameIndex);
var displayName = hero.element(by.tagName('h3')).getText(); let displayName = hero.element(by.tagName('h3')).getText();
expect(displayName).toEqual(_defaultName) expect(displayName).toEqual(_defaultName)
}); });
// ... // ...
@ -58,26 +59,26 @@ describe('Component Communication Cookbook Tests', function () {
// ... // ...
// Test must all execute in this exact order // Test must all execute in this exact order
it('should set expected initial values', function () { it('should set expected initial values', function () {
var actual = getActual(); let actual = getActual();
var initialLabel = "Version 1.23"; let initialLabel = 'Version 1.23';
var initialLog = 'major changed from {} to 1, minor changed from {} to 23'; let initialLog = 'major changed from {} to 1, minor changed from {} to 23';
expect(actual.label).toBe(initialLabel); expect(actual.label).toBe(initialLabel);
expect(actual.count).toBe(1); expect(actual.count).toBe(1);
expect(actual.logs.get(0).getText()).toBe(initialLog); expect(actual.logs.get(0).getText()).toBe(initialLog);
}); });
it('should set expected values after clicking "Minor" twice', function () { it('should set expected values after clicking \'Minor\' twice', function () {
var repoTag = element(by.tagName('version-parent')); let repoTag = element(by.tagName('version-parent'));
var newMinorButton = repoTag.all(by.tagName('button')).get(0); let newMinorButton = repoTag.all(by.tagName('button')).get(0);
newMinorButton.click().then(function() { newMinorButton.click().then(function() {
newMinorButton.click().then(function() { newMinorButton.click().then(function() {
var actual = getActual(); let actual = getActual();
var labelAfter2Minor = "Version 1.25"; let labelAfter2Minor = 'Version 1.25';
var logAfter2Minor = 'minor changed from 24 to 25'; let logAfter2Minor = 'minor changed from 24 to 25';
expect(actual.label).toBe(labelAfter2Minor); expect(actual.label).toBe(labelAfter2Minor);
expect(actual.count).toBe(3); expect(actual.count).toBe(3);
@ -86,15 +87,15 @@ describe('Component Communication Cookbook Tests', function () {
}); });
}); });
it('should set expected values after clicking "Major" once', function () { it('should set expected values after clicking \'Major\' once', function () {
var repoTag = element(by.tagName('version-parent')); let repoTag = element(by.tagName('version-parent'));
var newMajorButton = repoTag.all(by.tagName('button')).get(1); let newMajorButton = repoTag.all(by.tagName('button')).get(1);
newMajorButton.click().then(function() { newMajorButton.click().then(function() {
var actual = getActual(); let actual = getActual();
var labelAfterMajor = "Version 2.0"; let labelAfterMajor = 'Version 2.0';
var logAfterMajor = 'major changed from 1 to 2, minor changed from 25 to 0'; let logAfterMajor = 'major changed from 1 to 2, minor changed from 25 to 0';
expect(actual.label).toBe(labelAfterMajor); expect(actual.label).toBe(labelAfterMajor);
expect(actual.count).toBe(4); expect(actual.count).toBe(4);
@ -103,10 +104,10 @@ describe('Component Communication Cookbook Tests', function () {
}); });
function getActual() { function getActual() {
var versionTag = element(by.tagName('version-child')); let versionTag = element(by.tagName('version-child'));
var label = versionTag.element(by.tagName('h3')).getText(); let label = versionTag.element(by.tagName('h3')).getText();
var ul = versionTag.element((by.tagName('ul'))); let ul = versionTag.element((by.tagName('ul')));
var logs = ul.all(by.tagName('li')); let logs = ul.all(by.tagName('li'));
return { return {
label: label, label: label,
@ -123,28 +124,28 @@ describe('Component Communication Cookbook Tests', function () {
// #docregion child-to-parent // #docregion child-to-parent
// ... // ...
it('should not emit the event initially', function () { it('should not emit the event initially', function () {
var voteLabel = element(by.tagName('vote-taker')) let voteLabel = element(by.tagName('vote-taker'))
.element(by.tagName('h3')).getText(); .element(by.tagName('h3')).getText();
expect(voteLabel).toBe("Agree: 0, Disagree: 0"); expect(voteLabel).toBe('Agree: 0, Disagree: 0');
}); });
it('should process Agree vote', function () { it('should process Agree vote', function () {
var agreeButton1 = element.all(by.tagName('my-voter')).get(0) let agreeButton1 = element.all(by.tagName('my-voter')).get(0)
.all(by.tagName('button')).get(0); .all(by.tagName('button')).get(0);
agreeButton1.click().then(function() { agreeButton1.click().then(function() {
var voteLabel = element(by.tagName('vote-taker')) let voteLabel = element(by.tagName('vote-taker'))
.element(by.tagName('h3')).getText(); .element(by.tagName('h3')).getText();
expect(voteLabel).toBe("Agree: 1, Disagree: 0"); expect(voteLabel).toBe('Agree: 1, Disagree: 0');
}); });
}); });
it('should process Disagree vote', function () { it('should process Disagree vote', function () {
var agreeButton1 = element.all(by.tagName('my-voter')).get(1) let agreeButton1 = element.all(by.tagName('my-voter')).get(1)
.all(by.tagName('button')).get(1); .all(by.tagName('button')).get(1);
agreeButton1.click().then(function() { agreeButton1.click().then(function() {
var voteLabel = element(by.tagName('vote-taker')) let voteLabel = element(by.tagName('vote-taker'))
.element(by.tagName('h3')).getText(); .element(by.tagName('h3')).getText();
expect(voteLabel).toBe("Agree: 1, Disagree: 1"); expect(voteLabel).toBe('Agree: 1, Disagree: 1');
}); });
}); });
// ... // ...
@ -161,23 +162,23 @@ describe('Component Communication Cookbook Tests', function () {
countDownTimerTests('countdown-parent-vc') countDownTimerTests('countdown-parent-vc')
}); });
function countDownTimerTests(parentTag) { function countDownTimerTests(parentTag: string) {
// #docregion countdown-timer-tests // #docregion countdown-timer-tests
// ... // ...
it('timer and parent seconds should match', function () { it('timer and parent seconds should match', function () {
var parent = element(by.tagName(parentTag)); let parent = element(by.tagName(parentTag));
var message = parent.element(by.tagName('countdown-timer')).getText(); let message = parent.element(by.tagName('countdown-timer')).getText();
browser.sleep(10); // give `seconds` a chance to catchup with `message` browser.sleep(10); // give `seconds` a chance to catchup with `message`
var seconds = parent.element(by.className('seconds')).getText(); let seconds = parent.element(by.className('seconds')).getText();
expect(message).toContain(seconds); expect(message).toContain(seconds);
}); });
it('should stop the countdown', function () { it('should stop the countdown', function () {
var parent = element(by.tagName(parentTag)); let parent = element(by.tagName(parentTag));
var stopButton = parent.all(by.tagName('button')).get(1); let stopButton = parent.all(by.tagName('button')).get(1);
stopButton.click().then(function() { stopButton.click().then(function() {
var message = parent.element(by.tagName('countdown-timer')).getText(); let message = parent.element(by.tagName('countdown-timer')).getText();
expect(message).toContain('Holding'); expect(message).toContain('Holding');
}); });
}); });
@ -190,10 +191,10 @@ describe('Component Communication Cookbook Tests', function () {
// #docregion bidirectional-service // #docregion bidirectional-service
// ... // ...
it('should announce a mission', function () { it('should announce a mission', function () {
var missionControl = element(by.tagName('mission-control')); let missionControl = element(by.tagName('mission-control'));
var announceButton = missionControl.all(by.tagName('button')).get(0); let announceButton = missionControl.all(by.tagName('button')).get(0);
announceButton.click().then(function () { announceButton.click().then(function () {
var history = missionControl.all(by.tagName('li')); let history = missionControl.all(by.tagName('li'));
expect(history.count()).toBe(1); expect(history.count()).toBe(1);
expect(history.get(0).getText()).toMatch(/Mission.* announced/); expect(history.get(0).getText()).toMatch(/Mission.* announced/);
}); });
@ -211,12 +212,12 @@ describe('Component Communication Cookbook Tests', function () {
testConfirmMission(2, 4, 'Swigert'); testConfirmMission(2, 4, 'Swigert');
}); });
function testConfirmMission(buttonIndex, expectedLogCount, astronaut) { function testConfirmMission(buttonIndex: number, expectedLogCount: number, astronaut: string) {
var _confirmedLog = ' confirmed the mission'; let _confirmedLog = ' confirmed the mission';
var missionControl = element(by.tagName('mission-control')); let missionControl = element(by.tagName('mission-control'));
var confirmButton = missionControl.all(by.tagName('button')).get(buttonIndex); let confirmButton = missionControl.all(by.tagName('button')).get(buttonIndex);
confirmButton.click().then(function () { confirmButton.click().then(function () {
var history = missionControl.all(by.tagName('li')); let history = missionControl.all(by.tagName('li'));
expect(history.count()).toBe(expectedLogCount); expect(history.count()).toBe(expectedLogCount);
expect(history.get(expectedLogCount - 1).getText()).toBe(astronaut + _confirmedLog); expect(history.get(expectedLogCount - 1).getText()).toBe(astronaut + _confirmedLog);
}); });

9
public/docs/_examples/cb-component-relative-paths/e2e-spec.js → public/docs/_examples/cb-component-relative-paths/e2e-spec.ts
View File

@ -1,5 +1,12 @@
/// <reference path="../_protractor/e2e.d.ts" />
describe('Cookbook: component-relative paths', function () { describe('Cookbook: component-relative paths', function () {
interface Page {
title: protractor.ElementFinder;
absComp: protractor.ElementFinder;
relComp: protractor.ElementFinder;
}
function getPageStruct() { function getPageStruct() {
return { return {
title: element( by.tagName( 'h1' )), title: element( by.tagName( 'h1' )),
@ -8,7 +15,7 @@ describe('Cookbook: component-relative paths', function () {
} }
} }
var page; let page: Page;
beforeAll(function () { beforeAll(function () {
browser.get(''); browser.get('');
page = getPageStruct(); page = getPageStruct();

45
public/docs/_examples/cb-dependency-injection/e2e-spec.js → public/docs/_examples/cb-dependency-injection/e2e-spec.ts
View File

@ -1,3 +1,4 @@
/// <reference path="../_protractor/e2e.d.ts" />
describe('Dependency Injection Cookbook', function () { describe('Dependency Injection Cookbook', function () {
beforeAll(function () { beforeAll(function () {
@ -5,89 +6,89 @@ describe('Dependency Injection Cookbook', function () {
}); });
it('should render Logged in User example', function () { it('should render Logged in User example', function () {
var loggedInUser = element.all(by.xpath('//h3[text()="Logged in user"]')).get(0); let loggedInUser = element.all(by.xpath('//h3[text()="Logged in user"]')).get(0);
expect(loggedInUser).toBeDefined(); expect(loggedInUser).toBeDefined();
}); });
it('"Bombasto" should be the logged in user', function () { it('"Bombasto" should be the logged in user', function () {
loggedInUser = element.all(by.xpath('//div[text()="Name: Bombasto"]')).get(0); let loggedInUser = element.all(by.xpath('//div[text()="Name: Bombasto"]')).get(0);
expect(loggedInUser).toBeDefined(); expect(loggedInUser).toBeDefined();
}); });
it('should render sorted heroes', function () { it('should render sorted heroes', function () {
var sortedHeroes = element.all(by.xpath('//h3[text()="Sorted Heroes" and position()=1]')).get(0); let sortedHeroes = element.all(by.xpath('//h3[text()="Sorted Heroes" and position()=1]')).get(0);
expect(sortedHeroes).toBeDefined(); expect(sortedHeroes).toBeDefined();
}); });
it('Mr. Nice should be in sorted heroes', function () { it('Mr. Nice should be in sorted heroes', function () {
var sortedHero = element.all(by.xpath('//sorted-heroes/[text()="Mr. Nice" and position()=2]')).get(0); let sortedHero = element.all(by.xpath('//sorted-heroes/[text()="Mr. Nice" and position()=2]')).get(0);
expect(sortedHero).toBeDefined(); expect(sortedHero).toBeDefined();
}); });
it('RubberMan should be in sorted heroes', function () { it('RubberMan should be in sorted heroes', function () {
sortedHero = element.all(by.xpath('//sorted-heroes/[text()="RubberMan" and position()=3]')).get(0); let sortedHero = element.all(by.xpath('//sorted-heroes/[text()="RubberMan" and position()=3]')).get(0);
expect(sortedHero).toBeDefined(); expect(sortedHero).toBeDefined();
}); });
it('Magma should be in sorted heroes', function () { it('Magma should be in sorted heroes', function () {
sortedHero = element.all(by.xpath('//sorted-heroes/[text()="Magma"]')).get(0); let sortedHero = element.all(by.xpath('//sorted-heroes/[text()="Magma"]')).get(0);
expect(sortedHero).toBeDefined(); expect(sortedHero).toBeDefined();
}); });
it('should render Hero of the Month when DI deps are defined using provide()', function () { it('should render Hero of the Month when DI deps are defined using provide()', function () {
var heroOfTheMonth = element.all(by.xpath('//h3[text()="Hero of the month"]')).get(0); let heroOfTheMonth = element.all(by.xpath('//h3[text()="Hero of the month"]')).get(0);
expect(heroOfTheMonth).toBeDefined(); expect(heroOfTheMonth).toBeDefined();
}); });
it('should render Hero of the Month when DI deps are defined using provide object literal', function () { it('should render Hero of the Month when DI deps are defined using provide object literal', function () {
var heroOfTheMonth = element.all(by.xpath('//h3[text()="Hero of the month 2"]')).get(0); let heroOfTheMonth = element.all(by.xpath('//h3[text()="Hero of the month 2"]')).get(0);
expect(heroOfTheMonth).toBeDefined(); expect(heroOfTheMonth).toBeDefined();
}); });
it('should render Hero Bios', function () { it('should render Hero Bios', function () {
var heroBios = element.all(by.xpath('//h3[text()="Hero Bios"]')).get(0); let heroBios = element.all(by.xpath('//h3[text()="Hero Bios"]')).get(0);
expect(heroBios).toBeDefined(); expect(heroBios).toBeDefined();
}); });
it('should render Magma\'s description in Hero Bios', function () { it('should render Magma\'s description in Hero Bios', function () {
var magmaText = element.all(by.xpath('//textarea[text()="Hero of all trades"]')).get(0); let magmaText = element.all(by.xpath('//textarea[text()="Hero of all trades"]')).get(0);
expect(magmaText).toBeDefined(); expect(magmaText).toBeDefined();
}); });
it('should render Magma\'s phone in Hero Bios and Contacts', function () { it('should render Magma\'s phone in Hero Bios and Contacts', function () {
var magmaPhone = element.all(by.xpath('//div[text()="Phone #: 555-555-5555"]')).get(0); let magmaPhone = element.all(by.xpath('//div[text()="Phone #: 555-555-5555"]')).get(0);
expect(magmaPhone).toBeDefined(); expect(magmaPhone).toBeDefined();
}); });
it('should render Hero-of-the-Month runner-ups when DI deps are defined using provide()', function () { it('should render Hero-of-the-Month runner-ups when DI deps are defined using provide()', function () {
var runnersUp = element(by.id('rups1')).getText(); let runnersUp = element(by.id('rups1')).getText();
expect(runnersUp).toContain('RubberMan, Mr. Nice'); expect(runnersUp).toContain('RubberMan, Mr. Nice');
}); });
it('should render Hero-of-the-Month runner-ups when DI deps are defined using provide object literal', function () { it('should render Hero-of-the-Month runner-ups when DI deps are defined using provide object literal', function () {
var runnersUp = element(by.id('rups2')).getText(); let runnersUp = element(by.id('rups2')).getText();
expect(runnersUp).toContain('RubberMan, Mr. Nice'); expect(runnersUp).toContain('RubberMan, Mr. Nice');
}); });
it('should render DateLogger log entry in Hero-of-the-Month', function () { it('should render DateLogger log entry in Hero-of-the-Month', function () {
var logs = element.all(by.id('logs')).get(0).getText(); let logs = element.all(by.id('logs')).get(0).getText();
expect(logs).toContain('INFO: starting up at'); expect(logs).toContain('INFO: starting up at');
}); });
it('should highlight Hero Bios and Contacts container when mouseover', function () { it('should highlight Hero Bios and Contacts container when mouseover', function () {
var target = element(by.css('div[myHighlight="yellow"]')) let target = element(by.css('div[myHighlight="yellow"]'))
var yellow = "rgba(255, 255, 0, 1)"; let yellow = 'rgba(255, 255, 0, 1)';
expect(target.getCssValue('background-color')).not.toEqual(yellow); expect(target.getCssValue('background-color')).not.toEqual(yellow);
browser.actions().mouseMove(target).perform(); browser.actions().mouseMove(target as any as webdriver.WebElement).perform();
expect(target.getCssValue('background-color')).toEqual(yellow); expect(target.getCssValue('background-color')).toEqual(yellow);
}); });
describe('in Parent Finder', function () { describe('in Parent Finder', function () {
var cathy1 = element(by.css('alex cathy')); let cathy1 = element(by.css('alex cathy'));
var craig1 = element(by.css('alex craig')); let craig1 = element(by.css('alex craig'));
var carol1 = element(by.css('alex carol p')); let carol1 = element(by.css('alex carol p'));
var carol2 = element(by.css('barry carol p')); let carol2 = element(by.css('barry carol p'));
it('"Cathy" should find "Alex" via the component class', function () { it('"Cathy" should find "Alex" via the component class', function () {
expect(cathy1.getText()).toContain('Found Alex via the component'); expect(cathy1.getText()).toContain('Found Alex via the component');
@ -104,5 +105,5 @@ describe('Dependency Injection Cookbook', function () {
it('"Carol" within "Barry" should have "Barry" parent', function () { it('"Carol" within "Barry" should have "Barry" parent', function () {
expect(carol2.getText()).toContain('Barry'); expect(carol2.getText()).toContain('Barry');
}); });
}) });
}); });

10
public/docs/_examples/cb-dynamic-form/e2e-spec.js → public/docs/_examples/cb-dynamic-form/e2e-spec.ts
View File

@ -1,3 +1,5 @@
/// <reference path="../_protractor/e2e.d.ts" />
/* tslint:disable:quotemark */
describe('Dynamic Form', function () { describe('Dynamic Form', function () {
beforeAll(function () { beforeAll(function () {
@ -5,17 +7,17 @@ describe('Dynamic Form', function () {
}); });
it('should submit form', function () { it('should submit form', function () {
var firstNameElement = element.all(by.css('input[id=firstName]')).get(0); let firstNameElement = element.all(by.css('input[id=firstName]')).get(0);
expect(firstNameElement.getAttribute('value')).toEqual('Bombasto'); expect(firstNameElement.getAttribute('value')).toEqual('Bombasto');
var emailElement = element.all(by.css('input[id=emailAddress]')).get(0); let emailElement = element.all(by.css('input[id=emailAddress]')).get(0);
var email = 'test@test.com'; let email = 'test@test.com';
emailElement.sendKeys(email); emailElement.sendKeys(email);
expect(emailElement.getAttribute('value')).toEqual(email); expect(emailElement.getAttribute('value')).toEqual(email);
element(by.css('select option[value="solid"]')).click() element(by.css('select option[value="solid"]')).click()
var saveButton = element.all(by.css('button')).get(0); let saveButton = element.all(by.css('button')).get(0);
saveButton.click().then(function(){ saveButton.click().then(function(){
expect(element(by.xpath("//strong[contains(text(),'Saved the following values')]")).isPresent()).toBe(true); expect(element(by.xpath("//strong[contains(text(),'Saved the following values')]")).isPresent()).toBe(true);
}); });

3
public/docs/_examples/cb-set-document-title/e2e-spec.js → public/docs/_examples/cb-set-document-title/e2e-spec.ts
View File

@ -1,3 +1,4 @@
/// <reference path="../_protractor/e2e.d.ts" />
// gulp run-e2e-tests --filter=cb-set-document-title // gulp run-e2e-tests --filter=cb-set-document-title
describe('Set Document Title', function () { describe('Set Document Title', function () {
@ -7,7 +8,7 @@ describe('Set Document Title', function () {
it('should set the document title', function () { it('should set the document title', function () {
var titles = [ let titles = [
'Good morning!', 'Good morning!',
'Good afternoon!', 'Good afternoon!',
'Good evening!' 'Good evening!'

25
public/docs/_examples/cb-ts-to-js/e2e-spec.js → public/docs/_examples/cb-ts-to-js/e2e-spec.ts
View File

@ -1,3 +1,4 @@
/// <reference path="../_protractor/e2e.d.ts" />
describe('TypeScript to Javascript tests', function () { describe('TypeScript to Javascript tests', function () {
beforeAll(function () { beforeAll(function () {
@ -21,9 +22,9 @@ describe('TypeScript to Javascript tests', function () {
}); });
it('should support optional, attribute, and query injections', function () { it('should support optional, attribute, and query injections', function () {
var app = element(by.css('hero-di-inject-additional')); let app = element(by.css('hero-di-inject-additional'));
var h1 = app.element(by.css('h1')); let h1 = app.element(by.css('h1'));
var okMsg = app.element(by.css('.ok-msg')); let okMsg = app.element(by.css('.ok-msg'));
expect(h1.getText()).toBe('Tour of Heroes'); expect(h1.getText()).toBe('Tour of Heroes');
app.element(by.buttonText('OK')).click(); app.element(by.buttonText('OK')).click();
@ -31,8 +32,8 @@ describe('TypeScript to Javascript tests', function () {
}); });
it('should support component with inputs and outputs', function () { it('should support component with inputs and outputs', function () {
var app = element(by.css('hero-io')); let app = element(by.css('hero-io'));
var confirmComponent = app.element(by.css('my-confirm')); let confirmComponent = app.element(by.css('my-confirm'));
confirmComponent.element(by.buttonText('OK')).click(); confirmComponent.element(by.buttonText('OK')).click();
expect(app.element(by.cssContainingText('span', 'OK clicked')).isPresent()).toBe(true); expect(app.element(by.cssContainingText('span', 'OK clicked')).isPresent()).toBe(true);
@ -42,8 +43,8 @@ describe('TypeScript to Javascript tests', function () {
}); });
it('should support host bindings and host listeners', function() { it('should support host bindings and host listeners', function() {
var app = element(by.css('heroes-bindings')); let app = element(by.css('heroes-bindings'));
var h1 = app.element(by.css('h1')); let h1 = app.element(by.css('h1'));
expect(app.getAttribute('class')).toBe('heading'); expect(app.getAttribute('class')).toBe('heading');
expect(app.getAttribute('title')).toBe('Tooltip content'); expect(app.getAttribute('title')).toBe('Tooltip content');
@ -52,21 +53,21 @@ describe('TypeScript to Javascript tests', function () {
expect(h1.getAttribute('class')).toBe('active'); expect(h1.getAttribute('class')).toBe('active');
h1.click(); h1.click();
browser.actions().doubleClick(h1).perform(); browser.actions().doubleClick(h1 as any as webdriver.WebElement).perform();
expect(h1.getAttribute('class')).toBe('active'); expect(h1.getAttribute('class')).toBe('active');
}); });
it('should support content and view queries', function() { it('should support content and view queries', function() {
var app = element(by.css('heroes-queries')); let app = element(by.css('heroes-queries'));
var windstorm = app.element(by.css('hero:first-child')); let windstorm = app.element(by.css('hero:first-child'));
app.element(by.buttonText('Activate')).click(); app.element(by.buttonText('Activate')).click();
expect(windstorm.element(by.css('h2')).getAttribute('class')).toBe('active'); expect(windstorm.element(by.css('h2')).getAttribute('class')).toBe('active');
expect(windstorm.element(by.css('active-label')).getText()).toBe('Active'); expect(windstorm.element(by.css('active-label')).getText()).toBe('Active');
}); });
function testTag(selector, expectedText) { function testTag(selector: string, expectedText: string) {
var component = element(by.css(selector)); let component = element(by.css(selector));
expect(component.getText()).toBe(expectedText); expect(component.getText()).toBe(expectedText);
} }

27
public/docs/_examples/component-styles/e2e-spec.js → public/docs/_examples/component-styles/e2e-spec.ts
View File

@ -1,3 +1,4 @@
/// <reference path="../_protractor/e2e.d.ts" />
describe('Component Style Tests', function () { describe('Component Style Tests', function () {
beforeAll(function () { beforeAll(function () {
@ -5,8 +6,8 @@ describe('Component Style Tests', function () {
}); });
it('scopes component styles to component view', function() { it('scopes component styles to component view', function() {
var componentH1 = element(by.css('hero-app > h1')); let componentH1 = element(by.css('hero-app > h1'));
var externalH1 = element(by.css('body > h1')); let externalH1 = element(by.css('body > h1'));
expect(componentH1.getCssValue('fontWeight')).toEqual('normal'); expect(componentH1.getCssValue('fontWeight')).toEqual('normal');
expect(externalH1.getCssValue('fontWeight')).not.toEqual('normal'); expect(externalH1.getCssValue('fontWeight')).not.toEqual('normal');
@ -14,55 +15,55 @@ describe('Component Style Tests', function () {
it('allows styling :host element', function() { it('allows styling :host element', function() {
var host = element(by.css('hero-details')); let host = element(by.css('hero-details'));
expect(host.getCssValue('borderWidth')).toEqual('1px'); expect(host.getCssValue('borderWidth')).toEqual('1px');
}); });
it('supports :host() in function form', function() { it('supports :host() in function form', function() {
var host = element(by.css('hero-details')); let host = element(by.css('hero-details'));
host.element(by.buttonText('Activate')).click(); host.element(by.buttonText('Activate')).click();
expect(host.getCssValue('borderWidth')).toEqual('3px'); expect(host.getCssValue('borderWidth')).toEqual('3px');
}); });
it('allows conditional :host-context() styling', function() { it('allows conditional :host-context() styling', function() {
var h2 = element(by.css('hero-details h2')); let h2 = element(by.css('hero-details h2'));
expect(h2.getCssValue('backgroundColor')).toEqual('rgba(238, 238, 255, 1)'); // #eeeeff expect(h2.getCssValue('backgroundColor')).toEqual('rgba(238, 238, 255, 1)'); // #eeeeff
}); });
it('styles both view and content children with /deep/', function() { it('styles both view and content children with /deep/', function() {
var viewH3 = element(by.css('hero-team h3')); let viewH3 = element(by.css('hero-team h3'));
var contentH3 = element(by.css('hero-controls h3')); let contentH3 = element(by.css('hero-controls h3'));
expect(viewH3.getCssValue('fontStyle')).toEqual('italic'); expect(viewH3.getCssValue('fontStyle')).toEqual('italic');
expect(contentH3.getCssValue('fontStyle')).toEqual('italic'); expect(contentH3.getCssValue('fontStyle')).toEqual('italic');
}); });
it('includes styles loaded with CSS @import', function() { it('includes styles loaded with CSS @import', function() {
var host = element(by.css('hero-details')); let host = element(by.css('hero-details'));
expect(host.getCssValue('padding')).toEqual('10px'); expect(host.getCssValue('padding')).toEqual('10px');
}); });
it('processes template inline styles', function() { it('processes template inline styles', function() {
var button = element(by.css('hero-controls button')); let button = element(by.css('hero-controls button'));
var externalButton = element(by.css('body > button')); let externalButton = element(by.css('body > button'));
expect(button.getCssValue('backgroundColor')).toEqual('rgba(255, 255, 255, 1)'); // #ffffff expect(button.getCssValue('backgroundColor')).toEqual('rgba(255, 255, 255, 1)'); // #ffffff
expect(externalButton.getCssValue('backgroundColor')).not.toEqual('rgba(255, 255, 255, 1)'); expect(externalButton.getCssValue('backgroundColor')).not.toEqual('rgba(255, 255, 255, 1)');
}); });
it('processes template <link>s', function() { it('processes template <link>s', function() {
var li = element(by.css('hero-team li:first-child')); let li = element(by.css('hero-team li:first-child'));
var externalLi = element(by.css('body > ul li')); let externalLi = element(by.css('body > ul li'));
expect(li.getCssValue('listStyleType')).toEqual('square'); expect(li.getCssValue('listStyleType')).toEqual('square');
expect(externalLi.getCssValue('listStyleType')).not.toEqual('square'); expect(externalLi.getCssValue('listStyleType')).not.toEqual('square');
}); });
it('supports relative loading with moduleId', function() { it('supports relative loading with moduleId', function() {
var host = element(by.css('quest-summary')); let host = element(by.css('quest-summary'));
expect(host.getCssValue('color')).toEqual('rgba(255, 255, 255, 1)'); // #ffffff expect(host.getCssValue('color')).toEqual('rgba(255, 255, 255, 1)'); // #ffffff
}); });

29
public/docs/_examples/dependency-injection/e2e-spec.js → public/docs/_examples/dependency-injection/e2e-spec.ts
View File

@ -1,8 +1,9 @@
/// <reference path="../_protractor/e2e.d.ts" />
describe('Dependency Injection Tests', function () { describe('Dependency Injection Tests', function () {
var expectedMsg; let expectedMsg: string;
let expectedMsgRx: RegExp;
beforeAll(function () { beforeAll(function () {
browser.get(''); browser.get('');
@ -66,8 +67,8 @@ describe('Dependency Injection Tests', function () {
describe('Tests:', function() { describe('Tests:', function() {
it('Tests display as expected', function () { it('Tests display as expected', function () {
expectedMsg = /Tests passed/; expectedMsgRx = /Tests passed/;
expect(element(by.css('#tests')).getText()).toMatch(expectedMsg); expect(element(by.css('#tests')).getText()).toMatch(expectedMsgRx);
}); });
}); });
@ -147,22 +148,22 @@ describe('Dependency Injection Tests', function () {
describe('User/Heroes:', function() { describe('User/Heroes:', function() {
it('User is Bob - unauthorized', function () { it('User is Bob - unauthorized', function () {
expectedMsg = /Bob, is not authorized/; expectedMsgRx = /Bob, is not authorized/;
expect(element(by.css('#user')).getText()).toMatch(expectedMsg); expect(element(by.css('#user')).getText()).toMatch(expectedMsgRx);
}); });
it('should have button', function () { it('should have button', function () {
expect(element.all(by.cssContainingText('button', 'Next User')) expect(element.all(by.cssContainingText('button', 'Next User'))
.get(0).isDisplayed()).toBe(true, "'Next User' button should be displayed"); .get(0).isDisplayed()).toBe(true, '\'Next User\' button should be displayed');
}); });
it('unauthorized user should have multiple unauthorized heroes', function () { it('unauthorized user should have multiple unauthorized heroes', function () {
var heroes = element.all(by.css('#unauthorized hero-list div')); let heroes = element.all(by.css('#unauthorized hero-list div'));
expect(heroes.count()).toBeGreaterThan(0); expect(heroes.count()).toBeGreaterThan(0);
}); });
it('unauthorized user should have no secret heroes', function () { it('unauthorized user should have no secret heroes', function () {
var heroes = element.all(by.css('#unauthorized hero-list div')); let heroes = element.all(by.css('#unauthorized hero-list div'));
expect(heroes.count()).toBeGreaterThan(0); expect(heroes.count()).toBeGreaterThan(0);
heroes.filter(function(elem, index){ heroes.filter(function(elem, index){
@ -182,22 +183,22 @@ describe('Dependency Injection Tests', function () {
describe('after button click', function() { describe('after button click', function() {
beforeAll(function (done) { beforeAll(function (done) {
var buttonEle = element.all(by.cssContainingText('button','Next User')).get(0); let buttonEle = element.all(by.cssContainingText('button','Next User')).get(0);
buttonEle.click().then(done,done); buttonEle.click().then(done,done);
}); });
it('User is Alice - authorized', function () { it('User is Alice - authorized', function () {
expectedMsg = /Alice, is authorized/; expectedMsgRx = /Alice, is authorized/;
expect(element(by.css('#user')).getText()).toMatch(expectedMsg); expect(element(by.css('#user')).getText()).toMatch(expectedMsgRx);
}); });
it('authorized user should have multiple authorized heroes ', function () { it('authorized user should have multiple authorized heroes ', function () {
var heroes = element.all(by.css('#authorized hero-list div')); let heroes = element.all(by.css('#authorized hero-list div'));
expect(heroes.count()).toBeGreaterThan(0); expect(heroes.count()).toBeGreaterThan(0);
}); });
it('authorized user should have secret heroes', function () { it('authorized user should have secret heroes', function () {
var heroes = element.all(by.css('#authorized hero-list div')); let heroes = element.all(by.css('#authorized hero-list div'));
expect(heroes.count()).toBeGreaterThan(0); expect(heroes.count()).toBeGreaterThan(0);
heroes.filter(function(elem, index){ heroes.filter(function(elem, index){

7
public/docs/_examples/displaying-data/e2e-spec.js → public/docs/_examples/displaying-data/e2e-spec.ts
View File

@ -1,6 +1,7 @@
/// <reference path='../_protractor/e2e.d.ts' />
describe('Displaying Data Tests', function () { describe('Displaying Data Tests', function () {
var _title = "Tour of Heroes"; let _title = 'Tour of Heroes';
var _defaultHero = 'Windstorm' let _defaultHero = 'Windstorm';
beforeAll(function () { beforeAll(function () {
browser.get(''); browser.get('');
@ -15,7 +16,7 @@ describe('Displaying Data Tests', function () {
}); });
it('should have heroes', function () { it('should have heroes', function () {
var heroEls = element.all(by.css('li')); let heroEls = element.all(by.css('li'));
expect(heroEls.count()).not.toBe(0, 'should have heroes'); expect(heroEls.count()).not.toBe(0, 'should have heroes');
}); });

27
public/docs/_examples/forms/e2e-spec.js → public/docs/_examples/forms/e2e-spec.ts
View File

@ -1,3 +1,4 @@
/// <reference path="../_protractor/e2e.d.ts" />
describeIf(browser.appIsTs || browser.appIsJs, 'Forms Tests', function () { describeIf(browser.appIsTs || browser.appIsJs, 'Forms Tests', function () {
beforeEach(function () { beforeEach(function () {
@ -10,51 +11,51 @@ describeIf(browser.appIsTs || browser.appIsJs, 'Forms Tests', function () {
it('should not display message before submit', function () { it('should not display message before submit', function () {
var ele = element(by.css('h2')); let ele = element(by.css('h2'));
expect(ele.isDisplayed()).toBe(false); expect(ele.isDisplayed()).toBe(false);
}); });
it('should hide form after submit', function () { it('should hide form after submit', function () {
var ele = element.all(by.css('h1')).get(0); let ele = element.all(by.css('h1')).get(0);
expect(ele.isDisplayed()).toBe(true); expect(ele.isDisplayed()).toBe(true);
var b = element.all(by.css('button[type=submit]')).get(0); let b = element.all(by.css('button[type=submit]')).get(0);
b.click().then(function() { b.click().then(function() {
expect(ele.isDisplayed()).toBe(false); expect(ele.isDisplayed()).toBe(false);
}); });
}); });
it('should display message after submit', function () { it('should display message after submit', function () {
var b = element.all(by.css('button[type=submit]')).get(0); let b = element.all(by.css('button[type=submit]')).get(0);
b.click().then(function() { b.click().then(function() {
expect(element(by.css('h2')).getText()).toContain('You submitted the following'); expect(element(by.css('h2')).getText()).toContain('You submitted the following');
}); });
}); });
it('should hide form after submit', function () { it('should hide form after submit', function () {
var alterEgoEle = element.all(by.css('input[ngcontrol=alterEgo]')).get(0); let alterEgoEle = element.all(by.css('input[ngcontrol=alterEgo]')).get(0);
expect(alterEgoEle.isDisplayed()).toBe(true); expect(alterEgoEle.isDisplayed()).toBe(true);
var submitButtonEle = element.all(by.css('button[type=submit]')).get(0); let submitButtonEle = element.all(by.css('button[type=submit]')).get(0);
submitButtonEle.click().then(function() { submitButtonEle.click().then(function() {
expect(alterEgoEle.isDisplayed()).toBe(false); expect(alterEgoEle.isDisplayed()).toBe(false);
}) });
}); });
it('should reflect submitted data after submit', function () { it('should reflect submitted data after submit', function () {
var test = 'testing 1 2 3'; let test = 'testing 1 2 3';
var newValue; let newValue: string;
var alterEgoEle = element.all(by.css('input[ngcontrol=alterEgo]')).get(0); let alterEgoEle = element.all(by.css('input[ngcontrol=alterEgo]')).get(0);
alterEgoEle.getAttribute('value').then(function(value) { alterEgoEle.getAttribute('value').then(function(value) {
// alterEgoEle.sendKeys(test); // alterEgoEle.sendKeys(test);
sendKeys(alterEgoEle, test); sendKeys(alterEgoEle, test);
newValue = value + test; newValue = value + test;
expect(alterEgoEle.getAttribute('value')).toEqual(newValue); expect(alterEgoEle.getAttribute('value')).toEqual(newValue);
}).then(function() { }).then(function() {
var b = element.all(by.css('button[type=submit]')).get(0); let b = element.all(by.css('button[type=submit]')).get(0);
return b.click(); return b.click();
}).then(function() { }).then(function() {
var alterEgoTextEle = element(by.cssContainingText('div', 'Alter Ego')); let alterEgoTextEle = element(by.cssContainingText('div', 'Alter Ego'));
expect(alterEgoTextEle.isPresent()).toBe(true, 'cannot locate "Alter Ego" label'); expect(alterEgoTextEle.isPresent()).toBe(true, 'cannot locate "Alter Ego" label');
var divEle = element(by.cssContainingText('div', newValue)); let divEle = element(by.cssContainingText('div', newValue));
expect(divEle.isPresent()).toBe(true, 'cannot locate div with this text: ' + newValue); expect(divEle.isPresent()).toBe(true, 'cannot locate div with this text: ' + newValue);
}); });
}); });

13
public/docs/_examples/hierarchical-dependency-injection/e2e-spec.js → public/docs/_examples/hierarchical-dependency-injection/e2e-spec.ts
View File

@ -1,3 +1,4 @@
/// <reference path="../_protractor/e2e.d.ts" />
describe('Hierarchical dependency injection', function () { describe('Hierarchical dependency injection', function () {
beforeEach(function () { beforeEach(function () {
@ -14,7 +15,7 @@ describe('Hierarchical dependency injection', function () {
}); });
it('should change to editor view after selection', function () { it('should change to editor view after selection', function () {
var editButtonEle = element.all(by.cssContainingText('button','edit')).get(0); let editButtonEle = element.all(by.cssContainingText('button','edit')).get(0);
editButtonEle.click().then(function() { editButtonEle.click().then(function() {
expect(editButtonEle.isDisplayed()).toBe(false, "edit button should be hidden after selection"); expect(editButtonEle.isDisplayed()).toBe(false, "edit button should be hidden after selection");
}) })
@ -29,19 +30,19 @@ describe('Hierarchical dependency injection', function () {
}); });
function testEdit(shouldSave) { function testEdit(shouldSave) {
var inputEle; let inputEle;
// select 2nd ele // select 2nd ele
var heroEle = element.all(by.css('heroes-list li')).get(1); let heroEle = element.all(by.css('heroes-list li')).get(1);
// get the 2nd span which is the name of the hero // get the 2nd span which is the name of the hero
var heroNameEle = heroEle.all(by.css('hero-card span')).get(1); let heroNameEle = heroEle.all(by.css('hero-card span')).get(1);
var editButtonEle = heroEle.element(by.cssContainingText('button','edit')); let editButtonEle = heroEle.element(by.cssContainingText('button','edit'));
editButtonEle.click().then(function() { editButtonEle.click().then(function() {
inputEle = heroEle.element(by.css('hero-editor input')); inputEle = heroEle.element(by.css('hero-editor input'));
// return inputEle.sendKeys("foo"); // return inputEle.sendKeys("foo");
return sendKeys(inputEle, "foo"); return sendKeys(inputEle, "foo");
}).then(function() { }).then(function() {
buttonName = shouldSave ? 'save' : 'cancel'; buttonName = shouldSave ? 'save' : 'cancel';
var buttonEle = heroEle.element(by.cssContainingText('button', buttonName)); let buttonEle = heroEle.element(by.cssContainingText('button', buttonName));
return buttonEle.click(); return buttonEle.click();
}).then(function() { }).then(function() {
if (shouldSave) { if (shouldSave) {

12
public/docs/_examples/homepage-hello-world/e2e-spec.js → public/docs/_examples/homepage-hello-world/e2e-spec.ts
View File

@ -1,4 +1,4 @@
/// <reference path="../_protractor/e2e.d.ts" />
describe('Homepage Hello World', function () { describe('Homepage Hello World', function () {
beforeAll(function () { beforeAll(function () {
@ -6,15 +6,15 @@ describe('Homepage Hello World', function () {
}); });
// Does it even launch? // Does it even launch?
var expectedLabel = 'Name:'; let expectedLabel = 'Name:';
it('should display the label: ' + expectedLabel, function () { it('should display the label: ' + expectedLabel, function () {
expect(element(by.css('label')).getText()).toEqual(expectedLabel); expect(element(by.css('label')).getText()).toEqual(expectedLabel);
}); });
it('should display entered name', function () { it('should display entered name', function () {
var testName = 'Bobby Joe'; let testName = 'Bobby Joe';
var newValue; let newValue;
var nameEle = element.all(by.css('input')).get(0); let nameEle = element.all(by.css('input')).get(0);
nameEle.getAttribute('value').then(function(value) { nameEle.getAttribute('value').then(function(value) {
// nameEle.sendKeys(testName); // should work but doesn't // nameEle.sendKeys(testName); // should work but doesn't
sendKeys(nameEle, testName); // utility that does work sendKeys(nameEle, testName); // utility that does work
@ -22,7 +22,7 @@ describe('Homepage Hello World', function () {
expect(nameEle.getAttribute('value')).toEqual(newValue); expect(nameEle.getAttribute('value')).toEqual(newValue);
}).then(function() { }).then(function() {
// Check the interpolated message built from name // Check the interpolated message built from name
var helloEle = element.all(by.css('h1')).get(0); let helloEle = element.all(by.css('h1')).get(0);
expect(helloEle.getText()).toEqual('Hello ' + testName + '!'); expect(helloEle.getText()).toEqual('Hello ' + testName + '!');
}); });
}); });

4
public/docs/_examples/homepage-tabs/e2e-spec.js → public/docs/_examples/homepage-tabs/e2e-spec.ts
View File

@ -1,4 +1,4 @@
/// <reference path="../_protractor/e2e.d.ts" />
describe('Homepage Tabs', function () { describe('Homepage Tabs', function () {
beforeAll(function () { beforeAll(function () {
@ -6,7 +6,7 @@ describe('Homepage Tabs', function () {
}); });
// Does it even launch? // Does it even launch?
var expectedAppTitle = 'Tabs Demo'; let expectedAppTitle = 'Tabs Demo';
it('should display app title: ' + expectedAppTitle, function () { it('should display app title: ' + expectedAppTitle, function () {
expect(element(by.css('h4')).getText()).toEqual(expectedAppTitle); expect(element(by.css('h4')).getText()).toEqual(expectedAppTitle);
}); });

4
public/docs/_examples/homepage-todo/e2e-spec.js → public/docs/_examples/homepage-todo/e2e-spec.ts
View File

@ -1,4 +1,4 @@
/// <reference path="../_protractor/e2e.d.ts" />
describe('Homepage Todo', function () { describe('Homepage Todo', function () {
beforeAll(function () { beforeAll(function () {
@ -6,7 +6,7 @@ describe('Homepage Todo', function () {
}); });
// Does it even launch? // Does it even launch?
var expectedAppTitle = 'Todo'; let expectedAppTitle = 'Todo';
it('should display app title: ' + expectedAppTitle, function () { it('should display app title: ' + expectedAppTitle, function () {
expect(element(by.css('h2')).getText()).toEqual(expectedAppTitle); expect(element(by.css('h2')).getText()).toEqual(expectedAppTitle);
}); });

75
public/docs/_examples/lifecycle-hooks/e2e-spec.js → public/docs/_examples/lifecycle-hooks/e2e-spec.ts
View File

@ -1,3 +1,4 @@
/// <reference path="../_protractor/e2e.d.ts" />
describe('Lifecycle hooks', function () { describe('Lifecycle hooks', function () {
beforeAll(function () { beforeAll(function () {
@ -9,10 +10,10 @@ describe('Lifecycle hooks', function () {
}); });
it('should support peek-a-boo', function () { it('should support peek-a-boo', function () {
var pabComp = element(by.css('peek-a-boo-parent peek-a-boo')); let pabComp = element(by.css('peek-a-boo-parent peek-a-boo'));
expect(pabComp.isPresent()).toBe(false, "should not be able to find the 'peek-a-boo' component"); expect(pabComp.isPresent()).toBe(false, "should not be able to find the 'peek-a-boo' component");
var pabButton = element.all(by.css('peek-a-boo-parent button')).get(0); let pabButton = element.all(by.css('peek-a-boo-parent button')).get(0);
var updateHeroButton = element.all(by.css('peek-a-boo-parent button')).get(1); let updateHeroButton = element.all(by.css('peek-a-boo-parent button')).get(1);
expect(pabButton.getText()).toContain('Create Peek'); expect(pabButton.getText()).toContain('Create Peek');
pabButton.click().then(function () { pabButton.click().then(function () {
expect(pabButton.getText()).toContain('Destroy Peek'); expect(pabButton.getText()).toContain('Destroy Peek');
@ -30,12 +31,12 @@ describe('Lifecycle hooks', function () {
}); });
it('should support OnChanges hook', function () { it('should support OnChanges hook', function () {
var onChangesViewEle = element.all(by.css('on-changes div')).get(0); let onChangesViewEle = element.all(by.css('on-changes div')).get(0);
var inputEles = element.all(by.css('on-changes-parent input')); let inputEles = element.all(by.css('on-changes-parent input'));
var heroNameInputEle = inputEles.get(1); let heroNameInputEle = inputEles.get(1);
var powerInputEle = inputEles.get(0); let powerInputEle = inputEles.get(0);
var titleEle = onChangesViewEle.element(by.css('p')); let titleEle = onChangesViewEle.element(by.css('p'));
var changeLogEles = onChangesViewEle.all(by.css('div')); let changeLogEles = onChangesViewEle.all(by.css('div'));
expect(titleEle.getText()).toContain('Windstorm can sing'); expect(titleEle.getText()).toContain('Windstorm can sing');
expect(changeLogEles.count()).toEqual(2, "should start with 2 messages"); expect(changeLogEles.count()).toEqual(2, "should start with 2 messages");
@ -54,13 +55,13 @@ describe('Lifecycle hooks', function () {
}); });
it('should support DoCheck hook', function () { it('should support DoCheck hook', function () {
var doCheckViewEle = element.all(by.css('do-check div')).get(0); let doCheckViewEle = element.all(by.css('do-check div')).get(0);
var inputEles = element.all(by.css('do-check-parent input')); let inputEles = element.all(by.css('do-check-parent input'));
var heroNameInputEle = inputEles.get(1); let heroNameInputEle = inputEles.get(1);
var powerInputEle = inputEles.get(0); let powerInputEle = inputEles.get(0);
var titleEle = doCheckViewEle.element(by.css('p')); let titleEle = doCheckViewEle.element(by.css('p'));
var changeLogEles = doCheckViewEle.all(by.css('div')); let changeLogEles = doCheckViewEle.all(by.css('div'));
var logCount; let logCount;
expect(titleEle.getText()).toContain('Windstorm can sing'); expect(titleEle.getText()).toContain('Windstorm can sing');
changeLogEles.count().then(function(count) { changeLogEles.count().then(function(count) {
@ -86,12 +87,12 @@ describe('Lifecycle hooks', function () {
}); });
it('should support AfterView hooks', function () { it('should support AfterView hooks', function () {
var parentEle = element(by.tagName('after-view-parent')); let parentEle = element(by.tagName('after-view-parent'));
var buttonEle = parentEle.element(by.tagName('button')); // Reset let buttonEle = parentEle.element(by.tagName('button')); // Reset
var commentEle = parentEle.element(by.className('comment')); let commentEle = parentEle.element(by.className('comment'));
var logEles = parentEle.all(by.css('h4 ~ div')); let logEles = parentEle.all(by.css('h4 ~ div'));
var childViewInputEle = parentEle.element(by.css('my-child input')); let childViewInputEle = parentEle.element(by.css('my-child input'));
var logCount; let logCount;
expect(childViewInputEle.getAttribute('value')).toContain('Magneta'); expect(childViewInputEle.getAttribute('value')).toContain('Magneta');
expect(commentEle.isPresent()).toBe(false, 'comment should not be in DOM'); expect(commentEle.isPresent()).toBe(false, 'comment should not be in DOM');
@ -115,12 +116,12 @@ describe('Lifecycle hooks', function () {
it('should support AfterContent hooks', function () { it('should support AfterContent hooks', function () {
var parentEle = element(by.tagName('after-content-parent')); let parentEle = element(by.tagName('after-content-parent'));
var buttonEle = parentEle.element(by.tagName('button')); // Reset let buttonEle = parentEle.element(by.tagName('button')); // Reset
var commentEle = parentEle.element(by.className('comment')); let commentEle = parentEle.element(by.className('comment'));
var logEles = parentEle.all(by.css('h4 ~ div')); let logEles = parentEle.all(by.css('h4 ~ div'));
var childViewInputEle = parentEle.element(by.css('my-child input')); let childViewInputEle = parentEle.element(by.css('my-child input'));
var logCount; let logCount;
expect(childViewInputEle.getAttribute('value')).toContain('Magneta'); expect(childViewInputEle.getAttribute('value')).toContain('Magneta');
expect(commentEle.isPresent()).toBe(false, 'comment should not be in DOM'); expect(commentEle.isPresent()).toBe(false, 'comment should not be in DOM');
@ -143,11 +144,11 @@ describe('Lifecycle hooks', function () {
}); });
it('should support spy\'s OnInit & OnDestroy hooks', function () { it('should support spy\'s OnInit & OnDestroy hooks', function () {
var inputEle = element(by.css('spy-parent input')); let inputEle = element(by.css('spy-parent input'));
var addHeroButtonEle = element(by.cssContainingText('spy-parent button','Add Hero')); let addHeroButtonEle = element(by.cssContainingText('spy-parent button','Add Hero'));
var resetHeroesButtonEle = element(by.cssContainingText('spy-parent button','Reset Heroes')); let resetHeroesButtonEle = element(by.cssContainingText('spy-parent button','Reset Heroes'));
var heroEles = element.all(by.css('spy-parent div[mySpy')); let heroEles = element.all(by.css('spy-parent div[mySpy'));
var logEles = element.all(by.css('spy-parent h4 ~ div')); let logEles = element.all(by.css('spy-parent h4 ~ div'));
expect(heroEles.count()).toBe(2, 'should have two heroes displayed'); expect(heroEles.count()).toBe(2, 'should have two heroes displayed');
expect(logEles.count()).toBe(2, 'should have two log entries'); expect(logEles.count()).toBe(2, 'should have two log entries');
sendKeys(inputEle, "-test-").then(function() { sendKeys(inputEle, "-test-").then(function() {
@ -164,10 +165,10 @@ describe('Lifecycle hooks', function () {
}); });
it('should support "spy counter"', function () { it('should support "spy counter"', function () {
var updateCounterButtonEle = element(by.cssContainingText('counter-parent button','Update')); let updateCounterButtonEle = element(by.cssContainingText('counter-parent button','Update'));
var resetCounterButtonEle = element(by.cssContainingText('counter-parent button','Reset')); let resetCounterButtonEle = element(by.cssContainingText('counter-parent button','Reset'));
var textEle = element(by.css('counter-parent my-counter > div')); let textEle = element(by.css('counter-parent my-counter > div'));
var logEles = element.all(by.css('counter-parent h4 ~ div')); let logEles = element.all(by.css('counter-parent h4 ~ div'));
expect(textEle.getText()).toContain('Counter = 0'); expect(textEle.getText()).toContain('Counter = 0');
expect(logEles.count()).toBe(2, 'should start with two log entries'); expect(logEles.count()).toBe(2, 'should start with two log entries');
updateCounterButtonEle.click().then(function() { updateCounterButtonEle.click().then(function() {

1
public/docs/_examples/package.json
View File

@ -69,6 +69,7 @@
"rimraf": "^2.5.2", "rimraf": "^2.5.2",
"style-loader": "^0.13.1", "style-loader": "^0.13.1",
"ts-loader": "^0.8.2", "ts-loader": "^0.8.2",
"ts-node": "^0.7.3",
"typescript": "^1.8.10", "typescript": "^1.8.10",
"typings": "^1.0.4", "typings": "^1.0.4",
"webpack": "^1.13.0", "webpack": "^1.13.0",

37
public/docs/_examples/pipes/e2e-spec.js → public/docs/_examples/pipes/e2e-spec.ts
View File

@ -1,3 +1,4 @@
/// <reference path="../_protractor/e2e.d.ts" />
describe('Pipes', function () { describe('Pipes', function () {
beforeAll(function () { beforeAll(function () {
@ -23,9 +24,9 @@ describe('Pipes', function () {
}); });
it('should be able to toggle birthday formats', function () { it('should be able to toggle birthday formats', function () {
var birthDayEle = element(by.css('hero-birthday2 > p')); let birthDayEle = element(by.css('hero-birthday2 > p'));
expect(birthDayEle.getText()).toEqual("The hero's birthday is 4/15/1988"); expect(birthDayEle.getText()).toEqual("The hero's birthday is 4/15/1988");
var buttonEle = element(by.cssContainingText('hero-birthday2 > button', "Toggle Format")); let buttonEle = element(by.cssContainingText('hero-birthday2 > button', "Toggle Format"));
expect(buttonEle.isDisplayed()).toBe(true); expect(buttonEle.isDisplayed()).toBe(true);
buttonEle.click().then(function() { buttonEle.click().then(function() {
expect(birthDayEle.getText()).toEqual("The hero's birthday is Friday, April 15, 1988"); expect(birthDayEle.getText()).toEqual("The hero's birthday is Friday, April 15, 1988");
@ -33,7 +34,7 @@ describe('Pipes', function () {
}); });
it('should be able to chain and compose pipes', function () { it('should be able to chain and compose pipes', function () {
var chainedPipeEles = element.all(by.cssContainingText('my-app p', "The chained hero's")); let chainedPipeEles = element.all(by.cssContainingText('my-app p', "The chained hero's"));
expect(chainedPipeEles.count()).toBe(3, "should have 3 chained pipe examples"); expect(chainedPipeEles.count()).toBe(3, "should have 3 chained pipe examples");
expect(chainedPipeEles.get(0).getText()).toContain('APR 15, 1988'); expect(chainedPipeEles.get(0).getText()).toContain('APR 15, 1988');
expect(chainedPipeEles.get(1).getText()).toContain('FRIDAY, APRIL 15, 1988'); expect(chainedPipeEles.get(1).getText()).toContain('FRIDAY, APRIL 15, 1988');
@ -41,15 +42,15 @@ describe('Pipes', function () {
}); });
it('should be able to use ExponentialStrengthPipe pipe', function () { it('should be able to use ExponentialStrengthPipe pipe', function () {
var ele = element(by.css('power-booster p')); let ele = element(by.css('power-booster p'));
expect(ele.getText()).toContain('Super power boost: 1024'); expect(ele.getText()).toContain('Super power boost: 1024');
}); });
it('should be able to use the exponential calculator', function () { it('should be able to use the exponential calculator', function () {
var eles = element.all(by.css('power-boost-calculator input')); let eles = element.all(by.css('power-boost-calculator input'));
var baseInputEle = eles.get(0); let baseInputEle = eles.get(0);
var factorInputEle = eles.get(1); let factorInputEle = eles.get(1);
var outputEle = element(by.css('power-boost-calculator p')); let outputEle = element(by.css('power-boost-calculator p'));
baseInputEle.clear().then(function() { baseInputEle.clear().then(function() {
return sendKeys(baseInputEle, "7"); return sendKeys(baseInputEle, "7");
}).then(function() { }).then(function() {
@ -63,11 +64,11 @@ describe('Pipes', function () {
it('should support flying heroes (pure) ', function () { it('should support flying heroes (pure) ', function () {
var nameEle = element(by.css('flying-heroes input[type="text"]')); let nameEle = element(by.css('flying-heroes input[type="text"]'));
var canFlyCheckEle = element(by.css('flying-heroes #can-fly')); let canFlyCheckEle = element(by.css('flying-heroes #can-fly'));
var mutateCheckEle = element(by.css('flying-heroes #mutate')); let mutateCheckEle = element(by.css('flying-heroes #mutate'));
var resetEle = element(by.css('flying-heroes button')); let resetEle = element(by.css('flying-heroes button'));
var flyingHeroesEle = element.all(by.css('flying-heroes #flyers div')); let flyingHeroesEle = element.all(by.css('flying-heroes #flyers div'));
expect(canFlyCheckEle.getAttribute('checked')).toEqual('true', 'should default to "can fly"'); expect(canFlyCheckEle.getAttribute('checked')).toEqual('true', 'should default to "can fly"');
expect(mutateCheckEle.getAttribute('checked')).toEqual('true', 'should default to mutating array'); expect(mutateCheckEle.getAttribute('checked')).toEqual('true', 'should default to mutating array');
@ -94,11 +95,11 @@ describe('Pipes', function () {
it('should support flying heroes (impure) ', function () { it('should support flying heroes (impure) ', function () {
var nameEle = element(by.css('flying-heroes-impure input[type="text"]')); let nameEle = element(by.css('flying-heroes-impure input[type="text"]'));
var canFlyCheckEle = element(by.css('flying-heroes-impure #can-fly')); let canFlyCheckEle = element(by.css('flying-heroes-impure #can-fly'));
var mutateCheckEle = element(by.css('flying-heroes-impure #mutate')); let mutateCheckEle = element(by.css('flying-heroes-impure #mutate'));
var resetEle = element(by.css('flying-heroes-impure button')); let resetEle = element(by.css('flying-heroes-impure button'));
var flyingHeroesEle = element.all(by.css('flying-heroes-impure #flyers div')); let flyingHeroesEle = element.all(by.css('flying-heroes-impure #flyers div'));
expect(canFlyCheckEle.getAttribute('checked')).toEqual('true', 'should default to "can fly"'); expect(canFlyCheckEle.getAttribute('checked')).toEqual('true', 'should default to "can fly"');
expect(mutateCheckEle.getAttribute('checked')).toEqual('true', 'should default to mutating array'); expect(mutateCheckEle.getAttribute('checked')).toEqual('true', 'should default to mutating array');

4
public/docs/_examples/quickstart/e2e-spec.js → public/docs/_examples/quickstart/e2e-spec.ts
View File

@ -1,7 +1,7 @@
/// <reference path="../_protractor/e2e.d.ts" />
describe('QuickStart E2E Tests', function () { describe('QuickStart E2E Tests', function () {
var expectedMsg = 'My First Angular 2 App'; let expectedMsg = 'My First Angular 2 App';
beforeEach(function () { beforeEach(function () {

24
public/docs/_examples/router-deprecated/e2e-spec.js
View File

@ -1,42 +1,34 @@
/// <reference path="../_protractor/e2e.d.ts" />
describe('Router', function () { describe('Router', function () {
beforeAll(function () { beforeAll(function () {
browser.get(''); browser.get('');
}); });
function getPageStruct() { function getPageStruct() {
hrefEles = element.all(by.css('my-app a')); hrefEles = element.all(by.css('my-app a'));
return { return {
hrefs: hrefEles, hrefs: hrefEles,
routerParent: element(by.css('my-app > undefined')), routerParent: element(by.css('my-app > undefined')),
routerTitle: element(by.css('my-app > undefined > h2')), routerTitle: element(by.css('my-app > undefined > h2')),
crisisHref: hrefEles.get(0), crisisHref: hrefEles.get(0),
crisisList: element.all(by.css('my-app > undefined > undefined li')), crisisList: element.all(by.css('my-app > undefined > undefined li')),
crisisDetail: element(by.css('my-app > undefined > undefined > div')), crisisDetail: element(by.css('my-app > undefined > undefined > div')),
crisisDetailTitle: element(by.css('my-app > undefined > undefined > div > h3')), crisisDetailTitle: element(by.css('my-app > undefined > undefined > div > h3')),
heroesHref: hrefEles.get(1), heroesHref: hrefEles.get(1),
heroesList: element.all(by.css('my-app > undefined li')), heroesList: element.all(by.css('my-app > undefined li')),
heroDetail: element(by.css('my-app > undefined > div')), heroDetail: element(by.css('my-app > undefined > div')),
heroDetailTitle: element(by.css('my-app > undefined > div > h3')), heroDetailTitle: element(by.css('my-app > undefined > div > h3')),
};
} }
}
it('should be able to see the start screen', function () { it('should be able to see the start screen', function () {
var page = getPageStruct(); var page = getPageStruct();
expect(page.hrefs.count()).toEqual(2, 'should be two dashboard choices'); expect(page.hrefs.count()).toEqual(2, 'should be two dashboard choices');
expect(page.crisisHref.getText()).toEqual("Crisis Center"); expect(page.crisisHref.getText()).toEqual("Crisis Center");
expect(page.heroesHref.getText()).toEqual("Heroes"); expect(page.heroesHref.getText()).toEqual("Heroes");
}); });
it('should be able to see crises center items', function () { it('should be able to see crises center items', function () {
var page = getPageStruct(); var page = getPageStruct();
expect(page.crisisList.count()).toBe(4, "should be 4 crisis center entries at start"); expect(page.crisisList.count()).toBe(4, "should be 4 crisis center entries at start");
}); });
it('should be able to see hero items', function () { it('should be able to see hero items', function () {
var page = getPageStruct(); var page = getPageStruct();
page.heroesHref.click().then(function () { page.heroesHref.click().then(function () {
@ -44,7 +36,6 @@ describe('Router', function () {
expect(page.heroesList.count()).toBe(6, "should be 6 heroes"); expect(page.heroesList.count()).toBe(6, "should be 6 heroes");
}); });
}); });
it('should be able to toggle the views', function () { it('should be able to toggle the views', function () {
var page = getPageStruct(); var page = getPageStruct();
page.crisisHref.click().then(function () { page.crisisHref.click().then(function () {
@ -54,15 +45,12 @@ describe('Router', function () {
expect(page.heroesList.count()).toBe(6, "should be 6 heroes"); expect(page.heroesList.count()).toBe(6, "should be 6 heroes");
}); });
}); });
it('should be able to edit and save details from the crisis center view', function () { it('should be able to edit and save details from the crisis center view', function () {
crisisCenterEdit(2, true); crisisCenterEdit(2, true);
}); });
it('should be able to edit and cancel details from the crisis center view', function () { it('should be able to edit and cancel details from the crisis center view', function () {
crisisCenterEdit(3, false); crisisCenterEdit(3, false);
}); });
it('should be able to edit and save details from the heroes view', function () { it('should be able to edit and save details from the heroes view', function () {
var page = getPageStruct(); var page = getPageStruct();
var heroEle, heroText; var heroEle, heroText;
@ -86,9 +74,8 @@ describe('Router', function () {
return buttonEle.click(); return buttonEle.click();
}).then(function () { }).then(function () {
expect(heroEle.getText()).toContain(heroText + '-foo'); expect(heroEle.getText()).toContain(heroText + '-foo');
})
}); });
});
function crisisCenterEdit(index, shouldSave) { function crisisCenterEdit(index, shouldSave) {
var page = getPageStruct(); var page = getPageStruct();
var crisisEle, crisisText; var crisisEle, crisisText;
@ -114,10 +101,11 @@ describe('Router', function () {
}).then(function () { }).then(function () {
if (shouldSave) { if (shouldSave) {
expect(crisisEle.getText()).toContain(crisisText + '-foo'); expect(crisisEle.getText()).toContain(crisisText + '-foo');
} else { }
else {
expect(crisisEle.getText()).not.toContain(crisisText + '-foo'); expect(crisisEle.getText()).not.toContain(crisisText + '-foo');
} }
}); });
} }
}); });
//# sourceMappingURL=e2e-spec.js.map

124
public/docs/_examples/router-deprecated/e2e-spec.ts Normal file
View File

@ -0,0 +1,124 @@
/// <reference path="../_protractor/e2e.d.ts" />
describe('Router', function () {
beforeAll(function () {
browser.get('');
});
function getPageStruct() {
hrefEles = element.all(by.css('my-app a'));
return {
hrefs: hrefEles,
routerParent: element(by.css('my-app > undefined')),
routerTitle: element(by.css('my-app > undefined > h2')),
crisisHref: hrefEles.get(0),
crisisList: element.all(by.css('my-app > undefined > undefined li')),
crisisDetail: element(by.css('my-app > undefined > undefined > div')),
crisisDetailTitle: element(by.css('my-app > undefined > undefined > div > h3')),
heroesHref: hrefEles.get(1),
heroesList: element.all(by.css('my-app > undefined li')),
heroDetail: element(by.css('my-app > undefined > div')),
heroDetailTitle: element(by.css('my-app > undefined > div > h3')),
}
}
it('should be able to see the start screen', function () {
let page = getPageStruct();
expect(page.hrefs.count()).toEqual(2, 'should be two dashboard choices');
expect(page.crisisHref.getText()).toEqual("Crisis Center");
expect(page.heroesHref.getText()).toEqual("Heroes");
});
it('should be able to see crises center items', function () {
let page = getPageStruct();
expect(page.crisisList.count()).toBe(4, "should be 4 crisis center entries at start");
});
it('should be able to see hero items', function () {
let page = getPageStruct();
page.heroesHref.click().then(function() {
expect(page.routerTitle.getText()).toContain('HEROES');
expect(page.heroesList.count()).toBe(6, "should be 6 heroes");
});
});
it('should be able to toggle the views', function () {
let page = getPageStruct();
page.crisisHref.click().then(function() {
expect(page.crisisList.count()).toBe(4, "should be 4 crisis center entries");
return page.heroesHref.click();
}).then(function() {
expect(page.heroesList.count()).toBe(6, "should be 6 heroes");
});
});
it('should be able to edit and save details from the crisis center view', function () {
crisisCenterEdit(2, true);
});
it('should be able to edit and cancel details from the crisis center view', function () {
crisisCenterEdit(3, false);
});
it('should be able to edit and save details from the heroes view', function () {
let page = getPageStruct();
let heroEle, heroText;
page.heroesHref.click().then(function() {
heroEle = page.heroesList.get(4);
return heroEle.getText();
}).then(function(text) {
expect(text.length).toBeGreaterThan(0, 'should have some text');
// remove leading id from text
heroText = text.substr(text.indexOf(' ')).trim();
return heroEle.click();
}).then(function() {
expect(page.heroesList.count()).toBe(0, "should no longer see crisis center entries");
expect(page.heroDetail.isPresent()).toBe(true, 'should be able to see crisis detail');
expect(page.heroDetailTitle.getText()).toContain(heroText);
let inputEle = page.heroDetail.element(by.css('input'));
return sendKeys(inputEle, '-foo');
}).then(function() {
expect(page.heroDetailTitle.getText()).toContain(heroText + '-foo');
let buttonEle = page.heroDetail.element(by.css('button'));
return buttonEle.click();
}).then(function() {
expect(heroEle.getText()).toContain(heroText + '-foo');
})
});
function crisisCenterEdit(index, shouldSave) {
let page = getPageStruct();
let crisisEle, crisisText;
page.crisisHref.click()
.then(function () {
crisisEle = page.crisisList.get(index);
return crisisEle.getText();
}).then(function (text) {
expect(text.length).toBeGreaterThan(0, 'should have some text');
// remove leading id from text
crisisText = text.substr(text.indexOf(' ')).trim();
return crisisEle.click();
}).then(function () {
expect(page.crisisList.count()).toBe(0, "should no longer see crisis center entries");
expect(page.crisisDetail.isPresent()).toBe(true, 'should be able to see crisis detail');
expect(page.crisisDetailTitle.getText()).toContain(crisisText);
let inputEle = page.crisisDetail.element(by.css('input'));
return sendKeys(inputEle, '-foo');
}).then(function () {
expect(page.crisisDetailTitle.getText()).toContain(crisisText + '-foo');
let buttonEle = page.crisisDetail.element(by.cssContainingText('button', shouldSave ? 'Save' : 'Cancel'));
return buttonEle.click();
}).then(function () {
if (shouldSave) {
expect(crisisEle.getText()).toContain(crisisText + '-foo');
} else {
expect(crisisEle.getText()).not.toContain(crisisText + '-foo');
}
});
}
});

25
public/docs/_examples/router/e2e-spec.js → public/docs/_examples/router/e2e-spec.ts
View File

@ -1,3 +1,4 @@
/// <reference path="../_protractor/e2e.d.ts" />
describe('Router', function () { describe('Router', function () {
beforeAll(function () { beforeAll(function () {
@ -26,19 +27,19 @@ describe('Router', function () {
} }
it('should be able to see the start screen', function () { it('should be able to see the start screen', function () {
var page = getPageStruct(); let page = getPageStruct();
expect(page.hrefs.count()).toEqual(2, 'should be two dashboard choices'); expect(page.hrefs.count()).toEqual(2, 'should be two dashboard choices');
expect(page.crisisHref.getText()).toEqual("Crisis Center"); expect(page.crisisHref.getText()).toEqual("Crisis Center");
expect(page.heroesHref.getText()).toEqual("Heroes"); expect(page.heroesHref.getText()).toEqual("Heroes");
}); });
it('should be able to see crises center items', function () { it('should be able to see crises center items', function () {
var page = getPageStruct(); let page = getPageStruct();
expect(page.crisisList.count()).toBe(4, "should be 4 crisis center entries at start"); expect(page.crisisList.count()).toBe(4, "should be 4 crisis center entries at start");
}); });
it('should be able to see hero items', function () { it('should be able to see hero items', function () {
var page = getPageStruct(); let page = getPageStruct();
page.heroesHref.click().then(function() { page.heroesHref.click().then(function() {
expect(page.routerTitle.getText()).toContain('HEROES'); expect(page.routerTitle.getText()).toContain('HEROES');
expect(page.heroesList.count()).toBe(6, "should be 6 heroes"); expect(page.heroesList.count()).toBe(6, "should be 6 heroes");
@ -46,7 +47,7 @@ describe('Router', function () {
}); });
it('should be able to toggle the views', function () { it('should be able to toggle the views', function () {
var page = getPageStruct(); let page = getPageStruct();
page.crisisHref.click().then(function() { page.crisisHref.click().then(function() {
expect(page.crisisList.count()).toBe(4, "should be 4 crisis center entries"); expect(page.crisisList.count()).toBe(4, "should be 4 crisis center entries");
return page.heroesHref.click(); return page.heroesHref.click();
@ -64,8 +65,8 @@ describe('Router', function () {
}); });
it('should be able to edit and save details from the heroes view', function () { it('should be able to edit and save details from the heroes view', function () {
var page = getPageStruct(); let page = getPageStruct();
var heroEle, heroText; let heroEle, heroText;
page.heroesHref.click().then(function() { page.heroesHref.click().then(function() {
heroEle = page.heroesList.get(4); heroEle = page.heroesList.get(4);
return heroEle.getText(); return heroEle.getText();
@ -78,11 +79,11 @@ describe('Router', function () {
expect(page.heroesList.count()).toBe(0, "should no longer see crisis center entries"); expect(page.heroesList.count()).toBe(0, "should no longer see crisis center entries");
expect(page.heroDetail.isPresent()).toBe(true, 'should be able to see crisis detail'); expect(page.heroDetail.isPresent()).toBe(true, 'should be able to see crisis detail');
expect(page.heroDetailTitle.getText()).toContain(heroText); expect(page.heroDetailTitle.getText()).toContain(heroText);
var inputEle = page.heroDetail.element(by.css('input')); let inputEle = page.heroDetail.element(by.css('input'));
return sendKeys(inputEle, '-foo'); return sendKeys(inputEle, '-foo');
}).then(function() { }).then(function() {
expect(page.heroDetailTitle.getText()).toContain(heroText + '-foo'); expect(page.heroDetailTitle.getText()).toContain(heroText + '-foo');
var buttonEle = page.heroDetail.element(by.css('button')); let buttonEle = page.heroDetail.element(by.css('button'));
return buttonEle.click(); return buttonEle.click();
}).then(function() { }).then(function() {
expect(heroEle.getText()).toContain(heroText + '-foo'); expect(heroEle.getText()).toContain(heroText + '-foo');
@ -90,8 +91,8 @@ describe('Router', function () {
}); });
function crisisCenterEdit(index, shouldSave) { function crisisCenterEdit(index, shouldSave) {
var page = getPageStruct(); let page = getPageStruct();
var crisisEle, crisisText; let crisisEle, crisisText;
page.crisisHref.click() page.crisisHref.click()
.then(function () { .then(function () {
crisisEle = page.crisisList.get(index); crisisEle = page.crisisList.get(index);
@ -105,11 +106,11 @@ describe('Router', function () {
expect(page.crisisList.count()).toBe(0, "should no longer see crisis center entries"); expect(page.crisisList.count()).toBe(0, "should no longer see crisis center entries");
expect(page.crisisDetail.isPresent()).toBe(true, 'should be able to see crisis detail'); expect(page.crisisDetail.isPresent()).toBe(true, 'should be able to see crisis detail');
expect(page.crisisDetailTitle.getText()).toContain(crisisText); expect(page.crisisDetailTitle.getText()).toContain(crisisText);
var inputEle = page.crisisDetail.element(by.css('input')); let inputEle = page.crisisDetail.element(by.css('input'));
return sendKeys(inputEle, '-foo'); return sendKeys(inputEle, '-foo');
}).then(function () { }).then(function () {
expect(page.crisisDetailTitle.getText()).toContain(crisisText + '-foo'); expect(page.crisisDetailTitle.getText()).toContain(crisisText + '-foo');
var buttonEle = page.crisisDetail.element(by.cssContainingText('button', shouldSave ? 'Save' : 'Cancel')); let buttonEle = page.crisisDetail.element(by.cssContainingText('button', shouldSave ? 'Save' : 'Cancel'));
return buttonEle.click(); return buttonEle.click();
}).then(function () { }).then(function () {
if (shouldSave) { if (shouldSave) {

33
public/docs/_examples/server-communication/e2e-spec.js → public/docs/_examples/server-communication/e2e-spec.ts
View File

@ -1,3 +1,4 @@
/// <reference path="../_protractor/e2e.d.ts" />
describe('Server Communication', function () { describe('Server Communication', function () {
beforeAll(function () { beforeAll(function () {
@ -6,14 +7,14 @@ describe('Server Communication', function () {
describe('Tour of Heroes (Observable)', function () { describe('Tour of Heroes (Observable)', function () {
var initialHeroCount = 4; let initialHeroCount = 4;
var newHeroName = 'Mr. IQ'; let newHeroName = 'Mr. IQ';
var heroCountAfterAdd = 5; let heroCountAfterAdd = 5;
var heroListComp = element(by.tagName('hero-list')); let heroListComp = element(by.tagName('hero-list'));
var addButton = heroListComp.element(by.tagName('button')); let addButton = heroListComp.element(by.tagName('button'));
var heroTags = heroListComp.all(by.tagName('li')); let heroTags = heroListComp.all(by.tagName('li'));
var heroNameInput = heroListComp.element(by.tagName('input')); let heroNameInput = heroListComp.element(by.tagName('input'));
it('should exist', function() { it('should exist', function() {
expect(heroListComp).toBeDefined('<hero-list> must exist'); expect(heroListComp).toBeDefined('<hero-list> must exist');
@ -36,7 +37,7 @@ describe('Server Communication', function () {
sendKeys(heroNameInput, newHeroName); sendKeys(heroNameInput, newHeroName);
addButton.click().then(function() { addButton.click().then(function() {
expect(heroTags.count()).toBe(heroCountAfterAdd, 'A new hero should be added'); expect(heroTags.count()).toBe(heroCountAfterAdd, 'A new hero should be added');
var newHeroInList = heroTags.get(heroCountAfterAdd - 1).getText(); let newHeroInList = heroTags.get(heroCountAfterAdd - 1).getText();
expect(newHeroInList).toBe(newHeroName, 'The hero should be added to the end of the list'); expect(newHeroInList).toBe(newHeroName, 'The hero should be added to the end of the list');
}); });
}) })
@ -45,9 +46,9 @@ describe('Server Communication', function () {
describe('Wikipedia Demo', function () { describe('Wikipedia Demo', function () {
it('should initialize the demo with empty result list', function () { it('should initialize the demo with empty result list', function () {
var myWikiComp = element(by.tagName('my-wiki')); let myWikiComp = element(by.tagName('my-wiki'));
expect(myWikiComp).toBeDefined('<my-wiki> must exist'); expect(myWikiComp).toBeDefined('<my-wiki> must exist');
var resultList = myWikiComp.all(by.tagName('li')); let resultList = myWikiComp.all(by.tagName('li'));
expect(resultList.count()).toBe(0, 'result list must be empty'); expect(resultList.count()).toBe(0, 'result list must be empty');
}); });
@ -77,9 +78,9 @@ describe('Server Communication', function () {
describe('Smarter Wikipedia Demo', function () { describe('Smarter Wikipedia Demo', function () {
it('should initialize the demo with empty result list', function () { it('should initialize the demo with empty result list', function () {
var myWikiSmartComp = element(by.tagName('my-wiki-smart')); let myWikiSmartComp = element(by.tagName('my-wiki-smart'));
expect(myWikiSmartComp).toBeDefined('<my-wiki-smart> must exist'); expect(myWikiSmartComp).toBeDefined('<my-wiki-smart> must exist');
var resultList = myWikiSmartComp.all(by.tagName('li')); let resultList = myWikiSmartComp.all(by.tagName('li'));
expect(resultList.count()).toBe(0, 'result list must be empty'); expect(resultList.count()).toBe(0, 'result list must be empty');
}); });
@ -111,14 +112,14 @@ describe('Server Communication', function () {
}); });
function testForResult(componentTagName, keyPressed, hasListBeforeSearch, done) { function testForResult(componentTagName, keyPressed, hasListBeforeSearch, done) {
var searchWait = 1000; // Wait for wikipedia but not so long that tests timeout let searchWait = 1000; // Wait for wikipedia but not so long that tests timeout
var wikiComponent = element(by.tagName(componentTagName)); let wikiComponent = element(by.tagName(componentTagName));
expect(wikiComponent).toBeDefined('<' + componentTagName + '> must exist'); expect(wikiComponent).toBeDefined('<' + componentTagName + '> must exist');
var searchBox = wikiComponent.element(by.tagName('input')); let searchBox = wikiComponent.element(by.tagName('input'));
expect(searchBox).toBeDefined('<input> for search must exist'); expect(searchBox).toBeDefined('<input> for search must exist');
searchBox.sendKeys(keyPressed).then(function () { searchBox.sendKeys(keyPressed).then(function () {
var resultList = wikiComponent.all(by.tagName('li')); let resultList = wikiComponent.all(by.tagName('li'));
if (hasListBeforeSearch) { if (hasListBeforeSearch) {
expect(resultList.count()).toBeGreaterThan(0, 'result list should not be empty before search'); expect(resultList.count()).toBeGreaterThan(0, 'result list should not be empty before search');

27
public/docs/_examples/structural-directives/e2e-spec.js → public/docs/_examples/structural-directives/e2e-spec.ts
View File

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

59
public/docs/_examples/style-guide/e2e-spec.js → public/docs/_examples/style-guide/e2e-spec.ts
View File

@ -1,8 +1,9 @@
/// <reference path="../_protractor/e2e.d.ts" />
describe('Style Guide', function () { describe('Style Guide', function () {
it('01-01', function () { it('01-01', function () {
browser.get('#/01-01'); browser.get('#/01-01');
var pre = element(by.tagName('toh-heroes > pre')); let pre = element(by.tagName('toh-heroes > pre'));
expect(pre.getText()).toContain('Bombasto'); expect(pre.getText()).toContain('Bombasto');
expect(pre.getText()).toContain('Tornado'); expect(pre.getText()).toContain('Tornado');
expect(pre.getText()).toContain('Magneta'); expect(pre.getText()).toContain('Magneta');
@ -11,8 +12,8 @@ describe('Style Guide', function () {
it('02-07', function () { it('02-07', function () {
browser.get('#/02-07'); browser.get('#/02-07');
var hero = element(by.tagName('toh-hero > div')); let hero = element(by.tagName('toh-hero > div'));
var users = element(by.tagName('admin-users > div')); let users = element(by.tagName('admin-users > div'));
expect(hero.getText()).toBe('hero component'); expect(hero.getText()).toBe('hero component');
expect(users.getText()).toBe('users component'); expect(users.getText()).toBe('users component');
@ -21,21 +22,21 @@ describe('Style Guide', function () {
it('02-08', function () { it('02-08', function () {
browser.get('#/02-08'); browser.get('#/02-08');
var input = element(by.tagName('input[tohvalidate]')); let input = element(by.tagName('input[tohvalidate]'));
expect(input.isPresent()).toBe(true); expect(input.isPresent()).toBe(true);
}); });
it('03-01', function () { it('03-01', function () {
browser.get('#/03-01'); browser.get('#/03-01');
var div = element(by.tagName('sg-app > div')); let div = element(by.tagName('sg-app > div'));
expect(div.getText()).toBe('The expected error is 42'); expect(div.getText()).toBe('The expected error is 42');
}); });
it('03-02', function () { it('03-02', function () {
browser.get('#/03-02'); browser.get('#/03-02');
var divs = element.all(by.tagName('sg-app > div')); let divs = element.all(by.tagName('sg-app > div'));
expect(divs.get(0).getText()).toBe('Heroes url: api/heroes'); expect(divs.get(0).getText()).toBe('Heroes url: api/heroes');
expect(divs.get(1).getText()).toBe('Villains url: api/villains'); expect(divs.get(1).getText()).toBe('Villains url: api/villains');
}); });
@ -43,14 +44,14 @@ describe('Style Guide', function () {
it('03-03', function () { it('03-03', function () {
browser.get('#/03-03'); browser.get('#/03-03');
var div = element(by.tagName('sg-app > div')); let div = element(by.tagName('sg-app > div'));
expect(div.getText()).toBe('Our hero is RubberMan and He is so elastic'); expect(div.getText()).toBe('Our hero is RubberMan and He is so elastic');
}); });
it('03-04', function () { it('03-04', function () {
browser.get('#/03-04'); browser.get('#/03-04');
var buttons = element.all(by.tagName('sg-app > button')); let buttons = element.all(by.tagName('sg-app > button'));
expect(buttons.get(0).getText()).toBe('Show toast'); expect(buttons.get(0).getText()).toBe('Show toast');
expect(buttons.get(1).getText()).toBe('Hide toast'); expect(buttons.get(1).getText()).toBe('Hide toast');
}); });
@ -58,10 +59,10 @@ describe('Style Guide', function () {
it('03-05', function () { it('03-05', function () {
browser.get('#/03-05'); browser.get('#/03-05');
var div = element(by.tagName('sg-app > div')); let div = element(by.tagName('sg-app > div'));
expect(div.getText()).toBe('Actual favorite: Windstorm'); expect(div.getText()).toBe('Actual favorite: Windstorm');
var lis = element.all(by.tagName('sg-app > ul > li')); let lis = element.all(by.tagName('sg-app > ul > li'));
expect(lis.get(0).getText()).toBe('Windstorm'); expect(lis.get(0).getText()).toBe('Windstorm');
expect(lis.get(1).getText()).toBe('Bombasto'); expect(lis.get(1).getText()).toBe('Bombasto');
expect(lis.get(2).getText()).toBe('Magneta'); expect(lis.get(2).getText()).toBe('Magneta');
@ -71,10 +72,10 @@ describe('Style Guide', function () {
it('03-06', function () { it('03-06', function () {
browser.get('#/03-06'); browser.get('#/03-06');
var div = element(by.tagName('sg-app > div')); let div = element(by.tagName('sg-app > div'));
expect(div.getText()).toBe('Actual favorite: Windstorm'); expect(div.getText()).toBe('Actual favorite: Windstorm');
var lis = element.all(by.tagName('sg-app > ul > li')); let lis = element.all(by.tagName('sg-app > ul > li'));
expect(lis.get(0).getText()).toBe('Windstorm'); expect(lis.get(0).getText()).toBe('Windstorm');
expect(lis.get(1).getText()).toBe('Bombasto'); expect(lis.get(1).getText()).toBe('Bombasto');
expect(lis.get(2).getText()).toBe('Magneta'); expect(lis.get(2).getText()).toBe('Magneta');
@ -84,77 +85,77 @@ describe('Style Guide', function () {
it('04-10', function () { it('04-10', function () {
browser.get('#/04-10'); browser.get('#/04-10');
var div = element(by.tagName('sg-app > toh-heroes > div')); let div = element(by.tagName('sg-app > toh-heroes > div'));
expect(div.getText()).toBe('This is heroes component'); expect(div.getText()).toBe('This is heroes component');
}); });
it('04-14', function () { it('04-14', function () {
browser.get('#/04-14'); browser.get('#/04-14');
var h2 = element(by.tagName('sg-app > toh-heroes > div > h2')); let h2 = element(by.tagName('sg-app > toh-heroes > div > h2'));
expect(h2.getText()).toBe('My Heroes'); expect(h2.getText()).toBe('My Heroes');
}); });
it('05-02', function () { it('05-02', function () {
browser.get('#/05-02'); browser.get('#/05-02');
var button = element(by.tagName('sg-app > toh-hero-button > button')); let button = element(by.tagName('sg-app > toh-hero-button > button'));
expect(button.getText()).toBe('Hero button'); expect(button.getText()).toBe('Hero button');
}); });
it('05-03', function () { it('05-03', function () {
browser.get('#/05-03'); browser.get('#/05-03');
var button = element(by.tagName('sg-app > toh-hero-button > button')); let button = element(by.tagName('sg-app > toh-hero-button > button'));
expect(button.getText()).toBe('Hero button'); expect(button.getText()).toBe('Hero button');
}); });
it('05-04', function () { it('05-04', function () {
browser.get('#/05-04'); browser.get('#/05-04');
var h2 = element(by.tagName('sg-app > toh-heroes > div > h2')); let h2 = element(by.tagName('sg-app > toh-heroes > div > h2'));
expect(h2.getText()).toBe('My Heroes'); expect(h2.getText()).toBe('My Heroes');
}); });
it('05-12', function () { it('05-12', function () {
browser.get('#/05-12'); browser.get('#/05-12');
var button = element(by.tagName('sg-app > toh-hero-button > button')); let button = element(by.tagName('sg-app > toh-hero-button > button'));
expect(button.getText()).toBe('OK'); expect(button.getText()).toBe('OK');
}); });
it('05-13', function () { it('05-13', function () {
browser.get('#/05-13'); browser.get('#/05-13');
var button = element(by.tagName('sg-app > toh-hero-button > button')); let button = element(by.tagName('sg-app > toh-hero-button > button'));
expect(button.getText()).toBe('OK'); expect(button.getText()).toBe('OK');
}); });
it('05-14', function () { it('05-14', function () {
browser.get('#/05-14'); browser.get('#/05-14');
var toast = element(by.tagName('sg-app > toh-toast')); let toast = element(by.tagName('sg-app > toh-toast'));
expect(toast.getText()).toBe('...'); expect(toast.getText()).toBe('...');
}); });
it('05-15', function () { it('05-15', function () {
browser.get('#/05-15'); browser.get('#/05-15');
var heroList = element(by.tagName('sg-app > toh-hero-list')); let heroList = element(by.tagName('sg-app > toh-hero-list'));
expect(heroList.getText()).toBe('...'); expect(heroList.getText()).toBe('...');
}); });
it('05-16', function () { it('05-16', function () {
browser.get('#/05-16'); browser.get('#/05-16');
var hero = element(by.tagName('sg-app > toh-hero')); let hero = element(by.tagName('sg-app > toh-hero'));
expect(hero.getText()).toBe('...'); expect(hero.getText()).toBe('...');
}); });
it('05-17', function () { it('05-17', function () {
browser.get('#/05-17'); browser.get('#/05-17');
var section = element(by.tagName('sg-app > toh-hero-list > section')); let section = element(by.tagName('sg-app > toh-hero-list > section'));
expect(section.getText()).toContain('Our list of heroes'); expect(section.getText()).toContain('Our list of heroes');
expect(section.getText()).toContain('Total powers'); expect(section.getText()).toContain('Total powers');
expect(section.getText()).toContain('Average power'); expect(section.getText()).toContain('Average power');
@ -163,21 +164,21 @@ describe('Style Guide', function () {
it('06-01', function () { it('06-01', function () {
browser.get('#/06-01'); browser.get('#/06-01');
var div = element(by.tagName('sg-app > div[tohhighlight]')); let div = element(by.tagName('sg-app > div[tohhighlight]'));
expect(div.getText()).toBe('Bombasta'); expect(div.getText()).toBe('Bombasta');
}); });
it('06-03', function () { it('06-03', function () {
browser.get('#/06-03'); browser.get('#/06-03');
var input = element(by.tagName('input[tohvalidator]')); let input = element(by.tagName('input[tohvalidator]'));
expect(input.isPresent()).toBe(true); expect(input.isPresent()).toBe(true);
}); });
it('07-01', function () { it('07-01', function () {
browser.get('#/07-01'); browser.get('#/07-01');
var lis = element.all(by.tagName('sg-app > ul > li')); let lis = element.all(by.tagName('sg-app > ul > li'));
expect(lis.get(0).getText()).toBe('Windstorm'); expect(lis.get(0).getText()).toBe('Windstorm');
expect(lis.get(1).getText()).toBe('Bombasto'); expect(lis.get(1).getText()).toBe('Bombasto');
expect(lis.get(2).getText()).toBe('Magneta'); expect(lis.get(2).getText()).toBe('Magneta');
@ -187,21 +188,21 @@ describe('Style Guide', function () {
it('07-03', function () { it('07-03', function () {
browser.get('#/07-03'); browser.get('#/07-03');
var pre = element(by.tagName('toh-heroes > pre')); let pre = element(by.tagName('toh-heroes > pre'));
expect(pre.getText()).toContain('[]'); expect(pre.getText()).toContain('[]');
}); });
it('07-04', function () { it('07-04', function () {
browser.get('#/07-04'); browser.get('#/07-04');
var pre = element(by.tagName('toh-app > pre')); let pre = element(by.tagName('toh-app > pre'));
expect(pre.getText()).toContain('[]'); expect(pre.getText()).toContain('[]');
}); });
it('09-01', function () { it('09-01', function () {
browser.get('#/09-01'); browser.get('#/09-01');
var button = element(by.tagName('sg-app > toh-hero-button > button')); let button = element(by.tagName('sg-app > toh-hero-button > button'));
expect(button.getText()).toBe('OK'); expect(button.getText()).toBe('OK');
}); });
}); });

27
public/docs/_examples/styleguide/e2e-spec.js
View File

@ -1,27 +0,0 @@
/*global browser, element, by */
describe('Getting Started E2E Tests', function() {
// #docregion shared
var expectedMsg = 'My First Angular 2 App';
// tests shared across languages
function sharedTests(basePath) {
beforeEach(function () {
browser.get(basePath + 'index.html');
});
it('should display: '+ expectedMsg, function() {
expect(element(by.id('output')).getText()).toEqual(expectedMsg);
});
}
// #enddocregion
describe('Getting Started in JavaScript', function() {
sharedTests('gettingstarted/js/');
});
describe('Getting Started in TypeScript', function() {
sharedTests('gettingstarted/ts/');
});
});

28
public/docs/_examples/styleguide/e2e-spec.ts Normal file
View File

@ -0,0 +1,28 @@
/// <reference path="../_protractor/e2e.d.ts" />
/*global browser, element, by */
describe('Getting Started E2E Tests', function() {
// #docregion shared
let expectedMsg = 'My First Angular 2 App';
// tests shared across languages
function sharedTests(basePath) {
beforeEach(function () {
browser.get(basePath + 'index.html');
});
it('should display: '+ expectedMsg, function() {
expect(element(by.id('output')).getText()).toEqual(expectedMsg);
});
}
// #enddocregion
describe('Getting Started in JavaScript', function() {
sharedTests('gettingstarted/js/');
});
describe('Getting Started in TypeScript', function() {
sharedTests('gettingstarted/ts/');
});
});

9
public/docs/_examples/template-syntax/e2e-spec.js → public/docs/_examples/template-syntax/e2e-spec.ts
View File

@ -1,3 +1,4 @@
/// <reference path="../_protractor/e2e.d.ts" />
// Not yet complete // Not yet complete
describe('Template Syntax', function () { describe('Template Syntax', function () {
@ -6,24 +7,24 @@ describe('Template Syntax', function () {
}); });
it('should be able to use interpolation with a hero', function () { it('should be able to use interpolation with a hero', function () {
var heroInterEle = element.all(by.css('h2+p')).get(0); let heroInterEle = element.all(by.css('h2+p')).get(0);
expect(heroInterEle.getText()).toEqual('My current hero is Hercules'); expect(heroInterEle.getText()).toEqual('My current hero is Hercules');
}); });
it('should be able to use interpolation with a calculation', function () { it('should be able to use interpolation with a calculation', function () {
var theSumEles = element.all(by.cssContainingText('h3~p','The sum of')); let theSumEles = element.all(by.cssContainingText('h3~p','The sum of'));
expect(theSumEles.count()).toBe(2); expect(theSumEles.count()).toBe(2);
expect(theSumEles.get(0).getText()).toEqual('The sum of 1 + 1 is 2'); expect(theSumEles.get(0).getText()).toEqual('The sum of 1 + 1 is 2');
expect(theSumEles.get(1).getText()).toEqual('The sum of 1 + 1 is not 4'); expect(theSumEles.get(1).getText()).toEqual('The sum of 1 + 1 is not 4');
}); });
it('should be able to use class binding syntax', function () { it('should be able to use class binding syntax', function () {
var specialEle = element(by.cssContainingText('div','Special')); let specialEle = element(by.cssContainingText('div','Special'));
expect(specialEle.getAttribute('class')).toMatch('special'); expect(specialEle.getAttribute('class')).toMatch('special');
}); });
it('should be able to use style binding syntax', function () { it('should be able to use style binding syntax', function () {
var specialButtonEle = element(by.cssContainingText('div.special~button', 'button')); let specialButtonEle = element(by.cssContainingText('div.special~button', 'button'));
expect(specialButtonEle.getAttribute('style')).toMatch('color: red'); expect(specialButtonEle.getAttribute('style')).toMatch('color: red');
}); });
}); });

27
public/docs/_examples/toh-5/e2e-spec.js → public/docs/_examples/toh-5/e2e-spec.ts
View File

@ -1,3 +1,4 @@
/// <reference path="../_protractor/e2e.d.ts" />
describe('Tutorial', function () { describe('Tutorial', function () {
beforeAll(function () { beforeAll(function () {
@ -23,19 +24,19 @@ describe('Tutorial', function () {
} }
it('should be able to see the start screen', function () { it('should be able to see the start screen', function () {
var page = getPageStruct(); let page = getPageStruct();
expect(page.hrefs.count()).toEqual(2, 'should be two dashboard choices'); expect(page.hrefs.count()).toEqual(2, 'should be two dashboard choices');
expect(page.myDashboardHref.getText()).toEqual("Dashboard"); expect(page.myDashboardHref.getText()).toEqual("Dashboard");
expect(page.myHeroesHref.getText()).toEqual("Heroes"); expect(page.myHeroesHref.getText()).toEqual("Heroes");
}); });
it('should be able to see dashboard choices', function () { it('should be able to see dashboard choices', function () {
var page = getPageStruct(); let page = getPageStruct();
expect(page.topHeroes.count()).toBe(4, "should be 4 dashboard hero choices"); expect(page.topHeroes.count()).toBe(4, "should be 4 dashboard hero choices");
}); });
it('should be able to toggle the views', function () { it('should be able to toggle the views', function () {
var page = getPageStruct(); let page = getPageStruct();
expect(page.myDashboardParent.element(by.css('h3')).getText()).toEqual('Top Heroes'); expect(page.myDashboardParent.element(by.css('h3')).getText()).toEqual('Top Heroes');
page.myHeroesHref.click().then(function() { page.myHeroesHref.click().then(function() {
@ -49,11 +50,11 @@ describe('Tutorial', function () {
}); });
it('should be able to edit details from "Dashboard" view', function () { it('should be able to edit details from "Dashboard" view', function () {
var page = getPageStruct(); let page = getPageStruct();
expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be available'); expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be available');
var heroEle = page.topHeroes.get(3); let heroEle = page.topHeroes.get(3);
var heroDescrEle = heroEle.element(by.css('h4')); let heroDescrEle = heroEle.element(by.css('h4'));
var heroDescr; let heroDescr;
return heroDescrEle.getText().then(function(text) { return heroDescrEle.getText().then(function(text) {
heroDescr = text; heroDescr = text;
return heroEle.click(); return heroEle.click();
@ -66,10 +67,10 @@ describe('Tutorial', function () {
}); });
it('should be able to edit details from "Heroes" view', function () { it('should be able to edit details from "Heroes" view', function () {
var page = getPageStruct(); let page = getPageStruct();
expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be present'); expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be present');
var viewDetailsButtonEle = page.myHeroesParent.element(by.cssContainingText('button', 'View Details')); let viewDetailsButtonEle = page.myHeroesParent.element(by.cssContainingText('button', 'View Details'));
var heroEle, heroDescr; let heroEle, heroDescr;
page.myHeroesHref.click().then(function() { page.myHeroesHref.click().then(function() {
expect(page.myDashboardParent.isPresent()).toBe(false, 'dashboard element should NOT be present'); expect(page.myDashboardParent.isPresent()).toBe(false, 'dashboard element should NOT be present');
expect(page.myHeroesParent.isPresent()).toBe(true, 'myHeroes element should be present'); expect(page.myHeroesParent.isPresent()).toBe(true, 'myHeroes element should be present');
@ -96,11 +97,11 @@ describe('Tutorial', function () {
expect(page.myDashboardParent.isPresent()).toBe(false, 'dashboard element should NOT be present'); expect(page.myDashboardParent.isPresent()).toBe(false, 'dashboard element should NOT be present');
expect(page.myHeroesParent.isPresent()).toBe(false, 'myHeroes element should NOT be present'); expect(page.myHeroesParent.isPresent()).toBe(false, 'myHeroes element should NOT be present');
expect(page.heroDetail.isDisplayed()).toBe(true, 'should be able to see hero-details'); expect(page.heroDetail.isDisplayed()).toBe(true, 'should be able to see hero-details');
var inputEle = page.heroDetail.element(by.css('input')); let inputEle = page.heroDetail.element(by.css('input'));
expect(inputEle.isDisplayed()).toBe(true, 'should be able to see the input box'); expect(inputEle.isDisplayed()).toBe(true, 'should be able to see the input box');
var backButtonEle = page.heroDetail.element(by.css('button')); let backButtonEle = page.heroDetail.element(by.css('button'));
expect(backButtonEle.isDisplayed()).toBe(true, 'should be able to see the back button'); expect(backButtonEle.isDisplayed()).toBe(true, 'should be able to see the back button');
var detailTextEle = page.heroDetail.element(by.css('div h2')); let detailTextEle = page.heroDetail.element(by.css('div h2'));
expect(detailTextEle.getText()).toContain(origValue); expect(detailTextEle.getText()).toContain(origValue);
return sendKeys(inputEle, textToAdd).then(function () { return sendKeys(inputEle, textToAdd).then(function () {
expect(detailTextEle.getText()).toContain(origValue + textToAdd); expect(detailTextEle.getText()).toContain(origValue + textToAdd);

79
public/docs/_examples/toh-6/e2e-spec.js → public/docs/_examples/toh-6/e2e-spec.ts
View File

@ -1,3 +1,4 @@
/// <reference path='../_protractor/e2e.d.ts' />
describe('TOH Http Chapter', function () { describe('TOH Http Chapter', function () {
beforeEach(function () { beforeEach(function () {
@ -5,7 +6,7 @@ describe('TOH Http Chapter', function () {
}); });
function getPageStruct() { function getPageStruct() {
hrefEles = element.all(by.css('my-app a')); let hrefEles = element.all(by.css('my-app a'));
return { return {
hrefs: hrefEles, hrefs: hrefEles,
@ -22,12 +23,12 @@ describe('TOH Http Chapter', function () {
addButton: element.all(by.buttonText('Add New Hero')).get(0), addButton: element.all(by.buttonText('Add New Hero')).get(0),
heroDetail: element(by.css('my-app my-hero-detail')) heroDetail: element(by.css('my-app my-hero-detail'))
} };
} }
it('should be able to add a hero from the "Heroes" view', function(){ it('should be able to add a hero from the "Heroes" view', function(){
var page = getPageStruct(); let page = getPageStruct();
var heroCount; let heroCount: webdriver.promise.Promise<number>;
page.myHeroesHref.click().then(function() { page.myHeroesHref.click().then(function() {
browser.waitForAngular(); browser.waitForAngular();
@ -43,14 +44,14 @@ describe('TOH Http Chapter', function () {
heroCount = page.allHeroes.count(); heroCount = page.allHeroes.count();
expect(heroCount).toBe(11, 'should show 11'); expect(heroCount).toBe(11, 'should show 11');
var newHero = element(by.xpath('//span[@class="hero-element" and contains(text(),"The New Hero")]')); let newHero = element(by.xpath('//span[@class="hero-element" and contains(text(),"The New Hero")]'));
expect(newHero).toBeDefined(); expect(newHero).toBeDefined();
}); });
}); });
it('should be able to delete hero from "Heroes" view', function(){ it('should be able to delete hero from "Heroes" view', function(){
var page = getPageStruct(); let page = getPageStruct();
var heroCount; let heroCount: webdriver.promise.Promise<number>;
page.myHeroesHref.click().then(function() { page.myHeroesHref.click().then(function() {
browser.waitForAngular(); browser.waitForAngular();
@ -66,11 +67,11 @@ describe('TOH Http Chapter', function () {
}); });
it('should be able to save details from "Dashboard" view', function () { it('should be able to save details from "Dashboard" view', function () {
var page = getPageStruct(); let page = getPageStruct();
expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be available'); expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be available');
var heroEle = page.topHeroes.get(2); let heroEle = page.topHeroes.get(2);
var heroDescrEle = heroEle.element(by.css('h4')); let heroDescrEle = heroEle.element(by.css('h4'));
var heroDescr; let heroDescr: string;
return heroDescrEle.getText().then(function(text) { return heroDescrEle.getText().then(function(text) {
heroDescr = text; heroDescr = text;
@ -88,10 +89,10 @@ describe('TOH Http Chapter', function () {
}); });
it('should be able to save details from "Heroes" view', function () { it('should be able to save details from "Heroes" view', function () {
var page = getPageStruct(); let page = getPageStruct();
var viewDetailsButtonEle = page.myHeroesParent.element(by.cssContainingText('button', 'View Details')); let viewDetailsButtonEle = page.myHeroesParent.element(by.cssContainingText('button', 'View Details'));
var heroEle, heroDescr; let heroEle: protractor.ElementFinder, heroDescr: string;
page.myHeroesHref.click().then(function() { page.myHeroesHref.click().then(function() {
expect(page.myDashboardParent.isPresent()).toBe(false, 'dashboard element should NOT be present'); expect(page.myDashboardParent.isPresent()).toBe(false, 'dashboard element should NOT be present');
@ -117,13 +118,13 @@ describe('TOH Http Chapter', function () {
}); });
}); });
function save(page, origValue, textToAdd) { function save(page: any, origValue: string, textToAdd: string) {
var inputEle = page.heroDetail.element(by.css('input')); let inputEle = page.heroDetail.element(by.css('input'));
expect(inputEle.isDisplayed()).toBe(true, 'should be able to see the input box'); expect(inputEle.isDisplayed()).toBe(true, 'should be able to see the input box');
var saveButtonEle = page.heroDetail.element(by.buttonText('Save')); let saveButtonEle = page.heroDetail.element(by.buttonText('Save'));
var backButtonEle = page.heroDetail.element(by.buttonText('Back')); let backButtonEle = page.heroDetail.element(by.buttonText('Back'));
expect(backButtonEle.isDisplayed()).toBe(true, 'should be able to see the back button'); expect(backButtonEle.isDisplayed()).toBe(true, 'should be able to see the back button');
var detailTextEle = page.heroDetail.element(by.css('div h2')); let detailTextEle = page.heroDetail.element(by.css('div h2'));
expect(detailTextEle.getText()).toContain(origValue); expect(detailTextEle.getText()).toContain(origValue);
return sendKeys(inputEle, textToAdd).then(function () { return sendKeys(inputEle, textToAdd).then(function () {
expect(detailTextEle.getText()).toContain(origValue + textToAdd); expect(detailTextEle.getText()).toContain(origValue + textToAdd);
@ -132,24 +133,24 @@ describe('TOH Http Chapter', function () {
} }
it('should be able to see the start screen', function () { it('should be able to see the start screen', function () {
var page = getPageStruct(); let page = getPageStruct();
expect(page.hrefs.count()).toEqual(2, 'should be two dashboard choices'); expect(page.hrefs.count()).toEqual(2, 'should be two dashboard choices');
expect(page.myDashboardHref.getText()).toEqual("Dashboard"); expect(page.myDashboardHref.getText()).toEqual('Dashboard');
expect(page.myHeroesHref.getText()).toEqual("Heroes"); expect(page.myHeroesHref.getText()).toEqual('Heroes');
}); });
it('should be able to see dashboard choices', function () { it('should be able to see dashboard choices', function () {
var page = getPageStruct(); let page = getPageStruct();
expect(page.topHeroes.count()).toBe(4, "should be 4 dashboard hero choices"); expect(page.topHeroes.count()).toBe(4, 'should be 4 dashboard hero choices');
}); });
it('should be able to toggle the views', function () { it('should be able to toggle the views', function () {
var page = getPageStruct(); let page = getPageStruct();
expect(page.myDashboardParent.element(by.css('h3')).getText()).toEqual('Top Heroes'); expect(page.myDashboardParent.element(by.css('h3')).getText()).toEqual('Top Heroes');
page.myHeroesHref.click().then(function() { page.myHeroesHref.click().then(function() {
expect(page.myDashboardParent.isPresent()).toBe(false, 'should no longer see dashboard element'); expect(page.myDashboardParent.isPresent()).toBe(false, 'should no longer see dashboard element');
expect(page.allHeroes.count()).toBeGreaterThan(4, "should be more than 4 heroes shown"); expect(page.allHeroes.count()).toBeGreaterThan(4, 'should be more than 4 heroes shown');
return page.myDashboardHref.click(); return page.myDashboardHref.click();
}).then(function() { }).then(function() {
expect(page.myDashboardParent.isPresent()).toBe(true, 'should once again see the dashboard element'); expect(page.myDashboardParent.isPresent()).toBe(true, 'should once again see the dashboard element');
@ -158,11 +159,11 @@ describe('TOH Http Chapter', function () {
}); });
it('should be able to edit details from "Dashboard" view', function () { it('should be able to edit details from "Dashboard" view', function () {
var page = getPageStruct(); let page = getPageStruct();
expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be available'); expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be available');
var heroEle = page.topHeroes.get(3); let heroEle = page.topHeroes.get(3);
var heroDescrEle = heroEle.element(by.css('h4')); let heroDescrEle = heroEle.element(by.css('h4'));
var heroDescr; let heroDescr: string;
return heroDescrEle.getText().then(function(text) { return heroDescrEle.getText().then(function(text) {
heroDescr = text; heroDescr = text;
return heroEle.click(); return heroEle.click();
@ -175,10 +176,10 @@ describe('TOH Http Chapter', function () {
}); });
it('should be able to edit details from "Heroes" view', function () { it('should be able to edit details from "Heroes" view', function () {
var page = getPageStruct(); let page = getPageStruct();
expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be present'); expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be present');
var viewDetailsButtonEle = page.myHeroesParent.element(by.cssContainingText('button', 'View Details')); let viewDetailsButtonEle = page.myHeroesParent.element(by.cssContainingText('button', 'View Details'));
var heroEle, heroDescr; let heroEle: protractor.ElementFinder, heroDescr: string;
page.myHeroesHref.click().then(function() { page.myHeroesHref.click().then(function() {
expect(page.myDashboardParent.isPresent()).toBe(false, 'dashboard element should NOT be present'); expect(page.myDashboardParent.isPresent()).toBe(false, 'dashboard element should NOT be present');
expect(page.myHeroesParent.isPresent()).toBe(true, 'myHeroes element should be present'); expect(page.myHeroesParent.isPresent()).toBe(true, 'myHeroes element should be present');
@ -201,18 +202,18 @@ describe('TOH Http Chapter', function () {
}); });
}); });
function editDetails(page, origValue, textToAdd) { function editDetails(page: any, origValue: string, textToAdd: string) {
expect(page.myDashboardParent.isPresent()).toBe(false, 'dashboard element should NOT be present'); expect(page.myDashboardParent.isPresent()).toBe(false, 'dashboard element should NOT be present');
expect(page.myHeroesParent.isPresent()).toBe(false, 'myHeroes element should NOT be present'); expect(page.myHeroesParent.isPresent()).toBe(false, 'myHeroes element should NOT be present');
expect(page.heroDetail.isDisplayed()).toBe(true, 'should be able to see hero-details'); expect(page.heroDetail.isDisplayed()).toBe(true, 'should be able to see hero-details');
var inputEle = page.heroDetail.element(by.css('input')); let inputEle = page.heroDetail.element(by.css('input'));
expect(inputEle.isDisplayed()).toBe(true, 'should be able to see the input box'); expect(inputEle.isDisplayed()).toBe(true, 'should be able to see the input box');
var buttons = page.heroDetail.all(by.css('button')); let buttons = page.heroDetail.all(by.css('button'));
var backButtonEle = buttons.get(0); let backButtonEle = buttons.get(0);
var saveButtonEle = buttons.get(1); let saveButtonEle = buttons.get(1);
expect(backButtonEle.isDisplayed()).toBe(true, 'should be able to see the back button'); expect(backButtonEle.isDisplayed()).toBe(true, 'should be able to see the back button');
expect(saveButtonEle.isDisplayed()).toBe(true, 'should be able to see the save button'); expect(saveButtonEle.isDisplayed()).toBe(true, 'should be able to see the save button');
var detailTextEle = page.heroDetail.element(by.css('div h2')); let detailTextEle = page.heroDetail.element(by.css('div h2'));
expect(detailTextEle.getText()).toContain(origValue); expect(detailTextEle.getText()).toContain(origValue);
return sendKeys(inputEle, textToAdd).then(function () { return sendKeys(inputEle, textToAdd).then(function () {
expect(detailTextEle.getText()).toContain(origValue + textToAdd); expect(detailTextEle.getText()).toContain(origValue + textToAdd);

1
public/docs/_examples/upgrade-adapter/e2e-spec.js → public/docs/_examples/upgrade-adapter/e2e-spec.ts
View File

@ -1,3 +1,4 @@
/// <reference path="../_protractor/e2e.d.ts" />
describe('Upgrade Tests', function () { describe('Upgrade Tests', function () {
// Protractor doesn't support the UpgradeAdapter's asynchronous // Protractor doesn't support the UpgradeAdapter's asynchronous

21
public/docs/_examples/upgrade-phonecat-1-typescript/e2e-spec.js → public/docs/_examples/upgrade-phonecat-1-typescript/e2e-spec.ts
View File

@ -1,3 +1,4 @@
/// <reference path="../_protractor/e2e.d.ts" />
'use strict'; 'use strict';
// Angular E2E Testing Guide: // Angular E2E Testing Guide:
@ -22,8 +23,8 @@ describe('PhoneCat Application', function() {
}); });
it('should filter the phone list as a user types into the search box', function() { it('should filter the phone list as a user types into the search box', function() {
var phoneList = element.all(by.repeater('phone in $ctrl.phones')); let phoneList = element.all(by.repeater('phone in $ctrl.phones'));
var query = element(by.model('$ctrl.query')); let query = element(by.model('$ctrl.query'));
expect(phoneList.count()).toBe(20); expect(phoneList.count()).toBe(20);
@ -36,10 +37,10 @@ describe('PhoneCat Application', function() {
}); });
it('should be possible to control phone order via the drop-down menu', function() { it('should be possible to control phone order via the drop-down menu', function() {
var queryField = element(by.model('$ctrl.query')); let queryField = element(by.model('$ctrl.query'));
var orderSelect = element(by.model('$ctrl.orderProp')); let orderSelect = element(by.model('$ctrl.orderProp'));
var nameOption = orderSelect.element(by.css('option[value="name"]')); let nameOption = orderSelect.element(by.css('option[value="name"]'));
var phoneNameColumn = element.all(by.repeater('phone in $ctrl.phones').column('phone.name')); let phoneNameColumn = element.all(by.repeater('phone in $ctrl.phones').column('phone.name'));
function getNames() { function getNames() {
return phoneNameColumn.map(function(elem) { return phoneNameColumn.map(function(elem) {
@ -63,7 +64,7 @@ describe('PhoneCat Application', function() {
}); });
it('should render phone specific links', function() { it('should render phone specific links', function() {
var query = element(by.model('$ctrl.query')); let query = element(by.model('$ctrl.query'));
query.sendKeys('nexus'); query.sendKeys('nexus');
element.all(by.css('.phones li a')).first().click(); element.all(by.css('.phones li a')).first().click();
@ -83,14 +84,14 @@ describe('PhoneCat Application', function() {
}); });
it('should display the first phone image as the main phone image', function() { it('should display the first phone image as the main phone image', function() {
var mainImage = element(by.css('img.phone.selected')); let mainImage = element(by.css('img.phone.selected'));
expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/); expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/);
}); });
it('should swap the main image when clicking on a thumbnail image', function() { it('should swap the main image when clicking on a thumbnail image', function() {
var mainImage = element(by.css('img.phone.selected')); let mainImage = element(by.css('img.phone.selected'));
var thumbnails = element.all(by.css('.phone-thumbs img')); let thumbnails = element.all(by.css('.phone-thumbs img'));
thumbnails.get(2).click(); thumbnails.get(2).click();
expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.2.jpg/); expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.2.jpg/);

21
public/docs/_examples/upgrade-phonecat-2-hybrid/e2e-spec.js → public/docs/_examples/upgrade-phonecat-2-hybrid/e2e-spec.ts
View File

@ -1,3 +1,4 @@
/// <reference path="../_protractor/typings/index.d.ts" />
'use strict'; 'use strict';
// Angular E2E Testing Guide: // Angular E2E Testing Guide:
@ -21,8 +22,8 @@ describe('PhoneCat Application', function() {
}); });
it('should filter the phone list as a user types into the search box', function() { it('should filter the phone list as a user types into the search box', function() {
var phoneList = element.all(by.css('.phones li')); let phoneList = element.all(by.css('.phones li'));
var query = element(by.css('input')); let query = element(by.css('input'));
expect(phoneList.count()).toBe(20); expect(phoneList.count()).toBe(20);
@ -35,10 +36,10 @@ describe('PhoneCat Application', function() {
}); });
it('should be possible to control phone order via the drop-down menu', function() { it('should be possible to control phone order via the drop-down menu', function() {
var queryField = element(by.css('input')); let queryField = element(by.css('input'));
var orderSelect = element(by.css('select')); let orderSelect = element(by.css('select'));
var nameOption = orderSelect.element(by.css('option[value="name"]')); let nameOption = orderSelect.element(by.css('option[value="name"]'));
var phoneNameColumn = element.all(by.css('.phones .name')); let phoneNameColumn = element.all(by.css('.phones .name'));
function getNames() { function getNames() {
return phoneNameColumn.map(function(elem) { return phoneNameColumn.map(function(elem) {
@ -62,7 +63,7 @@ describe('PhoneCat Application', function() {
}); });
it('should render phone specific links', function() { it('should render phone specific links', function() {
var query = element(by.css('input')); let query = element(by.css('input'));
sendKeys(query, 'nexus'); sendKeys(query, 'nexus');
element.all(by.css('.phones li a')).first().click(); element.all(by.css('.phones li a')).first().click();
@ -83,14 +84,14 @@ describe('PhoneCat Application', function() {
}); });
it('should display the first phone image as the main phone image', function() { it('should display the first phone image as the main phone image', function() {
var mainImage = element(by.css('img.phone.selected')); let mainImage = element(by.css('img.phone.selected'));
expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/); expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/);
}); });
it('should swap the main image when clicking on a thumbnail image', function() { it('should swap the main image when clicking on a thumbnail image', function() {
var mainImage = element(by.css('img.phone.selected')); let mainImage = element(by.css('img.phone.selected'));
var thumbnails = element.all(by.css('.phone-thumbs img')); let thumbnails = element.all(by.css('.phone-thumbs img'));
thumbnails.get(2).click(); thumbnails.get(2).click();
expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.2.jpg/); expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.2.jpg/);

25
public/docs/_examples/upgrade-phonecat-3-final/e2e-spec.js → public/docs/_examples/upgrade-phonecat-3-final/e2e-spec.ts
View File

@ -1,3 +1,4 @@
/// <reference path="../_protractor/e2e.d.ts" />
'use strict'; 'use strict';
// Angular E2E Testing Guide: // Angular E2E Testing Guide:
@ -22,8 +23,8 @@ describe('PhoneCat Application', function() {
}); });
it('should filter the phone list as a user types into the search box', function() { it('should filter the phone list as a user types into the search box', function() {
var phoneList = element.all(by.css('.phones li')); let phoneList = element.all(by.css('.phones li'));
var query = element(by.css('input')); let query = element(by.css('input'));
expect(phoneList.count()).toBe(20); expect(phoneList.count()).toBe(20);
@ -36,10 +37,10 @@ describe('PhoneCat Application', function() {
}); });
it('should be possible to control phone order via the drop-down menu', function() { it('should be possible to control phone order via the drop-down menu', function() {
var queryField = element(by.css('input')); let queryField = element(by.css('input'));
var orderSelect = element(by.css('select')); let orderSelect = element(by.css('select'));
var nameOption = orderSelect.element(by.css('option[value="name"]')); let nameOption = orderSelect.element(by.css('option[value="name"]'));
var phoneNameColumn = element.all(by.css('.phones .name')); let phoneNameColumn = element.all(by.css('.phones .name'));
function getNames() { function getNames() {
return phoneNameColumn.map(function(elem) { return phoneNameColumn.map(function(elem) {
@ -64,10 +65,10 @@ describe('PhoneCat Application', function() {
// #docregion links // #docregion links
it('should render phone specific links', function() { it('should render phone specific links', function() {
var query = element(by.css('input')); let query = element(by.css('input'));
// https://github.com/angular/protractor/issues/2019 // https://github.com/angular/protractor/issues/2019
var str = 'nexus'; let str = 'nexus';
for (var i = 0; i < str.length; i++) { for (let i = 0; i < str.length; i++) {
query.sendKeys(str.charAt(i)); query.sendKeys(str.charAt(i));
} }
element.all(by.css('.phones li a')).first().click(); element.all(by.css('.phones li a')).first().click();
@ -90,14 +91,14 @@ describe('PhoneCat Application', function() {
}); });
it('should display the first phone image as the main phone image', function() { it('should display the first phone image as the main phone image', function() {
var mainImage = element(by.css('img.phone.selected')); let mainImage = element(by.css('img.phone.selected'));
expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/); expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/);
}); });
it('should swap the main image when clicking on a thumbnail image', function() { it('should swap the main image when clicking on a thumbnail image', function() {
var mainImage = element(by.css('img.phone.selected')); let mainImage = element(by.css('img.phone.selected'));
var thumbnails = element.all(by.css('.phone-thumbs img')); let thumbnails = element.all(by.css('.phone-thumbs img'));
thumbnails.get(2).click(); thumbnails.get(2).click();
expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.2.jpg/); expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.2.jpg/);

53
public/docs/_examples/user-input/e2e-spec.js → public/docs/_examples/user-input/e2e-spec.ts
View File

@ -1,3 +1,4 @@
/// <reference path="../_protractor/e2e.d.ts" />
describe('User Input Tests', function () { describe('User Input Tests', function () {
beforeAll(function () { beforeAll(function () {
@ -5,8 +6,8 @@ describe('User Input Tests', function () {
}); });
it('should support the click event', function () { it('should support the click event', function () {
var mainEle = element(by.css('click-me')); let mainEle = element(by.css('click-me'));
var buttonEle =element(by.css('click-me button')); let buttonEle =element(by.css('click-me button'));
expect(mainEle.getText()).not.toContain('You are my hero!'); expect(mainEle.getText()).not.toContain('You are my hero!');
buttonEle.click().then(function() { buttonEle.click().then(function() {
expect(mainEle.getText()).toContain('You are my hero!'); expect(mainEle.getText()).toContain('You are my hero!');
@ -14,8 +15,8 @@ describe('User Input Tests', function () {
}); });
it('should support the click event with an event payload', function () { it('should support the click event with an event payload', function () {
var mainEle = element(by.css('click-me2')); let mainEle = element(by.css('click-me2'));
var buttonEle =element(by.css('click-me2 button')); let buttonEle =element(by.css('click-me2 button'));
expect(mainEle.getText()).not.toContain('Event target is '); expect(mainEle.getText()).not.toContain('Event target is ');
buttonEle.click().then(function() { buttonEle.click().then(function() {
expect(mainEle.getText()).toContain('Event target is BUTTON'); expect(mainEle.getText()).toContain('Event target is BUTTON');
@ -23,19 +24,19 @@ describe('User Input Tests', function () {
}); });
it('should support the keyup event ', function () { it('should support the keyup event ', function () {
var mainEle = element(by.css('key-up1')); let mainEle = element(by.css('key-up1'));
var inputEle = mainEle.element(by.css('input')); let inputEle = mainEle.element(by.css('input'));
var outputTextEle = mainEle.element(by.css('p')); let outputTextEle = mainEle.element(by.css('p'));
expect(outputTextEle.getText()).toEqual(''); expect(outputTextEle.getText()).toEqual('');
return sendKeys(inputEle,'abc').then(function() { return sendKeys(inputEle,'abc').then(function() {
expect(outputTextEle.getText()).toEqual('a | ab | abc |'); expect(outputTextEle.getText()).toEqual('a | ab | abc |');
}); });
}); });
it('should support user input from a local template var (loopback)', function () { it('should support user input from a local template let (loopback)', function () {
var mainEle = element(by.css('loop-back')); let mainEle = element(by.css('loop-back'));
var inputEle = mainEle.element(by.css('input')); let inputEle = mainEle.element(by.css('input'));
var outputTextEle = mainEle.element(by.css('p')); let outputTextEle = mainEle.element(by.css('p'));
expect(outputTextEle.getText()).toEqual(''); expect(outputTextEle.getText()).toEqual('');
return sendKeys(inputEle,'abc').then(function() { return sendKeys(inputEle,'abc').then(function() {
expect(outputTextEle.getText()).toEqual('abc'); expect(outputTextEle.getText()).toEqual('abc');
@ -43,9 +44,9 @@ describe('User Input Tests', function () {
}); });
it('should be able to combine click event with a local template var', function () { it('should be able to combine click event with a local template var', function () {
var mainEle = element(by.css('key-up2')); let mainEle = element(by.css('key-up2'));
var inputEle = mainEle.element(by.css('input')); let inputEle = mainEle.element(by.css('input'));
var outputTextEle = mainEle.element(by.css('p')); let outputTextEle = mainEle.element(by.css('p'));
expect(outputTextEle.getText()).toEqual(''); expect(outputTextEle.getText()).toEqual('');
return sendKeys(inputEle,'abc').then(function() { return sendKeys(inputEle,'abc').then(function() {
expect(outputTextEle.getText()).toEqual('a | ab | abc |'); expect(outputTextEle.getText()).toEqual('a | ab | abc |');
@ -53,9 +54,9 @@ describe('User Input Tests', function () {
}); });
it('should be able to filter key events', function () { it('should be able to filter key events', function () {
var mainEle = element(by.css('key-up3')); let mainEle = element(by.css('key-up3'));
var inputEle = mainEle.element(by.css('input')); let inputEle = mainEle.element(by.css('input'));
var outputTextEle = mainEle.element(by.css('p')); let outputTextEle = mainEle.element(by.css('p'));
expect(outputTextEle.getText()).toEqual(''); expect(outputTextEle.getText()).toEqual('');
return sendKeys(inputEle,'abc').then(function() { return sendKeys(inputEle,'abc').then(function() {
expect(outputTextEle.getText()).toEqual('', 'should be blank - have not sent enter yet'); expect(outputTextEle.getText()).toEqual('', 'should be blank - have not sent enter yet');
@ -66,10 +67,10 @@ describe('User Input Tests', function () {
}); });
it('should be able to filter blur events', function () { it('should be able to filter blur events', function () {
var prevInputEle = element(by.css('key-up3 input')); let prevInputEle = element(by.css('key-up3 input'));
var mainEle = element(by.css('key-up4')); let mainEle = element(by.css('key-up4'));
var inputEle = mainEle.element(by.css('input')); let inputEle = mainEle.element(by.css('input'));
var outputTextEle = mainEle.element(by.css('p')); let outputTextEle = mainEle.element(by.css('p'));
expect(outputTextEle.getText()).toEqual(''); expect(outputTextEle.getText()).toEqual('');
return sendKeys(inputEle,'abc').then(function() { return sendKeys(inputEle,'abc').then(function() {
expect(outputTextEle.getText()).toEqual('', 'should be blank - have not sent enter yet'); expect(outputTextEle.getText()).toEqual('', 'should be blank - have not sent enter yet');
@ -81,11 +82,11 @@ describe('User Input Tests', function () {
}); });
it('should be able to compose little tour of heroes', function () { it('should be able to compose little tour of heroes', function () {
var mainEle = element(by.css('little-tour')); let mainEle = element(by.css('little-tour'));
var inputEle = mainEle.element(by.css('input')); let inputEle = mainEle.element(by.css('input'));
var addButtonEle = mainEle.element(by.css('button')); let addButtonEle = mainEle.element(by.css('button'));
var heroEles = mainEle.all(by.css('li')); let heroEles = mainEle.all(by.css('li'));
var numHeroes; let numHeroes;
expect(heroEles.count()).toBeGreaterThan(0); expect(heroEles.count()).toBeGreaterThan(0);
heroEles.count().then(function(count) { heroEles.count().then(function(count) {
numHeroes = count; numHeroes = count;