From 6b5fc527363a08583ac63e18bcb19b4f4737ddcd Mon Sep 17 00:00:00 2001 From: Sam Jones Date: Wed, 12 Oct 2016 19:44:56 -0400 Subject: [PATCH] feat(angular2): update to 2.0.x and latest @angular/material * dev: Setup for VS Code I needed some config changes for my developer setup on windows. * Update dependencies Update dependencies to @angular rc.5 and @angular2-material to alpha.7-4 * dev: Drop tests Remove tests from build to simplify upgrade. Testing using our own example app. * Remove modules to be replaced Removing modules that were recommended to be superceeded by their @angular2-material counterparts in [this gist] (https://gist.github.com/ollwenjones/d33b181773d8c8d7f4293cf6e6c4005b) by @ollwenjones Leaving scss for our example app. * Pagination NgModule class and Pagination bugfixes Created Pagination NgModule class and corrected TS compiler and Angular errors. * Created MdContentModule Created NgModule for MdContent directive * Created MdDataTableModule Created NgModule class for MdDataTable * Created MdDividerModule Created NgModule class for MdDivider * Created MdPeekabooModule Created NgModule class for MdPeekaboo * Created MdValidatorModule Created NgModule class for Md* validator directives * Created MdSubheaderModule Created NgModule class for MdSubheader * Created MdBackdropModule Created NgModule class for MdBackdrop * Created Ng2MaterialModule and Ng2MaterialNodeModule Create NgModule classes for ng2-material in Node.js and browser. Removed exports from deprecated/removed modules. * 0.7.0-0 * Remove pagination service from model Will need to be provided on the component level. * Upgrade zone & add karma shims This doesn't make tests run yet, but needs to be done * Feature/angular rc7 q free (#302) * Remove unused styles We are using the angular2-material equivalents of these styles * Fix shadowed input The `range-format` input of md-pagination-range was getting overriden by the null value of the parent pagination directive. * Update to Angular rc.6 and Typescript 2.0 - Updated all package deps to their latest versions. - Updated just enough code to make the typescript compiler happy with new packages. Have not tested components other than the ones in our demo app. - Fixed pagination require from unstable source. Only imports from the root of @angular modules are to be trusted - Removed MdCard styles from components barell. - Added forRoot static method to both Ng2MaterialModule versions. * Update to rc.7 Update dependencies to rc7, not observing any necessary code changes. * Use local installation of typescript to build * bump pre version * Update dependencies to @angular 2.0.0 versions * Update Angular Material to v alpha.8-2 Alpha 8-2 has updated dependencies to angular 2.0.0 * Update to @angular/material The angular material 2 project has changed their packaging. They now distribute everything under the single package `@angular/material`. Updated package files and removed references to any `@angular2-material/*` packages * Set default-theme values to default Setting default theme variables to default so that they can be overidden in app. * Bump version * chore: remove example app spec files - we don't add any testing to the example site, so they're just noise. * chore: use typescript 2 with grunt ts - remove grunt-exec and specify a custom typescript compiler location in the grunt-ts configuration * chore: remove card component and tests - as pointed out by @ollwenjones the styles are different than the official material2 implementation. let's avoid confusion. todo: look at updating the card examples (or remove them if it's too much work) * chore: stash working changes to update test suite to use the latest angular apis - use TestBed for specs - update componentSanityCheck to use TestBed - update karma and systemjs configs to look like angular2 quickstart (https://github.com/angular/quickstart) - remove `main` function wrapper in test files and call describe when the module is imported (again to match angular/quickstart) - add dialog module - break pagination tests into individual files - add MdServicesModule for importing services BREAKING CHANGE: remove md-card component The card component conflicts with the official @angular/material/card implementation. Please use the official component. For more information see: https://github.com/angular/material2/tree/master/src/lib/card * chore: remove form md-messages - the forms module has changed quite a bit and look competent enough to exist without these components. BREAKING CHANGE: removed md-messages components and prefer to use standard FormsModule * chore: fix up test suite - use async() to wrap any it() or beforeEach() calls that do promise based async stuff. - use `TestBed.get(ServiceTypeName)` instead of `inject()` when a service instance is needed in a test. * chore: reduce sauce test matrix BREAKING CHANGE: Remove support for automated testing of IE and unreliable builds of Chrome beta. * chore: reduce sauce test matrix BREAKING CHANGE: Remove support for automated testing of Chrome 39 and Android 4.4 * test: add spec to dialog component * chore: fix bad package name * feat(readme): update readme to direct new users to @angular/material - move some testing stuff out of the first line - update language to downplay any suggestion that users should create issues. Instead suggest they provide a fix for the community. - remove gitter link (I never monitor it despite good intentions.) * chore: drop android from sauce and add dev/beta for chrome/firefox - Android is failing to start sometimes. I have no patience for sauce flakiness. - Make all browsers run on Windows 10 in an attempt to reduce test start times --- .editorconfig | 1 - .travis.yml | 7 +- .vscode/settings.json | 4 + Gruntfile.js | 4 + README.md | 17 +- config.karma.js | 12 +- karma-test-shim.js | 89 ++ karma.conf.js | 33 +- karma.ie.shims.js | 253 ----- karma.main.js | 21 - karma.sauce.conf.js | 19 +- modules/site/angular-cli-build.js | 2 +- modules/site/e2e/app.e2e.ts | 14 - modules/site/e2e/app.po.ts | 9 - modules/site/e2e/tsconfig.json | 17 - modules/site/e2e/typings.d.ts | 1 - modules/site/package.json | 10 +- .../+components/components.component.spec.ts | 43 - .../site/src/app/+index/index.component.html | 2 +- .../src/app/+index/index.component.spec.ts | 41 - .../button-basic-usage.component.spec.ts | 41 - .../card-action-buttons.component.spec.ts | 42 - .../card/card-basic-usage.component.spec.ts | 42 - .../card-inline-actions.component.spec.ts | 42 - .../checkbox-basic-usage.component.spec.ts | 42 - .../checkbox-basic-usage.component.ts | 3 +- .../site/src/app/examples/checkbox/readme.md | 6 +- .../data-table-basic-usage.component.spec.ts | 42 - ...ta-table-selectable-rows.component.spec.ts | 42 - .../data-table-selectable-rows.component.ts | 5 +- .../dialog-basic-usage.component.spec.ts | 42 - .../dialog/dialog-basic-usage.component.ts | 4 +- .../elevation-basic-usage.component.spec.ts | 42 - .../input/input-basic-usage.component.spec.ts | 42 - .../input/input-basic-usage.component.ts | 6 +- modules/site/src/app/examples/input/readme.md | 6 +- .../list/list-basic-usage.component.spec.ts | 42 - .../pagination-basic-usage.component.spec.ts | 44 - .../pagination-split-usage.component.spec.ts | 44 - ...progress-bar-basic-usage.component.spec.ts | 42 - .../progress-bar-basic-usage.component.ts | 3 +- .../src/app/examples/progress-bar/readme.md | 6 +- ...gress-circle-basic-usage.component.spec.ts | 43 - .../progress-circle-basic-usage.component.ts | 2 +- .../app/examples/progress-circle/readme.md | 6 +- .../radio/radio-basic-usage.component.spec.ts | 42 - .../radio/radio-basic-usage.component.ts | 5 +- modules/site/src/app/examples/radio/readme.md | 6 +- .../site/src/app/examples/sidenav/readme.md | 6 +- .../sidenav-basic-usage.component.spec.ts | 42 - .../sidenav/sidenav-basic-usage.component.ts | 3 +- .../switch-basic-usage.component.spec.ts | 42 - modules/site/src/app/examples/tabs/readme.md | 6 +- .../tabs-dynamic-height.component.spec.ts | 42 - .../tabs/tabs-dynamic-height.component.ts | 4 +- .../tabs/tabs-dynamic-tabs.component.spec.ts | 42 - .../tabs/tabs-dynamic-tabs.component.ts | 5 +- .../site/src/app/examples/toolbar/readme.md | 6 +- .../toolbar-basic-usage.component.spec.ts | 42 - .../toolbar/toolbar-basic-usage.component.ts | 4 +- .../shared/example/example.component.spec.ts | 41 - .../app/shared/example/example.component.ts | 7 +- .../shared/footer/footer.component.spec.ts | 41 - .../src/app/shared/footer/footer.component.ts | 6 +- .../highlight-container.component.spec.ts | 42 - .../highlight/highlight.component.spec.ts | 45 - modules/site/src/app/site.component.spec.ts | 17 - modules/site/src/app/site.component.ts | 15 +- modules/site/src/system-config.ts | 14 +- modules/webpack/package.json | 3 +- modules/webpack/src/main.ts | 9 +- ng2-material.d.ts | 1 - package.json | 111 ++- src/.baseDir.ts | 1 + src/components.scss | 5 - src/components/backdrop/backdrop.ts | 16 +- src/components/backdrop/backdrop_spec.ts | 404 ++++---- src/components/button/button.scss | 283 ------ src/components/button/button.ts | 100 -- src/components/button/button_spec.ts | 178 ---- src/components/card/card.scss | 249 ----- src/components/card/card.ts | 109 --- src/components/card/card_spec.ts | 11 - src/components/content/content.ts | 10 +- src/components/content/content_spec.ts | 6 +- src/components/data-table/data_table.ts | 30 +- .../data-table/data_table_selectable_tr.ts | 3 - src/components/data-table/data_table_spec.ts | 249 ++--- src/components/dialog/dialog-portal.ts | 2 +- src/components/dialog/dialog.module.ts | 21 + src/components/dialog/dialog.ts | 12 +- src/components/dialog/dialog_spec.ts | 115 ++- src/components/divider/divider.ts | 10 +- src/components/divider/divider_spec.ts | 6 +- src/components/form/messages.scss | 20 - src/components/form/messages.ts | 124 --- src/components/form/messages_spec.ts | 106 -- src/components/form/validators.ts | 148 --- src/components/form/validators_spec.ts | 40 - src/components/icon/icon.scss | 22 - src/components/icon/icon.ts | 10 - src/components/ink/ink.ts | 25 - src/components/ink/ink_spec.ts | 93 -- src/components/list/list.ts | 69 -- src/components/list/list_spec.ts | 18 - src/components/pagination/pagination.ts | 94 +- .../pagination/pagination_controls_spec.ts | 220 +++++ .../pagination_items_per_page_spec.ts | 195 ++++ .../pagination/pagination_range_spec.ts | 199 ++++ .../pagination/pagination_service.ts | 2 +- src/components/pagination/pagination_spec.ts | 913 ++++-------------- src/components/peekaboo/peekaboo.ts | 8 +- src/components/peekaboo/peekaboo_spec.ts | 166 ++-- src/components/subheader/subheader.ts | 10 +- src/components/subheader/subheader_spec.ts | 6 +- src/components/switch/switch.ts | 76 -- src/components/switch/switch_spec.ts | 115 --- src/components/whiteframe/whiteframe.scss | 104 -- src/core/style/default-theme.scss | 6 +- src/core/util/ink_spec.ts | 106 +- src/core/util/media_spec.ts | 59 +- src/core/util/util.module.ts | 13 + src/core/util/viewport.ts | 2 + src/index.ts | 136 ++- src/platform/testing/bootstrap.ts | 69 -- src/platform/testing/test_url_resolver.ts | 13 - src/platform/testing/util.ts | 58 +- systemjs.config.extras.js | 17 + systemjs.config.js | 47 + tsconfig.json | 87 +- typings.json | 5 +- 131 files changed, 2041 insertions(+), 5109 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 karma-test-shim.js delete mode 100644 karma.ie.shims.js delete mode 100644 karma.main.js delete mode 100644 modules/site/e2e/app.e2e.ts delete mode 100644 modules/site/e2e/app.po.ts delete mode 100644 modules/site/e2e/tsconfig.json delete mode 100644 modules/site/e2e/typings.d.ts delete mode 100644 modules/site/src/app/+components/components.component.spec.ts delete mode 100644 modules/site/src/app/+index/index.component.spec.ts delete mode 100644 modules/site/src/app/examples/button/button-basic-usage.component.spec.ts delete mode 100644 modules/site/src/app/examples/card/card-action-buttons.component.spec.ts delete mode 100644 modules/site/src/app/examples/card/card-basic-usage.component.spec.ts delete mode 100644 modules/site/src/app/examples/card/card-inline-actions.component.spec.ts delete mode 100644 modules/site/src/app/examples/checkbox/checkbox-basic-usage.component.spec.ts delete mode 100644 modules/site/src/app/examples/data-table/data-table-basic-usage.component.spec.ts delete mode 100644 modules/site/src/app/examples/data-table/data-table-selectable-rows.component.spec.ts delete mode 100644 modules/site/src/app/examples/dialog/dialog-basic-usage.component.spec.ts delete mode 100644 modules/site/src/app/examples/elevation/elevation-basic-usage.component.spec.ts delete mode 100644 modules/site/src/app/examples/input/input-basic-usage.component.spec.ts delete mode 100644 modules/site/src/app/examples/list/list-basic-usage.component.spec.ts delete mode 100644 modules/site/src/app/examples/pagination/pagination-basic-usage.component.spec.ts delete mode 100644 modules/site/src/app/examples/pagination/pagination-split-usage.component.spec.ts delete mode 100644 modules/site/src/app/examples/progress-bar/progress-bar-basic-usage.component.spec.ts delete mode 100644 modules/site/src/app/examples/progress-circle/progress-circle-basic-usage.component.spec.ts delete mode 100644 modules/site/src/app/examples/radio/radio-basic-usage.component.spec.ts delete mode 100644 modules/site/src/app/examples/sidenav/sidenav-basic-usage.component.spec.ts delete mode 100644 modules/site/src/app/examples/switch/switch-basic-usage.component.spec.ts delete mode 100644 modules/site/src/app/examples/tabs/tabs-dynamic-height.component.spec.ts delete mode 100644 modules/site/src/app/examples/tabs/tabs-dynamic-tabs.component.spec.ts delete mode 100644 modules/site/src/app/examples/toolbar/toolbar-basic-usage.component.spec.ts delete mode 100644 modules/site/src/app/shared/example/example.component.spec.ts delete mode 100644 modules/site/src/app/shared/footer/footer.component.spec.ts delete mode 100644 modules/site/src/app/shared/highlight/highlight-container.component.spec.ts delete mode 100644 modules/site/src/app/shared/highlight/highlight.component.spec.ts delete mode 100644 modules/site/src/app/site.component.spec.ts create mode 100644 src/.baseDir.ts delete mode 100644 src/components/button/button.scss delete mode 100644 src/components/button/button.ts delete mode 100644 src/components/button/button_spec.ts delete mode 100644 src/components/card/card.scss delete mode 100644 src/components/card/card.ts delete mode 100644 src/components/card/card_spec.ts create mode 100644 src/components/dialog/dialog.module.ts delete mode 100644 src/components/form/messages.scss delete mode 100644 src/components/form/messages.ts delete mode 100644 src/components/form/messages_spec.ts delete mode 100644 src/components/form/validators.ts delete mode 100644 src/components/form/validators_spec.ts delete mode 100644 src/components/icon/icon.scss delete mode 100644 src/components/icon/icon.ts delete mode 100644 src/components/ink/ink.ts delete mode 100644 src/components/ink/ink_spec.ts delete mode 100644 src/components/list/list.ts delete mode 100644 src/components/list/list_spec.ts create mode 100644 src/components/pagination/pagination_controls_spec.ts create mode 100644 src/components/pagination/pagination_items_per_page_spec.ts create mode 100644 src/components/pagination/pagination_range_spec.ts delete mode 100644 src/components/switch/switch.ts delete mode 100644 src/components/switch/switch_spec.ts delete mode 100644 src/components/whiteframe/whiteframe.scss create mode 100644 src/core/util/util.module.ts delete mode 100644 src/platform/testing/bootstrap.ts delete mode 100644 src/platform/testing/test_url_resolver.ts create mode 100644 systemjs.config.extras.js create mode 100644 systemjs.config.js diff --git a/.editorconfig b/.editorconfig index 20380c70..a3fd882b 100644 --- a/.editorconfig +++ b/.editorconfig @@ -5,7 +5,6 @@ root = true charset = utf-8 indent_style = space indent_size = 2 -end_of_line = lf insert_final_newline = true trim_trailing_whitespace = true diff --git a/.travis.yml b/.travis.yml index 921ae646..678c193b 100644 --- a/.travis.yml +++ b/.travis.yml @@ -17,11 +17,8 @@ install: - ./node_modules/.bin/grunt build script: -# TODO: When it can be run reliably from travis, add MICROSOFTEDGE_V13.10586 -- karma start karma.sauce.conf.js --browsers IE_V11 -- karma start karma.sauce.conf.js --browsers FIREFOX_V40,FIREFOX_V35 -- karma start karma.sauce.conf.js --browsers CHROME_VBETA,CHROME_VDEV,CHROME_V39,CHROME_V26 -- karma start karma.sauce.conf.js --browsers ANDROID_V5.1,ANDROID_V4.4 +- karma start karma.sauce.conf.js --browsers FIREFOX_VBETA,FIREFOX_VDEV,FIREFOX_V49 +- karma start karma.sauce.conf.js --browsers CHROME_VBETA,CHROME_VDEV,CHROME_V50 after_script: - ./node_modules/.bin/grunt remapIstanbul - ./node_modules/.bin/coveralls < .coverage/lcov.info diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..029a5ce5 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,4 @@ +// Place your settings in this file to overwrite default and user settings. +{ + "typescript.tsdk": "./node_modules/typescript/lib" +} diff --git a/Gruntfile.js b/Gruntfile.js index 256fade8..69ac60c2 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -79,6 +79,9 @@ module.exports = function (grunt) { source: {options: {message: 'Source Compiled'}} }, ts: { + options: { + compiler: './node_modules/.bin/tsc' + }, source: { tsconfig: true } @@ -246,6 +249,7 @@ module.exports = function (grunt) { }); grunt.registerTask('build-npm', ['build', 'build-npm-package', 'rewrite-source-maps']); + grunt.registerTask('build-npm-package', function () { var fs = require('fs'); var path = require('path'); diff --git a/README.md b/README.md index f073b03a..293e9604 100644 --- a/README.md +++ b/README.md @@ -1,21 +1,22 @@ ng2-material --- [![Build Status](https://travis-ci.org/justindujardin/ng2-material.svg?branch=master)](https://travis-ci.org/justindujardin/ng2-material) -[![Coverage Status](https://coveralls.io/repos/justindujardin/ng2-material/badge.svg?branch=master&service=github)](https://coveralls.io/github/justindujardin/ng2-material?branch=master) [![npm version](https://badge.fury.io/js/ng2-material.svg)](http://badge.fury.io/js/ng2-material) -[![Join the chat at https://gitter.im/justindujardin/ng2-material](https://badges.gitter.im/justindujardin/ng2-material.svg)](https://gitter.im/justindujardin/ng2-material?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) -[![Sauce Test Status](https://saucelabs.com/browser-matrix/ng2material.svg)](https://saucelabs.com/u/ng2material) -ng2-material is a set of components, built on top of [@angular2-material/core](https://github.com/angular/material2), and a site full of examples of how to use them. The site contains examples for community -developed components as well as the official material2 components. +ng2-material is a set of components built on top of [@angular/material](https://github.com/angular/material2). Check out the [examples site](https://justindujardin.github.io/ng2-material/) for demos and instructions on getting started. -## Getting Help +**IMPORTANT**: This project is provided as-is, and no commercial level of support is given to it. If you find an issue and would like to submit a fix, please open a Pull Request with your suggested changes. + +**ALSO IMPORTANT** If you are new to Angular2 and in search of a set of material components, please visit [@angular/material](https://github.com/angular/material2) and come back here when you need a component not offered by the official package. -**IMPORTANT**: This project is provided as-is, and no commercial level of support is given to it. If you need perfect compatbility with IE or great getting started materials for your specific use-case, you may be better off waiting for an official release of material2. +## Testing + +ng2-material components are checked against +[![Sauce Test Status](https://saucelabs.com/browser-matrix/ng2material.svg)](https://saucelabs.com/u/ng2material) -That being said, if something is wrong with your installation or with the existing examples or materials, please try to provide a Plunkr example reproducing your problem, and file an issue. +The tests exercise roughly [![Coverage Status](https://coveralls.io/repos/justindujardin/ng2-material/badge.svg?branch=master&service=github)](https://coveralls.io/github/justindujardin/ng2-material?branch=master) of the code on each browser ## Credits diff --git a/config.karma.js b/config.karma.js index 8844ea94..6bdec055 100644 --- a/config.karma.js +++ b/config.karma.js @@ -9,16 +9,12 @@ var config = { '@angular': { defaultExtension: 'js' }, - '@angular2-material': { - defaultExtension: 'js' - }, 'rxjs': { defaultExtension: 'js' } }, map: { '@angular': '/base/node_modules/@angular', - '@angular2-material': '/base/node_modules/@angular2-material', 'rxjs': '/base/node_modules/rxjs' }, baseURL: './base/' @@ -30,6 +26,7 @@ var packageNames = [ '@angular/compiler', '@angular/core', '@angular/http', + '@angular/material', '@angular/platform-browser', '@angular/platform-browser-dynamic', '@angular/router', @@ -39,13 +36,6 @@ var packageNames = [ '@angular/upgrade' ]; -var material2Packages = [ - 'core', 'checkbox' -]; -material2Packages.forEach(function (pkgName) { - config.packages['@angular2-material/' + pkgName] = {main: pkgName + '.js', defaultExtension: 'js', format: 'cjs'} -}); - // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' } packageNames.forEach(function (pkgName) { config.packages[pkgName] = {main: 'index.js', defaultExtension: 'js'}; diff --git a/karma-test-shim.js b/karma-test-shim.js new file mode 100644 index 00000000..6d4aa0e3 --- /dev/null +++ b/karma-test-shim.js @@ -0,0 +1,89 @@ +// #docregion +// /*global jasmine, __karma__, window*/ +Error.stackTraceLimit = 0; // "No stacktrace"" is usually best for app testing. + +// Uncomment to get full stacktrace output. Sometimes helpful, usually not. +// Error.stackTraceLimit = Infinity; // + +jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000; + +var builtPath = '/base/dist/'; + +__karma__.loaded = function () { }; + +function isJsFile(path) { + return path.slice(-3) == '.js'; +} + +function isSpecFile(path) { + return /_spec\.(.*\.)?js$/.test(path); +} + +function isBuiltFile(path) { + return isJsFile(path) && (path.substr(0, builtPath.length) == builtPath); +} + +var allSpecFiles = Object.keys(window.__karma__.files) + .filter(isSpecFile) + .filter(isBuiltFile); + +System.config({ + baseURL: '/base', + // Extend usual application package list with test folder + packages: { 'testing': { main: 'index.js', defaultExtension: 'js' } }, + + // Assume npm: is set in `paths` in systemjs.config + // Map the angular testing umd bundles + map: { + '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js', + '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js', + '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js', + '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js', + '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js', + '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js', + '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js', + '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js', + }, +}); + +System.import('systemjs.config.js') + .then(importSystemJsExtras) + .then(initTestBed) + .then(initTesting); + +/** Optional SystemJS configuration extras. Keep going w/o it */ +function importSystemJsExtras(){ + return System.import('systemjs.config.extras.js') + .catch(function(reason) { + console.log( + 'Warning: System.import could not load the optional "systemjs.config.extras.js". Did you omit it by accident? Continuing without it.' + ); + console.log(reason); + }); +} + +function initTestBed(){ + return Promise.all([ + System.import('@angular/core/testing'), + System.import('@angular/platform-browser-dynamic/testing') + ]) + + .then(function (providers) { + var coreTesting = providers[0]; + var browserTesting = providers[1]; + + coreTesting.TestBed.initTestEnvironment( + browserTesting.BrowserDynamicTestingModule, + browserTesting.platformBrowserDynamicTesting()); + }) +} + +// Import all spec files and start karma +function initTesting () { + return Promise.all( + allSpecFiles.map(function (moduleName) { + return System.import(moduleName); + }) + ) + .then(__karma__.start, __karma__.error); +} diff --git a/karma.conf.js b/karma.conf.js index f1214ac0..1555878f 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -17,38 +17,39 @@ module.exports = function (config) { frameworks: ['jasmine'], files: [ - // Polyfills. - 'node_modules/core-js/client/shim.min.js', - - // System.js for module loading - // Polyfills. - 'node_modules/core-js/client/shim.min.js', - // System.js for module loading 'node_modules/systemjs/dist/system.src.js', - // Zone.js dependencies + // Polyfills + 'node_modules/core-js/client/shim.js', + 'node_modules/reflect-metadata/Reflect.js', + + // zone.js 'node_modules/zone.js/dist/zone.js', + 'node_modules/zone.js/dist/long-stack-trace-zone.js', + 'node_modules/zone.js/dist/proxy.js', + 'node_modules/zone.js/dist/sync-test.js', 'node_modules/zone.js/dist/jasmine-patch.js', 'node_modules/zone.js/dist/async-test.js', 'node_modules/zone.js/dist/fake-async-test.js', - // RxJs. + // RxJs { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false }, { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false }, - // paths loaded via module imports + // Paths loaded via module imports: // Angular itself - { pattern: 'node_modules/@angular/**/*.js', included: false, watched: true }, - { pattern: 'node_modules/@angular2-material/**/*.js', included: false, watched: false }, - 'karma.ie.shims.js', - "config.karma.js", + {pattern: 'node_modules/@angular/**/*.js', included: false, watched: false}, + {pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false}, + + {pattern: 'systemjs.config.js', included: false, watched: false}, + {pattern: 'systemjs.config.extras.js', included: false, watched: false}, + { pattern: 'dist/*.*', included: false, watched: true }, { pattern: 'dist/components/**/*.js', included: false, watched: true }, { pattern: 'dist/core/**/*.js', included: false, watched: true }, - { pattern: 'node_modules/systemjs/dist/system-polyfills.js', included: false, watched: false }, // PhantomJS2 (and possibly others) might require it { pattern: 'dist/platform/**/*.js', included: false, watched: true }, - "karma.main.js" + "karma-test-shim.js" ], exclude: [ // Vendor packages might include spec files. We don't want to use those. diff --git a/karma.ie.shims.js b/karma.ie.shims.js deleted file mode 100644 index bada337a..00000000 --- a/karma.ie.shims.js +++ /dev/null @@ -1,253 +0,0 @@ -// function.name (all IE) -/*! @source http://stackoverflow.com/questions/6903762/function-name-not-supported-in-ie*/ -if (!Object.hasOwnProperty('name')) { - Object.defineProperty(Function.prototype, 'name', { - get: function() { - var matches = this.toString().match(/^\s*function\s*(\S[^\(]*)\s*\(/); - var name = matches && matches.length > 1 ? matches[1] : ""; - // For better performance only parse once, and then cache the - // result through a new accessor for repeated access. - Object.defineProperty(this, 'name', {value: name}); - return name; - } - }); -} - -// URL polyfill for SystemJS (all IE) -/*! @source https://github.com/ModuleLoader/es6-module-loader/blob/master/src/url-polyfill.js*/ -// from https://gist.github.com/Yaffle/1088850 -(function(global) { - function URLPolyfill(url, baseURL) { - if (typeof url != 'string') { - throw new TypeError('URL must be a string'); - } - var m = String(url).replace(/^\s+|\s+$/g, "").match(/^([^:\/?#]+:)?(?:\/\/(?:([^:@\/?#]*)(?::([^:@\/?#]*))?@)?(([^:\/?#]*)(?::(\d*))?))?([^?#]*)(\?[^#]*)?(#[\s\S]*)?/); - if (!m) { - throw new RangeError(); - } - var protocol = m[1] || ""; - var username = m[2] || ""; - var password = m[3] || ""; - var host = m[4] || ""; - var hostname = m[5] || ""; - var port = m[6] || ""; - var pathname = m[7] || ""; - var search = m[8] || ""; - var hash = m[9] || ""; - if (baseURL !== undefined) { - var base = baseURL instanceof URLPolyfill ? baseURL : new URLPolyfill(baseURL); - var flag = protocol === "" && host === "" && username === ""; - if (flag && pathname === "" && search === "") { - search = base.search; - } - if (flag && pathname.charAt(0) !== "/") { - pathname = (pathname !== "" ? (((base.host !== "" || base.username !== "") && base.pathname === "" ? "/" : "") + base.pathname.slice(0, base.pathname.lastIndexOf("/") + 1) + pathname) : base.pathname); - } - // dot segments removal - var output = []; - pathname.replace(/^(\.\.?(\/|$))+/, "") - .replace(/\/(\.(\/|$))+/g, "/") - .replace(/\/\.\.$/, "/../") - .replace(/\/?[^\/]*/g, function (p) { - if (p === "/..") { - output.pop(); - } else { - output.push(p); - } - }); - pathname = output.join("").replace(/^\//, pathname.charAt(0) === "/" ? "/" : ""); - if (flag) { - port = base.port; - hostname = base.hostname; - host = base.host; - password = base.password; - username = base.username; - } - if (protocol === "") { - protocol = base.protocol; - } - } - - // convert windows file URLs to use / - if (protocol == 'file:') - pathname = pathname.replace(/\\/g, '/'); - - this.origin = protocol + (protocol !== "" || host !== "" ? "//" : "") + host; - this.href = protocol + (protocol !== "" || host !== "" ? "//" : "") + (username !== "" ? username + (password !== "" ? ":" + password : "") + "@" : "") + host + pathname + search + hash; - this.protocol = protocol; - this.username = username; - this.password = password; - this.host = host; - this.hostname = hostname; - this.port = port; - this.pathname = pathname; - this.search = search; - this.hash = hash; - } -global.URLPolyfill = URLPolyfill; -})(typeof self != 'undefined' ? self : global); - -//classList (IE9) -/*! @license please refer to http://unlicense.org/ */ -/*! @author Eli Grey */ -/*! @source https://github.com/eligrey/classList.js */ -;if("document" in self&&!("classList" in document.createElement("_"))){(function(j){"use strict";if(!("Element" in j)){return}var a="classList",f="prototype",m=j.Element[f],b=Object,k=String[f].trim||function(){return this.replace(/^\s+|\s+$/g,"")},c=Array[f].indexOf||function(q){var p=0,o=this.length;for(;p ie diff --git a/modules/site/angular-cli-build.js b/modules/site/angular-cli-build.js index 04ba5e48..d1cbbf17 100644 --- a/modules/site/angular-cli-build.js +++ b/modules/site/angular-cli-build.js @@ -19,7 +19,7 @@ module.exports = function(defaults) { 'reflect-metadata/*.js', 'rxjs/**/*.js', 'ng2-material/**/*.*', - '@angular2-material/**/*.*', + '@angular/material/**/*.*', '@angular/**/*.*' ] }); diff --git a/modules/site/e2e/app.e2e.ts b/modules/site/e2e/app.e2e.ts deleted file mode 100644 index e1c6112e..00000000 --- a/modules/site/e2e/app.e2e.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { SitePage } from './app.po'; - -describe('site App', function() { - let page: SitePage; - - beforeEach(() => { - page = new SitePage(); - }) - - it('should display message saying app works', () => { - page.navigateTo(); - expect(page.getParagraphText()).toEqual('site works!'); - }); -}); diff --git a/modules/site/e2e/app.po.ts b/modules/site/e2e/app.po.ts deleted file mode 100644 index e017e149..00000000 --- a/modules/site/e2e/app.po.ts +++ /dev/null @@ -1,9 +0,0 @@ -export class SitePage { - navigateTo() { - return browser.get('/'); - } - - getParagraphText() { - return element(by.css('site-app h1')).getText(); - } -} diff --git a/modules/site/e2e/tsconfig.json b/modules/site/e2e/tsconfig.json deleted file mode 100644 index 29de6107..00000000 --- a/modules/site/e2e/tsconfig.json +++ /dev/null @@ -1,17 +0,0 @@ -{ - "compileOnSave": false, - "compilerOptions": { - "declaration": false, - "emitDecoratorMetadata": true, - "experimentalDecorators": true, - "mapRoot": "", - "module": "commonjs", - "moduleResolution": "node", - "noEmitOnError": true, - "noImplicitAny": false, - "rootDir": ".", - "sourceMap": true, - "sourceRoot": "/", - "target": "es5" - } -} diff --git a/modules/site/e2e/typings.d.ts b/modules/site/e2e/typings.d.ts deleted file mode 100644 index 9c2f2d02..00000000 --- a/modules/site/e2e/typings.d.ts +++ /dev/null @@ -1 +0,0 @@ -/// diff --git a/modules/site/package.json b/modules/site/package.json index 54d6c139..3f516530 100644 --- a/modules/site/package.json +++ b/modules/site/package.json @@ -21,15 +21,7 @@ "@angular/platform-browser": "2.0.0-rc.4", "@angular/platform-browser-dynamic": "2.0.0-rc.4", "@angular/router": "3.0.0-alpha.8", - "@angular2-material/checkbox": "2.0.0-alpha.6", - "@angular2-material/core": "2.0.0-alpha.6", - "@angular2-material/input": "2.0.0-alpha.6", - "@angular2-material/progress-bar": "2.0.0-alpha.6", - "@angular2-material/progress-circle": "2.0.0-alpha.6", - "@angular2-material/radio": "2.0.0-alpha.6", - "@angular2-material/sidenav": "2.0.0-alpha.6", - "@angular2-material/tabs": "^2.0.0-alpha.6", - "@angular2-material/toolbar": "2.0.0-alpha.6", + "@angular/material": "2.0.0-alpha.9", "es6-shim": "^0.35.0", "highlightjs": "^8.7.0", "ng2-material": "file:../../dist", diff --git a/modules/site/src/app/+components/components.component.spec.ts b/modules/site/src/app/+components/components.component.spec.ts deleted file mode 100644 index 0f7cd476..00000000 --- a/modules/site/src/app/+components/components.component.spec.ts +++ /dev/null @@ -1,43 +0,0 @@ -import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing'; -import {Component} from '@angular/core'; -import {addProviders, inject} from '@angular/core/testing'; -import {By} from '@angular/platform-browser'; - -import {ComponentsComponent} from './components.component'; - -describe('Component: Components', () => { - let builder: TestComponentBuilder; - - beforeEach(() => { - addProviders([ - ComponentsComponent, - ]); - }); - - beforeEach( - inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; })); - - it('should inject the component', - inject([ComponentsComponent], (component: ComponentsComponent) => { - expect(component).toBeTruthy(); - })); - - it('should create the component', inject([], () => { - return builder.createAsync(ComponentsComponentTestController) - .then((fixture: ComponentFixture) => { - let query = fixture.debugElement.query(By.directive(ComponentsComponent)); - expect(query).toBeTruthy(); - expect(query.componentInstance).toBeTruthy(); - }); - })); -}); - -@Component({ - selector: 'test', - template: ` - - `, - directives: [ComponentsComponent] -}) -class ComponentsComponentTestController { -} diff --git a/modules/site/src/app/+index/index.component.html b/modules/site/src/app/+index/index.component.html index 723cc77b..53a8a241 100644 --- a/modules/site/src/app/+index/index.component.html +++ b/modules/site/src/app/+index/index.component.html @@ -34,7 +34,7 @@

Installing from NPM

- npm install --save ng2-material @angular2-material/core + npm install --save ng2-material @angular/material

Then import the material directives and providers diff --git a/modules/site/src/app/+index/index.component.spec.ts b/modules/site/src/app/+index/index.component.spec.ts deleted file mode 100644 index 640fadd7..00000000 --- a/modules/site/src/app/+index/index.component.spec.ts +++ /dev/null @@ -1,41 +0,0 @@ -import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing'; -import {Component} from '@angular/core'; -import {addProviders, inject} from '@angular/core/testing'; -import {By} from '@angular/platform-browser'; - -import {IndexComponent} from './index.component'; - -describe('Component: Index', () => { - let builder: TestComponentBuilder; - - beforeEach(() => { - addProviders([ - IndexComponent, - ]); - }); - - beforeEach( - inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; })); - - it('should inject the component', - inject([IndexComponent], (component: IndexComponent) => { expect(component).toBeTruthy(); })); - - it('should create the component', inject([], () => { - return builder.createAsync(IndexComponentTestController) - .then((fixture: ComponentFixture) => { - let query = fixture.debugElement.query(By.directive(IndexComponent)); - expect(query).toBeTruthy(); - expect(query.componentInstance).toBeTruthy(); - }); - })); -}); - -@Component({ - selector: 'test', - template: ` - - `, - directives: [IndexComponent] -}) -class IndexComponentTestController { -} diff --git a/modules/site/src/app/examples/button/button-basic-usage.component.spec.ts b/modules/site/src/app/examples/button/button-basic-usage.component.spec.ts deleted file mode 100644 index d0f87d80..00000000 --- a/modules/site/src/app/examples/button/button-basic-usage.component.spec.ts +++ /dev/null @@ -1,41 +0,0 @@ -import {addProviders, inject, ComponentFixture, TestComponentBuilder} from '@angular/core/testing'; -import {Component} from '@angular/core'; -import {By} from '@angular/platform-browser'; -import {ButtonBasicUsageComponent} from './button-basic-usage.component'; - -describe('Component: ButtonBasicUsage', () => { - let builder: TestComponentBuilder; - - beforeEach(() => { - addProviders([ - ButtonBasicUsageComponent, - ]); - }); - - beforeEach( - inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; })); - - it('should inject the component', - inject([ButtonBasicUsageComponent], (component: ButtonBasicUsageComponent) => { - expect(component).toBeTruthy(); - })); - - it('should create the component', inject([], () => { - return builder.createAsync(ButtonBasicUsageComponentTestController) - .then((fixture: ComponentFixture) => { - let query = fixture.debugElement.query(By.directive(ButtonBasicUsageComponent)); - expect(query).toBeTruthy(); - expect(query.componentInstance).toBeTruthy(); - }); - })); -}); - -@Component({ - selector: 'test', - template: ` - - `, - directives: [ButtonBasicUsageComponent] -}) -class ButtonBasicUsageComponentTestController { -} diff --git a/modules/site/src/app/examples/card/card-action-buttons.component.spec.ts b/modules/site/src/app/examples/card/card-action-buttons.component.spec.ts deleted file mode 100644 index 1f6d9c28..00000000 --- a/modules/site/src/app/examples/card/card-action-buttons.component.spec.ts +++ /dev/null @@ -1,42 +0,0 @@ -import {addProviders, inject} from '@angular/core/testing'; -import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing'; -import {Component} from '@angular/core'; -import {By} from '@angular/platform-browser'; -import {CardActionButtonsComponent} from './card-action-buttons.component'; - -describe('Component: CardActionButtons', () => { - let builder: TestComponentBuilder; - - beforeEach(() => { - addProviders([ - CardActionButtonsComponent, - ]); - }); - - beforeEach( - inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; })); - - it('should inject the component', - inject([CardActionButtonsComponent], (component: CardActionButtonsComponent) => { - expect(component).toBeTruthy(); - })); - - it('should create the component', inject([], () => { - return builder.createAsync(CardActionButtonsComponentTestController) - .then((fixture: ComponentFixture) => { - let query = fixture.debugElement.query(By.directive(CardActionButtonsComponent)); - expect(query).toBeTruthy(); - expect(query.componentInstance).toBeTruthy(); - }); - })); -}); - -@Component({ - selector: 'test', - template: ` - - `, - directives: [CardActionButtonsComponent] -}) -class CardActionButtonsComponentTestController { -} diff --git a/modules/site/src/app/examples/card/card-basic-usage.component.spec.ts b/modules/site/src/app/examples/card/card-basic-usage.component.spec.ts deleted file mode 100644 index 7eaf1c69..00000000 --- a/modules/site/src/app/examples/card/card-basic-usage.component.spec.ts +++ /dev/null @@ -1,42 +0,0 @@ -import {addProviders, inject} from '@angular/core/testing'; -import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing'; -import {Component} from '@angular/core'; -import {By} from '@angular/platform-browser'; -import {CardBasicUsageComponent} from './card-basic-usage.component'; - -describe('Component: CardBasicUsage', () => { - let builder: TestComponentBuilder; - - beforeEach(() => { - addProviders([ - CardBasicUsageComponent, - ]); - }); - - beforeEach( - inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; })); - - it('should inject the component', - inject([CardBasicUsageComponent], (component: CardBasicUsageComponent) => { - expect(component).toBeTruthy(); - })); - - it('should create the component', inject([], () => { - return builder.createAsync(CardBasicUsageComponentTestController) - .then((fixture: ComponentFixture) => { - let query = fixture.debugElement.query(By.directive(CardBasicUsageComponent)); - expect(query).toBeTruthy(); - expect(query.componentInstance).toBeTruthy(); - }); - })); -}); - -@Component({ - selector: 'test', - template: ` - - `, - directives: [CardBasicUsageComponent] -}) -class CardBasicUsageComponentTestController { -} diff --git a/modules/site/src/app/examples/card/card-inline-actions.component.spec.ts b/modules/site/src/app/examples/card/card-inline-actions.component.spec.ts deleted file mode 100644 index 67a208a6..00000000 --- a/modules/site/src/app/examples/card/card-inline-actions.component.spec.ts +++ /dev/null @@ -1,42 +0,0 @@ -import {addProviders, inject} from '@angular/core/testing'; -import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing'; -import {Component} from '@angular/core'; -import {By} from '@angular/platform-browser'; -import {CardInlineActionsComponent} from './card-inline-actions.component'; - -describe('Component: CardInlineActions', () => { - let builder: TestComponentBuilder; - - beforeEach(() => { - addProviders([ - CardInlineActionsComponent, - ]); - }); - - beforeEach( - inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; })); - - it('should inject the component', - inject([CardInlineActionsComponent], (component: CardInlineActionsComponent) => { - expect(component).toBeTruthy(); - })); - - it('should create the component', inject([], () => { - return builder.createAsync(CardInlineActionsComponentTestController) - .then((fixture: ComponentFixture) => { - let query = fixture.debugElement.query(By.directive(CardInlineActionsComponent)); - expect(query).toBeTruthy(); - expect(query.componentInstance).toBeTruthy(); - }); - })); -}); - -@Component({ - selector: 'test', - template: ` - - `, - directives: [CardInlineActionsComponent] -}) -class CardInlineActionsComponentTestController { -} diff --git a/modules/site/src/app/examples/checkbox/checkbox-basic-usage.component.spec.ts b/modules/site/src/app/examples/checkbox/checkbox-basic-usage.component.spec.ts deleted file mode 100644 index e2c30a19..00000000 --- a/modules/site/src/app/examples/checkbox/checkbox-basic-usage.component.spec.ts +++ /dev/null @@ -1,42 +0,0 @@ -import {addProviders, inject} from '@angular/core/testing'; -import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing'; -import {Component} from '@angular/core'; -import {By} from '@angular/platform-browser'; -import {CheckboxBasicUsageComponent} from './checkbox-basic-usage.component'; - -describe('Component: CheckboxBasicUsage', () => { - let builder: TestComponentBuilder; - - beforeEach(() => { - addProviders([ - CheckboxBasicUsageComponent, - ]); - }); - - beforeEach( - inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; })); - - it('should inject the component', - inject([CheckboxBasicUsageComponent], (component: CheckboxBasicUsageComponent) => { - expect(component).toBeTruthy(); - })); - - it('should create the component', inject([], () => { - return builder.createAsync(CheckboxBasicUsageComponentTestController) - .then((fixture: ComponentFixture) => { - let query = fixture.debugElement.query(By.directive(CheckboxBasicUsageComponent)); - expect(query).toBeTruthy(); - expect(query.componentInstance).toBeTruthy(); - }); - })); -}); - -@Component({ - selector: 'test', - template: ` - - `, - directives: [CheckboxBasicUsageComponent] -}) -class CheckboxBasicUsageComponentTestController { -} diff --git a/modules/site/src/app/examples/checkbox/checkbox-basic-usage.component.ts b/modules/site/src/app/examples/checkbox/checkbox-basic-usage.component.ts index c3e9955d..578f11bf 100644 --- a/modules/site/src/app/examples/checkbox/checkbox-basic-usage.component.ts +++ b/modules/site/src/app/examples/checkbox/checkbox-basic-usage.component.ts @@ -1,12 +1,11 @@ import {Component} from '@angular/core'; -import {MdCheckbox} from '@angular2-material/checkbox'; @Component({ moduleId: module.id, selector: 'checkbox-basic-usage', templateUrl: 'checkbox-basic-usage.component.html', styleUrls: ['checkbox-basic-usage.component.css'], - directives: [MdCheckbox] + // directives: [MdCheckbox] }) export class CheckboxBasicUsageComponent { public cb1 = true; diff --git a/modules/site/src/app/examples/checkbox/readme.md b/modules/site/src/app/examples/checkbox/readme.md index 136497d8..f0499751 100644 --- a/modules/site/src/app/examples/checkbox/readme.md +++ b/modules/site/src/app/examples/checkbox/readme.md @@ -1,9 +1,9 @@ # [](https://material.angular.io) -The official `@angular2-material/checkbox` components must be installed for these examples: +The official `@angular/material/checkbox` components must be installed for these examples: -View the official documentation: [@angular2-material/checkbox](https://github.com/angular/material2/tree/master/src/components/checkbox) +View the official documentation: [@angular/material/checkbox](https://github.com/angular/material2/tree/master/src/components/checkbox) ``` -npm install --save @angular2-material/checkbox +npm install --save @angular/material ``` diff --git a/modules/site/src/app/examples/data-table/data-table-basic-usage.component.spec.ts b/modules/site/src/app/examples/data-table/data-table-basic-usage.component.spec.ts deleted file mode 100644 index b0a4a190..00000000 --- a/modules/site/src/app/examples/data-table/data-table-basic-usage.component.spec.ts +++ /dev/null @@ -1,42 +0,0 @@ -import {addProviders, inject} from '@angular/core/testing'; -import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing'; -import {Component} from '@angular/core'; -import {By} from '@angular/platform-browser'; -import {DataTableBasicUsageComponent} from './data-table-basic-usage.component'; - -describe('Component: DataTableBasicUsage', () => { - let builder: TestComponentBuilder; - - beforeEach(() => { - addProviders([ - DataTableBasicUsageComponent, - ]); - }); - - beforeEach( - inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; })); - - it('should inject the component', - inject([DataTableBasicUsageComponent], (component: DataTableBasicUsageComponent) => { - expect(component).toBeTruthy(); - })); - - it('should create the component', inject([], () => { - return builder.createAsync(DataTableBasicUsageComponentTestController) - .then((fixture: ComponentFixture) => { - let query = fixture.debugElement.query(By.directive(DataTableBasicUsageComponent)); - expect(query).toBeTruthy(); - expect(query.componentInstance).toBeTruthy(); - }); - })); -}); - -@Component({ - selector: 'test', - template: ` - - `, - directives: [DataTableBasicUsageComponent] -}) -class DataTableBasicUsageComponentTestController { -} diff --git a/modules/site/src/app/examples/data-table/data-table-selectable-rows.component.spec.ts b/modules/site/src/app/examples/data-table/data-table-selectable-rows.component.spec.ts deleted file mode 100644 index 43ad5ccc..00000000 --- a/modules/site/src/app/examples/data-table/data-table-selectable-rows.component.spec.ts +++ /dev/null @@ -1,42 +0,0 @@ -import {addProviders, inject} from '@angular/core/testing'; -import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing'; -import {Component} from '@angular/core'; -import {By} from '@angular/platform-browser'; -import {DataTableSelectableRowsComponent} from './data-table-selectable-rows.component'; - -describe('Component: DataTableSelectableRows', () => { - let builder: TestComponentBuilder; - - beforeEach(() => { - addProviders([ - DataTableSelectableRowsComponent, - ]); - }); - - beforeEach( - inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; })); - - it('should inject the component', - inject([DataTableSelectableRowsComponent], (component: DataTableSelectableRowsComponent) => { - expect(component).toBeTruthy(); - })); - - it('should create the component', inject([], () => { - return builder.createAsync(DataTableSelectableRowsComponentTestController) - .then((fixture: ComponentFixture) => { - let query = fixture.debugElement.query(By.directive(DataTableSelectableRowsComponent)); - expect(query).toBeTruthy(); - expect(query.componentInstance).toBeTruthy(); - }); - })); -}); - -@Component({ - selector: 'test', - template: ` - - `, - directives: [DataTableSelectableRowsComponent] -}) -class DataTableSelectableRowsComponentTestController { -} diff --git a/modules/site/src/app/examples/data-table/data-table-selectable-rows.component.ts b/modules/site/src/app/examples/data-table/data-table-selectable-rows.component.ts index c02c5f28..4455dd72 100644 --- a/modules/site/src/app/examples/data-table/data-table-selectable-rows.component.ts +++ b/modules/site/src/app/examples/data-table/data-table-selectable-rows.component.ts @@ -1,13 +1,12 @@ import {Component} from '@angular/core'; -import {MdToolbar} from '@angular2-material/toolbar'; -import {MATERIAL_DIRECTIVES, ITableSelectionChange} from 'ng2-material'; +import {ITableSelectionChange} from 'ng2-material'; @Component({ moduleId: module.id, selector: 'data-table-selectable-rows', templateUrl: 'data-table-selectable-rows.component.html', styleUrls: ['data-table-selectable-rows.component.css'], - directives: [MATERIAL_DIRECTIVES, MdToolbar] + // directives: [MATERIAL_DIRECTIVES, MdToolbar] }) export class DataTableSelectableRowsComponent { selection: string; diff --git a/modules/site/src/app/examples/dialog/dialog-basic-usage.component.spec.ts b/modules/site/src/app/examples/dialog/dialog-basic-usage.component.spec.ts deleted file mode 100644 index b6b751dd..00000000 --- a/modules/site/src/app/examples/dialog/dialog-basic-usage.component.spec.ts +++ /dev/null @@ -1,42 +0,0 @@ -import {addProviders, inject} from '@angular/core/testing'; -import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing'; -import {Component} from '@angular/core'; -import {By} from '@angular/platform-browser'; -import {DialogBasicUsageComponent} from './dialog-basic-usage.component'; - -describe('Component: DialogBasicUsage', () => { - let builder: TestComponentBuilder; - - beforeEach(() => { - addProviders([ - DialogBasicUsageComponent, - ]); - }); - - beforeEach( - inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; })); - - it('should inject the component', - inject([DialogBasicUsageComponent], (component: DialogBasicUsageComponent) => { - expect(component).toBeTruthy(); - })); - - it('should create the component', inject([], () => { - return builder.createAsync(DialogBasicUsageComponentTestController) - .then((fixture: ComponentFixture) => { - let query = fixture.debugElement.query(By.directive(DialogBasicUsageComponent)); - expect(query).toBeTruthy(); - expect(query.componentInstance).toBeTruthy(); - }); - })); -}); - -@Component({ - selector: 'test', - template: ` - - `, - directives: [DialogBasicUsageComponent] -}) -class DialogBasicUsageComponentTestController { -} diff --git a/modules/site/src/app/examples/dialog/dialog-basic-usage.component.ts b/modules/site/src/app/examples/dialog/dialog-basic-usage.component.ts index dd9ba0aa..6180b74e 100644 --- a/modules/site/src/app/examples/dialog/dialog-basic-usage.component.ts +++ b/modules/site/src/app/examples/dialog/dialog-basic-usage.component.ts @@ -1,13 +1,11 @@ import {Component} from '@angular/core'; -import {MATERIAL_DIRECTIVES} from 'ng2-material'; -import {OVERLAY_PROVIDERS} from '@angular2-material/core/overlay/overlay'; +import {OVERLAY_PROVIDERS} from '@angular/material'; @Component({ moduleId: module.id, selector: 'dialog-basic-usage', templateUrl: 'dialog-basic-usage.component.html', styleUrls: ['dialog-basic-usage.component.css'], - directives: [MATERIAL_DIRECTIVES], providers: [OVERLAY_PROVIDERS] }) export class DialogBasicUsageComponent { diff --git a/modules/site/src/app/examples/elevation/elevation-basic-usage.component.spec.ts b/modules/site/src/app/examples/elevation/elevation-basic-usage.component.spec.ts deleted file mode 100644 index 5f48d8b8..00000000 --- a/modules/site/src/app/examples/elevation/elevation-basic-usage.component.spec.ts +++ /dev/null @@ -1,42 +0,0 @@ -import {addProviders, inject} from '@angular/core/testing'; -import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing'; -import {Component} from '@angular/core'; -import {By} from '@angular/platform-browser'; -import {ElevationBasicUsageComponent} from './elevation-basic-usage.component'; - -describe('Component: ElevationBasicUsage', () => { - let builder: TestComponentBuilder; - - beforeEach(() => { - addProviders([ - ElevationBasicUsageComponent, - ]); - }); - - beforeEach( - inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; })); - - it('should inject the component', - inject([ElevationBasicUsageComponent], (component: ElevationBasicUsageComponent) => { - expect(component).toBeTruthy(); - })); - - it('should create the component', inject([], () => { - return builder.createAsync(ElevationBasicUsageComponentTestController) - .then((fixture: ComponentFixture) => { - let query = fixture.debugElement.query(By.directive(ElevationBasicUsageComponent)); - expect(query).toBeTruthy(); - expect(query.componentInstance).toBeTruthy(); - }); - })); -}); - -@Component({ - selector: 'test', - template: ` - - `, - directives: [ElevationBasicUsageComponent] -}) -class ElevationBasicUsageComponentTestController { -} diff --git a/modules/site/src/app/examples/input/input-basic-usage.component.spec.ts b/modules/site/src/app/examples/input/input-basic-usage.component.spec.ts deleted file mode 100644 index d55cb396..00000000 --- a/modules/site/src/app/examples/input/input-basic-usage.component.spec.ts +++ /dev/null @@ -1,42 +0,0 @@ -import {addProviders, inject} from '@angular/core/testing'; -import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing'; -import {Component} from '@angular/core'; -import {By} from '@angular/platform-browser'; -import {InputBasicUsageComponent} from './input-basic-usage.component'; - -describe('Component: InputBasicUsage', () => { - let builder: TestComponentBuilder; - - beforeEach(() => { - addProviders([ - InputBasicUsageComponent, - ]); - }); - - beforeEach( - inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; })); - - it('should inject the component', - inject([InputBasicUsageComponent], (component: InputBasicUsageComponent) => { - expect(component).toBeTruthy(); - })); - - it('should create the component', inject([], () => { - return builder.createAsync(InputBasicUsageComponentTestController) - .then((fixture: ComponentFixture) => { - let query = fixture.debugElement.query(By.directive(InputBasicUsageComponent)); - expect(query).toBeTruthy(); - expect(query.componentInstance).toBeTruthy(); - }); - })); -}); - -@Component({ - selector: 'test', - template: ` - - `, - directives: [InputBasicUsageComponent] -}) -class InputBasicUsageComponentTestController { -} diff --git a/modules/site/src/app/examples/input/input-basic-usage.component.ts b/modules/site/src/app/examples/input/input-basic-usage.component.ts index df2af2ef..4397a93b 100644 --- a/modules/site/src/app/examples/input/input-basic-usage.component.ts +++ b/modules/site/src/app/examples/input/input-basic-usage.component.ts @@ -1,15 +1,11 @@ -import {FORM_DIRECTIVES} from '@angular/forms'; import {Component} from '@angular/core'; -import {MD_INPUT_DIRECTIVES} from '@angular2-material/input'; -import {MdToolbar} from '@angular2-material/toolbar'; -import {MATERIAL_DIRECTIVES} from 'ng2-material'; @Component({ moduleId: module.id, selector: 'input-basic-usage', templateUrl: 'input-basic-usage.component.html', styleUrls: ['input-basic-usage.component.css'], - directives: [MATERIAL_DIRECTIVES, MdToolbar, MD_INPUT_DIRECTIVES, FORM_DIRECTIVES] + // directives: [MATERIAL_DIRECTIVES, MdToolbar, MD_INPUT_DIRECTIVES, FORM_DIRECTIVES] }) export class InputBasicUsageComponent { user = { diff --git a/modules/site/src/app/examples/input/readme.md b/modules/site/src/app/examples/input/readme.md index f1cac7e4..533946e7 100644 --- a/modules/site/src/app/examples/input/readme.md +++ b/modules/site/src/app/examples/input/readme.md @@ -1,9 +1,9 @@ # [](https://material.angular.io) -The official `@angular2-material/input` components must be installed for these examples: +The official `@angular/material` components must be installed for these examples: -View the official documentation: [@angular2-material/input](https://github.com/angular/material2/tree/master/src/components/input) +View the official documentation: [@angular/material](https://github.com/angular/material2/tree/master/src/components/input) ``` -npm install --save @angular2-material/input +npm install --save @angular/material ``` diff --git a/modules/site/src/app/examples/list/list-basic-usage.component.spec.ts b/modules/site/src/app/examples/list/list-basic-usage.component.spec.ts deleted file mode 100644 index 601494f8..00000000 --- a/modules/site/src/app/examples/list/list-basic-usage.component.spec.ts +++ /dev/null @@ -1,42 +0,0 @@ -import {addProviders, inject} from '@angular/core/testing'; -import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing'; -import {Component} from '@angular/core'; -import {By} from '@angular/platform-browser'; -import {ListBasicUsageComponent} from './list-basic-usage.component'; - -describe('Component: ListBasicUsage', () => { - let builder: TestComponentBuilder; - - beforeEach(() => { - addProviders([ - ListBasicUsageComponent, - ]); - }); - - beforeEach( - inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; })); - - it('should inject the component', - inject([ListBasicUsageComponent], (component: ListBasicUsageComponent) => { - expect(component).toBeTruthy(); - })); - - it('should create the component', inject([], () => { - return builder.createAsync(ListBasicUsageComponentTestController) - .then((fixture: ComponentFixture) => { - let query = fixture.debugElement.query(By.directive(ListBasicUsageComponent)); - expect(query).toBeTruthy(); - expect(query.componentInstance).toBeTruthy(); - }); - })); -}); - -@Component({ - selector: 'test', - template: ` - - `, - directives: [ListBasicUsageComponent] -}) -class ListBasicUsageComponentTestController { -} diff --git a/modules/site/src/app/examples/pagination/pagination-basic-usage.component.spec.ts b/modules/site/src/app/examples/pagination/pagination-basic-usage.component.spec.ts deleted file mode 100644 index b1ee1c39..00000000 --- a/modules/site/src/app/examples/pagination/pagination-basic-usage.component.spec.ts +++ /dev/null @@ -1,44 +0,0 @@ -import {addProviders, inject} from '@angular/core/testing'; -import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing'; -import { Component } from '@angular/core'; -import { By } from '@angular/platform-browser'; -import { PaginationBasicUsageComponent } from './pagination-basic-usage.component'; - -describe('Component: PaginationBasicUsage', () => { - let builder: TestComponentBuilder; - - beforeEach(() => { - addProviders([ - PaginationBasicUsageComponent, - ]); - }); - - beforeEach(inject([TestComponentBuilder], function (tcb: TestComponentBuilder) { - builder = tcb; - })); - - it('should inject the component', inject([PaginationBasicUsageComponent], - (component: PaginationBasicUsageComponent) => { - expect(component).toBeTruthy(); - })); - - it('should create the component', inject([], () => { - return builder.createAsync(PaginationBasicUsageComponentTestController) - .then((fixture: ComponentFixture) => { - let query = fixture.debugElement.query(By.directive(PaginationBasicUsageComponent)); - expect(query).toBeTruthy(); - expect(query.componentInstance).toBeTruthy(); - }); - })); -}); - -@Component({ - selector: 'test', - template: ` - - `, - directives: [PaginationBasicUsageComponent] -}) -class PaginationBasicUsageComponentTestController { -} - diff --git a/modules/site/src/app/examples/pagination/pagination-split-usage.component.spec.ts b/modules/site/src/app/examples/pagination/pagination-split-usage.component.spec.ts deleted file mode 100644 index 81e9851e..00000000 --- a/modules/site/src/app/examples/pagination/pagination-split-usage.component.spec.ts +++ /dev/null @@ -1,44 +0,0 @@ -import {addProviders, inject} from '@angular/core/testing'; -import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing'; -import { Component } from '@angular/core'; -import { By } from '@angular/platform-browser'; -import { PaginationSplitUsageComponent } from './pagination-split-usage.component'; - -describe('Component: PaginationSplitUsage', () => { - let builder: TestComponentBuilder; - - beforeEach(() => { - addProviders([ - PaginationSplitUsageComponent, - ]); - }); - - beforeEach(inject([TestComponentBuilder], function (tcb: TestComponentBuilder) { - builder = tcb; - })); - - it('should inject the component', inject([PaginationSplitUsageComponent], - (component: PaginationSplitUsageComponent) => { - expect(component).toBeTruthy(); - })); - - it('should create the component', inject([], () => { - return builder.createAsync(PaginationSplitUsageComponentTestController) - .then((fixture: ComponentFixture) => { - let query = fixture.debugElement.query(By.directive(PaginationSplitUsageComponent)); - expect(query).toBeTruthy(); - expect(query.componentInstance).toBeTruthy(); - }); - })); -}); - -@Component({ - selector: 'test', - template: ` - - `, - directives: [PaginationSplitUsageComponent] -}) -class PaginationSplitUsageComponentTestController { -} - diff --git a/modules/site/src/app/examples/progress-bar/progress-bar-basic-usage.component.spec.ts b/modules/site/src/app/examples/progress-bar/progress-bar-basic-usage.component.spec.ts deleted file mode 100644 index f6010f29..00000000 --- a/modules/site/src/app/examples/progress-bar/progress-bar-basic-usage.component.spec.ts +++ /dev/null @@ -1,42 +0,0 @@ -import {addProviders, inject} from '@angular/core/testing'; -import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing'; -import {Component} from '@angular/core'; -import {By} from '@angular/platform-browser'; -import {ProgressBarBasicUsageComponent} from './progress-bar-basic-usage.component'; - -describe('Component: ProgressBarBasicUsage', () => { - let builder: TestComponentBuilder; - - beforeEach(() => { - addProviders([ - ProgressBarBasicUsageComponent, - ]); - }); - - beforeEach( - inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; })); - - it('should inject the component', - inject([ProgressBarBasicUsageComponent], (component: ProgressBarBasicUsageComponent) => { - expect(component).toBeTruthy(); - })); - - it('should create the component', inject([], () => { - return builder.createAsync(ProgressBarBasicUsageComponentTestController) - .then((fixture: ComponentFixture) => { - let query = fixture.debugElement.query(By.directive(ProgressBarBasicUsageComponent)); - expect(query).toBeTruthy(); - expect(query.componentInstance).toBeTruthy(); - }); - })); -}); - -@Component({ - selector: 'test', - template: ` - - `, - directives: [ProgressBarBasicUsageComponent] -}) -class ProgressBarBasicUsageComponentTestController { -} diff --git a/modules/site/src/app/examples/progress-bar/progress-bar-basic-usage.component.ts b/modules/site/src/app/examples/progress-bar/progress-bar-basic-usage.component.ts index 368140df..93d22e3c 100644 --- a/modules/site/src/app/examples/progress-bar/progress-bar-basic-usage.component.ts +++ b/modules/site/src/app/examples/progress-bar/progress-bar-basic-usage.component.ts @@ -1,12 +1,11 @@ import {Component} from '@angular/core'; -import {MdProgressBar} from '@angular2-material/progress-bar'; @Component({ moduleId: module.id, selector: 'progress-bar-basic-usage', templateUrl: 'progress-bar-basic-usage.component.html', styleUrls: ['progress-bar-basic-usage.component.css'], - directives: [MdProgressBar] +// directives: [MdProgressBar] }) export class ProgressBarBasicUsageComponent { public determinateValue: number = 30; diff --git a/modules/site/src/app/examples/progress-bar/readme.md b/modules/site/src/app/examples/progress-bar/readme.md index 43f467e2..62e0c4bc 100644 --- a/modules/site/src/app/examples/progress-bar/readme.md +++ b/modules/site/src/app/examples/progress-bar/readme.md @@ -1,9 +1,9 @@ # [](https://material.angular.io) -The official `@angular2-material/progress-bar` components must be installed for these examples: +The official `@angular/material` components must be installed for these examples: -View the official documentation: [@angular2-material/progress-bar](https://github.com/angular/material2/tree/master/src/components/progress-bar) +View the official documentation: [@angular/material](https://github.com/angular/material2/tree/master/src/components/progress-bar) ``` -npm install --save @angular2-material/progress-bar +npm install --save @angular/material ``` diff --git a/modules/site/src/app/examples/progress-circle/progress-circle-basic-usage.component.spec.ts b/modules/site/src/app/examples/progress-circle/progress-circle-basic-usage.component.spec.ts deleted file mode 100644 index f433f523..00000000 --- a/modules/site/src/app/examples/progress-circle/progress-circle-basic-usage.component.spec.ts +++ /dev/null @@ -1,43 +0,0 @@ -import {addProviders, inject} from '@angular/core/testing'; -import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing'; -import {Component} from '@angular/core'; -import {By} from '@angular/platform-browser'; -import {ProgressCircleBasicUsageComponent} from './progress-circle-basic-usage.component'; - -describe('Component: ProgressCircleBasicUsage', () => { - let builder: TestComponentBuilder; - - beforeEach(() => { - addProviders([ - ProgressCircleBasicUsageComponent, - ]); - }); - - beforeEach( - inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; })); - - it('should inject the component', - inject([ProgressCircleBasicUsageComponent], (component: ProgressCircleBasicUsageComponent) => { - expect(component).toBeTruthy(); - })); - - it('should create the component', inject([], () => { - return builder.createAsync(ProgressCircleBasicUsageComponentTestController) - .then((fixture: ComponentFixture) => { - let query = - fixture.debugElement.query(By.directive(ProgressCircleBasicUsageComponent)); - expect(query).toBeTruthy(); - expect(query.componentInstance).toBeTruthy(); - }); - })); -}); - -@Component({ - selector: 'test', - template: ` - - `, - directives: [ProgressCircleBasicUsageComponent] -}) -class ProgressCircleBasicUsageComponentTestController { -} diff --git a/modules/site/src/app/examples/progress-circle/progress-circle-basic-usage.component.ts b/modules/site/src/app/examples/progress-circle/progress-circle-basic-usage.component.ts index b7f13f7e..438a76d3 100644 --- a/modules/site/src/app/examples/progress-circle/progress-circle-basic-usage.component.ts +++ b/modules/site/src/app/examples/progress-circle/progress-circle-basic-usage.component.ts @@ -1,5 +1,5 @@ import {Component, OnInit} from '@angular/core'; -import {MdProgressCircle} from '@angular2-material/progress-circle'; +import {MdProgressCircle} from '@angular/material'; @Component({ moduleId: module.id, selector: 'progress-circle-basic-usage', diff --git a/modules/site/src/app/examples/progress-circle/readme.md b/modules/site/src/app/examples/progress-circle/readme.md index 6d0864f2..41464a3f 100644 --- a/modules/site/src/app/examples/progress-circle/readme.md +++ b/modules/site/src/app/examples/progress-circle/readme.md @@ -1,9 +1,9 @@ # [](https://material.angular.io) -The official `@angular2-material/progress-circle` components must be installed for these examples: +The official `@angular/material` components must be installed for these examples: -View the official documentation: [@angular2-material/progress-circle](https://github.com/angular/material2/tree/master/src/components/progress-circle) +View the official documentation: [@angular/material](https://github.com/angular/material2/tree/master/src/components/progress-circle) ``` -npm install --save @angular2-material/progress-circle +npm install --save @angular/material ``` diff --git a/modules/site/src/app/examples/radio/radio-basic-usage.component.spec.ts b/modules/site/src/app/examples/radio/radio-basic-usage.component.spec.ts deleted file mode 100644 index 86dd42a2..00000000 --- a/modules/site/src/app/examples/radio/radio-basic-usage.component.spec.ts +++ /dev/null @@ -1,42 +0,0 @@ -import {addProviders, inject} from '@angular/core/testing'; -import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing'; -import {Component} from '@angular/core'; -import {By} from '@angular/platform-browser'; -import {RadioBasicUsageComponent} from './radio-basic-usage.component'; - -describe('Component: RadioBasicUsage', () => { - let builder: TestComponentBuilder; - - beforeEach(() => { - addProviders([ - RadioBasicUsageComponent, - ]); - }); - - beforeEach( - inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; })); - - it('should inject the component', - inject([RadioBasicUsageComponent], (component: RadioBasicUsageComponent) => { - expect(component).toBeTruthy(); - })); - - it('should create the component', inject([], () => { - return builder.createAsync(RadioBasicUsageComponentTestController) - .then((fixture: ComponentFixture) => { - let query = fixture.debugElement.query(By.directive(RadioBasicUsageComponent)); - expect(query).toBeTruthy(); - expect(query.componentInstance).toBeTruthy(); - }); - })); -}); - -@Component({ - selector: 'test', - template: ` - - `, - directives: [RadioBasicUsageComponent] -}) -class RadioBasicUsageComponentTestController { -} diff --git a/modules/site/src/app/examples/radio/radio-basic-usage.component.ts b/modules/site/src/app/examples/radio/radio-basic-usage.component.ts index 0d26fe12..2969b3e8 100644 --- a/modules/site/src/app/examples/radio/radio-basic-usage.component.ts +++ b/modules/site/src/app/examples/radio/radio-basic-usage.component.ts @@ -1,13 +1,12 @@ import {Component} from '@angular/core'; -import {MdUniqueSelectionDispatcher} from '@angular2-material/core'; -import {MD_RADIO_DIRECTIVES} from '@angular2-material/radio'; +import {MdUniqueSelectionDispatcher} from '@angular/material'; @Component({ moduleId: module.id, selector: 'radio-basic-usage', templateUrl: 'radio-basic-usage.component.html', styleUrls: ['radio-basic-usage.component.css'], - directives: [MD_RADIO_DIRECTIVES], + // directives: [MD_RADIO_DIRECTIVES], providers: [MdUniqueSelectionDispatcher] }) export class RadioBasicUsageComponent { diff --git a/modules/site/src/app/examples/radio/readme.md b/modules/site/src/app/examples/radio/readme.md index 7830de98..4270cafe 100644 --- a/modules/site/src/app/examples/radio/readme.md +++ b/modules/site/src/app/examples/radio/readme.md @@ -1,9 +1,9 @@ # [](https://material.angular.io) -The official `@angular2-material/input` components must be installed for these examples: +The official `@angular/material` components must be installed for these examples: -View the official documentation: [@angular2-material/radio](https://github.com/angular/material2/tree/master/src/components/radio) +View the official documentation: [@angular/material](https://github.com/angular/material2/tree/master/src/components/radio) ``` -npm install --save @angular2-material/radio +npm install --save @angular/material ``` diff --git a/modules/site/src/app/examples/sidenav/readme.md b/modules/site/src/app/examples/sidenav/readme.md index 572f22c5..bd46e7cc 100644 --- a/modules/site/src/app/examples/sidenav/readme.md +++ b/modules/site/src/app/examples/sidenav/readme.md @@ -1,9 +1,9 @@ # [](https://material.angular.io) -The official `@angular2-material/sidenav` components must be installed for these examples: +The official `@angular/material` components must be installed for these examples: -View the official documentation: [@angular2-material/sidenav](https://github.com/angular/material2/tree/master/src/components/sidenav) +View the official documentation: [@angular/material](https://github.com/angular/material2/tree/master/src/components/sidenav) ``` -npm install --save @angular2-material/sidenav +npm install --save @angular/material ``` diff --git a/modules/site/src/app/examples/sidenav/sidenav-basic-usage.component.spec.ts b/modules/site/src/app/examples/sidenav/sidenav-basic-usage.component.spec.ts deleted file mode 100644 index bbf7eb57..00000000 --- a/modules/site/src/app/examples/sidenav/sidenav-basic-usage.component.spec.ts +++ /dev/null @@ -1,42 +0,0 @@ -import {addProviders, inject} from '@angular/core/testing'; -import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing'; -import {Component} from '@angular/core'; -import {By} from '@angular/platform-browser'; -import {SidenavBasicUsageComponent} from './sidenav-basic-usage.component'; - -describe('Component: SidenavBasicUsage', () => { - let builder: TestComponentBuilder; - - beforeEach(() => { - addProviders([ - SidenavBasicUsageComponent, - ]); - }); - - beforeEach( - inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; })); - - it('should inject the component', - inject([SidenavBasicUsageComponent], (component: SidenavBasicUsageComponent) => { - expect(component).toBeTruthy(); - })); - - it('should create the component', inject([], () => { - return builder.createAsync(SidenavBasicUsageComponentTestController) - .then((fixture: ComponentFixture) => { - let query = fixture.debugElement.query(By.directive(SidenavBasicUsageComponent)); - expect(query).toBeTruthy(); - expect(query.componentInstance).toBeTruthy(); - }); - })); -}); - -@Component({ - selector: 'test', - template: ` - - `, - directives: [SidenavBasicUsageComponent] -}) -class SidenavBasicUsageComponentTestController { -} diff --git a/modules/site/src/app/examples/sidenav/sidenav-basic-usage.component.ts b/modules/site/src/app/examples/sidenav/sidenav-basic-usage.component.ts index cacdf1a2..0f981e1f 100644 --- a/modules/site/src/app/examples/sidenav/sidenav-basic-usage.component.ts +++ b/modules/site/src/app/examples/sidenav/sidenav-basic-usage.component.ts @@ -1,12 +1,11 @@ import {Component} from '@angular/core'; -import {MD_SIDENAV_DIRECTIVES} from '@angular2-material/sidenav'; @Component({ moduleId: module.id, selector: 'sidenav-basic-usage', templateUrl: 'sidenav-basic-usage.component.html', styleUrls: ['sidenav-basic-usage.component.css'], - directives: [MD_SIDENAV_DIRECTIVES] + // directives: [MD_SIDENAV_DIRECTIVES] }) export class SidenavBasicUsageComponent { } diff --git a/modules/site/src/app/examples/switch/switch-basic-usage.component.spec.ts b/modules/site/src/app/examples/switch/switch-basic-usage.component.spec.ts deleted file mode 100644 index 77c6dee0..00000000 --- a/modules/site/src/app/examples/switch/switch-basic-usage.component.spec.ts +++ /dev/null @@ -1,42 +0,0 @@ -import {addProviders, inject} from '@angular/core/testing'; -import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing'; -import {Component} from '@angular/core'; -import {By} from '@angular/platform-browser'; -import {SwitchBasicUsageComponent} from './switch-basic-usage.component'; - -describe('Component: SwitchBasicUsage', () => { - let builder: TestComponentBuilder; - - beforeEach(() => { - addProviders([ - SwitchBasicUsageComponent, - ]); - }); - - beforeEach( - inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; })); - - it('should inject the component', - inject([SwitchBasicUsageComponent], (component: SwitchBasicUsageComponent) => { - expect(component).toBeTruthy(); - })); - - it('should create the component', inject([], () => { - return builder.createAsync(SwitchBasicUsageComponentTestController) - .then((fixture: ComponentFixture) => { - let query = fixture.debugElement.query(By.directive(SwitchBasicUsageComponent)); - expect(query).toBeTruthy(); - expect(query.componentInstance).toBeTruthy(); - }); - })); -}); - -@Component({ - selector: 'test', - template: ` - - `, - directives: [SwitchBasicUsageComponent] -}) -class SwitchBasicUsageComponentTestController { -} diff --git a/modules/site/src/app/examples/tabs/readme.md b/modules/site/src/app/examples/tabs/readme.md index a941ca9a..8f69aa7c 100644 --- a/modules/site/src/app/examples/tabs/readme.md +++ b/modules/site/src/app/examples/tabs/readme.md @@ -1,9 +1,9 @@ # [](https://material.angular.io) -The official `@angular2-material/tabs` components must be installed for these examples: +The official `@angular/material` components must be installed for these examples: -View the official documentation: [@angular2-material/tabs](https://github.com/angular/material2/tree/master/src/components/tabs) +View the official documentation: [@angular/material](https://github.com/angular/material2/tree/master/src/components/tabs) ``` -npm install --save @angular2-material/tabs +npm install --save @angular/material ``` diff --git a/modules/site/src/app/examples/tabs/tabs-dynamic-height.component.spec.ts b/modules/site/src/app/examples/tabs/tabs-dynamic-height.component.spec.ts deleted file mode 100644 index a8203db9..00000000 --- a/modules/site/src/app/examples/tabs/tabs-dynamic-height.component.spec.ts +++ /dev/null @@ -1,42 +0,0 @@ -import {addProviders, inject} from '@angular/core/testing'; -import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing'; -import {Component} from '@angular/core'; -import {By} from '@angular/platform-browser'; -import {TabsDynamicHeightComponent} from './tabs-dynamic-height.component'; - -describe('Component: TabsDynamicHeight', () => { - let builder: TestComponentBuilder; - - beforeEach(() => { - addProviders([ - TabsDynamicHeightComponent, - ]); - }); - - beforeEach( - inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; })); - - it('should inject the component', - inject([TabsDynamicHeightComponent], (component: TabsDynamicHeightComponent) => { - expect(component).toBeTruthy(); - })); - - it('should create the component', inject([], () => { - return builder.createAsync(TabsDynamicHeightComponentTestController) - .then((fixture: ComponentFixture) => { - let query = fixture.debugElement.query(By.directive(TabsDynamicHeightComponent)); - expect(query).toBeTruthy(); - expect(query.componentInstance).toBeTruthy(); - }); - })); -}); - -@Component({ - selector: 'test', - template: ` - - `, - directives: [TabsDynamicHeightComponent] -}) -class TabsDynamicHeightComponentTestController { -} diff --git a/modules/site/src/app/examples/tabs/tabs-dynamic-height.component.ts b/modules/site/src/app/examples/tabs/tabs-dynamic-height.component.ts index 85fd04b3..ec76b43a 100644 --- a/modules/site/src/app/examples/tabs/tabs-dynamic-height.component.ts +++ b/modules/site/src/app/examples/tabs/tabs-dynamic-height.component.ts @@ -1,13 +1,11 @@ import {Component, ViewEncapsulation} from '@angular/core'; -import {MD_TABS_DIRECTIVES} from '@angular2-material/tabs'; -import {MATERIAL_DIRECTIVES} from 'ng2-material'; @Component({ moduleId: module.id, selector: 'tabs-dynamic-height', templateUrl: 'tabs-dynamic-height.component.html', styleUrls: ['tabs-dynamic-height.component.css'], - directives: [MATERIAL_DIRECTIVES, MD_TABS_DIRECTIVES], + // directives: [MATERIAL_DIRECTIVES, MD_TABS_DIRECTIVES], encapsulation: ViewEncapsulation.None }) export class TabsDynamicHeightComponent { diff --git a/modules/site/src/app/examples/tabs/tabs-dynamic-tabs.component.spec.ts b/modules/site/src/app/examples/tabs/tabs-dynamic-tabs.component.spec.ts deleted file mode 100644 index b6b68bec..00000000 --- a/modules/site/src/app/examples/tabs/tabs-dynamic-tabs.component.spec.ts +++ /dev/null @@ -1,42 +0,0 @@ -import {addProviders, inject} from '@angular/core/testing'; -import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing'; -import {Component} from '@angular/core'; -import {By} from '@angular/platform-browser'; -import {TabsDynamicTabsComponent} from './tabs-dynamic-tabs.component'; - -describe('Component: TabsDynamicTabs', () => { - let builder: TestComponentBuilder; - - beforeEach(() => { - addProviders([ - TabsDynamicTabsComponent, - ]); - }); - - beforeEach( - inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; })); - - it('should inject the component', - inject([TabsDynamicTabsComponent], (component: TabsDynamicTabsComponent) => { - expect(component).toBeTruthy(); - })); - - it('should create the component', inject([], () => { - return builder.createAsync(TabsDynamicTabsComponentTestController) - .then((fixture: ComponentFixture) => { - let query = fixture.debugElement.query(By.directive(TabsDynamicTabsComponent)); - expect(query).toBeTruthy(); - expect(query.componentInstance).toBeTruthy(); - }); - })); -}); - -@Component({ - selector: 'test', - template: ` - - `, - directives: [TabsDynamicTabsComponent] -}) -class TabsDynamicTabsComponentTestController { -} diff --git a/modules/site/src/app/examples/tabs/tabs-dynamic-tabs.component.ts b/modules/site/src/app/examples/tabs/tabs-dynamic-tabs.component.ts index 20f39601..477150bd 100644 --- a/modules/site/src/app/examples/tabs/tabs-dynamic-tabs.component.ts +++ b/modules/site/src/app/examples/tabs/tabs-dynamic-tabs.component.ts @@ -1,7 +1,4 @@ import {Component, ViewEncapsulation, Input} from '@angular/core'; -import {MATERIAL_DIRECTIVES} from 'ng2-material'; -import {MD_TABS_DIRECTIVES} from '@angular2-material/tabs'; -import {MD_INPUT_DIRECTIVES} from '@angular2-material/input'; export interface ITabData { title: string; @@ -15,7 +12,7 @@ export interface ITabData { templateUrl: 'tabs-dynamic-tabs.component.html', styleUrls: ['tabs-dynamic-tabs.component.css'], encapsulation: ViewEncapsulation.None, - directives: [MATERIAL_DIRECTIVES, MD_TABS_DIRECTIVES, MD_INPUT_DIRECTIVES] + // directives: [MATERIAL_DIRECTIVES, MD_TABS_DIRECTIVES, MD_INPUT_DIRECTIVES] }) export class TabsDynamicTabsComponent { public tabs: ITabData[] = [ diff --git a/modules/site/src/app/examples/toolbar/readme.md b/modules/site/src/app/examples/toolbar/readme.md index 9c204218..2d595e7b 100644 --- a/modules/site/src/app/examples/toolbar/readme.md +++ b/modules/site/src/app/examples/toolbar/readme.md @@ -1,9 +1,9 @@ # [](https://material.angular.io) -The official `@angular2-material/toolbar` components must be installed for these examples: +The official `@angular/material` components must be installed for these examples: -View the official documentation: [@angular2-material/toolbar](https://github.com/angular/material2/tree/master/src/components/toolbar) +View the official documentation: [@angular/material](https://github.com/angular/material2/tree/master/src/components/toolbar) ``` -npm install --save @angular2-material/toolbar +npm install --save @angular/material ``` diff --git a/modules/site/src/app/examples/toolbar/toolbar-basic-usage.component.spec.ts b/modules/site/src/app/examples/toolbar/toolbar-basic-usage.component.spec.ts deleted file mode 100644 index 9ab03f3d..00000000 --- a/modules/site/src/app/examples/toolbar/toolbar-basic-usage.component.spec.ts +++ /dev/null @@ -1,42 +0,0 @@ -import {addProviders, inject} from '@angular/core/testing'; -import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing'; -import {Component} from '@angular/core'; -import {By} from '@angular/platform-browser'; -import {ToolbarBasicUsageComponent} from './toolbar-basic-usage.component'; - -describe('Component: ToolbarBasicUsage', () => { - let builder: TestComponentBuilder; - - beforeEach(() => { - addProviders([ - ToolbarBasicUsageComponent, - ]); - }); - - beforeEach( - inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; })); - - it('should inject the component', - inject([ToolbarBasicUsageComponent], (component: ToolbarBasicUsageComponent) => { - expect(component).toBeTruthy(); - })); - - it('should create the component', inject([], () => { - return builder.createAsync(ToolbarBasicUsageComponentTestController) - .then((fixture: ComponentFixture) => { - let query = fixture.debugElement.query(By.directive(ToolbarBasicUsageComponent)); - expect(query).toBeTruthy(); - expect(query.componentInstance).toBeTruthy(); - }); - })); -}); - -@Component({ - selector: 'test', - template: ` - - `, - directives: [ToolbarBasicUsageComponent] -}) -class ToolbarBasicUsageComponentTestController { -} diff --git a/modules/site/src/app/examples/toolbar/toolbar-basic-usage.component.ts b/modules/site/src/app/examples/toolbar/toolbar-basic-usage.component.ts index 5e4ee030..a3999729 100644 --- a/modules/site/src/app/examples/toolbar/toolbar-basic-usage.component.ts +++ b/modules/site/src/app/examples/toolbar/toolbar-basic-usage.component.ts @@ -1,13 +1,11 @@ import {Component} from '@angular/core'; -import {MdToolbar} from '@angular2-material/toolbar'; -import {MdIcon} from 'ng2-material'; @Component({ moduleId: module.id, selector: 'toolbar-basic-usage', templateUrl: 'toolbar-basic-usage.component.html', styleUrls: ['toolbar-basic-usage.component.css'], - directives: [MdToolbar, MdIcon] + // directives: [MdToolbar, MdIcon] }) export class ToolbarBasicUsageComponent { } diff --git a/modules/site/src/app/shared/example/example.component.spec.ts b/modules/site/src/app/shared/example/example.component.spec.ts deleted file mode 100644 index ce5f4d89..00000000 --- a/modules/site/src/app/shared/example/example.component.spec.ts +++ /dev/null @@ -1,41 +0,0 @@ -import {addProviders, inject} from '@angular/core/testing'; -import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing'; -import {Component} from '@angular/core'; -import {By} from '@angular/platform-browser'; -import {ExampleComponent} from './example.component'; - -describe('Component: Example', () => { - let builder: TestComponentBuilder; - - beforeEach(() => { - addProviders([ - ExampleComponent, - ]); - }); - - beforeEach( - inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; })); - - it('should inject the component', inject([ExampleComponent], (component: ExampleComponent) => { - expect(component).toBeTruthy(); - })); - - it('should create the component', inject([], () => { - return builder.createAsync(ExampleComponentTestController) - .then((fixture: ComponentFixture) => { - let query = fixture.debugElement.query(By.directive(ExampleComponent)); - expect(query).toBeTruthy(); - expect(query.componentInstance).toBeTruthy(); - }); - })); -}); - -@Component({ - selector: 'test', - template: ` - - `, - directives: [ExampleComponent] -}) -class ExampleComponentTestController { -} diff --git a/modules/site/src/app/shared/example/example.component.ts b/modules/site/src/app/shared/example/example.component.ts index e8f013f3..f33b2789 100644 --- a/modules/site/src/app/shared/example/example.component.ts +++ b/modules/site/src/app/shared/example/example.component.ts @@ -8,9 +8,6 @@ import { ComponentResolver } from '@angular/core'; import {Http} from '@angular/http'; -import {MdToolbar} from '@angular2-material/toolbar'; -import {MD_TABS_DIRECTIVES} from '@angular2-material/tabs'; -import {MATERIAL_DIRECTIVES} from 'ng2-material'; import {IExampleData, DEMO_DIRECTIVES} from '../../index'; import {HighlightComponent} from '../highlight/highlight.component'; @@ -24,7 +21,7 @@ export interface ISourceFile { selector: 'docs-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], - directives: [MATERIAL_DIRECTIVES, MD_TABS_DIRECTIVES, HighlightComponent, MdToolbar] + // directives: [HighlightComponent] }) export class ExampleComponent implements AfterViewInit { private _model: IExampleData = null; @@ -98,7 +95,7 @@ export class ExampleComponent implements AfterViewInit { @Component({ selector: `md-example-${model.component}`, template: template, - directives: [MATERIAL_DIRECTIVES, DEMO_DIRECTIVES, HighlightComponent] + // directives: [MATERIAL_DIRECTIVES, DEMO_DIRECTIVES, HighlightComponent] }) class CompiledComponent { } diff --git a/modules/site/src/app/shared/footer/footer.component.spec.ts b/modules/site/src/app/shared/footer/footer.component.spec.ts deleted file mode 100644 index 0cb22aaf..00000000 --- a/modules/site/src/app/shared/footer/footer.component.spec.ts +++ /dev/null @@ -1,41 +0,0 @@ -import {addProviders, inject} from '@angular/core/testing'; -import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing'; -import {Component} from '@angular/core'; -import {By} from '@angular/platform-browser'; -import {FooterComponent} from './footer.component'; - -describe('Component: Footer', () => { - let builder: TestComponentBuilder; - - beforeEach(() => { - addProviders([ - FooterComponent, - ]); - }); - - beforeEach( - inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; })); - - it('should inject the component', inject([FooterComponent], (component: FooterComponent) => { - expect(component).toBeTruthy(); - })); - - it('should create the component', inject([], () => { - return builder.createAsync(FooterComponentTestController) - .then((fixture: ComponentFixture) => { - let query = fixture.debugElement.query(By.directive(FooterComponent)); - expect(query).toBeTruthy(); - expect(query.componentInstance).toBeTruthy(); - }); - })); -}); - -@Component({ - selector: 'test', - template: ` - - `, - directives: [FooterComponent] -}) -class FooterComponentTestController { -} diff --git a/modules/site/src/app/shared/footer/footer.component.ts b/modules/site/src/app/shared/footer/footer.component.ts index 17b48f14..086f796f 100644 --- a/modules/site/src/app/shared/footer/footer.component.ts +++ b/modules/site/src/app/shared/footer/footer.component.ts @@ -1,7 +1,5 @@ import {Component, OnInit} from '@angular/core'; -import {ROUTER_DIRECTIVES} from '@angular/router'; -import {MdToolbar} from '@angular2-material/toolbar'; -import {MATERIAL_DIRECTIVES} from 'ng2-material'; + import {NavigationService} from '../navigation.service'; @@ -10,7 +8,7 @@ import {NavigationService} from '../navigation.service'; selector: 'docs-footer', templateUrl: 'footer.component.html', styleUrls: ['footer.component.css'], - directives: [ROUTER_DIRECTIVES, MdToolbar, MATERIAL_DIRECTIVES] + // directives: [ROUTER_DIRECTIVES, MdToolbar, MATERIAL_DIRECTIVES] }) export class FooterComponent implements OnInit { constructor(private navigation: NavigationService) {} diff --git a/modules/site/src/app/shared/highlight/highlight-container.component.spec.ts b/modules/site/src/app/shared/highlight/highlight-container.component.spec.ts deleted file mode 100644 index a6531e07..00000000 --- a/modules/site/src/app/shared/highlight/highlight-container.component.spec.ts +++ /dev/null @@ -1,42 +0,0 @@ -import {addProviders, inject} from '@angular/core/testing'; -import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing'; -import {Component} from '@angular/core'; -import {By} from '@angular/platform-browser'; -import {HighlightContainerComponent} from './highlight-container.component.ts'; - -describe('Component: HighlightContainer', () => { - let builder: TestComponentBuilder; - - beforeEach(() => { - addProviders([ - HighlightContainerComponent, - ]); - }); - - beforeEach( - inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; })); - - it('should inject the component', - inject([HighlightContainerComponent], (component: HighlightContainerComponent) => { - expect(component).toBeTruthy(); - })); - - it('should create the component', inject([], () => { - return builder.createAsync(HighlightContainerComponentTestController) - .then((fixture: ComponentFixture) => { - let query = fixture.debugElement.query(By.directive(HighlightContainerComponent)); - expect(query).toBeTruthy(); - expect(query.componentInstance).toBeTruthy(); - }); - })); -}); - -@Component({ - selector: 'test', - template: ` - - `, - directives: [HighlightContainerComponent] -}) -class HighlightContainerComponentTestController { -} diff --git a/modules/site/src/app/shared/highlight/highlight.component.spec.ts b/modules/site/src/app/shared/highlight/highlight.component.spec.ts deleted file mode 100644 index 67ea7da4..00000000 --- a/modules/site/src/app/shared/highlight/highlight.component.spec.ts +++ /dev/null @@ -1,45 +0,0 @@ -import {addProviders, inject} from '@angular/core/testing'; -import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing'; -import {Component} from '@angular/core'; -import {By} from '@angular/platform-browser'; -import {HighlightComponent} from './highlight.component'; - -describe('Component: Highlight', () => { - let builder:TestComponentBuilder; - - beforeEach(() => { - addProviders([ - HighlightComponent, - ]); - }); - - beforeEach( - inject([TestComponentBuilder], function (tcb:TestComponentBuilder) { - builder = tcb; - }) - ); - - it('should inject the component', - inject([HighlightComponent], (component:HighlightComponent) => { - expect(component).toBeTruthy(); - })); - - it('should create the component', inject([], () => { - return builder.createAsync(HighlightComponentTestController) - .then((fixture:ComponentFixture) => { - let query = fixture.debugElement.query(By.directive(HighlightComponent)); - expect(query).toBeTruthy(); - expect(query.componentInstance).toBeTruthy(); - }); - })); -}); - -@Component({ - selector: 'test', - template: ` - - `, - directives: [HighlightComponent] -}) -class HighlightComponentTestController { -} diff --git a/modules/site/src/app/site.component.spec.ts b/modules/site/src/app/site.component.spec.ts deleted file mode 100644 index eff53cdf..00000000 --- a/modules/site/src/app/site.component.spec.ts +++ /dev/null @@ -1,17 +0,0 @@ -import {addProviders, inject} from '@angular/core/testing'; -import {SiteAppComponent} from '../app/site.component'; - -beforeEach(() => { - addProviders([ - SiteAppComponent, - ]); -}); - -describe('App: Site', () => { - it('should create the app', - inject([SiteAppComponent], (app: SiteAppComponent) => { expect(app).toBeTruthy(); })); - - it('should have a name', inject([SiteAppComponent], (app: SiteAppComponent) => { - expect(app.site).toEqual('Angular2 Material'); - })); -}); diff --git a/modules/site/src/app/site.component.ts b/modules/site/src/app/site.component.ts index b850e3dc..a6b388d5 100644 --- a/modules/site/src/app/site.component.ts +++ b/modules/site/src/app/site.component.ts @@ -1,9 +1,8 @@ import { Component, OnInit, OnDestroy, Input, ViewChild, AfterViewInit } from '@angular/core'; import { Response, Http } from '@angular/http'; -import { ROUTER_DIRECTIVES, provideRouter, Router, RouterConfig } from '@angular/router'; -import { MD_SIDENAV_DIRECTIVES, MdSidenav } from '@angular2-material/sidenav'; -import { MdToolbar } from '@angular2-material/toolbar'; -import { MATERIAL_DIRECTIVES, Media, MdIcon } from 'ng2-material'; +import { provideRouter, Router, RouterConfig } from '@angular/router'; +import { MdSidenav } from '@angular/material'; +import { Media } from 'ng2-material'; import { ComponentsComponent } from './+components'; import { IndexComponent } from './+index'; import { ComponentsService, IComponentMeta } from './shared/components.service'; @@ -27,10 +26,10 @@ export const AppRouterProviders = [ templateUrl: 'site.component.html', styleUrls: ['site.component.css'], pipes: [ComponentsOrderByPipe], - directives: [ - ROUTER_DIRECTIVES, MATERIAL_DIRECTIVES, MD_SIDENAV_DIRECTIVES, MdIcon, MdToolbar, - FooterComponent - ] + // directives: [ + // ROUTER_DIRECTIVES, MATERIAL_DIRECTIVES, MD_SIDENAV_DIRECTIVES, MdIcon, MdToolbar, + // FooterComponent + // ] }) export class SiteAppComponent implements OnInit, OnDestroy, AfterViewInit { diff --git a/modules/site/src/system-config.ts b/modules/site/src/system-config.ts index 4682be1f..2b665778 100644 --- a/modules/site/src/system-config.ts +++ b/modules/site/src/system-config.ts @@ -14,7 +14,7 @@ const packages: any = {}; const barrels: string[] = [ // Angular specific barrels. '@angular/core', '@angular/common', '@angular/forms', '@angular/compiler', '@angular/http', '@angular/router', - '@angular/platform-browser', '@angular/platform-browser-dynamic', + '@angular/platform-browser', '@angular/platform-browser-dynamic', '@angular/material' // Thirdparty barrels. 'rxjs', 'ng2-material', @@ -30,17 +30,6 @@ const barrels: string[] = [ const cliSystemConfigPackages: any = {}; barrels.forEach((barrelName: string) => { cliSystemConfigPackages[barrelName] = {main: 'index'}; }); -// Material2 specific barrels. -['core', 'checkbox', 'progress-circle', 'progress-bar', 'radio', 'toolbar', 'sidenav', 'icon', - 'input', 'tabs' - -].forEach((pkgName: string) => { - cliSystemConfigPackages['@angular2-material/' + pkgName] = { - main: pkgName + '.js', - defaultExtension: 'js', - format: 'cjs' - }; -}); /** Type declaration for ambient System. */ declare var System: any; @@ -49,7 +38,6 @@ declare var System: any; System.config({ map: { '@angular': 'vendor/@angular', - '@angular2-material': 'vendor/@angular2-material', 'ng2-material': 'vendor/ng2-material', 'rxjs': 'vendor/rxjs', 'main': 'main.js' diff --git a/modules/webpack/package.json b/modules/webpack/package.json index 9d2cff88..2b9d4a4a 100644 --- a/modules/webpack/package.json +++ b/modules/webpack/package.json @@ -13,8 +13,7 @@ "@angular/compiler": "2.0.0-rc.4", "@angular/platform-browser": "2.0.0-rc.4", "@angular/platform-browser-dynamic": "2.0.0-rc.4", - "@angular2-material/core": "2.0.0-alpha.6-2", - "@angular2-material/toolbar": "2.0.0-alpha.6-2", + "@angular/material": "^2.0.0-alpha.9", "es6-shim": "^0.35.0", "ng2-material": "*", "reflect-metadata": "^0.1.3", diff --git a/modules/webpack/src/main.ts b/modules/webpack/src/main.ts index ad1c422a..5c808ed8 100755 --- a/modules/webpack/src/main.ts +++ b/modules/webpack/src/main.ts @@ -5,20 +5,19 @@ require('zone.js/dist/zone'); import '@angular/core'; import '@angular/common'; -import '@angular2-material/core'; +import '@angular/material'; import {Component} from '@angular/core'; import {bootstrap} from '@angular/platform-browser-dynamic'; import {MATERIAL_BROWSER_PROVIDERS, MATERIAL_DIRECTIVES} from 'ng2-material'; -import {MdToolbar} from '@angular2-material/toolbar'; import 'ng2-material/ng2-material.css'; import 'ng2-material/font/font.css'; @Component({ selector: 'my-app', - directives: [MATERIAL_DIRECTIVES, MdToolbar], + // directives: [MATERIAL_DIRECTIVES, MdToolbar], template: ` ng2-material, material2, and webpack @@ -106,11 +105,11 @@ import 'ng2-material/font/font.css'; margin-bottom: 16px; } } - + md-content { margin-right: 7px; } - + .label { position: absolute; bottom: 5px; diff --git a/ng2-material.d.ts b/ng2-material.d.ts index 1ede4780..cba18435 100644 --- a/ng2-material.d.ts +++ b/ng2-material.d.ts @@ -1,2 +1 @@ -/// export * from './src/index'; diff --git a/package.json b/package.json index c6c3e883..cbe13605 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ng2-material", - "version": "0.6.1", + "version": "0.7.0-4", "description": "", "main": "./index.js", "repository": { @@ -13,69 +13,74 @@ "scripts": { "tdd": "./node_modules/.bin/grunt tdd", "start": "./node_modules/.bin/grunt serve", - "test": "./node_modules/.bin/grunt karma", - "postinstall": "./node_modules/.bin/typings install" + "test": "./node_modules/.bin/grunt karma" }, "dependencies": { - "@angular/common": "2.0.0-rc.4", - "@angular/compiler": "2.0.0-rc.4", - "@angular/core": "2.0.0-rc.4", - "@angular/forms": "^0.2.0", - "@angular/platform-browser": "2.0.0-rc.4", - "@angular/platform-browser-dynamic": "2.0.0-rc.4", - "@angular/router": "3.0.0-beta.2", - "@angular2-material/checkbox": "2.0.0-alpha.6", - "@angular2-material/core": "2.0.0-alpha.6", - "es6-promise": ">=3.0.2", - "es6-shim": "^0.35.0", - "grunt-sass": "^1.2.0", - "reflect-metadata": "^0.1.3", - "rxjs": "5.0.0-beta.6", - "zone.js": "^0.6.12" + "@angular/common": "^2.0.0", + "@angular/compiler": "^2.0.0", + "@angular/core": "^2.0.0", + "@angular/forms": "^2.0.0", + "@angular/http": "^2.0.0", + "@angular/material": "^2.0.0-alpha.9", + "@angular/platform-browser": "^2.0.0", + "@angular/platform-browser-dynamic": "^2.0.0", + "@angular/router": "^3.0.0", + "es6-promise": ">=3.3.1", + "es6-shim": "^0.35.1", + "grunt-sass": "^1.2.1", + "reflect-metadata": "^0.1.8", + "rxjs": "^5.0.0-beta.12", + "zone.js": "^0.6.23" }, "typings": "./index.d.ts", "devDependencies": { - "autoprefixer": "6.2.0", - "codelyzer": "0.0.19", - "core-js": "^2.4.0", - "coveralls": "2.11.6", + "@types/core-js": "^0.9.34", + "@types/hammerjs": "^2.0.32", + "@types/jasmine": "^2.2.33", + "@types/node": "^6.0.38", + "autoprefixer": "6.5.0", + "codelyzer": "1.0.0-beta.0", + "core-js": "^2.4.1", + "coveralls": "2.11.14", "css": "^2.2.1", - "css-loader": "0.23.1", - "es6-module-loader": "0.17.4", - "file-loader": "0.8.5", - "glob": "6.0.1", - "grunt": "0.4.5", - "grunt-bump": "0.7.0", - "grunt-cli": "0.1.13", + "css-loader": "0.25.0", + "es6-module-loader": "0.17.11", + "file-loader": "0.9.0", + "glob": "7.1.0", + "grunt": "1.0.1", + "grunt-bump": "0.8.0", + "grunt-cli": "1.2.0", "grunt-continue": "^0.1.0", - "grunt-contrib-clean": "0.7.0", - "grunt-contrib-connect": "0.11.2", - "grunt-contrib-copy": "0.8.2", - "grunt-contrib-sass": "0.9.2", - "grunt-contrib-watch": "0.6.1", - "grunt-conventional-changelog": "5.0.0", - "grunt-karma": "0.12.1", - "grunt-notify": "0.4.3", + "grunt-contrib-clean": "1.0.0", + "grunt-contrib-connect": "1.0.2", + "grunt-contrib-copy": "1.0.0", + "grunt-contrib-sass": "1.0.0", + "grunt-contrib-watch": "1.0.0", + "grunt-conventional-changelog": "6.1.0", + "grunt-karma": "2.0.0", + "grunt-notify": "0.4.5", "grunt-npm": "0.0.2", - "grunt-postcss": "0.7.1", - "grunt-ts": "5.2.0", + "grunt-postcss": "0.8.0", + "grunt-ts": "6.0.0-beta.3", "highlightjs": "8.7.0", "istanbul": "1.0.0-alpha.2", - "karma": "0.13.19", - "karma-chrome-launcher": "0.2.2", - "karma-coverage": "0.5.3", - "karma-firefox-launcher": "0.1.7", - "karma-jasmine": "0.2.2", - "karma-mocha-reporter": "1.1.5", - "karma-sauce-launcher": "0.3.0", + "jasmine-core": "^2.5.2", + "karma": "^1.3.0", + "karma-chrome-launcher": "2.0.0", + "karma-coverage": "1.1.1", + "karma-firefox-launcher": "1.0.0", + "karma-jasmine": "1.0.2", + "karma-mocha-reporter": "2.2.0", + "karma-sauce-launcher": "1.0.0", "lcov-parse": "0.0.10", - "marked": "0.3.5", - "npm": "^3.9.2", - "remap-istanbul": "0.4.0", - "style-loader": "0.13.0", - "systemjs": "0.19.27", - "typescript": ">=1.8.9", - "typings": "^1.0.4", + "marked": "0.3.6", + "npm": "^3.10.7", + "remap-istanbul": "0.6.4", + "style-loader": "0.13.1", + "systemjs": "0.19.39", + "tslint": "^3.15.1", + "typescript": "^2.0.0", + "typings": "^1.3.3", "underscore": "1.8.3" }, "contributors": [ diff --git a/src/.baseDir.ts b/src/.baseDir.ts new file mode 100644 index 00000000..ec32b31e --- /dev/null +++ b/src/.baseDir.ts @@ -0,0 +1 @@ +// Ignore this file. See https://github.com/grunt-ts/grunt-ts/issues/77 \ No newline at end of file diff --git a/src/components.scss b/src/components.scss index a4be72e6..47525ba2 100644 --- a/src/components.scss +++ b/src/components.scss @@ -1,15 +1,10 @@ @import "components/backdrop/backdrop"; -@import "components/button/button"; -@import "components/card/card"; @import "components/content/content"; @import "components/data-table/data_table"; @import "components/dialog/dialog"; @import "components/divider/divider"; -@import "components/icon/icon"; @import "components/list/list"; -@import "components/form/messages"; @import "components/pagination/pagination"; @import "components/peekaboo/peekaboo"; @import "components/subheader/subheader"; @import "components/switch/switch"; -@import "components/whiteframe/whiteframe"; diff --git a/src/components/backdrop/backdrop.ts b/src/components/backdrop/backdrop.ts index 46911c75..896cf9f8 100644 --- a/src/components/backdrop/backdrop.ts +++ b/src/components/backdrop/backdrop.ts @@ -1,6 +1,8 @@ -import {Animate} from "../../core/util/animate"; -import {ElementRef, ViewEncapsulation, Component, Input, Output, EventEmitter} from "@angular/core"; -import {ViewportHelper} from "../../core/util/viewport"; +import {Animate} from '../../core/util/animate'; +import {ElementRef, ViewEncapsulation, Component, Input, Output, EventEmitter, NgModule} from '@angular/core'; +import {ViewportHelper} from '../../core/util/viewport'; +import {MATERIAL_BROWSER_PROVIDERS} from '../../index'; +import {MdServicesModule} from '../../core/util/util.module'; /** * An overlay for content on the page. @@ -152,3 +154,11 @@ export class MdBackdrop { }); } } + +@NgModule({ + declarations: [MdBackdrop], + exports: [MdBackdrop], + imports: [MdServicesModule] +}) +export class MdBackdropModule { +} diff --git a/src/components/backdrop/backdrop_spec.ts b/src/components/backdrop/backdrop_spec.ts index 248e4f89..831d703f 100644 --- a/src/components/backdrop/backdrop_spec.ts +++ b/src/components/backdrop/backdrop_spec.ts @@ -1,229 +1,219 @@ -import {inject, async} from "@angular/core/testing"; -import {ComponentFixture, TestComponentBuilder} from "@angular/core/testing"; -import {Component, DebugElement} from "@angular/core"; -import {MdBackdrop} from "../../index"; -import {By} from "@angular/platform-browser"; -import {promiseWait} from "../../platform/testing/util"; - -export function main() { - - interface IBackdropFixture { - fixture: ComponentFixture; - debug: DebugElement; - backdrop: MdBackdrop; - } +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; +import {DebugElement} from '@angular/core'; +import {By} from '@angular/platform-browser'; +import {promiseWait} from '../../platform/testing/util'; +import {MdBackdrop} from './backdrop'; +import {MdServicesModule} from '../../core/util/util.module'; + +interface IBackdropFixture { + fixture: ComponentFixture; + debug: DebugElement; + backdrop: MdBackdrop; +} + +describe('Backdrop', () => { + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [MdBackdrop], + imports: [MdServicesModule], + providers: [] + }); + }); - @Component({ - selector: 'test-app', - directives: [MdBackdrop], - template: `` - }) - class TestComponent { + function setup(show: boolean = false, transitionAddClass: boolean = true): Promise { + let result: IBackdropFixture = null; + return TestBed.compileComponents() + .then(() => { + const fixture = TestBed.createComponent(MdBackdrop); + const debug: DebugElement = fixture.debugElement; + const backdrop = fixture.componentInstance as MdBackdrop; + backdrop.transitionAddClass = transitionAddClass; + fixture.detectChanges(); + result = { + fixture: fixture, + debug: debug, + backdrop: backdrop + }; + if (show) { + return backdrop.show(); + } + }) + .then(() => result) + .catch(error => console.error.bind(console)); } - describe('Backdrop', () => { - let builder: TestComponentBuilder; - - function setup(show: boolean = false, transitionAddClass: boolean = true): Promise { - let result: IBackdropFixture = null; - return promiseWait() - .then(() => builder.createAsync(TestComponent)) - .then((fixture: ComponentFixture) => { - let debug: DebugElement = fixture.debugElement.query(By.css('md-backdrop')); - let backdrop = debug.componentInstance; - backdrop.transitionAddClass = transitionAddClass; - fixture.detectChanges(); - result = { - fixture: fixture, - debug: debug, - backdrop: backdrop - }; - if (show) { - return backdrop.show(); - } - }) - .then(() => result) - .catch(error => console.error.bind(console)); - } - - beforeEach(inject([TestComponentBuilder], (tcb) => { - builder = tcb; - })); - - describe('md-backdrop', () => { - - describe('transitionClass', () => { - it('should be added to classList when shown', async(() => { - return setup(true).then((api: IBackdropFixture) => { - return promiseWait().then(() => { - api.fixture.detectChanges(); - let el = api.debug.nativeElement; - expect(el.classList.contains(api.backdrop.transitionClass)).toBe(true); - }); - }); - })); - - it('should be removed from classList when hidden', async(() => { - return setup(true).then((api: IBackdropFixture) => { - return promiseWait().then(() => { - let el = api.debug.nativeElement; - expect(el.classList.contains(api.backdrop.transitionClass)).toBe(true); - return api.backdrop - .hide() - .then(() => promiseWait()) - .then(() => { - expect(el.classList.contains(api.backdrop.transitionClass)).toBe(false); - }); - }); - }); - })); - }); + describe('md-backdrop', () => { - describe('transitionAddClass=false', () => { - it('should remove transitionClass when shown', async(() => { - return setup(false, false).then((api: IBackdropFixture) => { + describe('transitionClass', () => { + it('should be added to classList when shown', async(() => { + return setup(true).then((api: IBackdropFixture) => { + promiseWait().then(() => { + api.fixture.detectChanges(); let el = api.debug.nativeElement; - expect(el.classList.contains(api.backdrop.transitionClass)).toBe(false); - el.classList.contains(api.backdrop.transitionClass); - return api.backdrop.show().then(() => { - expect(el.classList.contains(api.backdrop.transitionClass)).toBe(false); - }); + expect(el.classList.contains(api.backdrop.transitionClass)).toBe(true); }); - })); + }); + })); - it('should add transitionClass when hidden', async(() => { - return setup(true, false).then((api: IBackdropFixture) => { + it('should be removed from classList when hidden', async(() => { + return setup(true).then((api: IBackdropFixture) => { + return promiseWait().then(() => { let el = api.debug.nativeElement; - expect(el.classList.contains(api.backdrop.transitionClass)).toBe(false); - return api.backdrop.hide().then(() => { - expect(el.classList.contains(api.backdrop.transitionClass)).toBe(true); - }); - }); - })); - }); - - describe('clickClose', () => { - it('should be hidden by a click when true', async(() => { - return setup(true).then((api: IBackdropFixture) => { - let triggered = false; - api.backdrop.clickClose = true; - api.backdrop.hide = () => { - triggered = true; - return Promise.resolve(); - }; - api.debug.nativeElement.click(); - expect(triggered).toBe(true); - }) - .catch(error => console.error.bind(console)); - })); - - it('should not be hidden when clickClose is false', async(() => { - return setup(true).then((api: IBackdropFixture) => { - let triggered = false; - api.backdrop.clickClose = false; - api.backdrop.hide = () => { - triggered = true; - return Promise.resolve(); - }; - api.debug.nativeElement.click(); - expect(triggered).toBe(false); - }) - .catch(error => console.error.bind(console)); - })); - - it('should not be clickable during transition animation', async(() => { - return setup().then((api: IBackdropFixture) => { - let triggered = false; - api.backdrop.clickClose = true; - api.backdrop.hide = () => { - triggered = true; - return Promise.resolve(); - }; - let promise = api.backdrop.show(); - api.debug.nativeElement.click(); - expect(triggered).toBe(false); - return promise.then(() => { - expect(triggered).toBe(false); - api.debug.nativeElement.click(); - expect(triggered).toBe(true); - }); - }) - .catch(error => console.error.bind(console)); - })); - }); - - describe('show', () => { - it('emit events before and after being shown', () => { - return setup().then((api: IBackdropFixture) => { - let changes: string[] = []; - expect(api.backdrop.visible).toBe(false); - api.backdrop.onShowing.subscribe(() => changes.push('showing')); - api.backdrop.onShown.subscribe(() => changes.push('shown')); + expect(el.classList.contains(api.backdrop.transitionClass)).toBe(true); return api.backdrop - .show() + .hide() .then(() => promiseWait()) .then(() => { - expect(changes.length).toBe(2); - expect(changes[0]).toBe('showing'); - expect(changes[1]).toBe('shown'); + expect(el.classList.contains(api.backdrop.transitionClass)).toBe(false); }); }); }); + })); + }); - it('does not emit events events if already shown', async(() => { - return setup(true).then((api: IBackdropFixture) => { - let changes: number = 0; - api.backdrop.onShowing.subscribe(() => changes++); - api.backdrop.onShown.subscribe(() => changes++); - return api.backdrop - .show() - .then(() => promiseWait()) - .then(() => { - expect(changes).toBe(0); - }); - }) - .catch(error => console.error.bind(console)); - })); - }); + describe('transitionAddClass=false', () => { + it('should remove transitionClass when shown', async(() => { + return setup(false, false).then((api: IBackdropFixture) => { + let el = api.debug.nativeElement; + expect(el.classList.contains(api.backdrop.transitionClass)).toBe(false); + el.classList.contains(api.backdrop.transitionClass); + return api.backdrop.show().then(() => { + expect(el.classList.contains(api.backdrop.transitionClass)).toBe(false); + }); + }); + })); + + it('should add transitionClass when hidden', async(() => { + return setup(true, false).then((api: IBackdropFixture) => { + let el = api.debug.nativeElement; + expect(el.classList.contains(api.backdrop.transitionClass)).toBe(false); + return api.backdrop.hide().then(() => { + expect(el.classList.contains(api.backdrop.transitionClass)).toBe(true); + }); + }); + })); + }); - describe('hide', () => { - it('hide emits events before and after being hidden', async(() => { - return setup(true).then((api: IBackdropFixture) => { - let changes: string[] = []; - api.backdrop.onHiding.subscribe(() => changes.push('hiding')); - api.backdrop.onHidden.subscribe(() => changes.push('hidden')); - return api.backdrop - .hide() - .then(() => promiseWait()) - .then(() => { - expect(changes.length).toBe(2); - expect(changes[0]).toBe('hiding'); - expect(changes[1]).toBe('hidden'); - }); - }) - .catch(error => console.error.bind(console)); - })); - - it('does not emit events events if already hidden', async(() => { - return setup().then((api: IBackdropFixture) => { - let changes: number = 0; - expect(api.backdrop.visible).toBe(false); - api.backdrop.onHiding.subscribe(() => changes++); - api.backdrop.onHidden.subscribe(() => changes++); - return api.backdrop - .hide() - .then(() => promiseWait()) - .then(() => { - expect(changes).toBe(0); - }); - }) - .catch(error => console.error.bind(console)); - })); + describe('clickClose', () => { + it('should be hidden by a click when true', async(() => { + return setup(true).then((api: IBackdropFixture) => { + let triggered = false; + api.backdrop.clickClose = true; + api.backdrop.hide = () => { + triggered = true; + return Promise.resolve(); + }; + api.debug.nativeElement.click(); + expect(triggered).toBe(true); + }) + .catch(error => console.error.bind(console)); + })); + + it('should not be hidden when clickClose is false', async(() => { + return setup(true).then((api: IBackdropFixture) => { + let triggered = false; + api.backdrop.clickClose = false; + api.backdrop.hide = () => { + triggered = true; + return Promise.resolve(); + }; + api.debug.nativeElement.click(); + expect(triggered).toBe(false); + }) + .catch(error => console.error.bind(console)); + })); + + it('should not be clickable during transition animation', async(() => { + return setup().then((api: IBackdropFixture) => { + let triggered = false; + api.backdrop.clickClose = true; + api.backdrop.hide = () => { + triggered = true; + return Promise.resolve(); + }; + let promise = api.backdrop.show(); + api.debug.nativeElement.click(); + expect(triggered).toBe(false); + return promise.then(() => { + expect(triggered).toBe(false); + api.debug.nativeElement.click(); + expect(triggered).toBe(true); + }); + }) + .catch(error => console.error.bind(console)); + })); + }); + + describe('show', () => { + it('emit events before and after being shown', () => { + return setup().then((api: IBackdropFixture) => { + let changes: string[] = []; + expect(api.backdrop.visible).toBe(false); + api.backdrop.onShowing.subscribe(() => changes.push('showing')); + api.backdrop.onShown.subscribe(() => changes.push('shown')); + return api.backdrop + .show() + .then(() => promiseWait()) + .then(() => { + expect(changes.length).toBe(2); + expect(changes[0]).toBe('showing'); + expect(changes[1]).toBe('shown'); + }); + }); }); + + it('does not emit events events if already shown', async(() => { + return setup(true).then((api: IBackdropFixture) => { + let changes: number = 0; + api.backdrop.onShowing.subscribe(() => changes++); + api.backdrop.onShown.subscribe(() => changes++); + return api.backdrop + .show() + .then(() => promiseWait()) + .then(() => { + expect(changes).toBe(0); + }); + }) + .catch(error => console.error.bind(console)); + })); }); + describe('hide', () => { + it('hide emits events before and after being hidden', async(() => { + return setup(true).then((api: IBackdropFixture) => { + let changes: string[] = []; + api.backdrop.onHiding.subscribe(() => changes.push('hiding')); + api.backdrop.onHidden.subscribe(() => changes.push('hidden')); + return api.backdrop + .hide() + .then(() => promiseWait()) + .then(() => { + expect(changes.length).toBe(2); + expect(changes[0]).toBe('hiding'); + expect(changes[1]).toBe('hidden'); + }); + }) + .catch(error => console.error.bind(console)); + })); + + it('does not emit events events if already hidden', async(() => { + return setup().then((api: IBackdropFixture) => { + let changes: number = 0; + expect(api.backdrop.visible).toBe(false); + api.backdrop.onHiding.subscribe(() => changes++); + api.backdrop.onHidden.subscribe(() => changes++); + return api.backdrop + .hide() + .then(() => promiseWait()) + .then(() => { + expect(changes).toBe(0); + }); + }) + .catch(error => console.error.bind(console)); + })); + }); }); - -} +}); diff --git a/src/components/button/button.scss b/src/components/button/button.scss deleted file mode 100644 index ae98edd3..00000000 --- a/src/components/button/button.scss +++ /dev/null @@ -1,283 +0,0 @@ -@import "../../core/style/variables"; -@import "../../core/style/shadows"; -// TODO(jelbourn): This goes away. -@import "../../core/style/default-theme"; - -// TODO(jelbourn): Move variables and mixins into a partial file. -// TODO(jelbourn): Measure perf benefits for translate3d and will-change. -// TODO(jelbourn): Figure out if anchor hover underline actually happens in any browser. - -// Standard button sizing. -$md-button-padding: 0 rem(0.600) !default; -$md-button-min-width: rem(8.800) !default; -$md-button-margin: rem(0.600) rem(0.800) !default; -$md-button-line-height: rem(3.60) !default; -$md-button-border-radius: 3px !default; - -// FAB sizing. -$md-fab-border-radius: 50%; -$md-fab-size: rem(5.600) !default; -$md-fab-line-height: rem(5.600) !default; -$md-fab-padding: rem(1.60) !default; -$md-fab-mini-size: rem(4.00) !default; -$md-fab-mini-line-height: rem(4.00) !default; - -// Icon button sizing. -$md-icon-button-height: rem(4.000) !default; -$md-icon-button-width: rem(4.000) !default; -$md-icon-button-margin: rem(0.600) !default; -$md-icon-border-radius: $md-fab-border-radius; - -/** Mixin to create distinct classes for fab positions, e.g. ".md-fab-position-bottom-right". */ -@mixin md-fab-position($spot, $top: auto, $right: auto, $bottom: auto, $left: auto) { - .md-fab-position-#{$spot} { - top: $top; - right: $right; - bottom: $bottom; - left: $left; - position: absolute; - } -} - -@mixin md-ripple-base() { - background-clip: padding-box; - overflow: hidden; - // The following hack causes Safari/Chrome to respect overflow hidden for ripples - -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC'); -} - -/** Mixin to set button size to fit an icon */ -@mixin md-button-icon { - margin: 0 $md-icon-button-margin; - height: $md-icon-button-height; - min-width: 0; - line-height: $icon-size; - padding: $baseline-grid; - width: $md-icon-button-width; - border-radius: $md-icon-border-radius; - .md-ripple-container { - border-radius: $md-icon-border-radius; - @include md-ripple-base(); - } -} - -/** Styles for all disabled buttons. */ -@mixin md-button-disabled() { - color: md-color($md-foreground, disabled); - background-color: md-color($md-background, 300); - cursor: default; -} - -/** Base styles for all buttons. */ -@mixin md-button-base() { - box-sizing: border-box; - position: relative; - - // Reset browser `; - - /** Test component that contains an MdButton. */ - @Component({ - selector: 'test-app', - directives: [MdButton], - template: defaultTemplate - }) - class TestComponent { - clickCount: number = 0; - isDisabled: boolean = false; - - increment() { - this.clickCount++; - } - } - - let createEvent = (): MouseEvent => { - var event = document.createEvent('MouseEvent'); - event.initEvent('mouse', true, true); - return event; - }; - - describe('MdButton', () => { - let builder: TestComponentBuilder; - - beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { - builder = tcb; - })); - - function setup(template: string = defaultTemplate): Promise> { - return builder - .overrideTemplate(TestComponent, template) - .createAsync(TestComponent) - .then((fixture: ComponentFixture) => { - fixture.detectChanges(); - return fixture; - }).catch(console.error.bind(console)); - } - - describe('button[md-button]', () => { - - it('should handle a click on the button', () => { - return setup().then((fixture: ComponentFixture) => { - let testComponent = fixture.debugElement.componentInstance; - let buttonDebugElement = fixture.debugElement.query(By.css('button')); - - buttonDebugElement.nativeElement.click(); - expect(testComponent.clickCount).toBe(1); - }); - }); - - - it('should ink ripple when clicked', () => { - return setup().then((fixture: ComponentFixture) => { - let button: DebugElement = fixture.debugElement.children[0]; - - let save = Ink.rippleEvent; - let fired = false; - Ink.rippleEvent = () => { - fired = true; - return Promise.resolve(); - }; - - let event = createEvent(); - button.triggerEventHandler('mousedown', event); - - - expect(fired).toBe(true); - Ink.rippleEvent = save; - }); - }); - - it('should not ink ripple with md-no-ink attribute', () => { - let template = ``; - return setup(template).then((fixture: ComponentFixture) => { - let button: DebugElement = fixture.debugElement.children[0]; - let save = Ink.rippleEvent; - let fired = false; - Ink.rippleEvent = () => { - fired = true; - return Promise.resolve(); - }; - - let event = createEvent(); - button.triggerEventHandler('mousedown', event); - - expect(fired).toBe(false); - Ink.rippleEvent = save; - }); - }); - - it('should disable the button', () => { - return setup().then((fixture: ComponentFixture) => { - let testAppComponent = fixture.debugElement.componentInstance; - let buttonDebugElement = fixture.debugElement.query(By.css('button')); - let buttonElement = buttonDebugElement.nativeElement; - - // The button should initially be enabled. - expect(buttonElement.disabled).toBe(false); - - // After the disabled binding has been changed. - testAppComponent.isDisabled = true; - fixture.detectChanges(); - - // The button should should now be disabled. - expect(buttonElement.disabled).toBe(true); - - // Clicking the button should not invoke the handler. - buttonElement.click(); - expect(testAppComponent.clickCount).toBe(0); - }); - }); - }); - - describe('a[md-button]', () => { - const anchorTemplate = `Go`; - - beforeEach(() => { - builder = builder.overrideView( - TestComponent, new ViewMetadata({template: anchorTemplate, directives: [MdAnchor]})); - }); - - it('should remove disabled anchors from tab order', () => { - return builder.createAsync(TestComponent).then((fixture: ComponentFixture) => { - let testAppComponent = fixture.debugElement.componentInstance; - let anchorDebugElement = fixture.debugElement.query(By.css('a')); - let anchorElement = anchorDebugElement.nativeElement; - - // The anchor should initially be in the tab order. - expect(anchorElement.tabIndex).toBe(0); - - // After the disabled binding has been changed. - testAppComponent.isDisabled = true; - fixture.detectChanges(); - - // The anchor should now be out of the tab order. - expect(anchorElement.tabIndex).toBe(-1); - - }); - }); - - it('should not preventDefault on enabled anchor clicks', () => { - return builder.createAsync(TestComponent).then((fixture: ComponentFixture) => { - let anchor: DebugElement = fixture.debugElement.children[0]; - let event = createEvent(); - let triggered = false; - event.preventDefault = () => triggered = true; - anchor.triggerEventHandler('click', event); - expect(triggered).toBe(false); - }); - }); - - it('should preventDefault for disabled anchor clicks', () => { - return builder.createAsync(TestComponent).then((fixture: ComponentFixture) => { - let anchor: DebugElement = fixture.debugElement.children[0]; - let anchorComp: MdAnchor = anchor.componentInstance; - let event = createEvent(); - let triggered = false; - event.preventDefault = () => triggered = true; - anchorComp.disabled = true; - anchor.triggerEventHandler('click', event); - expect(triggered).toBe(true); - fixture.destroy(); - }); - }); - }); - }); -} - diff --git a/src/components/card/card.scss b/src/components/card/card.scss deleted file mode 100644 index 37f33232..00000000 --- a/src/components/card/card.scss +++ /dev/null @@ -1,249 +0,0 @@ -@import "../../core/style/variables"; -@import "../../core/style/shadows"; -@import "../../core/style/default-theme"; - -$card-padding: 16px !default; -$card-box-shadow: $whiteframe-shadow-z1 !default; - -md-card { - box-sizing: border-box; - display: flex; - flex-direction: column; - margin: $baseline-grid; - - box-shadow: $card-box-shadow; - - md-card-header { - padding: $card-padding; - display: flex; - flex-direction: row; - - &:first-child { - md-card-avatar { - margin-right: 12px; - } - } - - &:last-child { - md-card-avatar { - margin-left: 12px; - } - } - - md-card-avatar { - width: 40px; - height: 40px; - - .md-user-avatar, - [md-icon] { - border-radius: 50%; - } - - [md-icon] { - padding: 8px; - } - - & + md-card-header-text { - max-height: 40px; - - .md-title { - font-size: 14px; - } - } - } - - md-card-header-text { - display: flex; - flex: 1; - flex-direction: column; - - .md-subhead { - font-size: 14px; - } - } - } - - > img, - > :not(md-card-content) img { - display: flex; - flex: 0 0 auto; - width: 100%; - height: auto; - } - - md-card-title { - padding: 3 * $card-padding / 2 $card-padding $card-padding; - display: flex; - flex: 1; - flex-direction: row; - - & + md-card-content { - padding-top: 0; - } - - md-card-title-text { - flex: 1; - flex-direction: column; - display: flex; - - .md-subhead { - padding-top: 0; - font-size: 14px; - } - - &:only-child { - .md-subhead { - padding-top: 3 * $card-padding / 4; - } - } - } - - md-card-title-media { - margin-top: - $card-padding / 2; - - .md-media-sm { - height: 80px; - width: 80px; - } - .md-media-md { - height: 112px; - width: 112px; - } - .md-media-lg { - height: 152px; - width: 152px; - } - } - } - - md-card-content { - display: block; - padding: $card-padding; - - & > p { - margin: 0; - } - - .md-media-xl { - height: 240px; - width: 240px; - } - } - - .md-actions, md-card-actions { - margin: $baseline-grid; - - &[layout=column] { - [md-button] { - &:not(.md-icon-button) { - margin: $baseline-grid / 4 0; - - &:first-of-type { - margin-top: 0; - } - - &:last-of-type { - margin-bottom: 0; - } - } - - &.md-icon-button { - margin-top: 3 * $baseline-grid / 4; - margin-bottom: 3 * $baseline-grid / 4; - } - } - } - - md-card-icon-actions { - flex: 1; - justify-content: flex-start; - display: flex; - flex-direction: row; - } - - &:not([layout=column]) [md-button] { - &:not(.md-icon-button) { - margin: 0 $baseline-grid * .5; - - &:first-of-type { - margin-left: 0; - } - - &:last-of-type { - margin-right: 0; - } - } - - &.md-icon-button { - margin-left: 3 * $baseline-grid / 4; - margin-right: 3 * $baseline-grid / 4; - - &:first-of-type { - margin-left: 3 * $baseline-grid / 2; - } - - &:last-of-type { - margin-right: 3 * $baseline-grid / 2; - } - } - - & + md-card-icon-actions { - flex: 1; - justify-content: flex-end; - display: flex; - flex-direction: row; - } - } - } - - md-card-footer { - margin-top: auto; - padding: $card-padding; - } -} - -@media screen and (-ms-high-contrast: active) { - md-card { - border: 1px solid #fff; - } -} - -// -// Theme -// - -$card-border-radius: 2px !default; - -md-card { - background-color: md-color($md-background, lighter); //'{{background-color}}'; - border-radius: $card-border-radius; - - .md-card-image { - border-radius: $card-border-radius $card-border-radius 0 0; - } - - md-card-header { - md-card-avatar { - [md-icon] { - color: md-color($md-background, lighter); //'{{background-color}}'; - background-color: md-color($md-foreground, hint-text); //'{{foreground-3}}'; - } - } - - md-card-header-text { - .md-subhead { - color: md-color($md-foreground, secondary-text); //'{{foreground-2}}' - } - } - } - - md-card-title { - md-card-title-text { - &:not(:only-child) { - .md-subhead { - color: md-color($md-foreground, secondary-text); // '{{foreground-2}}'; - } - } - } - } -} diff --git a/src/components/card/card.ts b/src/components/card/card.ts deleted file mode 100644 index e5564beb..00000000 --- a/src/components/card/card.ts +++ /dev/null @@ -1,109 +0,0 @@ -import {Directive} from "@angular/core"; - -/** - * @name mdCard - * - * @description - * The `` directive is a container element used within `` containers. - * - * An image included as a direct descendant will fill the card's width, while the `` - * container will wrap text content and provide padding. An `` element can be - * optionally included to put content flush against the bottom edge of the card. - * - * Action buttons can be included in an `` element, similar to ``. - * You can then position buttons using layout attributes. - * - * Card is built with: - * * `` - Header for the card, holds avatar, text and squared image - * - `` - Card avatar - * - `md-user-avatar` - Class for user image - * - `` - * - `` - Contains elements for the card description - * - `md-title` - Class for the card title - * - `md-subhead` - Class for the card sub header - * * `` - Image for the card - * * `` - Card content title - * - `` - * - `md-headline` - Class for the card content title - * - `md-subhead` - Class for the card content sub header - * - `` - Squared image within the title - * - `md-media-sm` - Class for small image - * - `md-media-md` - Class for medium image - * - `md-media-lg` - Class for large image - * * `` - Card content - * - `md-media-xl` - Class for extra large image - * * `` - Card actions - * - `` - Icon actions - * - * Cards have constant width and variable heights; where the maximum height is limited to what can - * fit within a single view on a platform, but it can temporarily expand as needed. - * - * @usage - * ### Card with optional footer - * - * - * image caption - * - *

Card headline

- *

Card content

- * - * - * Card footer - * - * - * - * - * ### Card with actions - * - * - * image caption - * - *

Card headline

- *

Card content

- * - * - * Action 1 - * Action 2 - * - * - * - * - * ### Card with header, image, title actions and content - * - * - * - * - * - * - * - * Title - * Sub header - * - * - * image caption - * - * - * Card headline - * Card subheader - * - * - * - * Action 1 - * Action 2 - * - * - * - * - * - * - * - *

- * Card content - *

- * - * - * - */ -@Directive({selector: 'md-card'}) -export class MdContent { -} diff --git a/src/components/card/card_spec.ts b/src/components/card/card_spec.ts deleted file mode 100644 index 620163be..00000000 --- a/src/components/card/card_spec.ts +++ /dev/null @@ -1,11 +0,0 @@ -import {componentSanityCheck} from "../../platform/testing/util"; - -export function main() { - let template = ` - - Title - Content! - `; - componentSanityCheck('Card', 'md-card', template); -} - diff --git a/src/components/content/content.ts b/src/components/content/content.ts index 548653be..5d802d5c 100644 --- a/src/components/content/content.ts +++ b/src/components/content/content.ts @@ -1,4 +1,4 @@ -import {Directive} from "@angular/core"; +import {Directive, NgModule} from "@angular/core"; /** * @name mdContent @@ -18,5 +18,11 @@ import {Directive} from "@angular/core"; * */ @Directive({selector: 'md-content'}) -export class MdContent { +class MdContent { } + +@NgModule({ + declarations: [MdContent], + exports: [MdContent] +}) +export class MdContentModule {} diff --git a/src/components/content/content_spec.ts b/src/components/content/content_spec.ts index 08f0531f..47a09312 100644 --- a/src/components/content/content_spec.ts +++ b/src/components/content/content_spec.ts @@ -1,6 +1,4 @@ -import {componentSanityCheck} from "../../platform/testing/util"; +import {componentSanityCheck} from '../../platform/testing/util'; -export function main() { - componentSanityCheck('Content', 'md-content', `Content!`); -} +componentSanityCheck('Content', 'md-content', `Content!`); diff --git a/src/components/data-table/data_table.ts b/src/components/data-table/data_table.ts index 5a4c941e..42473f06 100644 --- a/src/components/data-table/data_table.ts +++ b/src/components/data-table/data_table.ts @@ -1,4 +1,17 @@ -import {Component, Input, Output, EventEmitter, ContentChild, ContentChildren, QueryList, AfterContentInit, OnDestroy} from '@angular/core'; +import { + Component, + Input, + Output, + EventEmitter, + ContentChild, + ContentChildren, + QueryList, + AfterContentInit, + OnDestroy, + NgModule +} from '@angular/core'; +import {MdCheckboxModule} from "@angular/material"; + import 'rxjs/add/operator/share'; import {MdDataTableHeaderSelectableRow, MdDataTableSelectableRow, ITableSelectableRowSelectionChange} from './data_table_selectable_tr'; @@ -16,7 +29,6 @@ export interface ITableSelectionChange { @Component({ selector: 'md-data-table', template: ``, - directives: [MdDataTableHeaderSelectableRow, MdDataTableSelectableRow], host: { '[class.md-data-table]': 'true', '[class.md-data-table-selectable]': 'selectable', @@ -116,3 +128,17 @@ export class MdDataTable implements AfterContentInit, OnDestroy { } } + +const DATA_TABLE_DIRECTIVES = [ + MdDataTable, + MdDataTableHeaderSelectableRow, + MdDataTableSelectableRow +] +@NgModule({ + declarations: DATA_TABLE_DIRECTIVES, + exports: DATA_TABLE_DIRECTIVES, + imports: [ + MdCheckboxModule + ] +}) +export class MdDataTableModule {} diff --git a/src/components/data-table/data_table_selectable_tr.ts b/src/components/data-table/data_table_selectable_tr.ts index a0df44f6..0e069d3a 100644 --- a/src/components/data-table/data_table_selectable_tr.ts +++ b/src/components/data-table/data_table_selectable_tr.ts @@ -1,7 +1,6 @@ import {Component, Output, Input, EventEmitter, Inject, Optional, forwardRef, ElementRef, AfterContentInit} from "@angular/core"; import 'rxjs/add/operator/share'; import 'rxjs/add/operator/map'; -import {MdCheckbox} from "@angular2-material/checkbox"; import {MdDataTable} from './data_table'; /** @@ -68,7 +67,6 @@ export abstract class AbstractMdDataTableSelectableRow implements AfterContentIn `, - directives: [MdCheckbox], host: { '[class.active]': 'isActive', '(click)': 'change($event)' @@ -102,7 +100,6 @@ export class MdDataTableHeaderSelectableRow extends AbstractMdDataTableSelectabl `, - directives: [MdCheckbox], host: { '[class.active]': 'isActive', '(click)': 'change($event)' diff --git a/src/components/data-table/data_table_spec.ts b/src/components/data-table/data_table_spec.ts index f72e5a1c..259e2049 100644 --- a/src/components/data-table/data_table_spec.ts +++ b/src/components/data-table/data_table_spec.ts @@ -1,22 +1,20 @@ -import {componentSanityCheck} from "../../platform/testing/util"; -import {inject, async} from "@angular/core/testing"; -import {ComponentFixture, TestComponentBuilder} from "@angular/core/testing"; -import {Component, DebugElement, EventEmitter, QueryList} from "@angular/core"; -import {CORE_DIRECTIVES} from "@angular/common"; -import {By} from "@angular/platform-browser"; -import {MdDataTableHeaderSelectableRow, MdDataTable, MdDataTableSelectableRow} from "./index"; - -export function main() { - - interface IDataTableFixture { - fixture: ComponentFixture; - comp: MdDataTable; - debug: DebugElement; - } - @Component({ - selector: 'test-app', - directives: [CORE_DIRECTIVES, MdDataTable, MdDataTableHeaderSelectableRow, MdDataTableSelectableRow], - template: ` +import {componentSanityCheck} from '../../platform/testing/util'; +import {ComponentFixture, TestBed, async} from '@angular/core/testing'; +import {Component, DebugElement, EventEmitter} from '@angular/core'; +import {By} from '@angular/platform-browser'; +import {MdDataTableHeaderSelectableRow, MdDataTable, MdDataTableSelectableRow} from './index'; +import {CommonModule} from '@angular/common'; +import {MdCheckboxModule} from '@angular/material'; + +interface IDataTableFixture { + fixture: ComponentFixture; + comp: MdDataTable; + debug: DebugElement; +} + +@Component({ + selector: 'test-app', + template: ` Unit price @@ -31,146 +29,159 @@ export function main() { ` - }) - class TestComponent { - selected: Array = []; - } +}) +class TestComponent { + selected: Array = []; +} - componentSanityCheck('Data table', 'md-data-table', ``); +componentSanityCheck('Data table', 'md-data-table', ``); - describe('Data table', () => { - let builder: TestComponentBuilder; +describe('Data table', () => { - function setup(): Promise { - return builder.createAsync(TestComponent).then((fixture: ComponentFixture) => { - let debug = fixture.debugElement.query(By.css('md-data-table')); - let comp: MdDataTable = debug.componentInstance; - let testComp = fixture.debugElement.componentInstance; + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [ + MdDataTable, + MdDataTableSelectableRow, + MdDataTableHeaderSelectableRow, + TestComponent + ], + imports: [CommonModule, MdCheckboxModule], + providers: [] + }); + }); + + function setup(): Promise { + let result: IDataTableFixture = null; + return TestBed.compileComponents() + .then(() => { + const fixture = TestBed.createComponent(TestComponent); + const debug = fixture.debugElement.query(By.css('md-data-table')); + const comp: MdDataTable = debug.componentInstance; + const testComp = fixture.debugElement.componentInstance; testComp.selected = []; fixture.detectChanges(); - return { + result = { fixture: fixture, comp: comp, debug: debug }; - }).catch(console.error.bind(console)); - } - - beforeEach(inject([TestComponentBuilder], (tcb) => { - builder = tcb; - })); - - describe('md-data-table', () => { - it('should initialize selected', () => { - return setup().then((api: IDataTableFixture) => { - expect(api.comp.selected.length).toEqual(0); - api.fixture.destroy(); - }); + return fixture.whenStable(); + }) + .then(() => result) + .catch(error => { + console.error(error); }); + } - it('should toggle checked value when a click is fired on a row checkbox', () => { - return setup().then((api: IDataTableFixture) => { - let row = api.debug.query(By.css('tbody tr:first-child')); - row.nativeElement.click(); - expect(api.comp.selected.length).toEqual(1); - expect(api.comp.selected[0]).toEqual('0'); - row.nativeElement.click(); - expect(api.comp.selected.length).toEqual(0); - api.fixture.destroy(); - }); + describe('md-data-table', () => { + it('should initialize selected', async(() => { + setup().then((api: IDataTableFixture) => { + expect(api.comp.selected.length).toEqual(0); + api.fixture.destroy(); }); + })); - it('should check all row checkbox when a click is fired on master checkbox', () => { - return setup().then((api: IDataTableFixture) => { - let masterRow = api.debug.query(By.css('thead tr:first-child')); - masterRow.nativeElement.click(); - expect(api.comp.selected.length).toEqual(2); - expect(api.comp.selected[0]).toEqual('0'); - masterRow.nativeElement.click(); - expect(api.comp.selected.length).toEqual(0); - api.fixture.destroy(); - }); + it('should toggle checked value when a click is fired on a row checkbox', async(() => { + setup().then((api: IDataTableFixture) => { + let row = api.debug.query(By.css('tbody tr:first-child')); + row.nativeElement.click(); + expect(api.comp.selected.length).toEqual(1); + expect(api.comp.selected[0]).toEqual('0'); + row.nativeElement.click(); + expect(api.comp.selected.length).toEqual(0); + api.fixture.destroy(); }); + })); - it('should uncheck master checkbox if a row checkbox is unchecked', () => { - return setup().then((api: IDataTableFixture) => { - let masterRow = api.debug.query(By.css('thead tr:first-child')), - row = api.debug.query(By.css('tbody tr:first-child')).nativeElement; - - masterRow.nativeElement.click(); - expect(masterRow.componentInstance.isActive).toBe(true); - row.click(); - expect(api.comp.selected.length).toEqual(1); - expect(api.comp.selected[0]).toEqual('1'); - expect(masterRow.componentInstance.isActive).toBe(false); - api.fixture.destroy(); - }); + it('should check all row checkbox when a click is fired on master checkbox', async(() => { + setup().then((api: IDataTableFixture) => { + let masterRow = api.debug.query(By.css('thead tr:first-child')); + masterRow.nativeElement.click(); + expect(api.comp.selected.length).toEqual(2); + expect(api.comp.selected[0]).toEqual('0'); + masterRow.nativeElement.click(); + expect(api.comp.selected.length).toEqual(0); + api.fixture.destroy(); }); + })); - it('should fire a selectable_change event when a row checkbox change', () => { - return setup().then((api: IDataTableFixture) => { - let row = api.debug.query(By.css('tbody tr:first-child')).nativeElement; + it('should uncheck master checkbox if a row checkbox is unchecked', async(() => { + setup().then((api: IDataTableFixture) => { + const masterRow = api.debug.query(By.css('thead tr:first-child')); + const row = api.debug.query(By.css('tbody tr:first-child')).nativeElement; + + masterRow.nativeElement.click(); + expect(masterRow.componentInstance.isActive).toBe(true); + row.click(); + expect(api.comp.selected.length).toEqual(1); + expect(api.comp.selected[0]).toEqual('1'); + expect(masterRow.componentInstance.isActive).toBe(false); + api.fixture.destroy(); + }); + })); - api.comp.onSelectableAll.subscribe((event) => { - expect(event.name).toBe('selectable_change'); - }); + it('should fire a selectable_change event when a row checkbox change', async(() => { + setup().then((api: IDataTableFixture) => { + const row = api.debug.query(By.css('tbody tr:first-child')).nativeElement; - row.click(); - api.fixture.destroy(); + api.comp.onSelectableAll.subscribe((event) => { + expect(event.name).toBe('selectable_change'); }); + + row.click(); + api.fixture.destroy(); }); - }); + })); + }); - describe('_unsubscribeChildren', () => { + describe('_unsubscribeChildren', () => { - it('should reset the selected values', () => { - return setup().then((api: IDataTableFixture) => { - api.comp.selected = ['1', '2']; + it('should reset the selected values', async(() => { + setup().then((api: IDataTableFixture) => { + api.comp.selected = ['1', '2']; - api.comp._unsubscribeChildren(); + api.comp._unsubscribeChildren(); - expect(api.comp.selected.length).toEqual(0); - }); + expect(api.comp.selected.length).toEqual(0); }); + })); - it('should unsubscribe to listener', () => { - return setup().then((api: IDataTableFixture) => { - let emitter = new EventEmitter(false), - spy = jasmine.createSpy('spy'); + it('should unsubscribe to listener', async(() => { + setup().then((api: IDataTableFixture) => { + const emitter = new EventEmitter(false); + const spy = jasmine.createSpy('spy'); - emitter.subscribe(spy); + emitter.subscribe(spy); - api.comp._listeners = [emitter]; + api.comp._listeners = [emitter]; - emitter.emit({name: 'custom_event'}); - api.comp._unsubscribeChildren() + emitter.emit({name: 'custom_event'}); + api.comp._unsubscribeChildren() - expect(() => { - emitter.emit({name: 'custom_event2'}) - }).toThrow(); + expect(() => { + emitter.emit({name: 'custom_event2'}) + }).toThrow(); - expect(spy.calls.count()).toEqual(1); - }); + expect(spy.calls.count()).toEqual(1); }); + })); - }); + }); - describe('_updateChildrenListener', () => { + describe('_updateChildrenListener', () => { - it('should ask unsubscription', () => { - return setup().then((api: IDataTableFixture) => { - spyOn(api.comp, '_unsubscribeChildren'); + it('should ask unsubscription', async(() => { + setup().then((api: IDataTableFixture) => { + spyOn(api.comp, '_unsubscribeChildren'); - api.comp._updateChildrenListener(api.comp._rows); + api.comp._updateChildrenListener(api.comp._rows); - expect(api.comp._unsubscribeChildren).toHaveBeenCalled(); - }); + expect(api.comp._unsubscribeChildren).toHaveBeenCalled(); }); - - }); + })); }); - -} +}); diff --git a/src/components/dialog/dialog-portal.ts b/src/components/dialog/dialog-portal.ts index 237ea295..e1a089c3 100644 --- a/src/components/dialog/dialog-portal.ts +++ b/src/components/dialog/dialog-portal.ts @@ -1,5 +1,5 @@ import {Directive, ViewContainerRef, TemplateRef} from '@angular/core'; -import {TemplatePortalDirective} from '@angular2-material/core'; +import {TemplatePortalDirective} from '@angular/material'; @Directive({selector: '[mdDialogPortal]'}) export class MdDialogPortal extends TemplatePortalDirective { diff --git a/src/components/dialog/dialog.module.ts b/src/components/dialog/dialog.module.ts new file mode 100644 index 00000000..0c5f2a1f --- /dev/null +++ b/src/components/dialog/dialog.module.ts @@ -0,0 +1,21 @@ +import {MdDialog} from './dialog'; +import {MdDialogPortal} from './dialog-portal'; +import {MdDialogActions} from './dialog-actions'; +import {MdDialogTitle} from './dialog-title'; +import {MdCoreModule} from '@angular/material'; +import {NgModule} from '@angular/core'; +import {CommonModule} from '@angular/common'; + +const DIALOG_DIRECTIVES = [ + MdDialog, MdDialogTitle, MdDialogActions, MdDialogPortal +]; +@NgModule({ + declarations: DIALOG_DIRECTIVES, + exports: DIALOG_DIRECTIVES, + imports: [ + CommonModule, + MdCoreModule + ] +}) +export class MdDialogModule { +} diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts index fa4d2a29..c8d9e611 100644 --- a/src/components/dialog/dialog.ts +++ b/src/components/dialog/dialog.ts @@ -7,11 +7,12 @@ import { EventEmitter, ViewChild, ViewEncapsulation, - OnDestroy + OnDestroy, } from '@angular/core'; -import {Overlay, OVERLAY_PROVIDERS} from '@angular2-material/core/overlay/overlay'; -import {OverlayState} from '@angular2-material/core/overlay/overlay-state'; -import {OverlayRef} from '@angular2-material/core/overlay/overlay-ref'; +import { ComponentPortal, +Overlay, OVERLAY_PROVIDERS} from '@angular/material'; +import {OverlayState} from '@angular/material'; +import {OverlayRef} from '@angular/material'; import {Animate} from '../../core/util/animate'; import {MdDialogPortal} from './dialog-portal'; import {MdDialogActions} from './dialog-actions'; @@ -23,7 +24,6 @@ import {KeyCodes} from '../../core/key_codes'; @Component({ selector: 'md-dialog', - directives: [MdDialogTitle, MdDialogActions, MdDialogPortal], providers: [Overlay, OVERLAY_PROVIDERS], encapsulation: ViewEncapsulation.None, template: ` @@ -31,7 +31,7 @@ import {KeyCodes} from '../../core/key_codes';
- +
`, diff --git a/src/components/dialog/dialog_spec.ts b/src/components/dialog/dialog_spec.ts index 231ae8b0..e0143fc9 100644 --- a/src/components/dialog/dialog_spec.ts +++ b/src/components/dialog/dialog_spec.ts @@ -1,11 +1,116 @@ -import {componentSanityCheck} from "../../platform/testing/util"; +import {componentSanityCheck, promiseWait} from '../../platform/testing/util'; +import {async, TestBed} from '@angular/core/testing'; +import {MATERIAL_BROWSER_PROVIDERS} from '../../index'; +import {MdServicesModule} from '../../core/util/util.module'; +import {Component, ViewChild} from '@angular/core'; +import {MdDialog} from './dialog'; +import {ComponentFixture} from '@angular/core/testing/component_fixture'; +import {MdDialogModule} from './dialog.module'; -export function main() { - let template = ` +const template = ` Title Content! `; - componentSanityCheck('Dialog', 'md-dialog', template); -} +componentSanityCheck('Dialog', 'md-dialog', template); + +describe('Dialog', () => { + @Component({ + template: ` + + Title + Content! +`, + }) + class MdDialogComponentTest { + @ViewChild(MdDialog) dialog: MdDialog; + } + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [MdDialogComponentTest], + imports: [MdServicesModule, MdDialogModule], + providers: [MATERIAL_BROWSER_PROVIDERS] + }); + }); + + function setup(): Promise> { + return TestBed.compileComponents() + .then(() => { + const fixture = TestBed.createComponent(MdDialogComponentTest); + fixture.detectChanges(); + return fixture.whenStable().then(() => fixture); + }) + .catch(error => { + console.error(error); + }); + } + + describe('show', () => { + it('(onShow) emits after dialog is shown', async(() => { + setup().then((fixture: ComponentFixture) => { + let tc: MdDialogComponentTest = fixture.componentInstance; + let called = false; + let sub = tc.dialog.onShow.subscribe(() => called = true); + return tc.dialog.show().then(() => promiseWait()).then(() => { + sub.unsubscribe(); + expect(called).toBe(true); + return tc.dialog.close(); + }); + }); + })); + }); + describe('close', () => { + it('dialog result is true if called with no arguments', async(() => { + setup().then((fixture: ComponentFixture) => { + let tc: MdDialogComponentTest = fixture.componentInstance; + let result: any = 1337; + let sub = tc.dialog.onClose.subscribe((r: any) => result = r); + return tc.dialog.show() + .then(() => tc.dialog.close()) + .then(() => promiseWait()) + .then(() => { + sub.unsubscribe(); + expect(result).toBe(true); + }); + + }); + + })); + it('(onClose) emits after dialog is closed and cancel = false', async(() => { + setup().then((fixture: ComponentFixture) => { + let tc: MdDialogComponentTest = fixture.componentInstance; + let result: any; + let sub = tc.dialog.onClose.subscribe((r) => result = r); + return tc.dialog.show() + .then(() => tc.dialog.close(1337, false)) + .then(() => promiseWait()) + .then(() => { + sub.unsubscribe(); + expect(result).toBe(1337); + }); + + }); + + })); + it('(onCancel) emits after dialog is closed and cancel = true', async(() => { + setup().then((fixture: ComponentFixture) => { + let tc: MdDialogComponentTest = fixture.componentInstance; + let result: any; + let sub = tc.dialog.onCancel.subscribe((r) => result = r); + return tc.dialog.show() + .then(() => tc.dialog.close('test', true)) + .then(() => promiseWait()) + .then(() => { + sub.unsubscribe(); + expect(result).toBe('test'); + }); + + }); + + })); + }); +}); + + diff --git a/src/components/divider/divider.ts b/src/components/divider/divider.ts index 285b3d55..ac8bb499 100644 --- a/src/components/divider/divider.ts +++ b/src/components/divider/divider.ts @@ -1,4 +1,4 @@ -import {Component, ViewEncapsulation} from "@angular/core"; +import {NgModule, Component, ViewEncapsulation} from "@angular/core"; /** * @name mdDivider @@ -20,5 +20,11 @@ import {Component, ViewEncapsulation} from "@angular/core"; template: '', encapsulation: ViewEncapsulation.None }) -export class MdDivider { +class MdDivider { } + +@NgModule({ + declarations: [MdDivider], + exports: [MdDivider] +}) +export class MdDividerModule {} diff --git a/src/components/divider/divider_spec.ts b/src/components/divider/divider_spec.ts index 3077de1f..a7730e6e 100644 --- a/src/components/divider/divider_spec.ts +++ b/src/components/divider/divider_spec.ts @@ -1,6 +1,4 @@ -import {componentSanityCheck} from "../../platform/testing/util"; +import {componentSanityCheck} from '../../platform/testing/util'; -export function main() { - componentSanityCheck('Divider', 'md-divider', ``); -} +componentSanityCheck('Divider', 'md-divider', ``); diff --git a/src/components/form/messages.scss b/src/components/form/messages.scss deleted file mode 100644 index a22954e6..00000000 --- a/src/components/form/messages.scss +++ /dev/null @@ -1,20 +0,0 @@ -@import "../../core/style/variables"; -@import "../../core/style/default-theme"; -@import "../../core/style/mixins"; - -form { - // - // ngMessage base styles - // - md-messages, [md-messages] { - position: relative; - order: 4; - overflow: hidden; - @include rtl(clear, left, right); - } - - md-message, [md-message] { - overflow: hidden; - } - -} diff --git a/src/components/form/messages.ts b/src/components/form/messages.ts deleted file mode 100644 index 5e6ec602..00000000 --- a/src/components/form/messages.ts +++ /dev/null @@ -1,124 +0,0 @@ -import {NgFormModel, NgControlName, ControlGroup, AbstractControl} from "@angular/common"; -import {Input, Directive, Optional, SkipSelf, Host, OnDestroy, OnInit, QueryList, Query} from "@angular/core"; - - -// TODO(jd): Behaviors to test -// - md-messages with no md-message children act as message for all errors in a field -// - md-message="propName" binds to FormBuilder group by given name -// - [md-message]="viewLocal" binds to given NgControlName referenced from the view -// - [md-messages] adds md-valid and md-invalid class based on field validation state -// - throws informative errors when it fails to bind to a given form field because it cannot be found. - -@Directive({ - selector: '[md-message]', - host: { - '[style.display]': 'okay ? "none" : "inherit"' - } -}) -export class MdMessage { - @Input('md-message') - errorKey: string; - okay: boolean = true; -} - - -@Directive({ - selector: '[md-messages]', - host: { - 'md-messages': '', - '[style.display]': '(valid || !isTouched) ? "none" : "inherit"', - '[class.md-valid]': 'valid && isTouched', - '[class.md-invalid]': '!valid && isTouched' - } -}) -export class MdMessages implements OnInit, OnDestroy { - - @Input('md-messages') - property: string|NgControlName; - - get valid(): boolean { - if (this.property instanceof NgControlName) { - let ctrl = this.property; - return !!ctrl.valid; - } - let prop = this.property; - let group = this.form.control; - let ctrl = group.controls[prop]; - return ctrl && ctrl.valid; - } - - get isTouched(): boolean { - if (this.property instanceof NgControlName) { - return (this.property).touched; - } - let prop = this.property; - let group = this.form.control; - let ctrl = group.controls[prop]; - return ctrl && ctrl.touched; - } - - - constructor(@Query(MdMessage) - public messages: QueryList, - @Optional() @SkipSelf() @Host() - public form: NgFormModel) { - } - - /** - * Subscription to value changes that is to be dropped when the component is destroyed. - * @type {null} - * @private - */ - private _unsubscribe: any = null; - - ngOnInit() { - if (this.property instanceof NgControlName) { - let ctrl: NgControlName = this.property; - this.form = ctrl.formDirective; - this._unsubscribe = (ctrl).update.subscribe(this._valueChanged.bind(this)); - } - else { - if (!this.form) { - throw new Error('md-messages cannot bind to text property without a parent NgFormModel'); - } - let prop = this.property; - let group: ControlGroup = this.form.control; - if (!group) { - throw new Error('md-messages cannot bind to text property without a ControlGroup'); - } - let ctrl: AbstractControl = group.controls[prop]; - if (!ctrl) { - throw new Error(`md-messages cannot find property(${prop}) in ControlGroup!`); - } - this._unsubscribe = ctrl.statusChanges.subscribe(this._valueChanged.bind(this)); - } - } - - ngOnDestroy(): any { - this._unsubscribe.unsubscribe(); - } - - private _valueChanged() { - let errors: {[errorKey: string]: string} = null; - if (this.property instanceof NgControlName) { - let ctrl: NgControlName = this.property; - errors = ctrl.errors; - } - else { - let prop = this.property; - let group = this.form.control; - let ctrl: AbstractControl = group.controls[prop]; - errors = ctrl.errors; - } - if (errors) { - this.messages.toArray().forEach((m: MdMessage) => { - m.okay = !m.errorKey ? !errors : !errors.hasOwnProperty(m.errorKey); - }); - } else { - this.messages.toArray().forEach(function (m) { - m.okay = true; - }); - } - - } -} diff --git a/src/components/form/messages_spec.ts b/src/components/form/messages_spec.ts deleted file mode 100644 index 27d11a35..00000000 --- a/src/components/form/messages_spec.ts +++ /dev/null @@ -1,106 +0,0 @@ -import {inject, async} from '@angular/core/testing'; -import {ComponentFixture, TestComponentBuilder} from '@angular/core/testing'; -import {Component} from '@angular/core'; -import {MdMessage, MdMessages} from '../../index'; -import {CORE_DIRECTIVES, FORM_DIRECTIVES, Control} from '@angular/common'; -import {By} from '@angular/platform-browser'; -import {promiseWait} from '../../platform/testing/util'; - - -export function main() { - - interface IFormMessagesFixture { - fixture: ComponentFixture; - container: MdMessages; - messages: MdMessage[]; - } - @Component({ - selector: 'test-app', - directives: [CORE_DIRECTIVES, FORM_DIRECTIVES, MdMessage, MdMessages], - template: ` -
- -
-
required
-
-
` - }) - class TestComponent { - name: string = 'MorTon'; - } - - describe('Form Messages', () => { - let builder: TestComponentBuilder; - - function setup(template: string = null): Promise { - let prep = template === null ? - builder.createAsync(TestComponent) : - builder.overrideTemplate(TestComponent, template).createAsync(TestComponent); - return prep.then((fixture: ComponentFixture) => { - fixture.detectChanges(); - let container = fixture.debugElement.query(By.directive(MdMessages)).injector.get(MdMessages) as MdMessages; - let messages = fixture.debugElement.queryAll(By.directive(MdMessage)).map(b => b.injector.get(MdMessage)) as MdMessage[]; - return { - fixture: fixture, - container: container, - messages: messages - }; - }); - } - - beforeEach(inject([TestComponentBuilder], (tcb) => { - builder = tcb; - })); - - describe('md-messages', () => { - it('should error if used outside of an NgFormControl', () => { - return setup(`
`).catch((err: any) => { - expect(err).toBeDefined(); - }); - }); - - it('should initialize when given model and control group are present', () => { - return setup().then((api: IFormMessagesFixture) => { - expect(api.container.isTouched).toBe(false); - api.fixture.destroy(); - }); - }); - - it('should bind local view references #ref="ngForm"', () => { - return setup().then((api: IFormMessagesFixture) => { - expect(api.container.isTouched).toBe(false); - expect(api.messages.length).toBe(1); - expect(api.container.form).not.toBeNull(); - expect(api.fixture.componentInstance.name).toBe('MorTon'); - }); - }); - - it('should re-export valid from control or form', async(() => { - return setup().then((api: IFormMessagesFixture) => { - return promiseWait().then(() => { - let ctrl: Control = (api.container.property).control; - expect(ctrl.value).toBe(null); - expect(api.container.valid).toBe(false); - expect(api.container.valid).toBe(ctrl.valid); - ctrl.updateValue('MorTon', {emitEvent: true}); - api.fixture.detectChanges(); - expect(api.container.valid).toBe(true); - }); - }); - })); - - }); - - -// TODO(jd): Behaviors to test -// - md-messages with no md-message children act as message for all errors in a field -// - md-message="propName" binds to FormBuilder group by given name -// - [md-messages]="viewLocal" binds to given NgControlName referenced from the view -// - [md-messages] adds md-valid and md-invalid class based on field validation state -// - throws informative errors when it fails to bind to a given form field because it cannot be found. - - }); - - -} - diff --git a/src/components/form/validators.ts b/src/components/form/validators.ts deleted file mode 100644 index 9faea168..00000000 --- a/src/components/form/validators.ts +++ /dev/null @@ -1,148 +0,0 @@ -import {NG_VALIDATORS, Validator, Control, AbstractControl} from "@angular/common"; -import {Input, Provider, Directive, forwardRef} from "@angular/core"; -import {isNumber} from "../../core/util/util"; - -const PATTERN_VALIDATOR = new Provider(NG_VALIDATORS, { - useExisting: forwardRef(() => MdPatternValidator), - multi: true -}); - -@Directive({ - selector: '[mdPattern]', - providers: [PATTERN_VALIDATOR] -}) -export class MdPatternValidator implements Validator { - /** - * Returns a validator that checks to see if a string matches a given Regular Expression - */ - static inline(pattern: string): any { - return function validate(control: AbstractControl): {[key: string]: any} { - if (control.value === '' || new RegExp(pattern).test(control.value)) { - return null; - } - return { - mdPattern: true - }; - } - } - - @Input() - mdPattern: string; - - validate(control: Control): {[key: string]: any} { - return MdPatternValidator.inline(this.mdPattern)(control); - } -} - -const MAXLENGTH_VALIDATOR = new Provider(NG_VALIDATORS, { - useExisting: forwardRef(() => MdMaxLengthValidator), - multi: true -}); -@Directive({selector: '[mdMaxLength]', providers: [MAXLENGTH_VALIDATOR]}) -export class MdMaxLengthValidator implements Validator { - /** - * Returns a validator that checks for a maximum length of a string - */ - static inline(length: number|string): any { - return function validate(control: AbstractControl): {[key: string]: any} { - if (!control.value || control.value.length <= length) { - return null; - } - return { - mdMaxLength: true - }; - } - } - - @Input() - mdMaxLength: string; - - validate(control: Control): {[key: string]: any} { - return MdMaxLengthValidator.inline(this.mdMaxLength)(control); - } -} - -const MAXVALUE_VALIDATOR = new Provider(NG_VALIDATORS, { - useExisting: forwardRef(() => MdMaxValueValidator), - multi: true -}); -@Directive({selector: '[mdMax]', providers: [MAXVALUE_VALIDATOR]}) -export class MdMaxValueValidator implements Validator { - /** - * Returns a validator that checks for a maximum number value - */ - static inline(length: number|string): any { - return function validate(control: AbstractControl): {[key: string]: any} { - if (isNaN(control.value) || control.value <= length) { - return null; - } - return { - mdMax: true - }; - } - } - - @Input() - mdMax: string; - - validate(control: Control): {[key: string]: any} { - return MdMaxValueValidator.inline(this.mdMax)(control); - } -} - -const MINVALUE_VALIDATOR = new Provider(NG_VALIDATORS, { - useExisting: forwardRef(() => MdMinValueValidator), - multi: true -}); -@Directive({selector: '[mdMin]', providers: [MINVALUE_VALIDATOR]}) -export class MdMinValueValidator implements Validator { - /** - * Returns a validator that checks for a minimum number value - */ - static inline(length: number|string): any { - return function validate(control: AbstractControl): {[key: string]: any} { - if (isNaN(control.value) || control.value >= length) { - return null; - } - return { - mdMin: true - }; - } - } - - @Input() - mdMin: string; - - validate(control: Control): {[key: string]: any} { - return MdMinValueValidator.inline(this.mdMin)(control); - } -} - -const NUMBER_REQUIRED_VALIDATOR = new Provider(NG_VALIDATORS, { - useExisting: forwardRef(() => MdNumberRequiredValidator), - multi: true -}); -@Directive({selector: '[mdNumberRequired]', providers: [NUMBER_REQUIRED_VALIDATOR]}) -export class MdNumberRequiredValidator implements Validator { - /** - * Returns a validator that checks for the existence of a truthy value - */ - static inline(): any { - return function validate(control: AbstractControl): {[key: string]: any} { - let isNum = !isNaN(control.value) && isNumber(control.value); - return isNum ? null : {mdNumberRequired: true}; - } - } - - validate(control: Control): {[key: string]: any} { - return MdNumberRequiredValidator.inline()(control); - } -} - -export const INPUT_VALIDATORS = [ - MdMaxLengthValidator, - MdPatternValidator, - MdMaxValueValidator, - MdMinValueValidator, - MdNumberRequiredValidator -]; diff --git a/src/components/form/validators_spec.ts b/src/components/form/validators_spec.ts deleted file mode 100644 index 41fd1dbd..00000000 --- a/src/components/form/validators_spec.ts +++ /dev/null @@ -1,40 +0,0 @@ -import {Control} from "@angular/common"; -import {MdPatternValidator, MdNumberRequiredValidator} from "../../index"; - -export function main() { - - describe("Validators", () => { - describe("MdPatternValidator", () => { - it("should not error when pattern is found", () => { - let v = MdPatternValidator.inline('[a-z]+'); - expect(v(new Control("abcd"))).toEqual(null); - }); - - it("should error when pattern is not found", () => { - let v = MdPatternValidator.inline('[a-z]+'); - expect(v(new Control("1234"))).toEqual({mdPattern: true}); - }); - it("should error when pattern is not found", () => { - let v = MdPatternValidator.inline('[a-z]+'); - expect(v(new Control("1234"))).toEqual({mdPattern: true}); - }); - }); - describe("MdNumberRequiredValidator", () => { - let v = MdNumberRequiredValidator.inline(); - it("should not error when number is found", () => { - expect(v(new Control(2))).toEqual(null); - }); - it("should error when number is a string", () => { - expect(v(new Control("1234"))).toEqual({mdNumberRequired: true}); - }); - it("should error when given NaN", () => { - expect(v(new Control(NaN))).toEqual({mdNumberRequired: true}); - }); - it("should error when given nonsense values", () => { - expect(v(new Control(null))).toEqual({mdNumberRequired: true}); - expect(v(new Control(undefined))).toEqual({mdNumberRequired: true}); - expect(v(new Control('sunset'))).toEqual({mdNumberRequired: true}); - }); - }); - }); -} diff --git a/src/components/icon/icon.scss b/src/components/icon/icon.scss deleted file mode 100644 index de661f88..00000000 --- a/src/components/icon/icon.scss +++ /dev/null @@ -1,22 +0,0 @@ -@import '../../core/style/variables'; - -$icon-size: rem(2.4); - -md-icon { - margin: auto; - background-repeat: no-repeat no-repeat; - display: inline-block; - vertical-align: middle; - fill: currentColor; - height: $icon-size; - width: $icon-size; - - svg { - pointer-events: none; - } - - &[md-font-icon] { - line-height: 1; - width: auto; - } -} diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts deleted file mode 100644 index 720e017a..00000000 --- a/src/components/icon/icon.ts +++ /dev/null @@ -1,10 +0,0 @@ -import {Directive} from "@angular/core"; - -@Directive({ - selector: '[md-icon], .md-icon', - host: { - '[class.material-icons]': 'true' - } -}) -export class MdIcon { -} diff --git a/src/components/ink/ink.ts b/src/components/ink/ink.ts deleted file mode 100644 index e2fe8532..00000000 --- a/src/components/ink/ink.ts +++ /dev/null @@ -1,25 +0,0 @@ -import {ElementRef, Directive, Output, EventEmitter} from "@angular/core"; -import {Ink} from "../../core/util/ink"; - -@Directive({ - selector: '[md-ink]', - host: { - '(mousedown)': 'onMousedown($event)' - }, -}) -export class MdInk { - - @Output() - inked: EventEmitter = new EventEmitter(false); - - constructor(private _element: ElementRef) { - } - - onMousedown(event) { - if (this._element && Ink.canApply(this._element.nativeElement)) { - Ink.rippleEvent(this._element.nativeElement, event).then(() => { - this.inked.emit(this); - }); - } - } -} diff --git a/src/components/ink/ink_spec.ts b/src/components/ink/ink_spec.ts deleted file mode 100644 index 66af1915..00000000 --- a/src/components/ink/ink_spec.ts +++ /dev/null @@ -1,93 +0,0 @@ -import {inject} from '@angular/core/testing'; -import {ComponentFixture, TestComponentBuilder} from '@angular/core/testing'; -import {Component, DebugElement} from '@angular/core'; -import {Ink, MdInk} from '../../index'; -import {By} from '@angular/platform-browser'; - -export function main() { - - const defaultTemplate = `
`; - - @Component({ - selector: 'test-app', - directives: [MdInk], - template: defaultTemplate - }) - class TestComponent { - } - - let createEvent = (): MouseEvent => { - var event = document.createEvent('MouseEvent'); - event.initEvent('mouse', true, true); - return event; - }; - - describe('MdInk', () => { - - let builder: TestComponentBuilder; - - function setup(template: string = defaultTemplate): Promise> { - return builder - .overrideTemplate(TestComponent, template) - .createAsync(TestComponent) - .then((fixture: ComponentFixture) => { - fixture.detectChanges(); - return fixture; - }).catch(console.error.bind(console)); - } - - beforeEach(inject([TestComponentBuilder], (tcb) => { - builder = tcb; - })); - - describe('[md-ink]', () => { - it('should ink ripple when clicked', () => { - setup().then((fixture: ComponentFixture) => { - let element: DebugElement = fixture.debugElement.query(By.css('[md-ink]')); - - let save = Ink.rippleEvent; - let fired = false; - Ink.rippleEvent = () => { - fired = true; - return Promise.resolve(); - }; - - let event = createEvent(); - element.triggerEventHandler('mousedown', event); - - - expect(fired).toBe(true); - Ink.rippleEvent = save; - }); - }); - - it('should ink ripple without assertion mock', () => { - setup().then((fixture: ComponentFixture) => { - let element: DebugElement = fixture.debugElement.query(By.css('[md-ink]')); - let event = createEvent(); - element.triggerEventHandler('mousedown', event); - }); - }); - - it('should not ink ripple with md-no-ink attribute', () => { - let template = `
`; - setup(template).then((fixture: ComponentFixture) => { - let element: DebugElement = fixture.debugElement.query(By.css('[md-ink]')); - let save = Ink.rippleEvent; - let fired = false; - Ink.rippleEvent = () => { - fired = true; - return Promise.resolve(); - }; - - let event = createEvent(); - element.triggerEventHandler('mousedown', event); - - expect(fired).toBe(false); - Ink.rippleEvent = save; - }); - }); - }); - }); -} - diff --git a/src/components/list/list.ts b/src/components/list/list.ts deleted file mode 100644 index 8ca903dc..00000000 --- a/src/components/list/list.ts +++ /dev/null @@ -1,69 +0,0 @@ -import {Directive, Component} from "@angular/core"; - - -/** - * @description - * The `` directive is a list container for 1..n `` tags. - * - * @usage - * - * - * - * - *
- *

{{item.title}}

- *

{{item.description}}

- *
- * - * - * - */ -@Directive({ - selector: 'md-list', - host: { - 'role': 'list' - } -}) -export class MdList { -} - -/** - * @description - * The `` directive is a container intended for row items in a `` container. - * The `md-2-line` and `md-3-line` classes can be added to a `` - * to increase the height with 22px and 40px respectively. - * - * ## CSS - * `.md-avatar` - class for image avatars - * - * `.md-avatar-icon` - class for icon avatars - * - * `.md-offset` - on content without an avatar - * - * @usage - * - * - * - * - * Item content in list - * - * - * - * Item content in list - * - * - * - * - */ -@Component({ - selector: 'md-list-item', - host: { - 'role': 'listitem', - }, - template: ` -
- -
` -}) -export class MdListItem { -} diff --git a/src/components/list/list_spec.ts b/src/components/list/list_spec.ts deleted file mode 100644 index c2d1f844..00000000 --- a/src/components/list/list_spec.ts +++ /dev/null @@ -1,18 +0,0 @@ -import {componentSanityCheck} from "../../platform/testing/util"; - -export function main() { - let template = ` - - - -
-

Title

-

Secondary text

-
- - - `; - componentSanityCheck('List', 'md-list', template); - componentSanityCheck('List Item', 'md-list-item', template); -} - diff --git a/src/components/pagination/pagination.ts b/src/components/pagination/pagination.ts index ac7592b1..11646e00 100644 --- a/src/components/pagination/pagination.ts +++ b/src/components/pagination/pagination.ts @@ -7,41 +7,50 @@ import { ElementRef, AfterViewInit, AfterContentInit, - OnInit + OnInit, + NgModule } from '@angular/core'; -import {isPresent} from '@angular/core/src/facade/lang'; -import {DomSanitizationService, SafeHtml} from '@angular/platform-browser/src/security/dom_sanitization_service'; +import {CommonModule} from '@angular/common'; +import {FormsModule} from '@angular/forms'; +import {DomSanitizer} from '@angular/platform-browser'; import 'rxjs/add/operator/filter'; import {PaginationService} from './pagination_service'; +// import {isPresent} from '@angular/core/src/facade/lang'; + +function isPresent(obj) { + return obj !== undefined && obj !== null; +} export interface IPaginationModel { currentPage: number; itemsPerPage: number; - totalItems: number; + totalItems: number; } -export abstract class AbstractPaginationSubComponent implements OnInit{ +export abstract class AbstractPaginationSubComponent implements OnInit { @Input() name: string = 'default'; - @Input() model: IPaginationModel = { currentPage: 0, + @Input() model: IPaginationModel = { + currentPage: 0, itemsPerPage: 0, totalItems: 0 }; - constructor(protected service: PaginationService) {} + constructor(protected service: PaginationService) { + } ngOnInit() { if (!this.name) { - this.name = 'default'; + this.name = 'default'; } this.service.onChange - .filter(event => isPresent(event) && isPresent(event.name)) - .filter(event => event.target === this.name) - .subscribe(event => { - this.model = event.pagination; - }); + .filter(event => isPresent(event) && isPresent(event.name)) + .filter(event => event.target === this.name) + .subscribe(event => { + this.model = event.pagination; + }); } } @@ -54,7 +63,9 @@ export class MdPaginationRange extends AbstractPaginationSubComponent { @HostBinding('class.md-pagination-range') mdPaginationRange: boolean = true; - @HostBinding('innerHTML') get html() { return this.getRange() }; + @HostBinding('innerHTML') get html() { + return this.getRange() + }; @Input() name: string = 'default'; @@ -64,21 +75,27 @@ export class MdPaginationRange extends AbstractPaginationSubComponent { totalItems: 0 }; - @Input('range-format') rangeFormat: string = '{start}-{end} of {total}'; + @Input('range-format') rangeFormat: string; + + get computedRangeFormat(): string { + if (this.rangeFormat) return this.rangeFormat; + return '{start}-{end} of {total}'; + } public value: string = ''; - constructor(protected service: PaginationService, private sanitizationService: DomSanitizationService) { + constructor(protected service: PaginationService, private sanitizationService: DomSanitizer) { super(service); } + /** * tranform format into an readable string * * @returns {string} */ getFormattedValue(rangeStart: number, rangeStop: number, totalItems: number) { - let result: string = this.rangeFormat; + let result: string = this.computedRangeFormat; result = result.replace(/\{start\}/gi, rangeStart.toString()); result = result.replace(/\{end\}/gi, rangeStop.toString()); @@ -93,7 +110,7 @@ export class MdPaginationRange extends AbstractPaginationSubComponent { * @param {IPaginationModel} model * @private */ - getRange() { + getRange(): any { if (isPresent(this.model)) { let rangeStart = (this.model.currentPage - 1) * this.model.itemsPerPage + 1; @@ -179,7 +196,9 @@ export class MdPaginationItemsPerPage extends AbstractPaginationSubComponent { @HostBinding('class.md-pagination-items-per-page') mdPaginationItemsPerPage: boolean = true; - @HostBinding() get hidden() { return !this.itemsPerPageOptions || !this.itemsPerPageOptions.length }; + @HostBinding() get hidden() { + return !this.itemsPerPageOptions || !this.itemsPerPageOptions.length + }; @Input() name: string = 'default'; @@ -218,25 +237,23 @@ export interface IPaginationChange { selector: 'md-pagination', template: ` - + [name]="name" + [model]="model" + [range-format]="rangeFormat"> - `, - directives: [MdPaginationRange, MdPaginationControls, MdPaginationItemsPerPage], + ` }) export class MdPagination implements AfterContentInit, AfterViewInit { @@ -286,3 +303,22 @@ export class MdPagination implements AfterContentInit, AfterViewInit { this.service.change(this.name, this.model); } } + +const PAGINATION_DIRECTIVES = [ + MdPagination, + MdPaginationControls, + MdPaginationItemsPerPage, + MdPaginationRange +]; + +@NgModule({ + declarations: PAGINATION_DIRECTIVES, + exports: PAGINATION_DIRECTIVES, + imports: [ + CommonModule, + FormsModule + ], + providers: [PaginationService] +}) +export class MdPaginationModule { +} diff --git a/src/components/pagination/pagination_controls_spec.ts b/src/components/pagination/pagination_controls_spec.ts new file mode 100644 index 00000000..f044821b --- /dev/null +++ b/src/components/pagination/pagination_controls_spec.ts @@ -0,0 +1,220 @@ +import {componentSanityCheck} from '../../platform/testing/util'; +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; +import {Component, DebugElement} from '@angular/core'; +import {By} from '@angular/platform-browser'; +import {MdPaginationControls, IPaginationModel, PaginationService} from './index'; +import {CommonModule} from '@angular/common'; +import {FormsModule} from '@angular/forms'; +import {MdServicesModule} from '../../core/util/util.module'; + +describe('Pagination', () => { + componentSanityCheck('MdPaginationControls', 'md-pagination-controls', ``); + + describe('MdPaginationControls', () => { + + interface IPaginationControlsFixture { + fixture: ComponentFixture; + comp: MdPaginationControls; + debug: DebugElement; + } + @Component({ + selector: 'test-app', + template: `` + }) + class TestComponent { + page1: IPaginationModel = { + currentPage: 1, + itemsPerPage: 30, + totalItems: 65 + }; + page2: IPaginationModel = { + currentPage: 2, + itemsPerPage: 30, + totalItems: 65 + }; + page3: IPaginationModel = { + currentPage: 3, + itemsPerPage: 30, + totalItems: 65 + }; + } + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [ + MdPaginationControls, + TestComponent + ], + imports: [CommonModule, FormsModule, MdServicesModule], + providers: [PaginationService] + }); + }); + + function setup(template: string = null): Promise { + if (template) { + TestBed.overrideComponent(TestComponent, { + set: { + template: template + } + }); + } + return TestBed.compileComponents() + .then(() => { + const fixture = TestBed.createComponent(TestComponent); + let debug = fixture.debugElement.query(By.css('md-pagination-controls')); + let comp: MdPaginationControls = debug.componentInstance; + fixture.detectChanges(); + return { + fixture: fixture, + comp: comp, + debug: debug + }; + }) + .catch(error => console.error.bind(console)); + } + + describe('default values', () => { + + it('should have a default model', async(() => { + return setup().then((api: IPaginationControlsFixture) => { + expect(api.comp.model.currentPage).toEqual(0); + expect(api.comp.model.itemsPerPage).toEqual(0); + expect(api.comp.model.totalItems).toEqual(0); + }); + })); + + it('should accept custom model', async(() => { + return setup(``).then((api: IPaginationControlsFixture) => { + expect(api.comp.model.currentPage).toEqual(2); + expect(api.comp.model.itemsPerPage).toEqual(30); + expect(api.comp.model.totalItems).toEqual(65); + }); + })); + + it('should have a default name', async(() => { + return setup().then((api: IPaginationControlsFixture) => { + expect(api.comp.name).toEqual('default'); + }); + })); + + it('should accept a custom name', async(() => { + return setup(``).then((api: IPaginationControlsFixture) => { + expect(api.comp.name).toEqual('book'); + }); + })); + + }); + + describe('construct', () => { + const updatedPagination: IPaginationModel = { + currentPage: 1, + itemsPerPage: 30, + totalItems: 65 + }; + + + it('should listen PaginationService', async(() => { + return setup().then((api: IPaginationControlsFixture) => { + const service = TestBed.get(PaginationService); + + service.onChange.subscribe((event) => { + expect(api.comp.model).toEqual(updatedPagination); + }); + + service.change('default', updatedPagination); + }); + })); + + it('should listen PaginationService only for his reference name', async(() => { + return setup(``).then((api: IPaginationControlsFixture) => { + const service = TestBed.get(PaginationService); + + service.onChange.subscribe(() => { + expect(api.comp.model).toEqual({ + currentPage: 0, + itemsPerPage: 0, + totalItems: 0 + }); + }); + + service.change('default', updatedPagination); + }); + })); + }); + + describe('isFirstPage', () => { + + it('should accept first page as first page', async(() => { + return setup(``).then((api: IPaginationControlsFixture) => { + expect(api.comp.isFirstPage()).toBeTruthy(); + }); + })); + + it('should not accept second page as first page', async(() => { + return setup(``).then((api: IPaginationControlsFixture) => { + expect(api.comp.isFirstPage()).toBeFalsy(); + }); + })); + + }); + + describe('isLastPage', () => { + + it('should accept third page as last page', async(() => { + return setup(``).then((api: IPaginationControlsFixture) => { + expect(api.comp.isLastPage()).toBeTruthy(); + }); + })); + + it('should not accept second page as last page', async(() => { + return setup(``).then((api: IPaginationControlsFixture) => { + expect(api.comp.isLastPage()).toBeFalsy(); + }); + })); + + }); + + describe('previousPage', () => { + + it('should call change of page to previous one', async(() => { + return setup(``).then((api: IPaginationControlsFixture) => { + spyOn(api.comp, 'changePage'); + api.comp.previousPage(); + expect(api.comp.changePage).toHaveBeenCalledWith(1); + }); + })); + + }); + + describe('nextPage', () => { + + it('should call change of page to previous one', async(() => { + return setup(``).then((api: IPaginationControlsFixture) => { + spyOn(api.comp, 'changePage'); + api.comp.nextPage(); + expect(api.comp.changePage).toHaveBeenCalledWith(3); + }); + })); + + }); + + describe('changePage', () => { + it('should dispatch the new current page to the service', async(() => { + return setup(``).then((api: IPaginationControlsFixture) => { + const service = TestBed.get(PaginationService); + spyOn(service, 'change'); + api.comp.changePage(1); + expect(service.change).toHaveBeenCalledWith('default', { + currentPage: 1, + itemsPerPage: 30, + totalItems: 65 + }); + }); + })); + + }); + + }); + +}); + diff --git a/src/components/pagination/pagination_items_per_page_spec.ts b/src/components/pagination/pagination_items_per_page_spec.ts new file mode 100644 index 00000000..80f530b6 --- /dev/null +++ b/src/components/pagination/pagination_items_per_page_spec.ts @@ -0,0 +1,195 @@ +import {componentSanityCheck} from '../../platform/testing/util'; +import {ComponentFixture, TestBed, async} from '@angular/core/testing'; +import {Component, DebugElement} from '@angular/core'; +import {By} from '@angular/platform-browser'; +import {MdPaginationItemsPerPage, IPaginationModel, PaginationService} from './index'; +import {CommonModule} from '@angular/common'; +import {FormsModule} from '@angular/forms'; +import {MdServicesModule} from '../../core/util/util.module'; + +describe('Pagination', () => { + + componentSanityCheck('MdPaginationItemsPerPage', 'md-pagination-items-per-page', ``); + + describe('MdPaginationItemsPerPage', () => { + interface IPaginationItemsPerPageFixture { + fixture: ComponentFixture; + comp: MdPaginationItemsPerPage; + debug: DebugElement; + } + @Component({ + selector: 'test-app', + template: `` + }) + class TestComponent { + page1: IPaginationModel = { + currentPage: 1, + itemsPerPage: 30, + totalItems: 65 + }; + page2: IPaginationModel = { + currentPage: 2, + itemsPerPage: 30, + totalItems: 65 + }; + + defaultItemsPerPageOptions: Array = [10, 50, 100]; + } + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [ + MdPaginationItemsPerPage, + TestComponent + ], + imports: [CommonModule, FormsModule, MdServicesModule], + providers: [PaginationService] + }); + }); + + function setup(template: string = null): Promise { + if (template) { + TestBed.overrideComponent(TestComponent, { + set: { + template: template + } + }); + } + return TestBed.compileComponents() + .then(() => { + const fixture = TestBed.createComponent(TestComponent); + let debug = fixture.debugElement.query(By.css('md-pagination-items-per-page')); + let comp: MdPaginationItemsPerPage = debug.componentInstance; + fixture.detectChanges(); + return { + fixture: fixture, + comp: comp, + debug: debug + }; + }) + .catch(error => console.error.bind(console)); + } + + describe('default values', () => { + + it('should have a default model', async(() => { + return setup().then((api: IPaginationItemsPerPageFixture) => { + expect(api.comp.model.currentPage).toEqual(0); + expect(api.comp.model.itemsPerPage).toEqual(0); + expect(api.comp.model.totalItems).toEqual(0); + }); + })); + + it('should accept custom model', async(() => { + return setup(``).then((api: IPaginationItemsPerPageFixture) => { + expect(api.comp.model.currentPage).toEqual(2); + expect(api.comp.model.itemsPerPage).toEqual(30); + expect(api.comp.model.totalItems).toEqual(65); + }); + })); + + it('should have a default name', async(() => { + return setup().then((api: IPaginationItemsPerPageFixture) => { + expect(api.comp.name).toEqual('default'); + }); + })); + + it('should accept a custom name', async(() => { + return setup(``).then((api: IPaginationItemsPerPageFixture) => { + expect(api.comp.name).toEqual('book'); + }); + })); + + it('should have a default prepended string', async(() => { + return setup().then((api: IPaginationItemsPerPageFixture) => { + expect(api.comp.itemsPerPageBefore).toEqual('Rows per page:'); + }); + })); + + it('should accept a custom prepended string', async(() => { + return setup(``).then((api: IPaginationItemsPerPageFixture) => { + expect(api.comp.itemsPerPageBefore).toEqual('Items per page:'); + }); + })); + + it('should not have a default appended string', async(() => { + return setup().then((api: IPaginationItemsPerPageFixture) => { + expect(api.comp.itemsPerPageAfter).toBeUndefined(); + }); + })); + + it('should accept a custom appended string', async(() => { + return setup(``).then((api: IPaginationItemsPerPageFixture) => { + expect(api.comp.itemsPerPageAfter).toEqual(' - '); + }); + })); + + it('should have a empty list of options for items per page', async(() => { + return setup().then((api: IPaginationItemsPerPageFixture) => { + expect(api.comp.itemsPerPageOptions).toEqual([]); + }); + })); + + it('should accept a custom list of options for items per page', async(() => { + return setup(``).then((api: IPaginationItemsPerPageFixture) => { + expect(api.comp.itemsPerPageOptions).not.toContain(5); + expect(api.comp.itemsPerPageOptions).toContain(10); + expect(api.comp.itemsPerPageOptions).toContain(50); + expect(api.comp.itemsPerPageOptions).toContain(100); + }); + })); + + }); + + describe('construct', () => { + const updatedPagination: IPaginationModel = { + currentPage: 1, + itemsPerPage: 30, + totalItems: 65 + }; + + it('should listen PaginationService', async(() => { + return setup().then((api: IPaginationItemsPerPageFixture) => { + const service = TestBed.get(PaginationService); + service.onChange.subscribe((event) => { + expect(api.comp.model).toEqual(updatedPagination); + }); + + service.change('default', updatedPagination); + }); + })); + + it('should listen PaginationService only for his reference name', async(() => { + return setup(``).then((api: IPaginationItemsPerPageFixture) => { + const service = TestBed.get(PaginationService); + service.onChange.subscribe(() => { + expect(api.comp.model.currentPage).toEqual(0); + expect(api.comp.model.itemsPerPage).toEqual(0); + expect(api.comp.model.totalItems).toEqual(0); + }); + + service.change('default', updatedPagination); + }); + })); + }); + + describe('changePaginationLength', () => { + + it('should dispatch page change to the service and reset to first page', async(() => { + return setup(``).then((api: IPaginationItemsPerPageFixture) => { + const service = TestBed.get(PaginationService); + spyOn(service, 'change'); + api.comp.changePaginationLength(50); + expect(service.change).toHaveBeenCalledWith('default', { + currentPage: 1, + itemsPerPage: 50, + totalItems: 65 + }); + }); + })); + + }); + + }); + +}); diff --git a/src/components/pagination/pagination_range_spec.ts b/src/components/pagination/pagination_range_spec.ts new file mode 100644 index 00000000..677161d7 --- /dev/null +++ b/src/components/pagination/pagination_range_spec.ts @@ -0,0 +1,199 @@ +import {componentSanityCheck} from '../../platform/testing/util'; +import {inject, ComponentFixture, TestBed, async} from '@angular/core/testing'; +import {Component, DebugElement} from '@angular/core'; +import {By} from '@angular/platform-browser'; +import {MdPaginationRange, IPaginationModel, PaginationService} from './index'; +import {CommonModule} from '@angular/common'; +import {FormsModule} from '@angular/forms'; +import {MdServicesModule} from '../../core/util/util.module'; + + +describe('Pagination', () => { + + componentSanityCheck('MdPaginationRange', 'md-pagination-range', ``); + + describe('MdPaginationRange', () => { + let service: PaginationService; + + interface IPaginationRangeFixture { + fixture: ComponentFixture; + comp: MdPaginationRange; + debug: DebugElement; + } + @Component({ + selector: 'test-app', + template: `` + }) + class TestComponent { + page2: IPaginationModel = { + currentPage: 2, + itemsPerPage: 30, + totalItems: 65 + }; + + page3: IPaginationModel = { + currentPage: 3, + itemsPerPage: 30, + totalItems: 65 + }; + + defaultRangeFormat: string = '{start}-{end} / {total}'; + } + + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [ + MdPaginationRange, + TestComponent + ], + imports: [CommonModule, FormsModule, MdServicesModule], + providers: [PaginationService] + }); + }); + + function setup(template: string = null): Promise { + if (template) { + TestBed.overrideComponent(TestComponent, { + set: { + template: template + } + }); + } + let result: IPaginationRangeFixture = null; + return TestBed.compileComponents() + .then(inject([PaginationService], (serv) => { + service = serv; + })) + .then(() => { + const fixture = TestBed.createComponent(TestComponent); + let debug = fixture.debugElement.query(By.css('md-pagination-range')); + let comp: MdPaginationRange = debug.componentInstance; + fixture.detectChanges(); + result = { + fixture: fixture, + comp: comp, + debug: debug + }; + return fixture.whenStable(); + }) + .then(() => result) + .catch(error => console.error.bind(console)); + } + + describe('default values', () => { + + it('should have a default model', async(() => { + return setup().then((api: IPaginationRangeFixture) => { + expect(api.comp.model.currentPage).toEqual(0); + expect(api.comp.model.itemsPerPage).toEqual(0); + expect(api.comp.model.totalItems).toEqual(0); + }); + })); + + it('should accept custom model', async(() => { + return setup(``).then((api: IPaginationRangeFixture) => { + expect(api.comp.model.currentPage).toEqual(2); + expect(api.comp.model.itemsPerPage).toEqual(30); + expect(api.comp.model.totalItems).toEqual(65); + }); + })); + + it('should have a default name', async(() => { + return setup().then((api: IPaginationRangeFixture) => { + expect(api.comp.name).toEqual('default'); + }); + })); + + it('should accept a custom name', async(() => { + return setup(``).then((api: IPaginationRangeFixture) => { + expect(api.comp.name).toEqual('book'); + }); + })); + + it('should have a default range format', async(() => { + return setup().then((api: IPaginationRangeFixture) => { + expect(api.comp.computedRangeFormat).toEqual('{start}-{end} of {total}'); + }); + })); + + it('should accept a custom range format', async(() => { + return setup(``).then((api: IPaginationRangeFixture) => { + expect(api.comp.rangeFormat).toEqual('{start}-{end} / {total}'); + }); + })); + + }); + + describe('construct', () => { + let service: PaginationService, + updatedPagination: IPaginationModel = { + currentPage: 1, + itemsPerPage: 30, + totalItems: 65 + }; + + it('should listen PaginationService', async(() => { + return setup().then((api: IPaginationRangeFixture) => { + service = TestBed.get(PaginationService); + service.onChange.subscribe((event) => { + expect(api.comp.model).toEqual(updatedPagination); + }); + + service.change('default', updatedPagination); + }); + })); + + it('should listen PaginationService only for his reference name', async(() => { + return setup(``).then((api: IPaginationRangeFixture) => { + service = TestBed.get(PaginationService); + service.onChange.subscribe(() => { + expect(api.comp.model).toEqual({ + currentPage: 0, + itemsPerPage: 0, + totalItems: 0 + }); + }); + + service.change('default', updatedPagination); + }); + })); + }); + + describe('getFormattedValue', () => { + + it('should replace pattern in the range format', async(() => { + return setup().then((api: IPaginationRangeFixture) => { + expect(api.comp.getFormattedValue(1, 5, 30)).toEqual('1-5 of 30'); + }); + })); + + }); + + describe('getRange', () => { + + it('should calculate range at the middle', async(() => { + return setup(``).then((api: IPaginationRangeFixture) => { + spyOn(api.comp, 'getFormattedValue').and.callThrough(); + let result = api.comp.getRange(); + expect(result['changingThisBreaksApplicationSecurity']).toEqual('31-60 of 65'); + expect(api.comp.getFormattedValue).toHaveBeenCalledWith(31, 60, 65); + }); + })); + + + it('should calculate range at the end', async(() => { + return setup(``).then((api: IPaginationRangeFixture) => { + spyOn(api.comp, 'getFormattedValue').and.callThrough(); + let result = api.comp.getRange(); + expect(result['changingThisBreaksApplicationSecurity']).toEqual('61-65 of 65'); + expect(api.comp.getFormattedValue).toHaveBeenCalledWith(61, 65, 65); + }); + })); + + }); + + }); + + +}); diff --git a/src/components/pagination/pagination_service.ts b/src/components/pagination/pagination_service.ts index ed6e55bc..e406a3d4 100644 --- a/src/components/pagination/pagination_service.ts +++ b/src/components/pagination/pagination_service.ts @@ -8,7 +8,7 @@ export class PaginationService { public onChange: Subject; constructor() { - this.onChange = new Subject(null); + this.onChange = new Subject(); } change(name: string = 'default', pagination: IPaginationModel) { diff --git a/src/components/pagination/pagination_spec.ts b/src/components/pagination/pagination_spec.ts index a7f0137f..473d5d56 100644 --- a/src/components/pagination/pagination_spec.ts +++ b/src/components/pagination/pagination_spec.ts @@ -1,52 +1,74 @@ import {componentSanityCheck} from '../../platform/testing/util'; -import {inject, async} from '@angular/core/testing'; -import {ComponentFixture, TestComponentBuilder} from "@angular/core/testing"; +import {ComponentFixture, TestBed, async} from '@angular/core/testing'; import {Component, DebugElement} from '@angular/core'; -import {CORE_DIRECTIVES} from '@angular/common'; -import {By} from "@angular/platform-browser"; +import {By} from '@angular/platform-browser'; import { - MdPagination, MdPaginationControls, MdPaginationItemsPerPage, - MdPaginationRange, IPaginationModel, IPaginationChange, PaginationService + MdPagination, + MdPaginationControls, + MdPaginationItemsPerPage, + MdPaginationRange, + IPaginationModel, + PaginationService } from './index'; +import {CommonModule} from '@angular/common'; +import {FormsModule} from '@angular/forms'; +import {MdServicesModule} from '../../core/util/util.module'; + +describe('Pagination', () => { + let service: PaginationService; + + componentSanityCheck('MdPagination', 'md-pagination', ``); + + describe('MdPagination', () => { + + interface IPaginationFixture { + fixture: ComponentFixture; + comp: MdPagination; + debug: DebugElement; + } + @Component({ + selector: 'test-app', + template: `` + }) + class TestComponent { + defaultModel: IPaginationModel = { + currentPage: 1, + itemsPerPage: 5, + totalItems: 24 + }; + + defaultItemsPerPageOptions: Array = [10, 50, 100]; + } + + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [ + MdPagination, + MdPaginationControls, + MdPaginationItemsPerPage, + MdPaginationRange, + TestComponent + ], + imports: [CommonModule, FormsModule, MdServicesModule], + providers: [PaginationService] + }); + }); -export function main() { - - describe('Pagination', () => { - let builder: TestComponentBuilder; - - beforeEach(inject([TestComponentBuilder], (tcb) => { - builder = tcb; - })); - - componentSanityCheck('MdPagination', 'md-pagination', ``); - - describe('MdPagination', () => { - - interface IPaginationFixture { - fixture: ComponentFixture; - comp: MdPagination; - debug: DebugElement; - } - @Component({ - selector: 'test-app', - directives: [CORE_DIRECTIVES, MdPagination, MdPaginationControls, MdPaginationItemsPerPage, MdPaginationRange], - template: `` - }) - class TestComponent { - defaultModel: IPaginationModel = { - currentPage: 1, - itemsPerPage: 5, - totalItems: 24 - }; - - defaultItemsPerPageOptions: Array = [10, 50, 100]; + function setup(template: string = null): Promise { + if (template) { + TestBed.overrideComponent(TestComponent, { + set: { + template: template + } + }); } + return TestBed.compileComponents() + .then(() => { + service = TestBed.get(PaginationService); + spyOn(service, 'change'); - function setup(template: string = null): Promise { - let prep = template === null ? - builder.createAsync(TestComponent) : - builder.overrideTemplate(TestComponent, template).createAsync(TestComponent); - return prep.then((fixture: ComponentFixture) => { + const fixture = TestBed.createComponent(TestComponent); let debug = fixture.debugElement.query(By.css('md-pagination')); let comp: MdPagination = debug.componentInstance; fixture.detectChanges(); @@ -55,742 +77,199 @@ export function main() { comp: comp, debug: debug }; - }).catch(console.error.bind(console)); - } + }) + .catch(error => console.error.bind(console)); + } - describe('default values', () => { + describe('default values', () => { - it('should have a default model', () => { - return setup().then((api: IPaginationFixture) => { - expect(api.comp.model.currentPage).toEqual(0); - expect(api.comp.model.itemsPerPage).toEqual(0); - expect(api.comp.model.totalItems).toEqual(0); - }); + it('should have a default model', async(() => { + return setup().then((api: IPaginationFixture) => { + expect(api.comp.model.currentPage).toEqual(0); + expect(api.comp.model.itemsPerPage).toEqual(0); + expect(api.comp.model.totalItems).toEqual(0); }); + })); - it('should accept custom model', () => { - return setup(``).then((api: IPaginationFixture) => { - expect(api.comp.model.currentPage).toEqual(1); - expect(api.comp.model.itemsPerPage).toEqual(5); - expect(api.comp.model.totalItems).toEqual(24); - }); + it('should accept custom model', async(() => { + return setup(``).then((api: IPaginationFixture) => { + expect(api.comp.model.currentPage).toEqual(1); + expect(api.comp.model.itemsPerPage).toEqual(5); + expect(api.comp.model.totalItems).toEqual(24); }); + })); - it('should have a default name', () => { - return setup().then((api: IPaginationFixture) => { - expect(api.comp.name).toEqual('default'); - }); + it('should have a default name', async(() => { + return setup().then((api: IPaginationFixture) => { + expect(api.comp.name).toEqual('default'); }); + })); - it('should accept a custom name', () => { - return setup(``).then((api: IPaginationFixture) => { - expect(api.comp.name).toEqual('book'); - }); + it('should accept a custom name', async(() => { + return setup(``).then((api: IPaginationFixture) => { + expect(api.comp.name).toEqual('book'); }); + })); - it('should display range by default', () => { - return setup().then((api: IPaginationFixture) => { - expect(api.comp.range).toBeTruthy(); - }); - }); - - it('should accept a custom display for range', () => { - return setup(``).then((api: IPaginationFixture) => { - expect(api.comp.range).toBeFalsy(); - }); - }); - - it('should not have a default rangeFormat', () => { - return setup().then((api: IPaginationFixture) => { - expect(api.comp.rangeFormat).toBeUndefined(); - }); - }); - - it('should accept a custom rangeFormat', () => { - return setup(``).then((api: IPaginationFixture) => { - expect(api.comp.rangeFormat).toEqual('{start}/{total}'); - }); - }); - - it('should display controls by default', () => { - return setup().then((api: IPaginationFixture) => { - expect(api.comp.controls).toBeTruthy(); - }); - }); - - it('should accept a custom display for controls', () => { - return setup(``).then((api: IPaginationFixture) => { - expect(api.comp.controls).toBeFalsy(); - }); + it('should display range by default', async(() => { + return setup().then((api: IPaginationFixture) => { + expect(api.comp.range).toBeTruthy(); }); + })); - it('should display items per page options by default', () => { - return setup().then((api: IPaginationFixture) => { - expect(api.comp.itemsPerPage).toBeTruthy(); - }); + it('should accept a custom display for range', async(() => { + return setup(``).then((api: IPaginationFixture) => { + expect(api.comp.range).toBeFalsy(); }); + })); - it('should accept a custom display for items per page', () => { - return setup(``).then((api: IPaginationFixture) => { - expect(api.comp.itemsPerPage).toBeFalsy(); - }); + it('should not have a default rangeFormat', async(() => { + return setup().then((api: IPaginationFixture) => { + expect(api.comp.rangeFormat).toBeUndefined(); }); + })); - it('should not have a default prepended string to items per page', () => { - return setup().then((api: IPaginationFixture) => { - expect(api.comp.itemsPerPageBefore).toBeUndefined(); - }); + it('should accept a custom rangeFormat', async(() => { + return setup(``).then((api: IPaginationFixture) => { + expect(api.comp.rangeFormat).toEqual('{start}/{total}'); }); + })); - it('should accept a custom prepended string to items per page', () => { - return setup(``).then((api: IPaginationFixture) => { - expect(api.comp.itemsPerPageBefore).toEqual('page:'); - }); + it('should display controls by default', async(() => { + return setup().then((api: IPaginationFixture) => { + expect(api.comp.controls).toBeTruthy(); }); + })); - it('should not have a default appended string to items per page', () => { - return setup().then((api: IPaginationFixture) => { - expect(api.comp.itemsPerPageAfter).toBeUndefined(); - }); + it('should accept a custom display for controls', async(() => { + return setup(``).then((api: IPaginationFixture) => { + expect(api.comp.controls).toBeFalsy(); }); + })); - it('should accept a custom appended string to items per page', () => { - return setup(``).then((api: IPaginationFixture) => { - expect(api.comp.itemsPerPageAfter).toEqual(' - '); - }); + it('should display items per page options by default', async(() => { + return setup().then((api: IPaginationFixture) => { + expect(api.comp.itemsPerPage).toBeTruthy(); }); + })); - it('should not have a default list of options for items per page', () => { - return setup().then((api: IPaginationFixture) => { - expect(api.comp.itemsPerPageOptions).toBeUndefined(); - }); + it('should accept a custom display for items per page', async(() => { + return setup(``).then((api: IPaginationFixture) => { + expect(api.comp.itemsPerPage).toBeFalsy(); }); + })); - it('should accept a custom list of options for items per page', () => { - return setup(``).then((api: IPaginationFixture) => { - expect(api.comp.itemsPerPageOptions).not.toContain(5); - expect(api.comp.itemsPerPageOptions).toContain(10); - expect(api.comp.itemsPerPageOptions).toContain(50); - expect(api.comp.itemsPerPageOptions).toContain(100); - }); + it('should not have a default prepended string to items per page', async(() => { + return setup().then((api: IPaginationFixture) => { + expect(api.comp.itemsPerPageBefore).toBeUndefined(); }); + })); - }); - - describe('construct', () => { - let service: PaginationService, - updatedPagination: IPaginationModel = { - currentPage: 2, - itemsPerPage: 30, - totalItems: 65 - }; - - beforeEach(inject([PaginationService], (serv) => { - service = serv; - })); - - it('should listen PaginationService', () => { - return setup().then((api: IPaginationFixture) => { - api.comp.onPaginationChange.subscribe((event) => { - expect(event.name).toEqual('pagination_changed'); - expect(event.target).toEqual('default'); - expect(event.pagination).toEqual(updatedPagination); - }); - - service.change('default', updatedPagination); - }); + it('should accept a custom prepended string to items per page', async(() => { + return setup(``).then((api: IPaginationFixture) => { + expect(api.comp.itemsPerPageBefore).toEqual('page:'); }); + })); - it('should listen PaginationService only for his reference name', () => { - return setup(``).then((api: IPaginationFixture) => { - let spy = jasmine.createSpy('spy'); - - api.comp.onPaginationChange.subscribe(spy); - - service.onChange.subscribe(() => { - expect(spy).not.toHaveBeenCalled(); - }); - - service.change('default', updatedPagination); - }); + it('should not have a default appended string to items per page', async(() => { + return setup().then((api: IPaginationFixture) => { + expect(api.comp.itemsPerPageAfter).toBeUndefined(); }); - }); + })); - describe('ngAfterContentInit', () => { - - it('should init default components', () => { - return setup().then((api: IPaginationFixture) => { - let element = api.debug.nativeElement; - api.fixture.detectChanges(); - expect(element.children.length).toEqual(3); - }); + it('should accept a custom appended string to items per page', async(() => { + return setup(``).then((api: IPaginationFixture) => { + expect(api.comp.itemsPerPageAfter).toEqual(' - '); }); + })); - it('should accept custom components as children', () => { - return setup(``).then((api: IPaginationFixture) => { - let element = api.debug.nativeElement; - api.fixture.detectChanges(); - expect(element.children.length).toEqual(1); - }); + it('should not have a default list of options for items per page', async(() => { + return setup().then((api: IPaginationFixture) => { + expect(api.comp.itemsPerPageOptions).toBeUndefined(); }); + })); - }); - - describe('ngAfterViewInit', () => { - let service: PaginationService, - defaultModel: IPaginationModel = { - currentPage: 1, - itemsPerPage: 30, - totalItems: 65 - }; - - beforeEach(inject([PaginationService], (serv) => { - service = serv; - spyOn(service, 'change') - })); - - it('should dispatch his model after init', () => { - return setup(``).then((api: IPaginationFixture) => { - expect(service.change).toHaveBeenCalled(); - }); + it('should accept a custom list of options for items per page', async(() => { + return setup(``).then((api: IPaginationFixture) => { + expect(api.comp.itemsPerPageOptions).not.toContain(5); + expect(api.comp.itemsPerPageOptions).toContain(10); + expect(api.comp.itemsPerPageOptions).toContain(50); + expect(api.comp.itemsPerPageOptions).toContain(100); }); - - }); + })); }); - componentSanityCheck('MdPaginationRange', 'md-pagination-range', ``); + describe('construct', () => { + let service: PaginationService; + let updatedPagination: IPaginationModel = { + currentPage: 2, + itemsPerPage: 30, + totalItems: 65 + }; - describe('MdPaginationRange', () => { - - interface IPaginationRangeFixture { - fixture: ComponentFixture; - comp: MdPaginationRange; - debug: DebugElement; - } - @Component({ - selector: 'test-app', - directives: [CORE_DIRECTIVES, MdPaginationRange], - template: `` - }) - class TestComponent { - page2: IPaginationModel = { - currentPage: 2, - itemsPerPage: 30, - totalItems: 65 - }; - - page3: IPaginationModel = { - currentPage: 3, - itemsPerPage: 30, - totalItems: 65 - }; - - defaultRangeFormat: string = '{start}-{end} / {total}'; - } - - function setup(template: string = null): Promise { - let prep = template === null ? - builder.createAsync(TestComponent) : - builder.overrideTemplate(TestComponent, template).createAsync(TestComponent); - return prep.then((fixture: ComponentFixture) => { - let debug = fixture.debugElement.query(By.css('md-pagination-range')); - let comp: MdPaginationRange = debug.componentInstance; - fixture.detectChanges(); - return { - fixture: fixture, - comp: comp, - debug: debug - }; - }).catch(console.error.bind(console)); - } - - describe('default values', () => { - - it('should have a default model', () => { - return setup().then((api: IPaginationRangeFixture) => { - expect(api.comp.model.currentPage).toEqual(0); - expect(api.comp.model.itemsPerPage).toEqual(0); - expect(api.comp.model.totalItems).toEqual(0); - }); - }); - - it('should accept custom model', () => { - return setup(``).then((api: IPaginationRangeFixture) => { - expect(api.comp.model.currentPage).toEqual(2); - expect(api.comp.model.itemsPerPage).toEqual(30); - expect(api.comp.model.totalItems).toEqual(65); - }); - }); - - it('should have a default name', () => { - return setup().then((api: IPaginationRangeFixture) => { - expect(api.comp.name).toEqual('default'); - }); - }); - - it('should accept a custom name', () => { - return setup(``).then((api: IPaginationRangeFixture) => { - expect(api.comp.name).toEqual('book'); - }); - }); - - it('should have a default range format', () => { - return setup().then((api: IPaginationRangeFixture) => { - expect(api.comp.rangeFormat).toEqual('{start}-{end} of {total}'); - }); - }); - - it('should accept a custom range format', () => { - return setup(``).then((api: IPaginationRangeFixture) => { - expect(api.comp.rangeFormat).toEqual('{start}-{end} / {total}'); - }); - }); - - }); - - describe('construct', () => { - let service: PaginationService, - updatedPagination: IPaginationModel = { - currentPage: 1, - itemsPerPage: 30, - totalItems: 65 - }; - - beforeEach(inject([PaginationService], (serv) => { - service = serv; - })); - - it('should listen PaginationService', () => { - return setup().then((api: IPaginationRangeFixture) => { - service.onChange.subscribe((event) => { - expect(api.comp.model).toEqual(updatedPagination); - }); - - service.change('default', updatedPagination); - }); - }); - - it('should listen PaginationService only for his reference name', () => { - return setup(``).then((api: IPaginationRangeFixture) => { - service.onChange.subscribe(() => { - expect(api.comp.model).toEqual({ - currentPage: 0, - itemsPerPage: 0, - totalItems: 0 - }); - }); - - service.change('default', updatedPagination); - }); - }); - }); - - describe('getFormattedValue', () => { - - it('should replace pattern in the range format', () => { - return setup().then((api: IPaginationRangeFixture) => { - expect(api.comp.getFormattedValue(1, 5, 30)).toEqual('1-5 of 30'); + it('should listen PaginationService', async(() => { + return setup().then((api: IPaginationFixture) => { + api.comp.onPaginationChange.subscribe((event) => { + expect(event.name).toEqual('pagination_changed'); + expect(event.target).toEqual('default'); + expect(event.pagination).toEqual(updatedPagination); }); + service = TestBed.get(PaginationService); + service.change('default', updatedPagination); }); + })); - }); - - describe('getRange', () => { + it('should listen PaginationService only for his reference name', async(() => { + setup(``).then((api: IPaginationFixture) => { + let spy = jasmine.createSpy('spy'); - it('should calculate range at the middle', () => { - return setup(``).then((api: IPaginationRangeFixture) => { - spyOn(api.comp, 'getFormattedValue').and.callThrough(); - let result = api.comp.getRange(); - expect(result['changingThisBreaksApplicationSecurity']).toEqual('31-60 of 65'); - expect(api.comp.getFormattedValue).toHaveBeenCalledWith(31, 60, 65); + api.comp.onPaginationChange.subscribe(spy); + service = TestBed.get(PaginationService); + service.onChange.subscribe(() => { + expect(spy).not.toHaveBeenCalled(); }); + service.change('default', updatedPagination); }); - - - it('should calculate range at the end', () => { - return setup(``).then((api: IPaginationRangeFixture) => { - spyOn(api.comp, 'getFormattedValue').and.callThrough(); - let result = api.comp.getRange(); - expect(result['changingThisBreaksApplicationSecurity']).toEqual('61-65 of 65'); - expect(api.comp.getFormattedValue).toHaveBeenCalledWith(61, 65, 65); - }); - }); - - }); - + })); }); - componentSanityCheck('MdPaginationControls', 'md-pagination-controls', ``); - - describe('MdPaginationControls', () => { - - interface IPaginationControlsFixture { - fixture: ComponentFixture; - comp: MdPaginationControls; - debug: DebugElement; - } - @Component({ - selector: 'test-app', - directives: [CORE_DIRECTIVES, MdPaginationControls], - template: `` - }) - class TestComponent { - page1: IPaginationModel = { - currentPage: 1, - itemsPerPage: 30, - totalItems: 65 - }; - page2: IPaginationModel = { - currentPage: 2, - itemsPerPage: 30, - totalItems: 65 - }; - page3: IPaginationModel = { - currentPage: 3, - itemsPerPage: 30, - totalItems: 65 - }; - } - - function setup(template: string = null): Promise { - let prep = template === null ? - builder.createAsync(TestComponent) : - builder.overrideTemplate(TestComponent, template).createAsync(TestComponent); - return prep.then((fixture: ComponentFixture) => { - let debug = fixture.debugElement.query(By.css('md-pagination-controls')); - let comp: MdPaginationControls = debug.componentInstance; - fixture.detectChanges(); - return { - fixture: fixture, - comp: comp, - debug: debug - }; - }).catch(console.error.bind(console)); - } - - describe('default values', () => { - - it('should have a default model', () => { - return setup().then((api: IPaginationControlsFixture) => { - expect(api.comp.model.currentPage).toEqual(0); - expect(api.comp.model.itemsPerPage).toEqual(0); - expect(api.comp.model.totalItems).toEqual(0); - }); - }); - - it('should accept custom model', () => { - return setup(``).then((api: IPaginationControlsFixture) => { - expect(api.comp.model.currentPage).toEqual(2); - expect(api.comp.model.itemsPerPage).toEqual(30); - expect(api.comp.model.totalItems).toEqual(65); - }); - }); - - it('should have a default name', () => { - return setup().then((api: IPaginationControlsFixture) => { - expect(api.comp.name).toEqual('default'); - }); - }); - - it('should accept a custom name', () => { - return setup(``).then((api: IPaginationControlsFixture) => { - expect(api.comp.name).toEqual('book'); - }); - }); - - }); - - describe('construct', () => { - let service: PaginationService, - updatedPagination: IPaginationModel = { - currentPage: 1, - itemsPerPage: 30, - totalItems: 65 - }; - - beforeEach(inject([PaginationService], (serv) => { - service = serv; - })); - - it('should listen PaginationService', () => { - return setup().then((api: IPaginationControlsFixture) => { - service.onChange.subscribe((event) => { - expect(api.comp.model).toEqual(updatedPagination); - }); - - service.change('default', updatedPagination); - }); - }); - - it('should listen PaginationService only for his reference name', () => { - return setup(``).then((api: IPaginationControlsFixture) => { - service.onChange.subscribe(() => { - expect(api.comp.model).toEqual({ - currentPage: 0, - itemsPerPage: 0, - totalItems: 0 - }); - }); - - service.change('default', updatedPagination); - }); - }); - }); - - describe('isFirstPage', () => { + describe('ngAfterContentInit', () => { - it('should accept first page as first page', () => { - return setup(``).then((api: IPaginationControlsFixture) => { - expect(api.comp.isFirstPage()).toBeTruthy(); - }); - }); - - it('should not accept second page as first page', () => { - return setup(``).then((api: IPaginationControlsFixture) => { - expect(api.comp.isFirstPage()).toBeFalsy(); - }); - }); - - }); - - describe('isLastPage', () => { - - it('should accept third page as last page', () => { - return setup(``).then((api: IPaginationControlsFixture) => { - expect(api.comp.isLastPage()).toBeTruthy(); - }); + it('should init default components', async(() => { + return setup().then((api: IPaginationFixture) => { + let element = api.debug.nativeElement; + api.fixture.detectChanges(); + expect(element.children.length).toEqual(3); }); + })); - it('should not accept second page as last page', () => { - return setup(``).then((api: IPaginationControlsFixture) => { - expect(api.comp.isLastPage()).toBeFalsy(); - }); + it('should accept custom components as children', async(() => { + return setup(``).then((api: IPaginationFixture) => { + let element = api.debug.nativeElement; + api.fixture.detectChanges(); + expect(element.children.length).toEqual(1); }); - - }); - - describe('previousPage', () => { - - it('should call change of page to previous one', () => { - return setup(``).then((api: IPaginationControlsFixture) => { - spyOn(api.comp, 'changePage'); - api.comp.previousPage(); - expect(api.comp.changePage).toHaveBeenCalledWith(1); - }); - }); - - }); - - describe('nextPage', () => { - - it('should call change of page to previous one', () => { - return setup(``).then((api: IPaginationControlsFixture) => { - spyOn(api.comp, 'changePage'); - api.comp.nextPage(); - expect(api.comp.changePage).toHaveBeenCalledWith(3); - }); - }); - - }); - - describe('changePage', () => { - let service: PaginationService; - - beforeEach(inject([PaginationService], (serv) => { - service = serv; - spyOn(service, 'change'); - })); - - it('should dispatch the new current page to the service', () => { - return setup(``).then((api: IPaginationControlsFixture) => { - api.comp.changePage(1); - expect(service.change).toHaveBeenCalledWith('default', { - currentPage: 1, - itemsPerPage: 30, - totalItems: 65 - }); - }); - }); - - }); + })); }); - componentSanityCheck('MdPaginationItemsPerPage', 'md-pagination-items-per-page', ``); - - describe('MdPaginationItemsPerPage', () => { - - interface IPaginationItemsPerPageFixture { - fixture: ComponentFixture; - comp: MdPaginationItemsPerPage; - debug: DebugElement; - } - @Component({ - selector: 'test-app', - directives: [CORE_DIRECTIVES, MdPaginationItemsPerPage], - template: `` - }) - class TestComponent { - page1: IPaginationModel = { - currentPage: 1, - itemsPerPage: 30, - totalItems: 65 - }; - page2: IPaginationModel = { - currentPage: 2, - itemsPerPage: 30, - totalItems: 65 - }; - - defaultItemsPerPageOptions: Array = [10, 50, 100]; - } - - function setup(template: string = null): Promise { - let prep = template === null ? - builder.createAsync(TestComponent) : - builder.overrideTemplate(TestComponent, template).createAsync(TestComponent); - return prep.then((fixture: ComponentFixture) => { - let debug = fixture.debugElement.query(By.css('md-pagination-items-per-page')); - let comp: MdPaginationItemsPerPage = debug.componentInstance; - fixture.detectChanges(); - return { - fixture: fixture, - comp: comp, - debug: debug - }; - }).catch(console.error.bind(console)); - } - - describe('default values', () => { - - it('should have a default model', () => { - return setup().then((api: IPaginationItemsPerPageFixture) => { - expect(api.comp.model.currentPage).toEqual(0); - expect(api.comp.model.itemsPerPage).toEqual(0); - expect(api.comp.model.totalItems).toEqual(0); - }); - }); - - it('should accept custom model', () => { - return setup(``).then((api: IPaginationItemsPerPageFixture) => { - expect(api.comp.model.currentPage).toEqual(2); - expect(api.comp.model.itemsPerPage).toEqual(30); - expect(api.comp.model.totalItems).toEqual(65); - }); - }); - - it('should have a default name', () => { - return setup().then((api: IPaginationItemsPerPageFixture) => { - expect(api.comp.name).toEqual('default'); - }); - }); - - it('should accept a custom name', () => { - return setup(``).then((api: IPaginationItemsPerPageFixture) => { - expect(api.comp.name).toEqual('book'); - }); - }); - - it('should have a default prepended string', () => { - return setup().then((api: IPaginationItemsPerPageFixture) => { - expect(api.comp.itemsPerPageBefore).toEqual('Rows per page:'); - }); - }); - - it('should accept a custom prepended string', () => { - return setup(``).then((api: IPaginationItemsPerPageFixture) => { - expect(api.comp.itemsPerPageBefore).toEqual('Items per page:'); - }); - }); - - it('should not have a default appended string', () => { - return setup().then((api: IPaginationItemsPerPageFixture) => { - expect(api.comp.itemsPerPageAfter).toBeUndefined(); - }); - }); - - it('should accept a custom appended string', () => { - return setup(``).then((api: IPaginationItemsPerPageFixture) => { - expect(api.comp.itemsPerPageAfter).toEqual(' - '); - }); - }); + describe('ngAfterViewInit', () => { + const defaultModel: IPaginationModel = { + currentPage: 1, + itemsPerPage: 30, + totalItems: 65 + }; - it('should have a empty list of options for items per page', () => { - return setup().then((api: IPaginationItemsPerPageFixture) => { - expect(api.comp.itemsPerPageOptions).toEqual([]); - }); - }); + it('should dispatch his model after init', async(() => { + return setup(``).then((api: IPaginationFixture) => { - it('should accept a custom list of options for items per page', () => { - return setup(``).then((api: IPaginationItemsPerPageFixture) => { - expect(api.comp.itemsPerPageOptions).not.toContain(5); - expect(api.comp.itemsPerPageOptions).toContain(10); - expect(api.comp.itemsPerPageOptions).toContain(50); - expect(api.comp.itemsPerPageOptions).toContain(100); - }); + expect(service.change).toHaveBeenCalled(); }); - - }); - - describe('construct', () => { - let service: PaginationService, - updatedPagination: IPaginationModel = { - currentPage: 1, - itemsPerPage: 30, - totalItems: 65 - }; - - beforeEach(inject([PaginationService], (serv) => { - service = serv; - })); - - it('should listen PaginationService', () => { - return setup().then((api: IPaginationItemsPerPageFixture) => { - service.onChange.subscribe((event) => { - expect(api.comp.model).toEqual(updatedPagination); - }); - - service.change('default', updatedPagination); - }); - }); - - it('should listen PaginationService only for his reference name', () => { - return setup(``).then((api: IPaginationItemsPerPageFixture) => { - service.onChange.subscribe(() => { - expect(api.comp.model.currentPage).toEqual(0); - expect(api.comp.model.itemsPerPage).toEqual(0); - expect(api.comp.model.totalItems).toEqual(0); - }); - - service.change('default', updatedPagination); - }); - }); - }); - - describe('changePaginationLength', () => { - let service: PaginationService; - - beforeEach(inject([PaginationService], (serv) => { - service = serv; - spyOn(service, 'change'); - })); - - it('should dispatch page change to the service and reset to first page', () => { - return setup(``).then((api: IPaginationItemsPerPageFixture) => { - api.comp.changePaginationLength(50); - expect(service.change).toHaveBeenCalledWith('default', { - currentPage: 1, - itemsPerPage: 50, - totalItems: 65 - }); - }); - }); - - }); + })); }); }); -} +}); diff --git a/src/components/peekaboo/peekaboo.ts b/src/components/peekaboo/peekaboo.ts index 1a608e29..6796ecd5 100644 --- a/src/components/peekaboo/peekaboo.ts +++ b/src/components/peekaboo/peekaboo.ts @@ -1,4 +1,4 @@ -import {Directive, OnDestroy, Input, ElementRef, NgZone} from '@angular/core'; +import {Directive, OnDestroy, Input, ElementRef, NgZone, NgModule} from '@angular/core'; import {Media, MediaListener} from '../../core/util/media'; import {ViewportHelper} from '../../core/util/viewport'; @@ -192,3 +192,9 @@ export class MdPeekaboo implements OnDestroy { } } + +@NgModule({ + declarations: [MdPeekaboo], + exports: [MdPeekaboo] +}) +export class MdPeekabooModule {} diff --git a/src/components/peekaboo/peekaboo_spec.ts b/src/components/peekaboo/peekaboo_spec.ts index 144f1074..892db4ae 100644 --- a/src/components/peekaboo/peekaboo_spec.ts +++ b/src/components/peekaboo/peekaboo_spec.ts @@ -1,36 +1,50 @@ -import {inject} from "@angular/core/testing"; -import {ComponentFixture, TestComponentBuilder} from "@angular/core/testing"; -import {Component, DebugElement} from "@angular/core"; -import {MdPeekaboo} from "../../index"; -import {By} from "@angular/platform-browser"; - -export function main() { - - interface IPeekabooFixture { - fixture: ComponentFixture; - peek: MdPeekaboo; - debug: DebugElement; - } +import {ComponentFixture, TestBed, async} from '@angular/core/testing'; +import {Component, DebugElement} from '@angular/core'; +import {MdPeekaboo} from '../../index'; +import {By} from '@angular/platform-browser'; +import {MdServicesModule} from '../../core/util/util.module'; - @Component({ - selector: 'test-app', - directives: [MdPeekaboo], - template: `
` - }) - class TestComponent { - hideBinding: string = 'hide'; - showBinding: string = 'show'; - sizeBinding: number = 50; - } - describe('Peekaboo', () => { - let builder: TestComponentBuilder; +interface IPeekabooFixture { + fixture: ComponentFixture; + peek: MdPeekaboo; + debug: DebugElement; +} + +@Component({ + selector: 'test-app', + template: `
` +}) +class TestComponent { + hideBinding: string = 'hide'; + showBinding: string = 'show'; + sizeBinding: number = 50; +} + +describe('Peekaboo', () => { + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [ + MdPeekaboo, + TestComponent + ], + imports: [MdServicesModule], + providers: [] + }); + }); - function setup(template: string = null): Promise { - let prep = template === null ? - builder.createAsync(TestComponent) : - builder.overrideTemplate(TestComponent, template).createAsync(TestComponent); - return prep.then((fixture: ComponentFixture) => { + function setup(template: string = null): Promise { + if (template) { + TestBed.overrideComponent(TestComponent, { + set: { + template: template + } + }); + } + return TestBed.compileComponents() + .then(() => { + const fixture = TestBed.createComponent(TestComponent); fixture.detectChanges(); let debug = fixture.debugElement.query(By.directive(MdPeekaboo)); let component = debug.injector.get(MdPeekaboo) as MdPeekaboo; @@ -39,72 +53,68 @@ export function main() { peek: component, debug: debug }; - }).catch(console.error.bind(console)); - } + }) + .catch(error => console.error.bind(console)); + } - beforeEach(inject([TestComponentBuilder], (tcb) => { - builder = tcb; - })); - describe('[md-peekaboo]', () => { - it('should be inactive by default', () => { - return setup().then((api: IPeekabooFixture) => { - expect(api.peek.active).toBe(false); - api.fixture.destroy(); - }); + describe('[md-peekaboo]', () => { + it('should be inactive by default', async(() => { + return setup().then((api: IPeekabooFixture) => { + expect(api.peek.active).toBe(false); + api.fixture.destroy(); }); + })); - describe('breakAction', () => { - it('should be undefined by default', () => { - return setup().then((api: IPeekabooFixture) => { - expect(api.peek.breakAction).toBeUndefined(); - }); + describe('breakAction', () => { + it('should be undefined by default', async(() => { + return setup().then((api: IPeekabooFixture) => { + expect(api.peek.breakAction).toBeUndefined(); }); + })); - it('should be set by attribute', () => { - return setup(`
`).then((api: IPeekabooFixture) => { - expect(api.peek.breakAction).toBe('show'); - }); + it('should be set by attribute', async(() => { + return setup(`
`).then((api: IPeekabooFixture) => { + expect(api.peek.breakAction).toBe('show'); }); + })); - it('should be set by binding', () => { - return setup(`
`).then((api: IPeekabooFixture) => { - expect(api.peek.breakAction).toBe('hide'); - }); + it('should be set by binding', async(() => { + return setup(`
`).then((api: IPeekabooFixture) => { + expect(api.peek.breakAction).toBe('hide'); }); - }); + })); + }); - ['breakXs', 'breakSm', 'breakMd', 'breakLg', 'breakXl'].forEach((size: string) => { - describe(size, () => { - it('should be -1 by default', () => { - return setup().then((api: IPeekabooFixture) => { - expect(api.peek[size]).toBe(-1); - }); + ['breakXs', 'breakSm', 'breakMd', 'breakLg', 'breakXl'].forEach((size: string) => { + describe(size, () => { + it('should be -1 by default', async(() => { + return setup().then((api: IPeekabooFixture) => { + expect(api.peek[size]).toBe(-1); }); + })); - it('should be set by attribute', () => { - return setup(`
`).then((api: IPeekabooFixture) => { - expect(api.peek[size]).toBe(25); - }); + it('should be set by attribute', async(() => { + return setup(`
`).then((api: IPeekabooFixture) => { + expect(api.peek[size]).toBe(25); }); + })); - it('should be set by binding', () => { - return setup(`
`).then((api: IPeekabooFixture) => { - expect(api.peek[size]).toBe(50); - }); + it('should be set by binding', async(() => { + return setup(`
`).then((api: IPeekabooFixture) => { + expect(api.peek[size]).toBe(50); }); + })); - it('should work with all breakpoint sizes', () => { - return setup(`
`).then((api: IPeekabooFixture) => { - MdPeekaboo.SIZES.forEach((s: string) => { - api.peek.breakpoint = s; - }); + it('should work with all breakpoint sizes', async(() => { + return setup(`
`).then((api: IPeekabooFixture) => { + MdPeekaboo.SIZES.forEach((s: string) => { + api.peek.breakpoint = s; }); }); - }); - + })); }); + }); }); -} - +}); diff --git a/src/components/subheader/subheader.ts b/src/components/subheader/subheader.ts index 8112dfd9..90548b0c 100644 --- a/src/components/subheader/subheader.ts +++ b/src/components/subheader/subheader.ts @@ -1,4 +1,4 @@ -import {Component} from "@angular/core"; +import {Component, NgModule} from "@angular/core"; @Component({ selector: 'md-subheader', @@ -10,5 +10,11 @@ import {Component} from "@angular/core"; ` }) -export class MdSubheader { +class MdSubheader { } + +@NgModule({ + declarations: [MdSubheader], + exports:[MdSubheader] +}) +export class MdSubheaderModule {} diff --git a/src/components/subheader/subheader_spec.ts b/src/components/subheader/subheader_spec.ts index 4fa95545..ca2ec4d6 100644 --- a/src/components/subheader/subheader_spec.ts +++ b/src/components/subheader/subheader_spec.ts @@ -1,6 +1,4 @@ -import {componentSanityCheck} from "../../platform/testing/util"; +import {componentSanityCheck} from '../../platform/testing/util'; -export function main() { - componentSanityCheck('Subheader', 'md-subheader', ''); -} +componentSanityCheck('Subheader', 'md-subheader', ''); diff --git a/src/components/switch/switch.ts b/src/components/switch/switch.ts deleted file mode 100644 index 463f60cd..00000000 --- a/src/components/switch/switch.ts +++ /dev/null @@ -1,76 +0,0 @@ -import {Component, HostBinding, Input, Output, EventEmitter, HostListener} from "@angular/core"; -import {KeyCodes} from "../../core/key_codes"; -import {parseTabIndexAttribute} from "../../core/util/util"; - -@Component({ - selector: 'md-switch', - inputs: ['checked', 'disabled'], - host: { - 'role': 'checkbox' - }, - template: ` -
-
-
-
-
-
-
- -
`, - directives: [] -}) -export class MdSwitch { - - @Output() - checkedChange: EventEmitter = new EventEmitter(false); - - /** Whether this switch is checked. */ - @Input() - @HostBinding('attr.aria-checked') - checked: boolean = false; - - /** Whether this switch is disabled. */ - @Input('disabled') - @HostBinding('attr.aria-disabled') - disabled_: boolean = false; - - - /** Setter for tabindex */ - @Input('tabindex') - private _tabindex: number; - set tabindex(value: number) { - this._tabindex = parseTabIndexAttribute(value); - } - - get tabindex(): number { - return this._tabindex; - } - - get disabled() { - return this.disabled_; - } - - set disabled(value) { - this.disabled_ = typeof value !== 'undefined' && value !== false; - } - - @HostListener('keydown', ['$event']) - onKeydown(event: KeyboardEvent) { - if (event.keyCode === KeyCodes.SPACE) { - event.preventDefault(); - this.toggle(event); - } - } - - @HostListener('click', ['$event']) - toggle(event) { - if (this.disabled) { - event.stopPropagation(); - return; - } - - this.checked = !this.checked; - this.checkedChange.emit(this.checked); - } -} diff --git a/src/components/switch/switch_spec.ts b/src/components/switch/switch_spec.ts deleted file mode 100644 index 36f3907d..00000000 --- a/src/components/switch/switch_spec.ts +++ /dev/null @@ -1,115 +0,0 @@ -import {inject} from "@angular/core/testing"; -import {By} from "@angular/platform-browser"; -import {ComponentFixture, TestComponentBuilder} from "@angular/core/testing"; -import {Component, DebugElement} from "@angular/core"; -import {MdSwitch} from "./switch"; -import {componentSanityCheck} from "../../platform/testing/util"; -import {KeyCodes} from "../../core/key_codes"; - -let createEvent = (): KeyboardEvent => { - var event = document.createEvent('Event'); - event.initEvent('key', true, true); - return event as KeyboardEvent; -}; - -export function main() { - - interface ICheckboxFixture { - fixture: ComponentFixture; - comp: MdSwitch; - debug: DebugElement; - } - @Component({ - selector: 'test-app', - directives: [MdSwitch], - template: `` - }) - class TestComponent { - isChecked: boolean = false; - isDisabled: boolean = false; - tabIndex = "1"; - } - - componentSanityCheck('Switch', 'md-switch', ``); - - describe('Switch', () => { - let builder: TestComponentBuilder; - - function setup(checked: boolean = false, disabled: boolean = false): Promise { - return builder.createAsync(TestComponent).then((fixture: ComponentFixture) => { - let debug = fixture.debugElement.query(By.css('md-switch')); - let comp: MdSwitch = debug.componentInstance; - let testComp = fixture.debugElement.componentInstance; - testComp.isDisabled = disabled; - testComp.isChecked = checked; - fixture.detectChanges(); - return { - fixture: fixture, - comp: comp, - debug: debug - }; - }).catch(console.error.bind(console)); - } - - beforeEach(inject([TestComponentBuilder], (tcb) => { - builder = tcb; - })); - - describe('md-switch', () => { - it('should initialize unchecked', () => { - return setup().then((api: ICheckboxFixture) => { - expect(api.comp.checked).toBe(false); - api.fixture.destroy(); - }); - }); - - it('should set checked from binding', () => { - return setup(true).then((api: ICheckboxFixture) => { - expect(api.comp.checked).toBe(true); - }); - }); - - it('should toggle checked value when clicked on', () => { - return setup(true).then((api: ICheckboxFixture) => { - expect(api.comp.checked).toBe(true); - api.debug.nativeElement.click(); - expect(api.comp.checked).toBe(false); - }); - }); - - it('should not toggle checked value when disabled and clicked on', () => { - return setup(true, true).then((api: ICheckboxFixture) => { - expect(api.comp.checked).toBe(true); - api.debug.nativeElement.click(); - expect(api.comp.checked).toBe(true); - api.fixture.destroy(); - }); - }); - - describe('Keyboard', () => { - it('should toggle when the space key is pressed', () => { - return setup().then((api: ICheckboxFixture) => { - expect(api.comp.checked).toBe(false); - let event = createEvent(); - event.keyCode = KeyCodes.SPACE; - api.debug.triggerEventHandler('keydown', event); - expect(api.comp.checked).toBe(true); - }); - }); - - it('should not toggle when any other key is pressed', () => { - return setup().then((api: ICheckboxFixture) => { - expect(api.comp.checked).toBe(false); - let event = createEvent(); - event.keyCode = KeyCodes.DOWN; - api.debug.triggerEventHandler('keydown', event); - expect(api.comp.checked).toBe(false); - }); - }); - - }); - }); - }); - - -} diff --git a/src/components/whiteframe/whiteframe.scss b/src/components/whiteframe/whiteframe.scss deleted file mode 100644 index 7e1be8b4..00000000 --- a/src/components/whiteframe/whiteframe.scss +++ /dev/null @@ -1,104 +0,0 @@ -@import "../../core/style/variables"; -@import "../../core/style/shadows"; - -.md-whiteframe-1dp, .md-whiteframe-z1 { - box-shadow: $whiteframe-shadow-1dp; -} - -.md-whiteframe-2dp { - box-shadow: $whiteframe-shadow-2dp; -} - -.md-whiteframe-3dp { - box-shadow: $whiteframe-shadow-3dp; -} - -.md-whiteframe-4dp, .md-whiteframe-z2 { - box-shadow: $whiteframe-shadow-4dp; -} - -.md-whiteframe-5dp { - box-shadow: $whiteframe-shadow-5dp; -} - -.md-whiteframe-6dp { - box-shadow: $whiteframe-shadow-6dp; -} - -.md-whiteframe-7dp, .md-whiteframe-z3 { - box-shadow: $whiteframe-shadow-7dp; -} - -.md-whiteframe-8dp { - box-shadow: $whiteframe-shadow-8dp; -} - -.md-whiteframe-9dp { - box-shadow: $whiteframe-shadow-9dp; -} - -.md-whiteframe-10dp, .md-whiteframe-z4 { - box-shadow: $whiteframe-shadow-10dp; -} - -.md-whiteframe-11dp { - box-shadow: $whiteframe-shadow-11dp; -} - -.md-whiteframe-12dp { - box-shadow: $whiteframe-shadow-12dp; -} - -.md-whiteframe-13dp, .md-whiteframe-z5 { - box-shadow: $whiteframe-shadow-13dp; -} - -.md-whiteframe-14dp { - box-shadow: $whiteframe-shadow-14dp; -} - -.md-whiteframe-15dp { - box-shadow: $whiteframe-shadow-15dp; -} - -.md-whiteframe-16dp { - box-shadow: $whiteframe-shadow-16dp; -} - -.md-whiteframe-17dp { - box-shadow: $whiteframe-shadow-17dp; -} - -.md-whiteframe-18dp { - box-shadow: $whiteframe-shadow-18dp; -} - -.md-whiteframe-19dp { - box-shadow: $whiteframe-shadow-19dp; -} - -.md-whiteframe-20dp { - box-shadow: $whiteframe-shadow-20dp; -} - -.md-whiteframe-21dp { - box-shadow: $whiteframe-shadow-21dp; -} - -.md-whiteframe-22dp { - box-shadow: $whiteframe-shadow-22dp; -} - -.md-whiteframe-23dp { - box-shadow: $whiteframe-shadow-23dp; -} - -.md-whiteframe-24dp { - box-shadow: $whiteframe-shadow-24dp; -} - -@media screen and (-ms-high-contrast: active) { - md-whiteframe { - border: 1px solid #fff; - } -} diff --git a/src/core/style/default-theme.scss b/src/core/style/default-theme.scss index 312811d5..377f844e 100644 --- a/src/core/style/default-theme.scss +++ b/src/core/style/default-theme.scss @@ -4,8 +4,8 @@ // Person creating a theme writes variables like this: $md-is-dark-theme: false !default; -$md-primary: md-palette($md-teal, 500, 100, 700, $md-contrast-palettes); -$md-accent: md-palette($md-purple, 500, 300,800, $md-contrast-palettes); -$md-warn: md-palette($md-red, 500, 300, 900, $md-contrast-palettes); +$md-primary: md-palette($md-teal, 500, 100, 700, $md-contrast-palettes) !default; +$md-accent: md-palette($md-purple, 500, 300,800, $md-contrast-palettes) !default; +$md-warn: md-palette($md-red, 500, 300, 900, $md-contrast-palettes) !default; $md-background: md-palette($md-grey, 500, 0, 600, $md-contrast-palettes) !default; $md-foreground: if($md-is-dark-theme, $md-dark-theme-foreground, $md-light-theme-foreground) !default; diff --git a/src/core/util/ink_spec.ts b/src/core/util/ink_spec.ts index d8166873..8c4b2571 100644 --- a/src/core/util/ink_spec.ts +++ b/src/core/util/ink_spec.ts @@ -1,68 +1,62 @@ -import {inject} from '@angular/core/testing'; -import {MATERIAL_DIRECTIVES} from '../../index'; +import {ComponentFixture, TestBed, async} from '@angular/core/testing'; import {Component} from '@angular/core'; -import {TestComponentBuilder, ComponentFixture} from '@angular/core/testing'; import {Ink} from './ink'; -import {By} from "@angular/platform-browser"; +import {By} from '@angular/platform-browser'; -export function main() { - const defaultTemplate = `
`; +const defaultTemplate = `
`; - @Component({ - selector: 'ink-test-component', - directives: [MATERIAL_DIRECTIVES], - template: defaultTemplate - }) - class TestComponent { - } +@Component({ + selector: 'ink-test-component', + template: defaultTemplate +}) +class TestComponent { +} - describe('Ink', () => { - let builder: TestComponentBuilder; +describe('Ink', () => { - function setup(template: string = defaultTemplate): Promise> { - return builder - .overrideTemplate(TestComponent, template) - .createAsync(TestComponent) - .then((fixture: ComponentFixture) => { - fixture.detectChanges(); - return fixture; - }).catch(console.error.bind(console)); - } - - beforeEach(inject([TestComponentBuilder], (tcb) => { - builder = tcb; - })); + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [ + TestComponent + ], + providers: [] + }); + }); - describe('canApply', () => { - it('should return true if element does not have md-no-ink attribute', () => { - setup(`
`) - .then((api: ComponentFixture) => { - const el = api.debugElement.query(By.css('div')); - expect(Ink.canApply(el.nativeElement)).toBe(true); - }); + function setup(template: string = null): Promise> { + if (template) { + TestBed.overrideComponent(TestComponent, { + set: { + template: template + } }); + } + return TestBed.compileComponents() + .then(() => { + const fixture = TestBed.createComponent(TestComponent); + fixture.detectChanges(); + return fixture; + }) + .catch(error => console.error.bind(console)); + } - it('should return true if element does not have md-no-ink attribute', () => { - setup(`
`) - .then((api: ComponentFixture) => { - const el = api.debugElement.query(By.css('div')); - expect(Ink.canApply(el.nativeElement)).toBe(false); - }); - }); - }); + describe('canApply', () => { + it('should return true if element does not have md-no-ink attribute', async(() => { + setup(`
`) + .then((api: ComponentFixture) => { + const el = api.debugElement.query(By.css('div')); + expect(Ink.canApply(el.nativeElement)).toBe(true); + }); + })); - describe('ripple', () => { - it('should ripple and resolve when the ink animation is done', () => { - setup(`
`) - .then((api: ComponentFixture) => { - const el = api.debugElement.query(By.css('div')); - Ink.ripple(el.nativeElement, 0, 0).then(() => { - // Second time for conditional that already has an ink ripple container - Ink.ripple(el.nativeElement, 0, 0); - }); - }); - }); - }); + it('should return false if element does have md-no-ink attribute', async(() => { + setup(`
`) + .then((api: ComponentFixture) => { + const el = api.debugElement.query(By.css('div')); + expect(Ink.canApply(el.nativeElement)).toBe(false); + }); + })); }); -} + +}); diff --git a/src/core/util/media_spec.ts b/src/core/util/media_spec.ts index 7f99b9ee..e53ce2e0 100644 --- a/src/core/util/media_spec.ts +++ b/src/core/util/media_spec.ts @@ -1,32 +1,39 @@ -import {inject} from '@angular/core/testing'; +import {inject, TestBed} from '@angular/core/testing'; import {Media} from './media'; +import {MATERIAL_BROWSER_PROVIDERS} from '../../index'; -export function main() { - describe('MediaService', () => { - const smallQuery = Media.getQuery('sm'); - const largeQuery = Media.getQuery('lg'); - let m: Media = null; - describe('listen', () => { - beforeEach(inject([Media], (media: Media) => { - m = media; - })); - it('should return a listener with the given query', () => { - const listener = m.listen(smallQuery); - expect(listener.query).toBe(smallQuery); - listener.destroy(); - }); - it('should reference count and share matchMedia listeners with the same query', () => { - expect(m.cache[largeQuery]).toBe(undefined); - const listener = m.listen(largeQuery); - expect(m.cache[largeQuery].references).toBe(1); - const another = m.listen(largeQuery); - expect(m.cache[largeQuery].references).toBe(2); - listener.destroy(); - expect(m.cache[largeQuery].references).toBe(1); - another.destroy(); - expect(m.cache[largeQuery]).toBe(undefined); +describe('MediaService', () => { + const smallQuery = Media.getQuery('sm'); + const largeQuery = Media.getQuery('lg'); + let m: Media = null; + describe('listen', () => { + + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [], + providers: [MATERIAL_BROWSER_PROVIDERS] }); }); + beforeEach(inject([Media], (media: Media) => { + m = media; + })); + it('should return a listener with the given query', () => { + const listener = m.listen(smallQuery); + expect(listener.query).toBe(smallQuery); + listener.destroy(); + }); + it('should reference count and share matchMedia listeners with the same query', () => { + expect(m.cache[largeQuery]).toBe(undefined); + const listener = m.listen(largeQuery); + expect(m.cache[largeQuery].references).toBe(1); + const another = m.listen(largeQuery); + expect(m.cache[largeQuery].references).toBe(2); + listener.destroy(); + expect(m.cache[largeQuery].references).toBe(1); + another.destroy(); + expect(m.cache[largeQuery]).toBe(undefined); + }); }); -} +}); diff --git a/src/core/util/util.module.ts b/src/core/util/util.module.ts new file mode 100644 index 00000000..c2fab9bf --- /dev/null +++ b/src/core/util/util.module.ts @@ -0,0 +1,13 @@ +import {ViewportHelper, BrowserViewportHelper} from './viewport'; +import {NgModule} from '@angular/core'; +import {Media} from './media'; +import {Animate} from './animate'; +@NgModule({ + providers: [ + {provide: ViewportHelper, useClass: BrowserViewportHelper}, + Media, + Animate + ] +}) +export class MdServicesModule { +} diff --git a/src/core/util/viewport.ts b/src/core/util/viewport.ts index f6c6f218..ce496733 100644 --- a/src/core/util/viewport.ts +++ b/src/core/util/viewport.ts @@ -1,3 +1,4 @@ +import {Injectable} from '@angular/core'; /** * Media Query Listener implementation */ @@ -13,6 +14,7 @@ export interface ViewportMediaMatch { * * Rather than interacting with the window, inject this service and use it. */ +@Injectable() export abstract class ViewportHelper { abstract matchMedia(query: string): ViewportMediaMatch; diff --git a/src/index.ts b/src/index.ts index 91845804..2787855e 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,37 +1,17 @@ -import {MdAnchor, MdButton} from "./components/button/button"; -import {MdContent} from "./components/content/content"; -import {MdDataTable, MdDataTableHeaderSelectableRow, MdDataTableSelectableRow} from "./components/data-table/index"; -import {MdDialog, MdDialogTitle, MdDialogActions, MdDialogPortal} from "./components/dialog/index"; -import {MdDivider} from "./components/divider/divider"; -import {MdIcon} from "./components/icon/icon"; -import {MdInk} from "./components/ink/ink"; -import { - MdPatternValidator, - MdMaxLengthValidator, - MdMinValueValidator, - MdMaxValueValidator, - MdNumberRequiredValidator, - INPUT_VALIDATORS -} from "./components/form/validators"; -import {MdMessage, MdMessages} from "./components/form/messages"; -import {MdList, MdListItem} from "./components/list/list"; -import { - MdPagination, - MdPaginationControls, - MdPaginationItemsPerPage, - MdPaginationRange, - PaginationService -} from "./components/pagination/index"; -import {MdPeekaboo} from "./components/peekaboo/peekaboo"; -import {MdSwitch} from "./components/switch/switch"; -import {MdSubheader} from "./components/subheader/subheader"; -import {Media} from "./core/util/media"; -import {ViewportHelper, BrowserViewportHelper, NodeViewportHelper} from "./core/util/viewport"; -import {OVERLAY_CONTAINER_TOKEN} from "@angular2-material/core/overlay/overlay"; -import {createOverlayContainer} from "@angular2-material/core/overlay/overlay-container"; -import {MdBackdrop} from "./components/backdrop/backdrop"; +import {NgModule, ModuleWithProviders} from '@angular/core'; +import {MdContentModule} from './components/content/content'; +import {MdDataTableModule} from './components/data-table/index'; +import {MdDividerModule} from './components/divider/divider'; +import {MdPaginationModule} from './components/pagination/index'; +import {MdPeekabooModule} from './components/peekaboo/peekaboo'; +import {MdSubheaderModule} from './components/subheader/subheader'; +import {Media} from './core/util/media'; +import {ViewportHelper, BrowserViewportHelper, NodeViewportHelper} from './core/util/viewport'; +import {MdDialogModule} from './components/dialog/dialog.module'; +import {MdBackdropModule} from './components/backdrop/backdrop'; +import {MdServicesModule} from './core/util/util.module'; +// import {MdMessage, MdMessages} from "./components/form/messages"; // Needs upgrade from deprecated forms module -export * from './components/button/button'; export * from './components/backdrop/backdrop'; export * from './components/content/content'; @@ -41,60 +21,23 @@ export * from './components/data-table/index'; export * from './components/dialog/index'; export * from './components/divider/divider'; -export * from './components/icon/icon'; - -export * from './components/ink/ink'; - -export * from './components/form/validators'; -export * from './components/form/messages'; - -export * from './components/list/list'; - export * from './components/pagination/index'; export * from './components/peekaboo/peekaboo'; -export * from './components/switch/switch'; - export * from './components/subheader/subheader'; export * from './core/util/media'; -export * from './core/util/ink'; export * from './core/util/viewport'; export * from './core/util/animate'; -/** - * Collection of Material Design component directives. - */ -export const MATERIAL_DIRECTIVES: any[] = [ - MdAnchor, MdButton, - MdContent, - MdDataTable, MdDataTableHeaderSelectableRow, MdDataTableSelectableRow, - MdDivider, - MdBackdrop, - MdDialog, MdDialogActions, MdDialogTitle, MdDialogPortal, - MdIcon, - MdInk, - MdPatternValidator, MdMaxLengthValidator, - MdMinValueValidator, MdMaxValueValidator, - MdNumberRequiredValidator, - MdMessage, MdMessages, - MdList, MdListItem, - MdPagination, MdPaginationControls, MdPaginationItemsPerPage, MdPaginationRange, - MdPeekaboo, - MdSubheader, - MdSwitch -]; - /** * Material Design component providers for use in a Node.JS environment. */ export const MATERIAL_NODE_PROVIDERS: any[] = [ {provide: ViewportHelper, useClass: NodeViewportHelper}, - Media, - PaginationService, - ...INPUT_VALIDATORS + Media ]; /** @@ -103,15 +46,52 @@ export const MATERIAL_NODE_PROVIDERS: any[] = [ export const MATERIAL_BROWSER_PROVIDERS: any[] = [ ...MATERIAL_NODE_PROVIDERS, {provide: ViewportHelper, useClass: BrowserViewportHelper}, - // TODO(jd): should this be here? Or in the example app bootstrap? - {provide: OVERLAY_CONTAINER_TOKEN, useValue: createOverlayContainer()}, ]; /** - * Please use {@see MATERIAL_NODE_PROVIDERS} or {@see MATERIAL_BROWSER_PROVIDERS} - * as appropriate. - * - * @deprecated + * Collection of Material Design component modules. + */ +const MATERIAL_MODULES = [ + MdBackdropModule, + MdContentModule, + MdDataTableModule, + MdDialogModule, + MdDividerModule, + MdPaginationModule, + MdPeekabooModule, + MdSubheaderModule, + MdServicesModule +]; + +/** + * Material Design module for use in a Node.JS environment. + */ +@NgModule({ + exports: MATERIAL_MODULES, + imports: MATERIAL_MODULES +}) +export class Ng2MaterialNodeModule { + static forRoot(): ModuleWithProviders { + return { + ngModule: Ng2MaterialNodeModule, + providers: MATERIAL_NODE_PROVIDERS + } + } +} + +/** + * Material Design module for use in the browser. */ -export const MATERIAL_PROVIDERS = MATERIAL_BROWSER_PROVIDERS; +@NgModule({ + exports: MATERIAL_MODULES, + imports: MATERIAL_MODULES +}) +export class Ng2MaterialModule { + static forRoot(): ModuleWithProviders { + return { + ngModule: Ng2MaterialModule, + providers: MATERIAL_BROWSER_PROVIDERS + } + } +} diff --git a/src/platform/testing/bootstrap.ts b/src/platform/testing/bootstrap.ts deleted file mode 100644 index 395eb7f3..00000000 --- a/src/platform/testing/bootstrap.ts +++ /dev/null @@ -1,69 +0,0 @@ -declare var System: any; -declare var Zone: any; - - -import {resetBaseTestProviders, setBaseTestProviders} from "@angular/core/testing"; -import {BROWSER_APP_COMPILER_PROVIDERS} from "@angular/platform-browser-dynamic"; -import {TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS} from "@angular/platform-browser-dynamic/testing"; -import {MATERIAL_BROWSER_PROVIDERS} from "../../index"; -import {TestUrlResolver} from "./test_url_resolver"; -import {UrlResolver} from "@angular/compiler"; - -resetBaseTestProviders(); -setBaseTestProviders( - TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, - [ - ...BROWSER_APP_COMPILER_PROVIDERS, - ...TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS, - ...MATERIAL_BROWSER_PROVIDERS, - {provide: UrlResolver, useValue: new TestUrlResolver()} - ] -); - -function onlySpecFiles(path) { - return /_spec\.js$/.test(path); -} - -export function load(files: string[]): Promise { - console.log('importing test modules: '); - let error = (e: any) => { - console.error(e); - }; - var myZone = new Zone(); - myZone.fork({ - onError: (e) => { - console.error("Zone Error:"); - console.error(e); - } - }); - - let runTests = (path: string) => { - return new Promise((resolve, reject) => { - myZone.run(() => { - console.log(` - ${path}`); - return System.import(path).then((module: any) => { - if (module.hasOwnProperty('main')) { - try { - module.main(); - resolve(); - } - catch (e) { - error(e); - reject(e); - } - } else { - console.warn(` - skipping ${path} which does not implement main() method.`); - reject('invalid file'); - } - }); - }); - - }); - }; - let promises = Object - .keys(files) - .filter(onlySpecFiles) - .map(runTests); - return Promise.all(promises); - -} diff --git a/src/platform/testing/test_url_resolver.ts b/src/platform/testing/test_url_resolver.ts deleted file mode 100644 index 738fb6f9..00000000 --- a/src/platform/testing/test_url_resolver.ts +++ /dev/null @@ -1,13 +0,0 @@ -import {UrlResolver} from "@angular/compiler"; - -export class TestUrlResolver extends UrlResolver { - constructor() { - super(); - } - - resolve(baseUrl: string, url: string): string { - // The standard UrlResolver looks for "package:" templateUrls in - // node_modules, however in our repo we host material widgets at the root. - return `/base/${super.resolve(baseUrl, url)}`; - } -} diff --git a/src/platform/testing/util.ts b/src/platform/testing/util.ts index 3dcc4d3e..33440998 100644 --- a/src/platform/testing/util.ts +++ b/src/platform/testing/util.ts @@ -1,7 +1,6 @@ -import {Component} from "@angular/core"; -import {beforeEach, describe, inject, it, async} from "@angular/core/testing"; -import {ComponentFixture, TestComponentBuilder} from "@angular/core/testing"; -import {MATERIAL_DIRECTIVES} from "../../index"; +import {Component} from '@angular/core'; +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; +import {Ng2MaterialModule} from '../../index'; export function promiseWait(milliseconds: number = 10): Promise { return new Promise((resolve)=> { @@ -19,38 +18,53 @@ export function promiseWait(milliseconds: number = 10): Promise { export function componentSanityCheck(name: string, selector: string, template: string) { @Component({ selector: 'test-app', - directives: [MATERIAL_DIRECTIVES], template: template }) class TestComponent { } describe(name, () => { - let builder: TestComponentBuilder; - function setup(): Promise { - return builder.createAsync(TestComponent) - .then((fixture: ComponentFixture) => { + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [ + TestComponent + ], + imports: [Ng2MaterialModule], + providers: [] + }); + }); + + function setup(template: string = null): Promise> { + if (template) { + TestBed.overrideComponent(TestComponent, { + set: { + template: template + } + }); + } + return TestBed.compileComponents() + .then(() => { + const fixture = TestBed.createComponent(TestComponent); fixture.detectChanges(); - return fixture; + return fixture.whenStable().then(() => fixture); }) - .catch(console.error.bind(console)); + .catch(error => { + return console.error(error); + }); } - beforeEach(inject([TestComponentBuilder], (tcb) => { - builder = tcb; - })); - describe(selector, () => { - it('should instantiate component without fail', async(inject([], () => { - setup() - .then(() => promiseWait()); - }))); - it('should destroy component without fail', async(inject([], () => { + it('should instantiate component without fail', async(() => { + setup().then(() => promiseWait()); + })); + it('should destroy component without fail', async(() => { setup() - .then((api: ComponentFixture) => api.destroy()) + .then((api: ComponentFixture) => { + return api.destroy(); + }) .then(() => promiseWait()); - }))); + })); }); }); diff --git a/systemjs.config.extras.js b/systemjs.config.extras.js new file mode 100644 index 00000000..d1b0785a --- /dev/null +++ b/systemjs.config.extras.js @@ -0,0 +1,17 @@ +/** + * Add barrels and stuff + * Adjust as necessary for your application needs. + */ +(function (global) { + System.config({ + packages: { + 'dist': { + defaultExtension: 'js' + }, + 'src': { + defaultExtension: 'js' + }, + // add packages here + } + }); +})(this); diff --git a/systemjs.config.js b/systemjs.config.js new file mode 100644 index 00000000..0bf67678 --- /dev/null +++ b/systemjs.config.js @@ -0,0 +1,47 @@ +/** + * System configuration for Angular samples + * Adjust as necessary for your application needs. + */ +(function (global) { + System.config({ + paths: { + // paths serve as alias + 'npm:': 'node_modules/' + }, + // map tells the System loader where to look for things + map: { + // our app is within the app folder + 'ng2-material': 'src', + + // angular bundles + '@angular/core': 'npm:@angular/core/bundles/core.umd.js', + '@angular/common': 'npm:@angular/common/bundles/common.umd.js', + '@angular/material': 'npm:@angular/material/material.umd.js', + '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', + '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', + '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', + '@angular/http': 'npm:@angular/http/bundles/http.umd.js', + '@angular/router': 'npm:@angular/router/bundles/router.umd.js', + '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', + '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js', + + // other libraries + 'rxjs': 'npm:rxjs', + 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api', + }, + // packages tells the System loader how to load when no filename and/or no extension + packages: { + app: { + main: './main.js', + defaultExtension: 'js' + }, + rxjs: { + defaultExtension: 'js' + }, + 'angular-in-memory-web-api': { + main: './index.js', + defaultExtension: 'js' + } + } + }); +})(this); diff --git a/tsconfig.json b/tsconfig.json index 383afc43..b81aeaa1 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -8,68 +8,33 @@ "moduleResolution": "node", "noEmitOnError": true, "noImplicitAny": false, - "outDir": "dist/", - "rootDir": "src/", + "outDir": "dist", + "rootDir": "src", "sourceMap": true, - "target": "es5" + "target": "es5", + "lib": [ + "es6", + "es2015", + "dom" + ], + "typeRoots": [ + "./node_modules/@types" + ], + "types": [ + "jasmine", + "hammerjs", + "node", + "core-js" + ] }, - "filesGlob": [ + "exclude": [ + "node_modules", + "dist", "ng2-material.d.ts", - "src/**/*.ts" + "modules", + "typings", + "src/**/*_spec.ts", + "src/platform/testing/*.*" ], - "compileOnSave": true, - "files": [ - "ng2-material.d.ts", - "src/components/backdrop/backdrop.ts", - "src/components/backdrop/backdrop_spec.ts", - "src/components/button/button.ts", - "src/components/button/button_spec.ts", - "src/components/card/card.ts", - "src/components/card/card_spec.ts", - "src/components/content/content.ts", - "src/components/content/content_spec.ts", - "src/components/data-table/data_table.ts", - "src/components/data-table/data_table_selectable_tr.ts", - "src/components/data-table/data_table_spec.ts", - "src/components/data-table/index.ts", - "src/components/dialog/dialog-actions.ts", - "src/components/dialog/dialog-portal.ts", - "src/components/dialog/dialog-title.ts", - "src/components/dialog/dialog.ts", - "src/components/dialog/dialog_spec.ts", - "src/components/dialog/index.ts", - "src/components/divider/divider.ts", - "src/components/divider/divider_spec.ts", - "src/components/form/messages.ts", - "src/components/form/messages_spec.ts", - "src/components/form/validators.ts", - "src/components/form/validators_spec.ts", - "src/components/icon/icon.ts", - "src/components/ink/ink.ts", - "src/components/ink/ink_spec.ts", - "src/components/list/list.ts", - "src/components/list/list_spec.ts", - "src/components/pagination/index.ts", - "src/components/pagination/pagination.ts", - "src/components/pagination/pagination_service.ts", - "src/components/pagination/pagination_spec.ts", - "src/components/peekaboo/peekaboo.ts", - "src/components/peekaboo/peekaboo_spec.ts", - "src/components/subheader/subheader.ts", - "src/components/subheader/subheader_spec.ts", - "src/components/switch/switch.ts", - "src/components/switch/switch_spec.ts", - "src/core/key_codes.ts", - "src/core/util/animate.ts", - "src/core/util/ink.ts", - "src/core/util/ink_spec.ts", - "src/core/util/media.ts", - "src/core/util/media_spec.ts", - "src/core/util/util.ts", - "src/core/util/viewport.ts", - "src/index.ts", - "src/platform/testing/bootstrap.ts", - "src/platform/testing/test_url_resolver.ts", - "src/platform/testing/util.ts" - ] -} \ No newline at end of file + "compileOnSave": true +} diff --git a/typings.json b/typings.json index 5159d0f6..5978f46e 100644 --- a/typings.json +++ b/typings.json @@ -1,8 +1,5 @@ { "globalDependencies": { - "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654", - "jasmine": "registry:dt/jasmine#2.2.0+20160412134438", - "hammerjs": "registry:dt/hammerjs#2.0.4+20160417130828", - "node": "github:DefinitelyTyped/DefinitelyTyped/node/node.d.ts#48c1e3c1d6baefa4f1a126f188c27c4fefd36bff" + "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654" } }