From b3d8af7f088d605c0db225f533cd98183dc0be48 Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Thu, 27 Dec 2018 20:36:39 +0100 Subject: [PATCH] build: run e2e tests with bazel * Builds the e2e app with Bazel * Serves the e2e app with Bazel * Runs the e2e tests with Bazel protractor rules --- src/e2e-app/BUILD.bazel | 58 ++++++++++++++++ src/e2e-app/devserver-configure.js | 10 +++ src/e2e-app/index.html | 17 ++--- src/e2e-app/system-config.ts | 106 ----------------------------- src/e2e-app/tsconfig-build.json | 52 -------------- 5 files changed, 75 insertions(+), 168 deletions(-) create mode 100644 src/e2e-app/BUILD.bazel create mode 100644 src/e2e-app/devserver-configure.js delete mode 100644 src/e2e-app/system-config.ts delete mode 100644 src/e2e-app/tsconfig-build.json diff --git a/src/e2e-app/BUILD.bazel b/src/e2e-app/BUILD.bazel new file mode 100644 index 000000000000..b2e3e9350e2c --- /dev/null +++ b/src/e2e-app/BUILD.bazel @@ -0,0 +1,58 @@ +package(default_visibility=["//visibility:public"]) + +load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver") +load("//tools:defaults.bzl", "ng_module") + +ng_module( + name = "e2e-app", + srcs = glob(["**/*.ts"]), + assets = glob(["**/*.html", "**/*.css"], exclude = ["index.html"]), + deps = [ + "@angular//packages/core", + "@angular//packages/forms", + "@angular//packages/platform-browser", + "@angular//packages/platform-browser/animations", + "@angular//packages/router", + "//src/cdk/drag-drop", + "//src/cdk/overlay", + "//src/cdk/scrolling", + # TODO(devversion): be more explicit by using "@angular/material" with individual entry points. + "//src/lib:material", + "//src/material-examples:examples", + "//src/cdk-experimental/dialog", + "//src/cdk-experimental/scrolling", + ], +) + +ts_devserver( + name = "devserver", + port = 4200, + # Name of the AMD module that should be required on page load. + entry_module = "angular_material/src/e2e-app/main", + # Serving path of the bundle that serves all files specified in "deps" and "scripts". + serving_path = "/bundle.js", + # Root paths can be used simplify the loading of files from external Bazel repositories + # (such as the Bazel managed deps repository called "matdeps") + additional_root_paths = [ + "angular_material/", + "matdeps/node_modules", + ], + # Files which should be provided by Bazel when running the devserver. These are not + # automatically served, but can be loaded manually through HTTP requests. + static_files = [ + "@matdeps//zone.js", + "@matdeps//core-js", + "@matdeps//hammerjs", + "//src/lib/prebuilt-themes:indigo-pink", + ":index.html", + ], + # Scripts which will be included in the serving_path bundle after "require.js" has been + # loaded. + scripts = [ + ":devserver-configure.js", + "@matdeps//node_modules/tslib:tslib.js", + ], + # Dependencies that produce JavaScript output will be automatically included in the + # serving_path bundle + deps = [":e2e-app"], +) diff --git a/src/e2e-app/devserver-configure.js b/src/e2e-app/devserver-configure.js new file mode 100644 index 000000000000..4d0a13973c62 --- /dev/null +++ b/src/e2e-app/devserver-configure.js @@ -0,0 +1,10 @@ +// We need to configure AMD modules which are not named because otherwise "require.js" is not +// able to resolve AMD imports to such modules. +require.config({ + paths: { + 'moment': 'moment/min/moment.min' + } +}); + +// Workaround until https://github.com/angular/material2/issues/13883 has been addressed. +var module = {id: ''}; diff --git a/src/e2e-app/index.html b/src/e2e-app/index.html index 503071049caf..557aadcf2cce 100644 --- a/src/e2e-app/index.html +++ b/src/e2e-app/index.html @@ -9,7 +9,7 @@ - + @@ -17,15 +17,12 @@ Loading... - - - - + + + + - + + diff --git a/src/e2e-app/system-config.ts b/src/e2e-app/system-config.ts deleted file mode 100644 index 1c3fea5895a5..000000000000 --- a/src/e2e-app/system-config.ts +++ /dev/null @@ -1,106 +0,0 @@ -/** Type declaration for ambient System. */ -declare const System: any; - -// Apply the CLI SystemJS configuration. -System.config({ - paths: { - 'node:*': 'node_modules/*', - }, - map: { - 'rxjs': 'node:rxjs', - 'main': 'main.js', - 'moment': 'node:moment/min/moment-with-locales.min.js', - 'tslib': 'node:tslib/tslib.js', - - // Angular specific mappings. - '@angular/core': 'node:@angular/core/bundles/core.umd.js', - '@angular/common': 'node:@angular/common/bundles/common.umd.js', - '@angular/common/http': 'node:@angular/common/bundles/common-http.umd.js', - '@angular/compiler': 'node:@angular/compiler/bundles/compiler.umd.js', - '@angular/forms': 'node:@angular/forms/bundles/forms.umd.js', - '@angular/router': 'node:@angular/router/bundles/router.umd.js', - '@angular/animations': 'node:@angular/animations/bundles/animations.umd.js', - '@angular/animations/browser': 'node:@angular/animations/bundles/animations-browser.umd.js', - '@angular/platform-browser': 'node:@angular/platform-browser/bundles/platform-browser.umd.js', - '@angular/platform-browser/animations': - 'node:@angular/platform-browser/bundles/platform-browser-animations.umd.js', - '@angular/platform-browser-dynamic': - 'node:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', - - '@angular/material': 'dist/bundles/material.umd.js', - '@angular/material-experimental': 'dist/bundles/material-experimental.umd.js', - '@angular/material-moment-adapter': 'dist/bundles/material-moment-adapter.umd.js', - '@angular/cdk': 'dist/bundles/cdk.umd.js', - '@angular/cdk-experimental': 'dist/bundles/cdk-experimental.umd.js', - - '@angular/cdk/a11y': 'dist/bundles/cdk-a11y.umd.js', - '@angular/cdk/accordion': 'dist/bundles/cdk-accordion.umd.js', - '@angular/cdk/bidi': 'dist/bundles/cdk-bidi.umd.js', - '@angular/cdk/coercion': 'dist/bundles/cdk-coercion.umd.js', - '@angular/cdk/collections': 'dist/bundles/cdk-collections.umd.js', - '@angular/cdk/drag-drop': 'dist/bundles/cdk-drag-drop.umd.js', - '@angular/cdk/keycodes': 'dist/bundles/cdk-keycodes.umd.js', - '@angular/cdk/layout': 'dist/bundles/cdk-layout.umd.js', - '@angular/cdk/observers': 'dist/bundles/cdk-observers.umd.js', - '@angular/cdk/overlay': 'dist/bundles/cdk-overlay.umd.js', - '@angular/cdk/platform': 'dist/bundles/cdk-platform.umd.js', - '@angular/cdk/portal': 'dist/bundles/cdk-portal.umd.js', - '@angular/cdk/scrolling': 'dist/bundles/cdk-scrolling.umd.js', - '@angular/cdk/stepper': 'dist/bundles/cdk-stepper.umd.js', - '@angular/cdk/table': 'dist/bundles/cdk-table.umd.js', - '@angular/cdk/tree': 'dist/bundles/cdk-tree.umd.js', - '@angular/cdk/testing': 'dist/bundles/cdk-testing.umd.js', - '@angular/material-examples': 'dist/bundles/material-examples.umd.js', - '@angular/cdk/text-field': 'dist/bundles/cdk-text-field.umd.js', - - '@angular/cdk-experimental/scrolling': 'dist/bundles/cdk-experimental-scrolling.umd.js', - '@angular/cdk-experimental/dialog': 'dist/bundles/cdk-experimental-dialog.umd.js', - - '@angular/material/autocomplete': 'dist/bundles/material-autocomplete.umd.js', - '@angular/material/bottom-sheet': 'dist/bundles/material-bottom-sheet.umd.js', - '@angular/material/button': 'dist/bundles/material-button.umd.js', - '@angular/material/button-toggle': 'dist/bundles/material-button-toggle.umd.js', - '@angular/material/card': 'dist/bundles/material-card.umd.js', - '@angular/material/checkbox': 'dist/bundles/material-checkbox.umd.js', - '@angular/material/chips': 'dist/bundles/material-chips.umd.js', - '@angular/material/core': 'dist/bundles/material-core.umd.js', - '@angular/material/datepicker': 'dist/bundles/material-datepicker.umd.js', - '@angular/material/dialog': 'dist/bundles/material-dialog.umd.js', - '@angular/material/divider': 'dist/bundles/material-divider.umd.js', - '@angular/material/expansion': 'dist/bundles/material-expansion.umd.js', - '@angular/material/form-field': 'dist/bundles/material-form-field.umd.js', - '@angular/material/grid-list': 'dist/bundles/material-grid-list.umd.js', - '@angular/material/icon': 'dist/bundles/material-icon.umd.js', - '@angular/material/input': 'dist/bundles/material-input.umd.js', - '@angular/material/list': 'dist/bundles/material-list.umd.js', - '@angular/material/menu': 'dist/bundles/material-menu.umd.js', - '@angular/material/paginator': 'dist/bundles/material-paginator.umd.js', - '@angular/material/progress-bar': 'dist/bundles/material-progress-bar.umd.js', - '@angular/material/progress-spinner': 'dist/bundles/material-progress-spinner.umd.js', - '@angular/material/radio': 'dist/bundles/material-radio.umd.js', - '@angular/material/select': 'dist/bundles/material-select.umd.js', - '@angular/material/sidenav': 'dist/bundles/material-sidenav.umd.js', - '@angular/material/slide-toggle': 'dist/bundles/material-slide-toggle.umd.js', - '@angular/material/slider': 'dist/bundles/material-slider.umd.js', - '@angular/material/snack-bar': 'dist/bundles/material-snack-bar.umd.js', - '@angular/material/sort': 'dist/bundles/material-sort.umd.js', - '@angular/material/stepper': 'dist/bundles/material-stepper.umd.js', - '@angular/material/table': 'dist/bundles/material-table.umd.js', - '@angular/material/tabs': 'dist/bundles/material-tabs.umd.js', - '@angular/material/toolbar': 'dist/bundles/material-toolbar.umd.js', - '@angular/material/tooltip': 'dist/bundles/material-tooltip.umd.js', - '@angular/material/badge': 'dist/bundles/material-badge.umd.js', - '@angular/material/tree': 'dist/bundles/material-tree.umd.js', - }, - packages: { - // Thirdparty barrels. - 'rxjs': {main: 'index'}, - 'rxjs/operators': {main: 'index'}, - - // Set the default extension for the root package, because otherwise the e2e app can't - // be built within the production mode. Due to missing file extensions. - '.': { - defaultExtension: 'js' - } - } -}); diff --git a/src/e2e-app/tsconfig-build.json b/src/e2e-app/tsconfig-build.json deleted file mode 100644 index caefeb7e882d..000000000000 --- a/src/e2e-app/tsconfig-build.json +++ /dev/null @@ -1,52 +0,0 @@ -// TypeScript config file that is used to compile the e2e-app. Protractor will run all specs -// against the e2e-app in the browser and therefore the code needs to be ES5 compatible. -{ - "compilerOptions": { - "declaration": true, - "emitDecoratorMetadata": true, - "experimentalDecorators": true, - "noUnusedParameters": true, - // Don't use strict nulls for the e2e-app because the material-examples are not - // strict-null compliant. - "strictNullChecks": false, - "strictFunctionTypes": true, - "noImplicitThis": true, - "lib": ["es6", "es2015", "dom"], - "module": "commonjs", - "moduleResolution": "node", - "noEmitOnError": true, - "noImplicitAny": true, - "rootDirs": [ - "../..", - "./" - ], - "outDir": "../../dist/", - "sourceMap": true, - "target": "es5", - "typeRoots": [ - "../../node_modules/@types/!(node)" - ], - "baseUrl": ".", - "paths": { - "@angular/cdk/*": ["../../dist/releases/cdk/*"], - "@angular/material": ["../../dist/releases/material"], - "@angular/material/*": ["../../dist/releases/material/*"], - "@angular/material-experimental/*": ["../../dist/releases/material-experimental/*"], - "@angular/material-experimental": ["../../dist/releases/material-experimental/"], - "@angular/cdk-experimental/*": ["../../dist/releases/cdk-experimental/*"], - "@angular/cdk-experimental": ["../../dist/releases/cdk-experimental/"], - "@angular/material-moment-adapter": ["../../dist/releases/material-moment-adapter"], - "@angular/material-examples": ["../../dist/releases/material-examples"] - } - }, - "files": [ - "./e2e-app-module.ts", - "./e2e-app-types.d.ts", - "./main.ts", - "./system-config.ts" - ], - "angularCompilerOptions": { - "fullTemplateTypeCheck": true, - "enableResourceInlining": true - } -}