diff --git a/.travis.yml b/.travis.yml index 7142337909..f09411f763 100644 --- a/.travis.yml +++ b/.travis.yml @@ -18,7 +18,8 @@ before_script: install: - npm install --no-optional - 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 script: - gulp $SCRIPT \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index d79372c5b0..1939310352 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -38,6 +38,7 @@ var TEMP_PATH = './_temp'; var DOCS_PATH = path.join(PUBLIC_PATH, 'docs'); 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 RESOURCES_PATH = path.join(PUBLIC_PATH, 'resources'); var LIVE_EXAMPLES_PATH = path.join(RESOURCES_PATH, 'live-examples'); @@ -86,107 +87,134 @@ var _exampleBoilerplateFiles = [ 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 * * Flags * --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 * 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 - * e.g. gulp run-e2e-tests --lang=ts // only TypeScript apps + * e.g. gulp e2e --lang=ts // only TypeScript apps * default is (ts|js) * all means (ts|js|dart) */ -gulp.task('run-e2e-tests', function() { +function runE2e() { var promise; if (argv.fast) { // fast; skip all setup promise = Promise.resolve(true); } else { - // Not 'fast'; do full setup + /* + // Not 'fast'; do full setup var spawnInfo = spawnExt('npm', ['install'], { cwd: EXAMPLES_PATH}); promise = spawnInfo.promise.then(function() { copyExampleBoilerplate(); spawnInfo = spawnExt('npm', ['run', 'webdriver:update'], {cwd: EXAMPLES_PATH}); 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() { - return findAndRunE2eTests(argv.filter); + return findAndRunE2eTests(argv.filter, outputFile); }).then(function(status) { - reportStatus(status); + reportStatus(status, outputFile); if (status.failed.length > 0){ return Promise.reject('Some test suites failed'); } }).catch(function(e) { gutil.log(e); - process.exit(1); + process.exitCode = 1; }); -}); + return promise; +} // finds all of the *e2e-spec.tests under the _examples folder along // with the corresponding apps that they should run under. Then run // 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(); if (lang === 'all') { lang = '(ts|js|dart)'; } 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`; header += argv.fast ? ' Fast Mode (--fast): no npm install, webdriver update, or boilerplate copy\n' : ' Slow Mode: npm install, webdriver update, and boilerplate copy\n'; header += ` Filter: ${filter ? filter : 'All tests'}\n\n`; - fs.writeFileSync(outputFile, header); // create an array of combos where each // combo consists of { examplePath: ... , protractorConfigFilename: ... } - var exeConfigs = []; + var examplePaths = []; 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'); - fsExtra.copySync(srcConfig, destConfig); // get all of the examples under each dir where a pcFilename is found - examplePaths = getExamplePaths(specPath, true); + localExamplePaths = getExamplePaths(specPath, true); // Filter by language - examplePaths = examplePaths.filter(function (fn) { + localExamplePaths = localExamplePaths.filter(function (fn) { return fn.match('/'+lang+'$') != null; }); if (filter) { - examplePaths = examplePaths.filter(function (fn) { + localExamplePaths = localExamplePaths.filter(function (fn) { return fn.match(filter) != null; }) } - examplePaths.forEach(function(exPath) { - exeConfigs.push( { examplePath: exPath, protractorConfigFilename: destConfig }); + localExamplePaths.forEach(function(examplePath) { + examplePaths.push(examplePath); }) }); // run the tests sequentially var status = { passed: [], failed: [] }; - return exeConfigs.reduce(function (promise, combo) { + return examplePaths.reduce(function (promise, examplePath) { return promise.then(function () { - var isDart = combo.examplePath.indexOf('/dart') > -1; + var isDart = examplePath.indexOf('/dart') > -1; 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; - arr.push(combo.examplePath); + arr.push(examplePath); }) }); }, Q.resolve()).then(function() { var stopTime = new Date().getTime(); status.elapsedTime = (stopTime - startTime)/1000; - fs.appendFileSync(outputFile, '\nElaped Time: ' + status.elapsedTime + ' seconds'); return status; }); } @@ -194,15 +222,15 @@ function findAndRunE2eTests(filter) { // start the example in appDir; then run protractor with the specified // fileName; then shut down the example. All protractor output is appended // to the outputFile. -function runE2eTsTests(appDir, protractorConfigFilename, outputFile) { +function runE2eTsTests(appDir, outputFile) { // start the app var appRunSpawnInfo = spawnExt('npm',['run','http-server:e2e', '--', '-s' ], { 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 .catch(function(){ var emsg = `AppDir failed during compile: ${appDir}\n\n`; @@ -212,10 +240,10 @@ function runProtractor(prepPromise, appDir, appRunSpawnInfo, protractorConfigFil }) .then(function (data) { // start protractor - var pcFilename = path.resolve(protractorConfigFilename); // need to resolve because we are going to be running from a different dir - var spawnInfo = spawnExt('npm', [ 'run', 'protractor', '--', pcFilename, - '--params.appDir=' + appDir, '--params.outputFile=' + outputFile], { cwd: EXAMPLES_PATH }); - return spawnInfo.promise + var specFilename = path.resolve(`${appDir}/../e2e-spec.ts`); + var spawnInfo = spawnExt('npm', [ 'run', 'protractor', '--', 'protractor.config.js', + `--specs=${specFilename}`, '--params.appDir=' + appDir, '--params.outputFile=' + outputFile], { cwd: EXAMPLES_PROTRACTOR_PATH }); + return spawnInfo.promise; }) .then( 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 // fileName; then shut down the example. All protractor output is appended // to the outputFile. -function runE2eDartTests(appDir, protractorConfigFilename, outputFile) { +function runE2eDartTests(appDir, outputFile) { var deployDir = path.resolve(path.join(appDir, 'build/web')); gutil.log('AppDir for Dart e2e: ' + appDir); gutil.log('Deploying from: ' + deployDir); @@ -247,24 +275,28 @@ function runE2eDartTests(appDir, protractorConfigFilename, outputFile) { var prepPromise = pubUpgradeSpawnInfo.promise.then(function (data) { return spawnExt('pub', ['build'], { cwd: appDir }).promise; }); - return runProtractor(prepPromise, appDir, appRunSpawnInfo, protractorConfigFilename, outputFile); + return runProtractor(prepPromise, appDir, appRunSpawnInfo, outputFile); } -function reportStatus(status) { - gutil.log('Suites passed:'); +function reportStatus(status, outputFile) { + var log = ['']; + log.push('Suites passed:'); status.passed.forEach(function(val) { - gutil.log(' ' + val); + log.push(' ' + val); }); if (status.failed.length == 0) { - gutil.log('All tests passed'); + log.push('All tests passed'); } else { - gutil.log('Suites failed:'); + log.push('Suites failed:'); 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. @@ -312,7 +344,7 @@ gulp.task('help', taskListing.withFilters(function(taskName) { return shouldRemove; })); -// requires admin access +// requires admin access because it adds symlinks gulp.task('add-example-boilerplate', function() { var realPath = path.join(EXAMPLES_PATH, '/node_modules'); var nodeModulesPaths = getNodeModulesPaths(EXAMPLES_PATH); @@ -332,11 +364,18 @@ gulp.task('add-example-boilerplate', function() { return copyExampleBoilerplate(); }); + +// copies boilerplate files to locations +// where an example app is found +gulp.task('_copy-example-boilerplate', copyExampleBoilerplate); + + // copies boilerplate files to locations // where an example app is found // also copies certain web files (e.g., styles.css) to ~/_examples/**/dart/**/web // also copies protractor.config.js file function copyExampleBoilerplate() { + gutil.log('Copying example boilerplate files'); var sourceFiles = _exampleBoilerplateFiles.map(function(fn) { return path.join(EXAMPLES_PATH, fn); }); @@ -351,12 +390,14 @@ function copyExampleBoilerplate() { .then(function() { 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. .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); - return copyFiles(sourceFiles, e2eSpecPaths); + return copyFiles(protractorSourceFiles, e2eSpecPaths); }); } @@ -371,6 +412,15 @@ gulp.task('remove-example-boilerplate', function() { 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 dartExampleWebPaths = getDartExampleWebPaths(EXAMPLES_PATH); @@ -379,10 +429,11 @@ gulp.task('remove-example-boilerplate', function() { return deleteFiles(_exampleDartWebBoilerPlateFiles, dartExampleWebPaths); }) .then(function() { + var protractorFiles = _exampleProtractorBoilerplateFiles; var e2eSpecPaths = getE2eSpecPaths(EXAMPLES_PATH); - return deleteFiles(['protractor.config.js'], e2eSpecPaths); - }) -}); + return deleteFiles(protractorFiles, e2eSpecPaths); + }); +} gulp.task('serve-and-sync', ['build-docs'], function (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 // path in the result. function getE2eSpecPaths(basePath) { - var paths = getPaths(basePath, '*e2e-spec.js', true); + var paths = getPaths(basePath, '*e2e-spec.+(js|ts)', true); return _.uniq(paths); } diff --git a/public/docs/_examples/_protractor/e2e.d.ts b/public/docs/_examples/_protractor/e2e.d.ts new file mode 100644 index 0000000000..ab91658443 --- /dev/null +++ b/public/docs/_examples/_protractor/e2e.d.ts @@ -0,0 +1,14 @@ +/// + +// Defined in protractor.config.js +declare function setProtractorToNg1Mode(): void; +declare function sendKeys(element: protractor.ElementFinder, str: string): webdriver.promise.Promise; +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; + } +} diff --git a/public/docs/_examples/_protractor/package.json b/public/docs/_examples/_protractor/package.json new file mode 100644 index 0000000000..eca5cae41f --- /dev/null +++ b/public/docs/_examples/_protractor/package.json @@ -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": {} +} diff --git a/public/docs/_examples/protractor.config.js b/public/docs/_examples/_protractor/protractor.config.js similarity index 96% rename from public/docs/_examples/protractor.config.js rename to public/docs/_examples/_protractor/protractor.config.js index 060c8d9040..6955d05e6b 100644 --- a/public/docs/_examples/protractor.config.js +++ b/public/docs/_examples/_protractor/protractor.config.js @@ -26,10 +26,6 @@ exports.config = { // Framework to use. Jasmine is recommended. framework: 'jasmine', - // Spec patterns are relative to this config file - specs: ['**/*e2e-spec.js' ], - - // For angular2 tests useAllAngular2AppRoots: true, @@ -71,7 +67,7 @@ exports.config = { global.setProtractorToNg1Mode = function() { browser.useAllAngular2AppRoots = false; browser.rootEl = 'body'; - + var disableNgAnimate = function() { angular.module('disableNgAnimate', []).run(['$animate', function($animate) { $animate.enabled(false); @@ -87,6 +83,11 @@ exports.config = { defaultTimeoutInterval: 10000, showTiming: true, print: function() {} + }, + + beforeLaunch: function() { + // add TS support for specs + require('ts-node').register(); } }; @@ -118,7 +119,7 @@ function sendKeys(element, str) { } 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; var _root = { appDir: options.appDir, suites: [] }; @@ -142,7 +143,7 @@ function Reporter(options) { }; this.specStarted = function(spec) { - + }; this.specDone = function(spec) { diff --git a/public/docs/_examples/_protractor/tsconfig.json b/public/docs/_examples/_protractor/tsconfig.json new file mode 100644 index 0000000000..eab9c24f92 --- /dev/null +++ b/public/docs/_examples/_protractor/tsconfig.json @@ -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" + ] +} diff --git a/public/docs/_examples/_protractor/typings.json b/public/docs/_examples/_protractor/typings.json new file mode 100644 index 0000000000..6962cc930f --- /dev/null +++ b/public/docs/_examples/_protractor/typings.json @@ -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" + } +} diff --git a/public/docs/_examples/architecture/e2e-spec.js b/public/docs/_examples/architecture/e2e-spec.ts similarity index 70% rename from public/docs/_examples/architecture/e2e-spec.js rename to public/docs/_examples/architecture/e2e-spec.ts index a8818ad019..a99f24e177 100644 --- a/public/docs/_examples/architecture/e2e-spec.js +++ b/public/docs/_examples/architecture/e2e-spec.ts @@ -1,48 +1,49 @@ +/// describe('Architecture', function () { - var _title = "Hero List"; + let title = 'Hero List'; beforeAll(function () { browser.get(''); }); - function itReset(name, func) { + function itReset(name: string, func: (v: void) => any) { it(name, function() { browser.get('').then(func); }); } - it('should display correct title: ' + _title, function () { - expect(element(by.css('h2')).getText()).toEqual(_title); + it('should display correct title: ' + title, function () { + expect(element(by.css('h2')).getText()).toEqual(title); }); 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); // 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() { return selectEle.getText(); }).then(function(selectedHeroName) { // works but too specific if we change the app // expect(selectedHeroName).toEqual('Mr. Nice'); 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); }); - }) + }); 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); // 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 () { return selectEle.getText(); }).then(function (selectedHeroName) { - var detailTitleEle = element(by.css('hero-detail > h4')); + let detailTitleEle = element(by.css('hero-detail > h4')); 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 // made to the input box. @@ -56,6 +57,6 @@ describe('Architecture', function () { // expect(heroNameEle.getText()).toEqual(selectedHeroName); expect(heroNameEle.getAttribute('value')).toEqual(selectedHeroName + 'foo'); }); - }) + }); }); diff --git a/public/docs/_examples/attribute-directives/e2e-spec.js b/public/docs/_examples/attribute-directives/e2e-spec.ts similarity index 54% rename from public/docs/_examples/attribute-directives/e2e-spec.js rename to public/docs/_examples/attribute-directives/e2e-spec.ts index 16fa374c75..54d6a90eea 100644 --- a/public/docs/_examples/attribute-directives/e2e-spec.js +++ b/public/docs/_examples/attribute-directives/e2e-spec.ts @@ -1,6 +1,7 @@ +/// describe('Attribute directives', function () { - var _title = "My First Attribute Directive"; + let _title = 'My First Attribute Directive'; beforeAll(function () { browser.get(''); @@ -11,14 +12,15 @@ describe('Attribute directives', function () { }); it('should be able to select green highlight', function () { - var highlightedEle = element(by.cssContainingText('p', 'Highlight me')); - var lightGreen = "rgba(144, 238, 144, 1)"; + let highlightedEle = element(by.cssContainingText('p', 'Highlight me')); + let lightGreen = 'rgba(144, 238, 144, 1)'; expect(highlightedEle.getCssValue('background-color')).not.toEqual(lightGreen); - // var greenRb = element(by.cssContainingText('input', 'Green')); - var greenRb = element.all(by.css('input')).get(0); + // let greenRb = element(by.cssContainingText('input', 'Green')); + let greenRb = element.all(by.css('input')).get(0); 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); }); diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/e2e-spec.js b/public/docs/_examples/cb-a1-a2-quick-reference/e2e-spec.ts similarity index 66% rename from public/docs/_examples/cb-a1-a2-quick-reference/e2e-spec.js rename to public/docs/_examples/cb-a1-a2-quick-reference/e2e-spec.ts index 01e4e57c6c..f75a17ee6e 100644 --- a/public/docs/_examples/cb-a1-a2-quick-reference/e2e-spec.js +++ b/public/docs/_examples/cb-a1-a2-quick-reference/e2e-spec.ts @@ -1,3 +1,4 @@ +/// describe('Angular 1 to 2 Quick Reference Tests', function () { beforeAll(function () { @@ -10,7 +11,7 @@ describe('Angular 1 to 2 Quick Reference Tests', function () { it('should display proper movie data', function () { // 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: 2, value: 'Celeritas'}, {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 - var movieRows = getMovieRows(); - for (var i = 0; i < expectedSamples.length; i++) { - var sample = expectedSamples[i]; - var tableCell = movieRows.get(sample.row) + let movieRows = getMovieRows(); + for (let i = 0; i < expectedSamples.length; i++) { + let sample = expectedSamples[i]; + let tableCell = movieRows.get(sample.row) .all(by.tagName('td')).get(sample.column); // Check the cell or its nested element - var elementToCheck = sample.element + let elementToCheck = sample.element ? tableCell.element(by.tagName(sample.element)) : tableCell; // Check element attribute or text - var valueToCheck = sample.attr + let valueToCheck = sample.attr ? elementToCheck.getAttribute(sample.attr) : elementToCheck.getText(); @@ -48,38 +49,38 @@ describe('Angular 1 to 2 Quick Reference Tests', 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 () { - testPosterButtonClick("Hide Poster", false); + testPosterButtonClick('Hide Poster', false); }); 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 () { - testFavoriteHero("Magneta", "No movie, sorry!"); + testFavoriteHero('Magneta', 'No movie, sorry!'); }); it('should display a movie for Mr. Nice', function () { - testFavoriteHero("Mr. Nice", "Excellent choice!"); + testFavoriteHero('Mr. Nice', 'Excellent choice!'); }); - function testImagesAreDisplayed(isDisplayed) { - var expectedMovieCount = 3; + function testImagesAreDisplayed(isDisplayed: boolean) { + let expectedMovieCount = 3; - var movieRows = getMovieRows(); + let movieRows = getMovieRows(); expect(movieRows.count()).toBe(expectedMovieCount); - for (var i = 0; i < expectedMovieCount; i++) { - var movieImage = movieRows.get(i).element(by.css('td > img')); + for (let i = 0; i < expectedMovieCount; i++) { + let movieImage = movieRows.get(i).element(by.css('td > img')); expect(movieImage.isDisplayed()).toBe(isDisplayed); } } - function testPosterButtonClick(expectedButtonText, isDisplayed) { - var posterButton = element(by.css('movie-list tr > th > button')); + function testPosterButtonClick(expectedButtonText: string, isDisplayed: boolean) { + let posterButton = element(by.css('movie-list tr > th > button')); expect(posterButton.getText()).toBe(expectedButtonText); 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')); } - function testFavoriteHero(heroName, expectedLabel) { - var movieListComp = element(by.tagName('movie-list')); - var heroInput = movieListComp.element(by.tagName('input')); - var favoriteHeroLabel = movieListComp.element(by.tagName('h3')); - var resultLabel = movieListComp.element(by.css('span > p')); + function testFavoriteHero(heroName: string, expectedLabel: string) { + let movieListComp = element(by.tagName('movie-list')); + let heroInput = movieListComp.element(by.tagName('input')); + let favoriteHeroLabel = movieListComp.element(by.tagName('h3')); + let resultLabel = movieListComp.element(by.css('span > p')); heroInput.clear().then(function () { sendKeys(heroInput, heroName || '').then(function () { diff --git a/public/docs/_examples/cb-component-communication/e2e-spec.js b/public/docs/_examples/cb-component-communication/e2e-spec.ts similarity index 57% rename from public/docs/_examples/cb-component-communication/e2e-spec.js rename to public/docs/_examples/cb-component-communication/e2e-spec.ts index ed00a5c7cb..fc2566662d 100644 --- a/public/docs/_examples/cb-component-communication/e2e-spec.js +++ b/public/docs/_examples/cb-component-communication/e2e-spec.ts @@ -1,3 +1,4 @@ +/// describe('Component Communication Cookbook Tests', function () { // 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() { // #docregion parent-to-child // ... - var _heroNames = ['Mr. IQ', 'Magneta', 'Bombasto']; - var _masterName = 'Master'; + let _heroNames = ['Mr. IQ', 'Magneta', 'Bombasto']; + let _masterName = 'Master'; it('should pass properties to children properly', function () { - var parent = element.all(by.tagName('hero-parent')).get(0); - var heroes = parent.all(by.tagName('hero-child')); + let parent = element.all(by.tagName('hero-parent')).get(0); + let heroes = parent.all(by.tagName('hero-child')); - for (var i = 0; i < _heroNames.length; i++) { - var childTitle = heroes.get(i).element(by.tagName('h3')).getText(); - var childDetail = heroes.get(i).element(by.tagName('p')).getText(); + for (let i = 0; i < _heroNames.length; i++) { + let childTitle = heroes.get(i).element(by.tagName('h3')).getText(); + let childDetail = heroes.get(i).element(by.tagName('p')).getText(); expect(childTitle).toEqual(_heroNames[i] + ' says:') expect(childDetail).toContain(_masterName) } @@ -31,22 +32,22 @@ describe('Component Communication Cookbook Tests', function () { // #docregion parent-to-child-setter // ... it('should display trimmed, non-empty names', function () { - var _nonEmptyNameIndex = 0; - var _nonEmptyName = '"Mr. IQ"'; - var parent = element.all(by.tagName('name-parent')).get(0); - var hero = parent.all(by.tagName('name-child')).get(_nonEmptyNameIndex); + let _nonEmptyNameIndex = 0; + let _nonEmptyName = '"Mr. IQ"'; + let parent = element.all(by.tagName('name-parent')).get(0); + 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) }); it('should replace empty name with default name', function () { - var _emptyNameIndex = 1; - var _defaultName = '""'; - var parent = element.all(by.tagName('name-parent')).get(0); - var hero = parent.all(by.tagName('name-child')).get(_emptyNameIndex); + let _emptyNameIndex = 1; + let _defaultName = '""'; + let parent = element.all(by.tagName('name-parent')).get(0); + 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) }); // ... @@ -58,26 +59,26 @@ describe('Component Communication Cookbook Tests', function () { // ... // Test must all execute in this exact order it('should set expected initial values', function () { - var actual = getActual(); + let actual = getActual(); - var initialLabel = "Version 1.23"; - var initialLog = 'major changed from {} to 1, minor changed from {} to 23'; + let initialLabel = 'Version 1.23'; + let initialLog = 'major changed from {} to 1, minor changed from {} to 23'; expect(actual.label).toBe(initialLabel); expect(actual.count).toBe(1); expect(actual.logs.get(0).getText()).toBe(initialLog); }); - it('should set expected values after clicking "Minor" twice', function () { - var repoTag = element(by.tagName('version-parent')); - var newMinorButton = repoTag.all(by.tagName('button')).get(0); + it('should set expected values after clicking \'Minor\' twice', function () { + let repoTag = element(by.tagName('version-parent')); + let newMinorButton = repoTag.all(by.tagName('button')).get(0); newMinorButton.click().then(function() { newMinorButton.click().then(function() { - var actual = getActual(); + let actual = getActual(); - var labelAfter2Minor = "Version 1.25"; - var logAfter2Minor = 'minor changed from 24 to 25'; + let labelAfter2Minor = 'Version 1.25'; + let logAfter2Minor = 'minor changed from 24 to 25'; expect(actual.label).toBe(labelAfter2Minor); 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 () { - var repoTag = element(by.tagName('version-parent')); - var newMajorButton = repoTag.all(by.tagName('button')).get(1); + it('should set expected values after clicking \'Major\' once', function () { + let repoTag = element(by.tagName('version-parent')); + let newMajorButton = repoTag.all(by.tagName('button')).get(1); newMajorButton.click().then(function() { - var actual = getActual(); + let actual = getActual(); - var labelAfterMajor = "Version 2.0"; - var logAfterMajor = 'major changed from 1 to 2, minor changed from 25 to 0'; + let labelAfterMajor = 'Version 2.0'; + let logAfterMajor = 'major changed from 1 to 2, minor changed from 25 to 0'; expect(actual.label).toBe(labelAfterMajor); expect(actual.count).toBe(4); @@ -103,10 +104,10 @@ describe('Component Communication Cookbook Tests', function () { }); function getActual() { - var versionTag = element(by.tagName('version-child')); - var label = versionTag.element(by.tagName('h3')).getText(); - var ul = versionTag.element((by.tagName('ul'))); - var logs = ul.all(by.tagName('li')); + let versionTag = element(by.tagName('version-child')); + let label = versionTag.element(by.tagName('h3')).getText(); + let ul = versionTag.element((by.tagName('ul'))); + let logs = ul.all(by.tagName('li')); return { label: label, @@ -123,28 +124,28 @@ describe('Component Communication Cookbook Tests', function () { // #docregion child-to-parent // ... 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(); - expect(voteLabel).toBe("Agree: 0, Disagree: 0"); + expect(voteLabel).toBe('Agree: 0, Disagree: 0'); }); 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); agreeButton1.click().then(function() { - var voteLabel = element(by.tagName('vote-taker')) + let voteLabel = element(by.tagName('vote-taker')) .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 () { - 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); agreeButton1.click().then(function() { - var voteLabel = element(by.tagName('vote-taker')) + let voteLabel = element(by.tagName('vote-taker')) .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') }); - function countDownTimerTests(parentTag) { + function countDownTimerTests(parentTag: string) { // #docregion countdown-timer-tests // ... it('timer and parent seconds should match', function () { - var parent = element(by.tagName(parentTag)); - var message = parent.element(by.tagName('countdown-timer')).getText(); + let parent = element(by.tagName(parentTag)); + let message = parent.element(by.tagName('countdown-timer')).getText(); 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); }); it('should stop the countdown', function () { - var parent = element(by.tagName(parentTag)); - var stopButton = parent.all(by.tagName('button')).get(1); + let parent = element(by.tagName(parentTag)); + let stopButton = parent.all(by.tagName('button')).get(1); 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'); }); }); @@ -190,10 +191,10 @@ describe('Component Communication Cookbook Tests', function () { // #docregion bidirectional-service // ... it('should announce a mission', function () { - var missionControl = element(by.tagName('mission-control')); - var announceButton = missionControl.all(by.tagName('button')).get(0); + let missionControl = element(by.tagName('mission-control')); + let announceButton = missionControl.all(by.tagName('button')).get(0); 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.get(0).getText()).toMatch(/Mission.* announced/); }); @@ -211,14 +212,14 @@ describe('Component Communication Cookbook Tests', function () { testConfirmMission(2, 4, 'Swigert'); }); - function testConfirmMission(buttonIndex, expectedLogCount, astronaut) { - var _confirmedLog = ' confirmed the mission'; - var missionControl = element(by.tagName('mission-control')); - var confirmButton = missionControl.all(by.tagName('button')).get(buttonIndex); + function testConfirmMission(buttonIndex: number, expectedLogCount: number, astronaut: string) { + let _confirmedLog = ' confirmed the mission'; + let missionControl = element(by.tagName('mission-control')); + let confirmButton = missionControl.all(by.tagName('button')).get(buttonIndex); 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.get(expectedLogCount-1).getText()).toBe(astronaut + _confirmedLog); + expect(history.get(expectedLogCount - 1).getText()).toBe(astronaut + _confirmedLog); }); } // ... diff --git a/public/docs/_examples/cb-component-relative-paths/e2e-spec.js b/public/docs/_examples/cb-component-relative-paths/e2e-spec.ts similarity index 81% rename from public/docs/_examples/cb-component-relative-paths/e2e-spec.js rename to public/docs/_examples/cb-component-relative-paths/e2e-spec.ts index 6646bd0b4f..e39dfdb8a9 100644 --- a/public/docs/_examples/cb-component-relative-paths/e2e-spec.js +++ b/public/docs/_examples/cb-component-relative-paths/e2e-spec.ts @@ -1,5 +1,12 @@ +/// describe('Cookbook: component-relative paths', function () { + interface Page { + title: protractor.ElementFinder; + absComp: protractor.ElementFinder; + relComp: protractor.ElementFinder; + + } function getPageStruct() { return { title: element( by.tagName( 'h1' )), @@ -8,7 +15,7 @@ describe('Cookbook: component-relative paths', function () { } } - var page; + let page: Page; beforeAll(function () { browser.get(''); page = getPageStruct(); diff --git a/public/docs/_examples/cb-dependency-injection/e2e-spec.js b/public/docs/_examples/cb-dependency-injection/e2e-spec.ts similarity index 56% rename from public/docs/_examples/cb-dependency-injection/e2e-spec.js rename to public/docs/_examples/cb-dependency-injection/e2e-spec.ts index 14f1f0994b..2beb08af94 100644 --- a/public/docs/_examples/cb-dependency-injection/e2e-spec.js +++ b/public/docs/_examples/cb-dependency-injection/e2e-spec.ts @@ -1,3 +1,4 @@ +/// describe('Dependency Injection Cookbook', function () { beforeAll(function () { @@ -5,104 +6,104 @@ describe('Dependency Injection Cookbook', 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(); }); - - it('"Bombasto" should be the logged in user', function () { - loggedInUser = element.all(by.xpath('//div[text()="Name: Bombasto"]')).get(0); + + it('"Bombasto" should be the logged in user', function () { + let loggedInUser = element.all(by.xpath('//div[text()="Name: Bombasto"]')).get(0); expect(loggedInUser).toBeDefined(); }); - - it('should render sorted heroes', function () { - var sortedHeroes = element.all(by.xpath('//h3[text()="Sorted Heroes" and position()=1]')).get(0); + + it('should render sorted heroes', function () { + let sortedHeroes = element.all(by.xpath('//h3[text()="Sorted Heroes" and position()=1]')).get(0); expect(sortedHeroes).toBeDefined(); - }); - + }); + 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(); }); - - it('RubberMan should be in sorted heroes', function () { - sortedHero = element.all(by.xpath('//sorted-heroes/[text()="RubberMan" and position()=3]')).get(0); + + it('RubberMan should be in sorted heroes', function () { + let sortedHero = element.all(by.xpath('//sorted-heroes/[text()="RubberMan" and position()=3]')).get(0); expect(sortedHero).toBeDefined(); }); - + 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(); }); - - 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); + + it('should render Hero of the Month when DI deps are defined using provide()', function () { + let heroOfTheMonth = element.all(by.xpath('//h3[text()="Hero of the month"]')).get(0); expect(heroOfTheMonth).toBeDefined(); }); - - 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); + + it('should render Hero of the Month when DI deps are defined using provide object literal', function () { + let heroOfTheMonth = element.all(by.xpath('//h3[text()="Hero of the month 2"]')).get(0); expect(heroOfTheMonth).toBeDefined(); }); - - it('should render Hero Bios', function () { - var heroBios = element.all(by.xpath('//h3[text()="Hero Bios"]')).get(0); + + it('should render Hero Bios', function () { + let heroBios = element.all(by.xpath('//h3[text()="Hero Bios"]')).get(0); expect(heroBios).toBeDefined(); }); - - it('should render Magma\'s description in Hero Bios', function () { - var magmaText = element.all(by.xpath('//textarea[text()="Hero of all trades"]')).get(0); + + it('should render Magma\'s description in Hero Bios', function () { + let magmaText = element.all(by.xpath('//textarea[text()="Hero of all trades"]')).get(0); expect(magmaText).toBeDefined(); }); - - 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); + + it('should render Magma\'s phone in Hero Bios and Contacts', function () { + let magmaPhone = element.all(by.xpath('//div[text()="Phone #: 555-555-5555"]')).get(0); expect(magmaPhone).toBeDefined(); }); - - it('should render Hero-of-the-Month runner-ups when DI deps are defined using provide()', function () { - var runnersUp = element(by.id('rups1')).getText(); + + it('should render Hero-of-the-Month runner-ups when DI deps are defined using provide()', function () { + let runnersUp = element(by.id('rups1')).getText(); 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 () { - var runnersUp = element(by.id('rups2')).getText(); + + it('should render Hero-of-the-Month runner-ups when DI deps are defined using provide object literal', function () { + let runnersUp = element(by.id('rups2')).getText(); expect(runnersUp).toContain('RubberMan, Mr. Nice'); }); - - it('should render DateLogger log entry in Hero-of-the-Month', function () { - var logs = element.all(by.id('logs')).get(0).getText(); + + it('should render DateLogger log entry in Hero-of-the-Month', function () { + let logs = element.all(by.id('logs')).get(0).getText(); expect(logs).toContain('INFO: starting up at'); }); - + it('should highlight Hero Bios and Contacts container when mouseover', function () { - var target = element(by.css('div[myHighlight="yellow"]')) - var yellow = "rgba(255, 255, 0, 1)"; - + let target = element(by.css('div[myHighlight="yellow"]')) + let yellow = 'rgba(255, 255, 0, 1)'; + 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); }); describe('in Parent Finder', function () { - var cathy1 = element(by.css('alex cathy')); - var craig1 = element(by.css('alex craig')); - var carol1 = element(by.css('alex carol p')); - var carol2 = element(by.css('barry carol p')); - - it('"Cathy" should find "Alex" via the component class', function () { + let cathy1 = element(by.css('alex cathy')); + let craig1 = element(by.css('alex craig')); + let carol1 = element(by.css('alex carol p')); + let carol2 = element(by.css('barry carol p')); + + it('"Cathy" should find "Alex" via the component class', function () { expect(cathy1.getText()).toContain('Found Alex via the component'); }); - - it('"Craig" should not find "Alex" via the base class', function () { + + it('"Craig" should not find "Alex" via the base class', function () { expect(craig1.getText()).toContain('Did not find Alex via the base'); }); - - it('"Carol" within "Alex" should have "Alex" parent', function () { + + it('"Carol" within "Alex" should have "Alex" parent', function () { expect(carol1.getText()).toContain('Alex'); }); - - it('"Carol" within "Barry" should have "Barry" parent', function () { + + it('"Carol" within "Barry" should have "Barry" parent', function () { expect(carol2.getText()).toContain('Barry'); }); - }) + }); }); diff --git a/public/docs/_examples/cb-dynamic-form/e2e-spec.js b/public/docs/_examples/cb-dynamic-form/e2e-spec.ts similarity index 65% rename from public/docs/_examples/cb-dynamic-form/e2e-spec.js rename to public/docs/_examples/cb-dynamic-form/e2e-spec.ts index 9254c86717..d526626b24 100644 --- a/public/docs/_examples/cb-dynamic-form/e2e-spec.js +++ b/public/docs/_examples/cb-dynamic-form/e2e-spec.ts @@ -1,3 +1,5 @@ +/// +/* tslint:disable:quotemark */ describe('Dynamic Form', function () { beforeAll(function () { @@ -5,17 +7,17 @@ describe('Dynamic 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'); - - var emailElement = element.all(by.css('input[id=emailAddress]')).get(0); - var email = 'test@test.com'; + + let emailElement = element.all(by.css('input[id=emailAddress]')).get(0); + let email = 'test@test.com'; emailElement.sendKeys(email); - expect(emailElement.getAttribute('value')).toEqual(email); - + expect(emailElement.getAttribute('value')).toEqual(email); + 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(){ expect(element(by.xpath("//strong[contains(text(),'Saved the following values')]")).isPresent()).toBe(true); }); diff --git a/public/docs/_examples/cb-set-document-title/e2e-spec.js b/public/docs/_examples/cb-set-document-title/e2e-spec.ts similarity index 88% rename from public/docs/_examples/cb-set-document-title/e2e-spec.js rename to public/docs/_examples/cb-set-document-title/e2e-spec.ts index 52516f4d4b..9029c164e0 100644 --- a/public/docs/_examples/cb-set-document-title/e2e-spec.js +++ b/public/docs/_examples/cb-set-document-title/e2e-spec.ts @@ -1,3 +1,4 @@ +/// // gulp run-e2e-tests --filter=cb-set-document-title describe('Set Document Title', function () { @@ -7,7 +8,7 @@ describe('Set Document Title', function () { it('should set the document title', function () { - var titles = [ + let titles = [ 'Good morning!', 'Good afternoon!', 'Good evening!' diff --git a/public/docs/_examples/cb-ts-to-js/e2e-spec.js b/public/docs/_examples/cb-ts-to-js/e2e-spec.ts similarity index 73% rename from public/docs/_examples/cb-ts-to-js/e2e-spec.js rename to public/docs/_examples/cb-ts-to-js/e2e-spec.ts index 27b332e99e..dbb308fbf7 100644 --- a/public/docs/_examples/cb-ts-to-js/e2e-spec.js +++ b/public/docs/_examples/cb-ts-to-js/e2e-spec.ts @@ -1,3 +1,4 @@ +/// describe('TypeScript to Javascript tests', function () { beforeAll(function () { @@ -21,9 +22,9 @@ describe('TypeScript to Javascript tests', function () { }); it('should support optional, attribute, and query injections', function () { - var app = element(by.css('hero-di-inject-additional')); - var h1 = app.element(by.css('h1')); - var okMsg = app.element(by.css('.ok-msg')); + let app = element(by.css('hero-di-inject-additional')); + let h1 = app.element(by.css('h1')); + let okMsg = app.element(by.css('.ok-msg')); expect(h1.getText()).toBe('Tour of Heroes'); 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 () { - var app = element(by.css('hero-io')); - var confirmComponent = app.element(by.css('my-confirm')); + let app = element(by.css('hero-io')); + let confirmComponent = app.element(by.css('my-confirm')); confirmComponent.element(by.buttonText('OK')).click(); 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() { - var app = element(by.css('heroes-bindings')); - var h1 = app.element(by.css('h1')); + let app = element(by.css('heroes-bindings')); + let h1 = app.element(by.css('h1')); expect(app.getAttribute('class')).toBe('heading'); expect(app.getAttribute('title')).toBe('Tooltip content'); @@ -52,21 +53,21 @@ describe('TypeScript to Javascript tests', function () { expect(h1.getAttribute('class')).toBe('active'); h1.click(); - browser.actions().doubleClick(h1).perform(); + browser.actions().doubleClick(h1 as any as webdriver.WebElement).perform(); expect(h1.getAttribute('class')).toBe('active'); }); it('should support content and view queries', function() { - var app = element(by.css('heroes-queries')); - var windstorm = app.element(by.css('hero:first-child')); + let app = element(by.css('heroes-queries')); + let windstorm = app.element(by.css('hero:first-child')); app.element(by.buttonText('Activate')).click(); expect(windstorm.element(by.css('h2')).getAttribute('class')).toBe('active'); expect(windstorm.element(by.css('active-label')).getText()).toBe('Active'); }); - function testTag(selector, expectedText) { - var component = element(by.css(selector)); + function testTag(selector: string, expectedText: string) { + let component = element(by.css(selector)); expect(component.getText()).toBe(expectedText); } diff --git a/public/docs/_examples/component-styles/e2e-spec.js b/public/docs/_examples/component-styles/e2e-spec.ts similarity index 69% rename from public/docs/_examples/component-styles/e2e-spec.js rename to public/docs/_examples/component-styles/e2e-spec.ts index e667260f99..dac3cd55a2 100644 --- a/public/docs/_examples/component-styles/e2e-spec.js +++ b/public/docs/_examples/component-styles/e2e-spec.ts @@ -1,3 +1,4 @@ +/// describe('Component Style Tests', function () { beforeAll(function () { @@ -5,8 +6,8 @@ describe('Component Style Tests', function () { }); it('scopes component styles to component view', function() { - var componentH1 = element(by.css('hero-app > h1')); - var externalH1 = element(by.css('body > h1')); + let componentH1 = element(by.css('hero-app > h1')); + let externalH1 = element(by.css('body > h1')); expect(componentH1.getCssValue('fontWeight')).toEqual('normal'); expect(externalH1.getCssValue('fontWeight')).not.toEqual('normal'); @@ -14,55 +15,55 @@ describe('Component Style Tests', 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'); }); 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(); expect(host.getCssValue('borderWidth')).toEqual('3px'); }); 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 }); it('styles both view and content children with /deep/', function() { - var viewH3 = element(by.css('hero-team h3')); - var contentH3 = element(by.css('hero-controls h3')); + let viewH3 = element(by.css('hero-team h3')); + let contentH3 = element(by.css('hero-controls h3')); expect(viewH3.getCssValue('fontStyle')).toEqual('italic'); expect(contentH3.getCssValue('fontStyle')).toEqual('italic'); }); 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'); }); it('processes template inline styles', function() { - var button = element(by.css('hero-controls button')); - var externalButton = element(by.css('body > button')); + let button = element(by.css('hero-controls button')); + let externalButton = element(by.css('body > button')); expect(button.getCssValue('backgroundColor')).toEqual('rgba(255, 255, 255, 1)'); // #ffffff expect(externalButton.getCssValue('backgroundColor')).not.toEqual('rgba(255, 255, 255, 1)'); }); it('processes template s', function() { - var li = element(by.css('hero-team li:first-child')); - var externalLi = element(by.css('body > ul li')); + let li = element(by.css('hero-team li:first-child')); + let externalLi = element(by.css('body > ul li')); expect(li.getCssValue('listStyleType')).toEqual('square'); expect(externalLi.getCssValue('listStyleType')).not.toEqual('square'); }); 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 }); diff --git a/public/docs/_examples/dependency-injection/e2e-spec.js b/public/docs/_examples/dependency-injection/e2e-spec.ts similarity index 89% rename from public/docs/_examples/dependency-injection/e2e-spec.js rename to public/docs/_examples/dependency-injection/e2e-spec.ts index effdc1111f..5656bddc6d 100644 --- a/public/docs/_examples/dependency-injection/e2e-spec.js +++ b/public/docs/_examples/dependency-injection/e2e-spec.ts @@ -1,8 +1,9 @@ - +/// describe('Dependency Injection Tests', function () { - var expectedMsg; + let expectedMsg: string; + let expectedMsgRx: RegExp; beforeAll(function () { browser.get(''); @@ -66,8 +67,8 @@ describe('Dependency Injection Tests', function () { describe('Tests:', function() { it('Tests display as expected', function () { - expectedMsg = /Tests passed/; - expect(element(by.css('#tests')).getText()).toMatch(expectedMsg); + expectedMsgRx = /Tests passed/; + expect(element(by.css('#tests')).getText()).toMatch(expectedMsgRx); }); }); @@ -88,7 +89,7 @@ describe('Dependency Injection Tests', function () { expectedMsg = 'Hello from logger provided with useClass'; expect(element(by.css('#p3')).getText()).toEqual(expectedMsg); }); - + it('P3a (provide) displays as expected', function () { expectedMsg = 'Hello from logger provided with {provide: Logger, useClass: Logger}'; expect(element(by.css('#p3a')).getText()).toEqual(expectedMsg); @@ -147,22 +148,22 @@ describe('Dependency Injection Tests', function () { describe('User/Heroes:', function() { it('User is Bob - unauthorized', function () { - expectedMsg = /Bob, is not authorized/; - expect(element(by.css('#user')).getText()).toMatch(expectedMsg); + expectedMsgRx = /Bob, is not authorized/; + expect(element(by.css('#user')).getText()).toMatch(expectedMsgRx); }); it('should have button', function () { - expect(element.all(by.cssContainingText('button','Next User')) - .get(0).isDisplayed()).toBe(true, "'Next User' button should be displayed"); + expect(element.all(by.cssContainingText('button', 'Next User')) + .get(0).isDisplayed()).toBe(true, '\'Next User\' button should be displayed'); }); 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); }); 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); heroes.filter(function(elem, index){ @@ -170,7 +171,7 @@ describe('Dependency Injection Tests', function () { return /secret/.test(text); }); }).then(function(filteredElements) { - //console.log("******Secret heroes count: "+filteredElements.length); + // console.log("******Secret heroes count: "+filteredElements.length); expect(filteredElements.length).toEqual(0); }); }); @@ -182,22 +183,22 @@ describe('Dependency Injection Tests', function () { describe('after button click', function() { 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); }); it('User is Alice - authorized', function () { - expectedMsg = /Alice, is authorized/; - expect(element(by.css('#user')).getText()).toMatch(expectedMsg); + expectedMsgRx = /Alice, is authorized/; + expect(element(by.css('#user')).getText()).toMatch(expectedMsgRx); }); 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); }); 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); heroes.filter(function(elem, index){ @@ -205,7 +206,7 @@ describe('Dependency Injection Tests', function () { return /secret/.test(text); }); }).then(function(filteredElements) { - //console.log("******Secret heroes count: "+filteredElements.length); + // console.log("******Secret heroes count: "+filteredElements.length); expect(filteredElements.length).toBeGreaterThan(0); }); }); diff --git a/public/docs/_examples/displaying-data/e2e-spec.js b/public/docs/_examples/displaying-data/e2e-spec.ts similarity index 80% rename from public/docs/_examples/displaying-data/e2e-spec.js rename to public/docs/_examples/displaying-data/e2e-spec.ts index 0f01977bb1..9e4e4a9df1 100644 --- a/public/docs/_examples/displaying-data/e2e-spec.js +++ b/public/docs/_examples/displaying-data/e2e-spec.ts @@ -1,6 +1,7 @@ +/// describe('Displaying Data Tests', function () { - var _title = "Tour of Heroes"; - var _defaultHero = 'Windstorm' + let _title = 'Tour of Heroes'; + let _defaultHero = 'Windstorm'; beforeAll(function () { browser.get(''); @@ -15,7 +16,7 @@ describe('Displaying Data Tests', 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'); }); diff --git a/public/docs/_examples/forms/e2e-spec.js b/public/docs/_examples/forms/e2e-spec.ts similarity index 69% rename from public/docs/_examples/forms/e2e-spec.js rename to public/docs/_examples/forms/e2e-spec.ts index a90138b744..5e68d6e657 100644 --- a/public/docs/_examples/forms/e2e-spec.js +++ b/public/docs/_examples/forms/e2e-spec.ts @@ -1,3 +1,4 @@ +/// describeIf(browser.appIsTs || browser.appIsJs, 'Forms Tests', function () { beforeEach(function () { @@ -10,51 +11,51 @@ describeIf(browser.appIsTs || browser.appIsJs, 'Forms Tests', 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); }); 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); - 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() { expect(ele.isDisplayed()).toBe(false); }); }); 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() { expect(element(by.css('h2')).getText()).toContain('You submitted the following'); }); }); 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); - 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() { expect(alterEgoEle.isDisplayed()).toBe(false); - }) + }); }); it('should reflect submitted data after submit', function () { - var test = 'testing 1 2 3'; - var newValue; - var alterEgoEle = element.all(by.css('input[ngcontrol=alterEgo]')).get(0); + let test = 'testing 1 2 3'; + let newValue: string; + let alterEgoEle = element.all(by.css('input[ngcontrol=alterEgo]')).get(0); alterEgoEle.getAttribute('value').then(function(value) { // alterEgoEle.sendKeys(test); sendKeys(alterEgoEle, test); newValue = value + test; expect(alterEgoEle.getAttribute('value')).toEqual(newValue); }).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(); }).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'); - 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); }); }); diff --git a/public/docs/_examples/hierarchical-dependency-injection/e2e-spec.js b/public/docs/_examples/hierarchical-dependency-injection/e2e-spec.ts similarity index 79% rename from public/docs/_examples/hierarchical-dependency-injection/e2e-spec.js rename to public/docs/_examples/hierarchical-dependency-injection/e2e-spec.ts index a642a74825..57f782de49 100644 --- a/public/docs/_examples/hierarchical-dependency-injection/e2e-spec.js +++ b/public/docs/_examples/hierarchical-dependency-injection/e2e-spec.ts @@ -1,3 +1,4 @@ +/// describe('Hierarchical dependency injection', function () { beforeEach(function () { @@ -14,7 +15,7 @@ describe('Hierarchical dependency injection', 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() { expect(editButtonEle.isDisplayed()).toBe(false, "edit button should be hidden after selection"); }) @@ -29,19 +30,19 @@ describe('Hierarchical dependency injection', function () { }); function testEdit(shouldSave) { - var inputEle; + let inputEle; // 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 - var heroNameEle = heroEle.all(by.css('hero-card span')).get(1); - var editButtonEle = heroEle.element(by.cssContainingText('button','edit')); + let heroNameEle = heroEle.all(by.css('hero-card span')).get(1); + let editButtonEle = heroEle.element(by.cssContainingText('button','edit')); editButtonEle.click().then(function() { inputEle = heroEle.element(by.css('hero-editor input')); // return inputEle.sendKeys("foo"); return sendKeys(inputEle, "foo"); }).then(function() { buttonName = shouldSave ? 'save' : 'cancel'; - var buttonEle = heroEle.element(by.cssContainingText('button', buttonName)); + let buttonEle = heroEle.element(by.cssContainingText('button', buttonName)); return buttonEle.click(); }).then(function() { if (shouldSave) { diff --git a/public/docs/_examples/homepage-hello-world/e2e-spec.js b/public/docs/_examples/homepage-hello-world/e2e-spec.ts similarity index 77% rename from public/docs/_examples/homepage-hello-world/e2e-spec.js rename to public/docs/_examples/homepage-hello-world/e2e-spec.ts index 4cccdfa4e3..fd18afadc5 100644 --- a/public/docs/_examples/homepage-hello-world/e2e-spec.js +++ b/public/docs/_examples/homepage-hello-world/e2e-spec.ts @@ -1,4 +1,4 @@ - +/// describe('Homepage Hello World', function () { beforeAll(function () { @@ -6,15 +6,15 @@ describe('Homepage Hello World', function () { }); // Does it even launch? - var expectedLabel = 'Name:'; + let expectedLabel = 'Name:'; it('should display the label: ' + expectedLabel, function () { expect(element(by.css('label')).getText()).toEqual(expectedLabel); }); it('should display entered name', function () { - var testName = 'Bobby Joe'; - var newValue; - var nameEle = element.all(by.css('input')).get(0); + let testName = 'Bobby Joe'; + let newValue; + let nameEle = element.all(by.css('input')).get(0); nameEle.getAttribute('value').then(function(value) { // nameEle.sendKeys(testName); // should work but doesn't sendKeys(nameEle, testName); // utility that does work @@ -22,7 +22,7 @@ describe('Homepage Hello World', function () { expect(nameEle.getAttribute('value')).toEqual(newValue); }).then(function() { // 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 + '!'); }); }); diff --git a/public/docs/_examples/homepage-tabs/e2e-spec.js b/public/docs/_examples/homepage-tabs/e2e-spec.ts similarity index 75% rename from public/docs/_examples/homepage-tabs/e2e-spec.js rename to public/docs/_examples/homepage-tabs/e2e-spec.ts index 12f4f4bf53..a481b5c74c 100644 --- a/public/docs/_examples/homepage-tabs/e2e-spec.js +++ b/public/docs/_examples/homepage-tabs/e2e-spec.ts @@ -1,4 +1,4 @@ - +/// describe('Homepage Tabs', function () { beforeAll(function () { @@ -6,7 +6,7 @@ describe('Homepage Tabs', function () { }); // Does it even launch? - var expectedAppTitle = 'Tabs Demo'; + let expectedAppTitle = 'Tabs Demo'; it('should display app title: ' + expectedAppTitle, function () { expect(element(by.css('h4')).getText()).toEqual(expectedAppTitle); }); diff --git a/public/docs/_examples/homepage-todo/e2e-spec.js b/public/docs/_examples/homepage-todo/e2e-spec.ts similarity index 76% rename from public/docs/_examples/homepage-todo/e2e-spec.js rename to public/docs/_examples/homepage-todo/e2e-spec.ts index 4bc9b5f6a6..4776f653a8 100644 --- a/public/docs/_examples/homepage-todo/e2e-spec.js +++ b/public/docs/_examples/homepage-todo/e2e-spec.ts @@ -1,4 +1,4 @@ - +/// describe('Homepage Todo', function () { beforeAll(function () { @@ -6,7 +6,7 @@ describe('Homepage Todo', function () { }); // Does it even launch? - var expectedAppTitle = 'Todo'; + let expectedAppTitle = 'Todo'; it('should display app title: ' + expectedAppTitle, function () { expect(element(by.css('h2')).getText()).toEqual(expectedAppTitle); }); diff --git a/public/docs/_examples/lifecycle-hooks/e2e-spec.js b/public/docs/_examples/lifecycle-hooks/e2e-spec.ts similarity index 76% rename from public/docs/_examples/lifecycle-hooks/e2e-spec.js rename to public/docs/_examples/lifecycle-hooks/e2e-spec.ts index 253efba6b5..a1e9a098a1 100644 --- a/public/docs/_examples/lifecycle-hooks/e2e-spec.js +++ b/public/docs/_examples/lifecycle-hooks/e2e-spec.ts @@ -1,3 +1,4 @@ +/// describe('Lifecycle hooks', function () { beforeAll(function () { @@ -9,10 +10,10 @@ describe('Lifecycle hooks', 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"); - var 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 pabButton = element.all(by.css('peek-a-boo-parent button')).get(0); + let updateHeroButton = element.all(by.css('peek-a-boo-parent button')).get(1); expect(pabButton.getText()).toContain('Create Peek'); pabButton.click().then(function () { expect(pabButton.getText()).toContain('Destroy Peek'); @@ -30,12 +31,12 @@ describe('Lifecycle hooks', function () { }); it('should support OnChanges hook', function () { - var onChangesViewEle = element.all(by.css('on-changes div')).get(0); - var inputEles = element.all(by.css('on-changes-parent input')); - var heroNameInputEle = inputEles.get(1); - var powerInputEle = inputEles.get(0); - var titleEle = onChangesViewEle.element(by.css('p')); - var changeLogEles = onChangesViewEle.all(by.css('div')); + let onChangesViewEle = element.all(by.css('on-changes div')).get(0); + let inputEles = element.all(by.css('on-changes-parent input')); + let heroNameInputEle = inputEles.get(1); + let powerInputEle = inputEles.get(0); + let titleEle = onChangesViewEle.element(by.css('p')); + let changeLogEles = onChangesViewEle.all(by.css('div')); expect(titleEle.getText()).toContain('Windstorm can sing'); expect(changeLogEles.count()).toEqual(2, "should start with 2 messages"); @@ -54,13 +55,13 @@ describe('Lifecycle hooks', function () { }); it('should support DoCheck hook', function () { - var doCheckViewEle = element.all(by.css('do-check div')).get(0); - var inputEles = element.all(by.css('do-check-parent input')); - var heroNameInputEle = inputEles.get(1); - var powerInputEle = inputEles.get(0); - var titleEle = doCheckViewEle.element(by.css('p')); - var changeLogEles = doCheckViewEle.all(by.css('div')); - var logCount; + let doCheckViewEle = element.all(by.css('do-check div')).get(0); + let inputEles = element.all(by.css('do-check-parent input')); + let heroNameInputEle = inputEles.get(1); + let powerInputEle = inputEles.get(0); + let titleEle = doCheckViewEle.element(by.css('p')); + let changeLogEles = doCheckViewEle.all(by.css('div')); + let logCount; expect(titleEle.getText()).toContain('Windstorm can sing'); changeLogEles.count().then(function(count) { @@ -86,12 +87,12 @@ describe('Lifecycle hooks', function () { }); it('should support AfterView hooks', function () { - var parentEle = element(by.tagName('after-view-parent')); - var buttonEle = parentEle.element(by.tagName('button')); // Reset - var commentEle = parentEle.element(by.className('comment')); - var logEles = parentEle.all(by.css('h4 ~ div')); - var childViewInputEle = parentEle.element(by.css('my-child input')); - var logCount; + let parentEle = element(by.tagName('after-view-parent')); + let buttonEle = parentEle.element(by.tagName('button')); // Reset + let commentEle = parentEle.element(by.className('comment')); + let logEles = parentEle.all(by.css('h4 ~ div')); + let childViewInputEle = parentEle.element(by.css('my-child input')); + let logCount; expect(childViewInputEle.getAttribute('value')).toContain('Magneta'); 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 () { - var parentEle = element(by.tagName('after-content-parent')); - var buttonEle = parentEle.element(by.tagName('button')); // Reset - var commentEle = parentEle.element(by.className('comment')); - var logEles = parentEle.all(by.css('h4 ~ div')); - var childViewInputEle = parentEle.element(by.css('my-child input')); - var logCount; + let parentEle = element(by.tagName('after-content-parent')); + let buttonEle = parentEle.element(by.tagName('button')); // Reset + let commentEle = parentEle.element(by.className('comment')); + let logEles = parentEle.all(by.css('h4 ~ div')); + let childViewInputEle = parentEle.element(by.css('my-child input')); + let logCount; expect(childViewInputEle.getAttribute('value')).toContain('Magneta'); 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 () { - var inputEle = element(by.css('spy-parent input')); - var addHeroButtonEle = element(by.cssContainingText('spy-parent button','Add Hero')); - var resetHeroesButtonEle = element(by.cssContainingText('spy-parent button','Reset Heroes')); - var heroEles = element.all(by.css('spy-parent div[mySpy')); - var logEles = element.all(by.css('spy-parent h4 ~ div')); + let inputEle = element(by.css('spy-parent input')); + let addHeroButtonEle = element(by.cssContainingText('spy-parent button','Add Hero')); + let resetHeroesButtonEle = element(by.cssContainingText('spy-parent button','Reset Heroes')); + let heroEles = element.all(by.css('spy-parent div[mySpy')); + let logEles = element.all(by.css('spy-parent h4 ~ div')); expect(heroEles.count()).toBe(2, 'should have two heroes displayed'); expect(logEles.count()).toBe(2, 'should have two log entries'); sendKeys(inputEle, "-test-").then(function() { @@ -164,10 +165,10 @@ describe('Lifecycle hooks', function () { }); it('should support "spy counter"', function () { - var updateCounterButtonEle = element(by.cssContainingText('counter-parent button','Update')); - var resetCounterButtonEle = element(by.cssContainingText('counter-parent button','Reset')); - var textEle = element(by.css('counter-parent my-counter > div')); - var logEles = element.all(by.css('counter-parent h4 ~ div')); + let updateCounterButtonEle = element(by.cssContainingText('counter-parent button','Update')); + let resetCounterButtonEle = element(by.cssContainingText('counter-parent button','Reset')); + let textEle = element(by.css('counter-parent my-counter > div')); + let logEles = element.all(by.css('counter-parent h4 ~ div')); expect(textEle.getText()).toContain('Counter = 0'); expect(logEles.count()).toBe(2, 'should start with two log entries'); updateCounterButtonEle.click().then(function() { diff --git a/public/docs/_examples/package.json b/public/docs/_examples/package.json index 7e625af6e6..a4cbe17705 100644 --- a/public/docs/_examples/package.json +++ b/public/docs/_examples/package.json @@ -69,6 +69,7 @@ "rimraf": "^2.5.2", "style-loader": "^0.13.1", "ts-loader": "^0.8.2", + "ts-node": "^0.7.3", "typescript": "^1.8.10", "typings": "^1.0.4", "webpack": "^1.13.0", diff --git a/public/docs/_examples/pipes/e2e-spec.js b/public/docs/_examples/pipes/e2e-spec.ts similarity index 78% rename from public/docs/_examples/pipes/e2e-spec.js rename to public/docs/_examples/pipes/e2e-spec.ts index ae8327dd0d..560791671b 100644 --- a/public/docs/_examples/pipes/e2e-spec.js +++ b/public/docs/_examples/pipes/e2e-spec.ts @@ -1,3 +1,4 @@ +/// describe('Pipes', function () { beforeAll(function () { @@ -23,9 +24,9 @@ describe('Pipes', 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"); - 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); buttonEle.click().then(function() { 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 () { - 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.get(0).getText()).toContain('APR 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 () { - var ele = element(by.css('power-booster p')); + let ele = element(by.css('power-booster p')); expect(ele.getText()).toContain('Super power boost: 1024'); }); it('should be able to use the exponential calculator', function () { - var eles = element.all(by.css('power-boost-calculator input')); - var baseInputEle = eles.get(0); - var factorInputEle = eles.get(1); - var outputEle = element(by.css('power-boost-calculator p')); + let eles = element.all(by.css('power-boost-calculator input')); + let baseInputEle = eles.get(0); + let factorInputEle = eles.get(1); + let outputEle = element(by.css('power-boost-calculator p')); baseInputEle.clear().then(function() { return sendKeys(baseInputEle, "7"); }).then(function() { @@ -63,11 +64,11 @@ describe('Pipes', function () { it('should support flying heroes (pure) ', function () { - var nameEle = element(by.css('flying-heroes input[type="text"]')); - var canFlyCheckEle = element(by.css('flying-heroes #can-fly')); - var mutateCheckEle = element(by.css('flying-heroes #mutate')); - var resetEle = element(by.css('flying-heroes button')); - var flyingHeroesEle = element.all(by.css('flying-heroes #flyers div')); + let nameEle = element(by.css('flying-heroes input[type="text"]')); + let canFlyCheckEle = element(by.css('flying-heroes #can-fly')); + let mutateCheckEle = element(by.css('flying-heroes #mutate')); + let resetEle = element(by.css('flying-heroes button')); + let flyingHeroesEle = element.all(by.css('flying-heroes #flyers div')); expect(canFlyCheckEle.getAttribute('checked')).toEqual('true', 'should default to "can fly"'); 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 () { - var nameEle = element(by.css('flying-heroes-impure input[type="text"]')); - var canFlyCheckEle = element(by.css('flying-heroes-impure #can-fly')); - var mutateCheckEle = element(by.css('flying-heroes-impure #mutate')); - var resetEle = element(by.css('flying-heroes-impure button')); - var flyingHeroesEle = element.all(by.css('flying-heroes-impure #flyers div')); + let nameEle = element(by.css('flying-heroes-impure input[type="text"]')); + let canFlyCheckEle = element(by.css('flying-heroes-impure #can-fly')); + let mutateCheckEle = element(by.css('flying-heroes-impure #mutate')); + let resetEle = element(by.css('flying-heroes-impure button')); + let flyingHeroesEle = element.all(by.css('flying-heroes-impure #flyers div')); expect(canFlyCheckEle.getAttribute('checked')).toEqual('true', 'should default to "can fly"'); expect(mutateCheckEle.getAttribute('checked')).toEqual('true', 'should default to mutating array'); diff --git a/public/docs/_examples/quickstart/e2e-spec.js b/public/docs/_examples/quickstart/e2e-spec.ts similarity index 71% rename from public/docs/_examples/quickstart/e2e-spec.js rename to public/docs/_examples/quickstart/e2e-spec.ts index 52bb8ec7af..53f587645e 100644 --- a/public/docs/_examples/quickstart/e2e-spec.js +++ b/public/docs/_examples/quickstart/e2e-spec.ts @@ -1,7 +1,7 @@ - +/// describe('QuickStart E2E Tests', function () { - var expectedMsg = 'My First Angular 2 App'; + let expectedMsg = 'My First Angular 2 App'; beforeEach(function () { diff --git a/public/docs/_examples/router-deprecated/e2e-spec.js b/public/docs/_examples/router-deprecated/e2e-spec.js index 4e3018b5c2..1cb536b53e 100644 --- a/public/docs/_examples/router-deprecated/e2e-spec.js +++ b/public/docs/_examples/router-deprecated/e2e-spec.js @@ -1,123 +1,111 @@ +/// 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')), - + 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 () { - var 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 () { - var 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 () { - var 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 see the start screen', function () { + var 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 toggle the views', function () { - var 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 see crises center items', function () { + var page = getPageStruct(); + expect(page.crisisList.count()).toBe(4, "should be 4 crisis center entries at start"); }); - }); - - 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 () { - var page = getPageStruct(); - var 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); - var inputEle = page.heroDetail.element(by.css('input')); - return sendKeys(inputEle, '-foo'); - }).then(function() { - expect(page.heroDetailTitle.getText()).toContain(heroText + '-foo'); - var buttonEle = page.heroDetail.element(by.css('button')); - return buttonEle.click(); - }).then(function() { - expect(heroEle.getText()).toContain(heroText + '-foo'); - }) - }); - - function crisisCenterEdit(index, shouldSave) { - var page = getPageStruct(); - var 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); - var inputEle = page.crisisDetail.element(by.css('input')); - return sendKeys(inputEle, '-foo'); - }).then(function () { - expect(page.crisisDetailTitle.getText()).toContain(crisisText + '-foo'); - var 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'); - } + it('should be able to see hero items', function () { + var 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 () { + var 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 () { + var page = getPageStruct(); + var 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); + var inputEle = page.heroDetail.element(by.css('input')); + return sendKeys(inputEle, '-foo'); + }).then(function () { + expect(page.heroDetailTitle.getText()).toContain(heroText + '-foo'); + var buttonEle = page.heroDetail.element(by.css('button')); + return buttonEle.click(); + }).then(function () { + expect(heroEle.getText()).toContain(heroText + '-foo'); + }); + }); + function crisisCenterEdit(index, shouldSave) { + var page = getPageStruct(); + var 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); + var inputEle = page.crisisDetail.element(by.css('input')); + return sendKeys(inputEle, '-foo'); + }).then(function () { + expect(page.crisisDetailTitle.getText()).toContain(crisisText + '-foo'); + var 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'); + } + }); + } }); +//# sourceMappingURL=e2e-spec.js.map \ No newline at end of file diff --git a/public/docs/_examples/router-deprecated/e2e-spec.ts b/public/docs/_examples/router-deprecated/e2e-spec.ts new file mode 100644 index 0000000000..241074ec8f --- /dev/null +++ b/public/docs/_examples/router-deprecated/e2e-spec.ts @@ -0,0 +1,124 @@ +/// +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'); + } + }); + } + +}); diff --git a/public/docs/_examples/router/e2e-spec.js b/public/docs/_examples/router/e2e-spec.ts similarity index 88% rename from public/docs/_examples/router/e2e-spec.js rename to public/docs/_examples/router/e2e-spec.ts index 73bf120d0c..e0749f1d0f 100644 --- a/public/docs/_examples/router/e2e-spec.js +++ b/public/docs/_examples/router/e2e-spec.ts @@ -1,3 +1,4 @@ +/// describe('Router', function () { beforeAll(function () { @@ -26,19 +27,19 @@ describe('Router', 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.crisisHref.getText()).toEqual("Crisis Center"); expect(page.heroesHref.getText()).toEqual("Heroes"); }); 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"); }); it('should be able to see hero items', function () { - var page = getPageStruct(); + let page = getPageStruct(); page.heroesHref.click().then(function() { expect(page.routerTitle.getText()).toContain('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 () { - var page = getPageStruct(); + let page = getPageStruct(); page.crisisHref.click().then(function() { expect(page.crisisList.count()).toBe(4, "should be 4 crisis center entries"); 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 () { - var page = getPageStruct(); - var heroEle, heroText; + let page = getPageStruct(); + let heroEle, heroText; page.heroesHref.click().then(function() { heroEle = page.heroesList.get(4); 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.heroDetail.isPresent()).toBe(true, 'should be able to see crisis detail'); 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'); }).then(function() { 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(); }).then(function() { expect(heroEle.getText()).toContain(heroText + '-foo'); @@ -90,8 +91,8 @@ describe('Router', function () { }); function crisisCenterEdit(index, shouldSave) { - var page = getPageStruct(); - var crisisEle, crisisText; + let page = getPageStruct(); + let crisisEle, crisisText; page.crisisHref.click() .then(function () { 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.crisisDetail.isPresent()).toBe(true, 'should be able to see crisis detail'); 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'); }).then(function () { 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(); }).then(function () { if (shouldSave) { diff --git a/public/docs/_examples/server-communication/e2e-spec.js b/public/docs/_examples/server-communication/e2e-spec.ts similarity index 80% rename from public/docs/_examples/server-communication/e2e-spec.js rename to public/docs/_examples/server-communication/e2e-spec.ts index 98a3f1e03a..ef1dc3e304 100644 --- a/public/docs/_examples/server-communication/e2e-spec.js +++ b/public/docs/_examples/server-communication/e2e-spec.ts @@ -1,3 +1,4 @@ +/// describe('Server Communication', function () { beforeAll(function () { @@ -6,14 +7,14 @@ describe('Server Communication', function () { describe('Tour of Heroes (Observable)', function () { - var initialHeroCount = 4; - var newHeroName = 'Mr. IQ'; - var heroCountAfterAdd = 5; + let initialHeroCount = 4; + let newHeroName = 'Mr. IQ'; + let heroCountAfterAdd = 5; - var heroListComp = element(by.tagName('hero-list')); - var addButton = heroListComp.element(by.tagName('button')); - var heroTags = heroListComp.all(by.tagName('li')); - var heroNameInput = heroListComp.element(by.tagName('input')); + let heroListComp = element(by.tagName('hero-list')); + let addButton = heroListComp.element(by.tagName('button')); + let heroTags = heroListComp.all(by.tagName('li')); + let heroNameInput = heroListComp.element(by.tagName('input')); it('should exist', function() { expect(heroListComp).toBeDefined(' must exist'); @@ -36,7 +37,7 @@ describe('Server Communication', function () { sendKeys(heroNameInput, newHeroName); addButton.click().then(function() { 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'); }); }) @@ -45,9 +46,9 @@ describe('Server Communication', function () { describe('Wikipedia Demo', 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(' 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'); }); @@ -77,9 +78,9 @@ describe('Server Communication', function () { describe('Smarter Wikipedia Demo', 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(' 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'); }); @@ -111,14 +112,14 @@ describe('Server Communication', function () { }); function testForResult(componentTagName, keyPressed, hasListBeforeSearch, done) { - var searchWait = 1000; // Wait for wikipedia but not so long that tests timeout - var wikiComponent = element(by.tagName(componentTagName)); + let searchWait = 1000; // Wait for wikipedia but not so long that tests timeout + let wikiComponent = element(by.tagName(componentTagName)); expect(wikiComponent).toBeDefined('<' + componentTagName + '> must exist'); - var searchBox = wikiComponent.element(by.tagName('input')); + let searchBox = wikiComponent.element(by.tagName('input')); expect(searchBox).toBeDefined(' for search must exist'); searchBox.sendKeys(keyPressed).then(function () { - var resultList = wikiComponent.all(by.tagName('li')); + let resultList = wikiComponent.all(by.tagName('li')); if (hasListBeforeSearch) { expect(resultList.count()).toBeGreaterThan(0, 'result list should not be empty before search'); diff --git a/public/docs/_examples/structural-directives/e2e-spec.js b/public/docs/_examples/structural-directives/e2e-spec.ts similarity index 76% rename from public/docs/_examples/structural-directives/e2e-spec.js rename to public/docs/_examples/structural-directives/e2e-spec.ts index a2ed0455b9..032b923f60 100644 --- a/public/docs/_examples/structural-directives/e2e-spec.js +++ b/public/docs/_examples/structural-directives/e2e-spec.ts @@ -1,3 +1,4 @@ +/// describe('Structural Directives', function () { // 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 () { - 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(1).getText()).toEqual('Mr. Nice'); expect(allDivEles.get(4).getText()).toEqual('Ready'); }); it('should be able to toggle ngIf with a button', function () { - var setConditionButtonEle = element.all(by.css('button')).get(0); - var conditionTrueEles = element.all(by.cssContainingText('p', 'condition is true')); - var conditionFalseEles = element.all(by.cssContainingText('p', 'condition is false')); + let setConditionButtonEle = element.all(by.css('button')).get(0); + let conditionTrueEles = element.all(by.cssContainingText('p', 'condition is true')); + let conditionFalseEles = element.all(by.cssContainingText('p', 'condition is false')); expect(conditionTrueEles.count()).toBe(2, 'should be two condition true elements'); expect(conditionFalseEles.count()).toBe(0, 'should be no condition false elements'); setConditionButtonEle.click().then(function() { @@ -25,13 +26,13 @@ describe('Structural Directives', function () { }); it('should be able to compare use of ngIf with changing css visibility', function () { - var setConditionButtonEle = element.all(by.css('button')).get(0); - var ngIfButtonEle = element(by.cssContainingText('button', 'if | !if')); - var ngIfParentEle = ngIfButtonEle.element(by.xpath('..')); - var ngIfSiblingEle = ngIfParentEle.element(by.css('heavy-loader')); - var cssButtonEle = element(by.cssContainingText('button', 'show | hide')); - var cssSiblingEle = cssButtonEle.element(by.xpath('..')).element(by.css('heavy-loader')); - var setConditionText; + let setConditionButtonEle = element.all(by.css('button')).get(0); + let ngIfButtonEle = element(by.cssContainingText('button', 'if | !if')); + let ngIfParentEle = ngIfButtonEle.element(by.xpath('..')); + let ngIfSiblingEle = ngIfParentEle.element(by.css('heavy-loader')); + let cssButtonEle = element(by.cssContainingText('button', 'show | hide')); + let cssSiblingEle = cssButtonEle.element(by.xpath('..')).element(by.css('heavy-loader')); + let setConditionText; setConditionButtonEle.getText().then(function(text) { setConditionText = text; 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 () { - var setConditionButtonEle = element.all(by.css('button')).get(0); - var displayEles = element.all(by.cssContainingText('p', 'Our heroes are true!')); + let setConditionButtonEle = element.all(by.css('button')).get(0); + let displayEles = element.all(by.cssContainingText('p', 'Our heroes are true!')); expect(displayEles.count()).toBe(2, "should be displaying two ngIf elements"); setConditionButtonEle.click().then(function() { expect(displayEles.count()).toBe(0, "should nog longer be displaying ngIf elements"); diff --git a/public/docs/_examples/style-guide/e2e-spec.js b/public/docs/_examples/style-guide/e2e-spec.ts similarity index 69% rename from public/docs/_examples/style-guide/e2e-spec.js rename to public/docs/_examples/style-guide/e2e-spec.ts index dcd5f2af20..1a64dd1598 100644 --- a/public/docs/_examples/style-guide/e2e-spec.js +++ b/public/docs/_examples/style-guide/e2e-spec.ts @@ -1,8 +1,9 @@ +/// describe('Style Guide', function () { it('01-01', function () { 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('Tornado'); expect(pre.getText()).toContain('Magneta'); @@ -11,8 +12,8 @@ describe('Style Guide', function () { it('02-07', function () { browser.get('#/02-07'); - var hero = element(by.tagName('toh-hero > div')); - var users = element(by.tagName('admin-users > div')); + let hero = element(by.tagName('toh-hero > div')); + let users = element(by.tagName('admin-users > div')); expect(hero.getText()).toBe('hero component'); expect(users.getText()).toBe('users component'); @@ -21,21 +22,21 @@ describe('Style Guide', function () { it('02-08', function () { browser.get('#/02-08'); - var input = element(by.tagName('input[tohvalidate]')); + let input = element(by.tagName('input[tohvalidate]')); expect(input.isPresent()).toBe(true); }); it('03-01', function () { 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'); }); it('03-02', function () { 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(1).getText()).toBe('Villains url: api/villains'); }); @@ -43,14 +44,14 @@ describe('Style Guide', function () { it('03-03', function () { 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'); }); it('03-04', function () { 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(1).getText()).toBe('Hide toast'); }); @@ -58,10 +59,10 @@ describe('Style Guide', function () { it('03-05', function () { 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'); - 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(1).getText()).toBe('Bombasto'); expect(lis.get(2).getText()).toBe('Magneta'); @@ -71,10 +72,10 @@ describe('Style Guide', function () { it('03-06', function () { 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'); - 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(1).getText()).toBe('Bombasto'); expect(lis.get(2).getText()).toBe('Magneta'); @@ -84,77 +85,77 @@ describe('Style Guide', function () { it('04-10', function () { 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'); }); it('04-14', function () { 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'); }); it('05-02', function () { 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'); }); it('05-03', function () { 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'); }); it('05-04', function () { 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'); }); it('05-12', function () { 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'); }); it('05-13', function () { 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'); }); it('05-14', function () { 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('...'); }); it('05-15', function () { 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('...'); }); it('05-16', function () { 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('...'); }); it('05-17', function () { 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('Total powers'); expect(section.getText()).toContain('Average power'); @@ -163,21 +164,21 @@ describe('Style Guide', function () { it('06-01', function () { 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'); }); it('06-03', function () { browser.get('#/06-03'); - var input = element(by.tagName('input[tohvalidator]')); + let input = element(by.tagName('input[tohvalidator]')); expect(input.isPresent()).toBe(true); }); it('07-01', function () { 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(1).getText()).toBe('Bombasto'); expect(lis.get(2).getText()).toBe('Magneta'); @@ -187,21 +188,21 @@ describe('Style Guide', function () { it('07-03', function () { browser.get('#/07-03'); - var pre = element(by.tagName('toh-heroes > pre')); + let pre = element(by.tagName('toh-heroes > pre')); expect(pre.getText()).toContain('[]'); }); it('07-04', function () { browser.get('#/07-04'); - var pre = element(by.tagName('toh-app > pre')); + let pre = element(by.tagName('toh-app > pre')); expect(pre.getText()).toContain('[]'); }); it('09-01', function () { 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'); }); }); diff --git a/public/docs/_examples/styleguide/e2e-spec.js b/public/docs/_examples/styleguide/e2e-spec.js deleted file mode 100644 index 14edeb17ef..0000000000 --- a/public/docs/_examples/styleguide/e2e-spec.js +++ /dev/null @@ -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/'); - }); - -}); diff --git a/public/docs/_examples/styleguide/e2e-spec.ts b/public/docs/_examples/styleguide/e2e-spec.ts new file mode 100644 index 0000000000..b936b9fd23 --- /dev/null +++ b/public/docs/_examples/styleguide/e2e-spec.ts @@ -0,0 +1,28 @@ +/// +/*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/'); + }); + +}); diff --git a/public/docs/_examples/template-syntax/e2e-spec.js b/public/docs/_examples/template-syntax/e2e-spec.ts similarity index 74% rename from public/docs/_examples/template-syntax/e2e-spec.js rename to public/docs/_examples/template-syntax/e2e-spec.ts index 8aa140eb5c..48f69ba051 100644 --- a/public/docs/_examples/template-syntax/e2e-spec.js +++ b/public/docs/_examples/template-syntax/e2e-spec.ts @@ -1,3 +1,4 @@ +/// // Not yet complete describe('Template Syntax', function () { @@ -6,24 +7,24 @@ describe('Template Syntax', 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'); }); 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.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'); }); 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'); }); 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'); }); }); diff --git a/public/docs/_examples/toh-5/e2e-spec.js b/public/docs/_examples/toh-5/e2e-spec.ts similarity index 87% rename from public/docs/_examples/toh-5/e2e-spec.js rename to public/docs/_examples/toh-5/e2e-spec.ts index f35fcd1287..f3955097b4 100644 --- a/public/docs/_examples/toh-5/e2e-spec.js +++ b/public/docs/_examples/toh-5/e2e-spec.ts @@ -1,3 +1,4 @@ +/// describe('Tutorial', function () { beforeAll(function () { @@ -23,19 +24,19 @@ describe('Tutorial', 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.myDashboardHref.getText()).toEqual("Dashboard"); expect(page.myHeroesHref.getText()).toEqual("Heroes"); }); 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"); }); 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'); page.myHeroesHref.click().then(function() { @@ -49,11 +50,11 @@ describe('Tutorial', 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'); - var heroEle = page.topHeroes.get(3); - var heroDescrEle = heroEle.element(by.css('h4')); - var heroDescr; + let heroEle = page.topHeroes.get(3); + let heroDescrEle = heroEle.element(by.css('h4')); + let heroDescr; return heroDescrEle.getText().then(function(text) { heroDescr = text; return heroEle.click(); @@ -66,10 +67,10 @@ describe('Tutorial', 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'); - var viewDetailsButtonEle = page.myHeroesParent.element(by.cssContainingText('button', 'View Details')); - var heroEle, heroDescr; + let viewDetailsButtonEle = page.myHeroesParent.element(by.cssContainingText('button', 'View Details')); + let heroEle, heroDescr; page.myHeroesHref.click().then(function() { expect(page.myDashboardParent.isPresent()).toBe(false, 'dashboard element should NOT 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.myHeroesParent.isPresent()).toBe(false, 'myHeroes element should NOT be present'); 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'); - 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'); - var detailTextEle = page.heroDetail.element(by.css('div h2')); + let detailTextEle = page.heroDetail.element(by.css('div h2')); expect(detailTextEle.getText()).toContain(origValue); return sendKeys(inputEle, textToAdd).then(function () { expect(detailTextEle.getText()).toContain(origValue + textToAdd); diff --git a/public/docs/_examples/toh-6/e2e-spec.js b/public/docs/_examples/toh-6/e2e-spec.ts similarity index 77% rename from public/docs/_examples/toh-6/e2e-spec.js rename to public/docs/_examples/toh-6/e2e-spec.ts index d5823b9add..bec10800b4 100644 --- a/public/docs/_examples/toh-6/e2e-spec.js +++ b/public/docs/_examples/toh-6/e2e-spec.ts @@ -1,3 +1,4 @@ +/// describe('TOH Http Chapter', function () { beforeEach(function () { @@ -5,7 +6,7 @@ describe('TOH Http Chapter', function () { }); function getPageStruct() { - hrefEles = element.all(by.css('my-app a')); + let hrefEles = element.all(by.css('my-app a')); return { hrefs: hrefEles, @@ -22,12 +23,12 @@ describe('TOH Http Chapter', function () { addButton: element.all(by.buttonText('Add New Hero')).get(0), heroDetail: element(by.css('my-app my-hero-detail')) - } + }; } it('should be able to add a hero from the "Heroes" view', function(){ - var page = getPageStruct(); - var heroCount; + let page = getPageStruct(); + let heroCount: webdriver.promise.Promise; page.myHeroesHref.click().then(function() { browser.waitForAngular(); @@ -43,14 +44,14 @@ describe('TOH Http Chapter', function () { heroCount = page.allHeroes.count(); 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(); }); }); it('should be able to delete hero from "Heroes" view', function(){ - var page = getPageStruct(); - var heroCount; + let page = getPageStruct(); + let heroCount: webdriver.promise.Promise; page.myHeroesHref.click().then(function() { browser.waitForAngular(); @@ -66,11 +67,11 @@ describe('TOH Http Chapter', 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'); - var heroEle = page.topHeroes.get(2); - var heroDescrEle = heroEle.element(by.css('h4')); - var heroDescr; + let heroEle = page.topHeroes.get(2); + let heroDescrEle = heroEle.element(by.css('h4')); + let heroDescr: string; return heroDescrEle.getText().then(function(text) { heroDescr = text; @@ -88,10 +89,10 @@ describe('TOH Http Chapter', 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')); - var heroEle, heroDescr; + let viewDetailsButtonEle = page.myHeroesParent.element(by.cssContainingText('button', 'View Details')); + let heroEle: protractor.ElementFinder, heroDescr: string; page.myHeroesHref.click().then(function() { expect(page.myDashboardParent.isPresent()).toBe(false, 'dashboard element should NOT be present'); @@ -101,7 +102,7 @@ describe('TOH Http Chapter', function () { return heroEle.getText(); }).then(function(text) { // remove leading 'id' from the element - heroDescr = text.substr(text.indexOf(' ')+1); + heroDescr = text.substr(text.indexOf(' ') + 1); return heroEle.click(); }).then(function() { expect(viewDetailsButtonEle.isDisplayed()).toBe(true, 'viewDetails button should now be visible'); @@ -117,13 +118,13 @@ describe('TOH Http Chapter', function () { }); }); - function save(page, origValue, textToAdd) { - var inputEle = page.heroDetail.element(by.css('input')); + function save(page: any, origValue: string, textToAdd: string) { + let inputEle = page.heroDetail.element(by.css('input')); expect(inputEle.isDisplayed()).toBe(true, 'should be able to see the input box'); - var saveButtonEle = page.heroDetail.element(by.buttonText('Save')); - var backButtonEle = page.heroDetail.element(by.buttonText('Back')); + let saveButtonEle = page.heroDetail.element(by.buttonText('Save')); + let backButtonEle = page.heroDetail.element(by.buttonText('Back')); 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); return sendKeys(inputEle, textToAdd).then(function () { 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 () { - var page = getPageStruct(); + let page = getPageStruct(); expect(page.hrefs.count()).toEqual(2, 'should be two dashboard choices'); - expect(page.myDashboardHref.getText()).toEqual("Dashboard"); - expect(page.myHeroesHref.getText()).toEqual("Heroes"); + expect(page.myDashboardHref.getText()).toEqual('Dashboard'); + expect(page.myHeroesHref.getText()).toEqual('Heroes'); }); it('should be able to see dashboard choices', function () { - var page = getPageStruct(); - expect(page.topHeroes.count()).toBe(4, "should be 4 dashboard hero choices"); + let page = getPageStruct(); + expect(page.topHeroes.count()).toBe(4, 'should be 4 dashboard hero choices'); }); 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'); page.myHeroesHref.click().then(function() { 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(); }).then(function() { 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 () { - var page = getPageStruct(); + let page = getPageStruct(); expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be available'); - var heroEle = page.topHeroes.get(3); - var heroDescrEle = heroEle.element(by.css('h4')); - var heroDescr; + let heroEle = page.topHeroes.get(3); + let heroDescrEle = heroEle.element(by.css('h4')); + let heroDescr: string; return heroDescrEle.getText().then(function(text) { heroDescr = text; return heroEle.click(); @@ -175,10 +176,10 @@ describe('TOH Http Chapter', 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'); - var viewDetailsButtonEle = page.myHeroesParent.element(by.cssContainingText('button', 'View Details')); - var heroEle, heroDescr; + let viewDetailsButtonEle = page.myHeroesParent.element(by.cssContainingText('button', 'View Details')); + let heroEle: protractor.ElementFinder, heroDescr: string; page.myHeroesHref.click().then(function() { expect(page.myDashboardParent.isPresent()).toBe(false, 'dashboard element should NOT be present'); expect(page.myHeroesParent.isPresent()).toBe(true, 'myHeroes element should be present'); @@ -187,7 +188,7 @@ describe('TOH Http Chapter', function () { return heroEle.getText(); }).then(function(text) { // remove leading 'id' from the element - heroDescr = text.substr(text.indexOf(' ')+1); + heroDescr = text.substr(text.indexOf(' ') + 1); return heroEle.click(); }).then(function() { expect(viewDetailsButtonEle.isDisplayed()).toBe(true, 'viewDetails button should now be visible'); @@ -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.myHeroesParent.isPresent()).toBe(false, 'myHeroes element should NOT be present'); 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'); - var buttons = page.heroDetail.all(by.css('button')); - var backButtonEle = buttons.get(0); - var saveButtonEle = buttons.get(1); + let buttons = page.heroDetail.all(by.css('button')); + let backButtonEle = buttons.get(0); + let saveButtonEle = buttons.get(1); 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'); - var detailTextEle = page.heroDetail.element(by.css('div h2')); + let detailTextEle = page.heroDetail.element(by.css('div h2')); expect(detailTextEle.getText()).toContain(origValue); return sendKeys(inputEle, textToAdd).then(function () { expect(detailTextEle.getText()).toContain(origValue + textToAdd); diff --git a/public/docs/_examples/upgrade-adapter/e2e-spec.js b/public/docs/_examples/upgrade-adapter/e2e-spec.ts similarity index 99% rename from public/docs/_examples/upgrade-adapter/e2e-spec.js rename to public/docs/_examples/upgrade-adapter/e2e-spec.ts index 6e00bfafef..eb4706137c 100644 --- a/public/docs/_examples/upgrade-adapter/e2e-spec.js +++ b/public/docs/_examples/upgrade-adapter/e2e-spec.ts @@ -1,3 +1,4 @@ +/// describe('Upgrade Tests', function () { // Protractor doesn't support the UpgradeAdapter's asynchronous diff --git a/public/docs/_examples/upgrade-phonecat-1-typescript/e2e-spec.js b/public/docs/_examples/upgrade-phonecat-1-typescript/e2e-spec.ts similarity index 79% rename from public/docs/_examples/upgrade-phonecat-1-typescript/e2e-spec.js rename to public/docs/_examples/upgrade-phonecat-1-typescript/e2e-spec.ts index d001711436..ced4fbfbd5 100644 --- a/public/docs/_examples/upgrade-phonecat-1-typescript/e2e-spec.js +++ b/public/docs/_examples/upgrade-phonecat-1-typescript/e2e-spec.ts @@ -1,3 +1,4 @@ +/// 'use strict'; // 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() { - var phoneList = element.all(by.repeater('phone in $ctrl.phones')); - var query = element(by.model('$ctrl.query')); + let phoneList = element.all(by.repeater('phone in $ctrl.phones')); + let query = element(by.model('$ctrl.query')); 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() { - var queryField = element(by.model('$ctrl.query')); - var orderSelect = element(by.model('$ctrl.orderProp')); - var nameOption = orderSelect.element(by.css('option[value="name"]')); - var phoneNameColumn = element.all(by.repeater('phone in $ctrl.phones').column('phone.name')); + let queryField = element(by.model('$ctrl.query')); + let orderSelect = element(by.model('$ctrl.orderProp')); + let nameOption = orderSelect.element(by.css('option[value="name"]')); + let phoneNameColumn = element.all(by.repeater('phone in $ctrl.phones').column('phone.name')); function getNames() { return phoneNameColumn.map(function(elem) { @@ -63,7 +64,7 @@ describe('PhoneCat Application', 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'); 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() { - 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/); }); it('should swap the main image when clicking on a thumbnail image', function() { - var mainImage = element(by.css('img.phone.selected')); - var thumbnails = element.all(by.css('.phone-thumbs img')); + let mainImage = element(by.css('img.phone.selected')); + let thumbnails = element.all(by.css('.phone-thumbs img')); thumbnails.get(2).click(); expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.2.jpg/); diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/e2e-spec.js b/public/docs/_examples/upgrade-phonecat-2-hybrid/e2e-spec.ts similarity index 80% rename from public/docs/_examples/upgrade-phonecat-2-hybrid/e2e-spec.js rename to public/docs/_examples/upgrade-phonecat-2-hybrid/e2e-spec.ts index 627c684d69..09f9bc6b7e 100644 --- a/public/docs/_examples/upgrade-phonecat-2-hybrid/e2e-spec.js +++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/e2e-spec.ts @@ -1,3 +1,4 @@ +/// 'use strict'; // 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() { - var phoneList = element.all(by.css('.phones li')); - var query = element(by.css('input')); + let phoneList = element.all(by.css('.phones li')); + let query = element(by.css('input')); 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() { - var queryField = element(by.css('input')); - var orderSelect = element(by.css('select')); - var nameOption = orderSelect.element(by.css('option[value="name"]')); - var phoneNameColumn = element.all(by.css('.phones .name')); + let queryField = element(by.css('input')); + let orderSelect = element(by.css('select')); + let nameOption = orderSelect.element(by.css('option[value="name"]')); + let phoneNameColumn = element.all(by.css('.phones .name')); function getNames() { return phoneNameColumn.map(function(elem) { @@ -62,7 +63,7 @@ describe('PhoneCat Application', function() { }); it('should render phone specific links', function() { - var query = element(by.css('input')); + let query = element(by.css('input')); sendKeys(query, 'nexus'); 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() { - 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/); }); it('should swap the main image when clicking on a thumbnail image', function() { - var mainImage = element(by.css('img.phone.selected')); - var thumbnails = element.all(by.css('.phone-thumbs img')); + let mainImage = element(by.css('img.phone.selected')); + let thumbnails = element.all(by.css('.phone-thumbs img')); thumbnails.get(2).click(); expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.2.jpg/); diff --git a/public/docs/_examples/upgrade-phonecat-3-final/e2e-spec.js b/public/docs/_examples/upgrade-phonecat-3-final/e2e-spec.ts similarity index 79% rename from public/docs/_examples/upgrade-phonecat-3-final/e2e-spec.js rename to public/docs/_examples/upgrade-phonecat-3-final/e2e-spec.ts index 6b1f78bb9a..3622210403 100644 --- a/public/docs/_examples/upgrade-phonecat-3-final/e2e-spec.js +++ b/public/docs/_examples/upgrade-phonecat-3-final/e2e-spec.ts @@ -1,3 +1,4 @@ +/// 'use strict'; // 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() { - var phoneList = element.all(by.css('.phones li')); - var query = element(by.css('input')); + let phoneList = element.all(by.css('.phones li')); + let query = element(by.css('input')); 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() { - var queryField = element(by.css('input')); - var orderSelect = element(by.css('select')); - var nameOption = orderSelect.element(by.css('option[value="name"]')); - var phoneNameColumn = element.all(by.css('.phones .name')); + let queryField = element(by.css('input')); + let orderSelect = element(by.css('select')); + let nameOption = orderSelect.element(by.css('option[value="name"]')); + let phoneNameColumn = element.all(by.css('.phones .name')); function getNames() { return phoneNameColumn.map(function(elem) { @@ -64,10 +65,10 @@ describe('PhoneCat Application', function() { // #docregion links 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 - var str = 'nexus'; - for (var i = 0; i < str.length; i++) { + let str = 'nexus'; + for (let i = 0; i < str.length; i++) { query.sendKeys(str.charAt(i)); } 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() { - 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/); }); it('should swap the main image when clicking on a thumbnail image', function() { - var mainImage = element(by.css('img.phone.selected')); - var thumbnails = element.all(by.css('.phone-thumbs img')); + let mainImage = element(by.css('img.phone.selected')); + let thumbnails = element.all(by.css('.phone-thumbs img')); thumbnails.get(2).click(); expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.2.jpg/); diff --git a/public/docs/_examples/user-input/e2e-spec.js b/public/docs/_examples/user-input/e2e-spec.ts similarity index 65% rename from public/docs/_examples/user-input/e2e-spec.js rename to public/docs/_examples/user-input/e2e-spec.ts index c0d4fa0c1f..7ef2dcec24 100644 --- a/public/docs/_examples/user-input/e2e-spec.js +++ b/public/docs/_examples/user-input/e2e-spec.ts @@ -1,3 +1,4 @@ +/// describe('User Input Tests', function () { beforeAll(function () { @@ -5,8 +6,8 @@ describe('User Input Tests', function () { }); it('should support the click event', function () { - var mainEle = element(by.css('click-me')); - var buttonEle =element(by.css('click-me button')); + let mainEle = element(by.css('click-me')); + let buttonEle =element(by.css('click-me button')); expect(mainEle.getText()).not.toContain('You are my hero!'); buttonEle.click().then(function() { 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 () { - var mainEle = element(by.css('click-me2')); - var buttonEle =element(by.css('click-me2 button')); + let mainEle = element(by.css('click-me2')); + let buttonEle =element(by.css('click-me2 button')); expect(mainEle.getText()).not.toContain('Event target is '); buttonEle.click().then(function() { expect(mainEle.getText()).toContain('Event target is BUTTON'); @@ -23,19 +24,19 @@ describe('User Input Tests', function () { }); it('should support the keyup event ', function () { - var mainEle = element(by.css('key-up1')); - var inputEle = mainEle.element(by.css('input')); - var outputTextEle = mainEle.element(by.css('p')); + let mainEle = element(by.css('key-up1')); + let inputEle = mainEle.element(by.css('input')); + let outputTextEle = mainEle.element(by.css('p')); expect(outputTextEle.getText()).toEqual(''); return sendKeys(inputEle,'abc').then(function() { expect(outputTextEle.getText()).toEqual('a | ab | abc |'); }); }); - it('should support user input from a local template var (loopback)', function () { - var mainEle = element(by.css('loop-back')); - var inputEle = mainEle.element(by.css('input')); - var outputTextEle = mainEle.element(by.css('p')); + it('should support user input from a local template let (loopback)', function () { + let mainEle = element(by.css('loop-back')); + let inputEle = mainEle.element(by.css('input')); + let outputTextEle = mainEle.element(by.css('p')); expect(outputTextEle.getText()).toEqual(''); return sendKeys(inputEle,'abc').then(function() { 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 () { - var mainEle = element(by.css('key-up2')); - var inputEle = mainEle.element(by.css('input')); - var outputTextEle = mainEle.element(by.css('p')); + let mainEle = element(by.css('key-up2')); + let inputEle = mainEle.element(by.css('input')); + let outputTextEle = mainEle.element(by.css('p')); expect(outputTextEle.getText()).toEqual(''); return sendKeys(inputEle,'abc').then(function() { 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 () { - var mainEle = element(by.css('key-up3')); - var inputEle = mainEle.element(by.css('input')); - var outputTextEle = mainEle.element(by.css('p')); + let mainEle = element(by.css('key-up3')); + let inputEle = mainEle.element(by.css('input')); + let outputTextEle = mainEle.element(by.css('p')); expect(outputTextEle.getText()).toEqual(''); return sendKeys(inputEle,'abc').then(function() { 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 () { - var prevInputEle = element(by.css('key-up3 input')); - var mainEle = element(by.css('key-up4')); - var inputEle = mainEle.element(by.css('input')); - var outputTextEle = mainEle.element(by.css('p')); + let prevInputEle = element(by.css('key-up3 input')); + let mainEle = element(by.css('key-up4')); + let inputEle = mainEle.element(by.css('input')); + let outputTextEle = mainEle.element(by.css('p')); expect(outputTextEle.getText()).toEqual(''); return sendKeys(inputEle,'abc').then(function() { 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 () { - var mainEle = element(by.css('little-tour')); - var inputEle = mainEle.element(by.css('input')); - var addButtonEle = mainEle.element(by.css('button')); - var heroEles = mainEle.all(by.css('li')); - var numHeroes; + let mainEle = element(by.css('little-tour')); + let inputEle = mainEle.element(by.css('input')); + let addButtonEle = mainEle.element(by.css('button')); + let heroEles = mainEle.all(by.css('li')); + let numHeroes; expect(heroEles.count()).toBeGreaterThan(0); heroEles.count().then(function(count) { numHeroes = count;