Merge remote-tracking branch 'upstream/master' into offline-compiler

Author: hansl

GETTING_STARTED.md

@@ -176,7 +176,17 @@ bootstrap(MyAppComponent, [
     directives: [MD_CARD_DIRECTIVES, MD_BUTTON_DIRECTIVES, MdIcon],
     providers: [MdIconRegistry]
  ```
-    
+
+- Add the icon package to the list of Material components in your `system-config.ts`:
+
+**src/system-config.ts**
+```ts
+// put the names of any of your Material components here
+const materialPkgs:string[] = [
+  ...
+  'icon'
+];
+```
 
 
 

angular-cli-build.js

@@ -9,35 +9,6 @@ const Angular2App = require('angular-cli/lib/broccoli/angular2-app');
 const Funnel = require('broccoli-funnel');
 const MergeTree = require('broccoli-merge-trees');
 const autoPrefixerTree = require('broccoli-autoprefixer');
-const BroccoliPlugin = require('broccoli-plugin');
-
-
-class NgcBroccoli extends BroccoliPlugin {
-  constructor(subTree, options) {
-    super([subTree], {});
-    this._options = options;
-  }
-
-  build() {
-    require('reflect-metadata');
-    const tsc = require('@angular/tsc-wrapped');
-    const CodeGenerator = require('@angular/compiler-cli').CodeGenerator;
-
-    function codegen(ngOptions, program, host) {
-      return CodeGenerator.create(ngOptions, program, host).codegen();
-    }
-
-    return tsc.main('./src/demo-app', path.relative(process.cwd(), this.inputPaths[0], './src/demo-app'), codegen)
-      .then(function (code) {
-        console.log(123, code);
-      })
-      .catch(function (e) {
-        console.error(e.stack);
-        console.error('Compilation failed');
-        process.exit(1);
-      });
-  }
-}
 
 
 module.exports = function(defaults) {
@@ -52,20 +23,7 @@ module.exports = function(defaults) {
   // Include the scss sources in the output for when we publish.
   const scssSources = new Funnel('src', {include: ['**/*.scss']});
 
-  let trees = new MergeTree([appTree, cssAutoprefixed, scssSources], { overwrite: true });
-
-  if (process.env['MD_NGC']) {
-    trees = new MergeTree([
-      trees,
-      new Funnel('src', {include: ['demo-app/**/*'], destDir: 'src'}),
-    ]);
-
-    trees = new NgcBroccoli(trees, {
-      project: 'src/demo-app'
-    });
-  }
-
-  return trees;
+  return new MergeTree([appTree, cssAutoprefixed, scssSources], { overwrite: true });
 };
 
 
@@ -121,8 +79,6 @@ function _buildAppTree(defaults) {
       inputNode = _buildE2EAppInputTree();
       sourceDir = 'src/e2e-app';
       break;
-
-    case 'ngc':
     default:
       inputNode = _buildDemoAppInputTree();
       sourceDir = 'src/demo-app';

e2e/components/tabs/tabs.e2e.ts

@@ -0,0 +1,97 @@
+import ElementArrayFinder = protractor.ElementArrayFinder;
+import ElementFinder = protractor.ElementFinder;
+
+describe('tabs', () => {
+  describe('basic behavior', () => {
+    let tabGroup: ElementFinder;
+    let tabLabels: ElementArrayFinder;
+    let tabBodies: ElementArrayFinder;
+
+    beforeEach(() => {
+      browser.get('/tabs');
+      tabGroup = element(by.css('md-tab-group'));
+      tabLabels = element.all(by.css('.md-tab-label'));
+      tabBodies = element.all(by.css('.md-tab-body'));
+    });
+
+    it('should change tabs when the label is clicked', () => {
+      tabLabels.get(1).click();
+      expect(getActiveStates(tabLabels)).toEqual([false, true, false]);
+      expect(getActiveStates(tabBodies)).toEqual([false, true, false]);
+
+      tabLabels.get(0).click();
+      expect(getActiveStates(tabLabels)).toEqual([true, false, false]);
+      expect(getActiveStates(tabBodies)).toEqual([true, false, false]);
+    });
+
+    it('should change focus with keyboard interaction', () => {
+      tabLabels.get(0).click();
+      expect(getFocusStates(tabLabels)).toEqual([true, false, false]);
+
+      pressKey(protractor.Key.RIGHT);
+      expect(getFocusStates(tabLabels)).toEqual([false, true, false]);
+
+      pressKey(protractor.Key.RIGHT);
+      expect(getFocusStates(tabLabels)).toEqual([false, false, true]);
+
+      pressKey(protractor.Key.RIGHT);
+      expect(getFocusStates(tabLabels)).toEqual([false, false, true]);
+
+      pressKey(protractor.Key.LEFT);
+      expect(getFocusStates(tabLabels)).toEqual([false, true, false]);
+
+      pressKey(protractor.Key.LEFT);
+      expect(getFocusStates(tabLabels)).toEqual([true, false, false]);
+
+      pressKey(protractor.Key.LEFT);
+      expect(getFocusStates(tabLabels)).toEqual([true, false, false]);
+    });
+  });
+});
+
+/**
+ * A helper function to perform the sendKey action
+ * @param key
+ */
+function pressKey(key: string) {
+  browser.actions().sendKeys(key).perform();
+}
+
+/**
+ * Returns an array of true/false that represents the focus states of the provided elements
+ * @param elements
+ * @returns {webdriver.promise.Promise<Promise<boolean>[]>|webdriver.promise.Promise<T[]>}
+ */
+function getFocusStates(elements: ElementArrayFinder) {
+  return elements.map(element => {
+    return element.getText().then(elementText => {
+      return browser.driver.switchTo().activeElement().getText().then(activeText => {
+        return activeText === elementText;
+      });
+    });
+  });
+}
+
+/**
+ * Returns an array of true/false that represents the active states for the provided elements
+ * @param elements
+ * @returns {webdriver.promise.Promise<Promise<boolean>[]>|webdriver.promise.Promise<T[]>}
+ */
+function getActiveStates(elements: ElementArrayFinder) {
+  return getClassStates(elements, 'md-active');
+}
+
+/**
+ * Returns an array of true/false values that represents whether the provided className is on
+ * each element
+ * @param elements
+ * @param className
+ * @returns {webdriver.promise.Promise<Promise<boolean>[]>|webdriver.promise.Promise<T[]>}
+ */
+function getClassStates(elements: ElementArrayFinder, className: string) {
+  return elements.map(element => {
+    return element.getAttribute('class').then(classes => {
+      return classes.split(/ +/g).indexOf(className) >= 0;
+    });
+  });
+}

package.json

@@ -48,8 +48,6 @@
     "broccoli-autoprefixer": "^4.1.0",
     "broccoli-funnel": "^1.0.1",
     "broccoli-merge-trees": "^1.1.1",
-    "broccoli-plugin": "^1.2.1",
-    "broccoli-replace": "^0.12.0",
     "browserstacktunnel-wrapper": "^1.4.2",
     "conventional-changelog": "^1.1.0",
     "ember-cli-inject-live-reload": "^1.4.0",

scripts/ci/forbidden-identifiers.js

@@ -8,6 +8,7 @@
 
 const child_process = require('child_process');
 const fs = require('fs');
+const path = require('path');
 
 const exec = function(cmd) {
   return new Promise(function(resolve, reject) {
@@ -33,7 +34,16 @@ const blocked_statements = [
   'from \\\'rxjs/Rx\\\'',
 ];
 
+// Retrieves all scope packages dynamically from the source.
+// Developers shouldn't be able to import from other scope packages by using relative paths.
+const componentFolders = fs
+  .readdirSync(`${__dirname}/../../src/components`)
+  .map(componentName => `src/components/${componentName}`);
+
+const scopePackages = ['src/core'].concat(componentFolders);
+
 const blockedRegex = new RegExp(blocked_statements.join('|'), 'g');
+const importRegex = /from\s+'(.*)';/g;
 
 /**
  * Find the fork point between HEAD of the current branch, and master.
@@ -85,6 +95,63 @@ function findChangedFiles() {
     });
 }
 
+/**
+ * Checks the line for any relative imports of a scope package, which should be imported by using
+ * the scope package name instead of the relative path.
+ * @param fileName Filename to validate the path
+ * @param line Line to be checked.
+ */
+function isRelativeScopeImport(fileName, line) {
+  let importMatch = importRegex.exec(line);
+
+  // We have to reset the last index of the import regex, otherwise we
+  // would have incorrect matches in the next execution.
+  importRegex.lastIndex = 0;
+
+  // Skip the check if the current line doesn't match any imports.
+  if (!importMatch) {
+    return false;
+  }
+
+  let importPath = importMatch[1];
+
+  // Skip the check when the import doesn't start with a dot, because the line
+  // isn't importing any file relatively. Also applies to scope packages starting
+  // with `@`.
+  if (!importPath.startsWith('.')) {
+    return false;
+  }
+
+  // Transform the relative import path into an absolute path.
+  importPath = path.resolve(path.dirname(fileName), importPath);
+
+  let currentScope = findScope(fileName);
+  let importScope = findScope(importPath);
+
+  if (currentScope !== importScope) {
+    // Transforms the invalid import statement into a correct import statement, which uses the scope package.
+    let scopeImport = `@angular2-material/${path.basename(importScope)}/${path.relative(importScope, importPath)}`;
+
+    return {
+      currentScope: currentScope,
+      importScope: importScope,
+      invalidStatement: importMatch[0],
+      scopeImportPath: scopeImport
+    }
+  }
+
+  return false;
+
+  function findScope(filePath) {
+    // Normalize the filePath as well, to avoid issues with the different environments path delimiter.
+    filePath = path.normalize(filePath);
+
+    // Iterate through all scopes and try to find them inside of the file path.
+    return scopePackages.filter(scope => filePath.indexOf(path.normalize(scope)) !== -1).pop();
+  }
+
+}
+
 
 // Find all files, check for errors, and output every errors found.
 findChangedFiles()
@@ -116,23 +183,35 @@ findChangedFiles()
       content.forEach(function(line) {
         ln++;
 
-        let m = line.match(blockedRegex);
-        if (m) {
+        let matches = line.match(blockedRegex);
+        let isScopeImport = isRelativeScopeImport(fileName, line);
+
+        if (matches || isScopeImport) {
           // Accumulate all errors at once.
-          errors.push({
+          let error = {
             fileName: fileName,
             lineNumber: ln,
-            statement: m[0]
-          });
+            statement: matches && matches[0] || isScopeImport.invalidStatement
+          };
+
+          if (isScopeImport) {
+            error.message =
+              '   You are using an import statement, which imports a file from another scope package.\n' +
+              `   Please import the file by using the following path: ${isScopeImport.scopeImportPath}`;
+          }
+
+          errors.push(error);
         }
       });
       return errors;
     }, []);
   })
   .then(errors => {
     if (errors.length > 0) {
-      console.error('Error: You are using a statement in your commit, which is not allowed.');
+      console.error('Error: You are using a statement in your commit, which is not allowed.\n');
+
       errors.forEach(entry => {
+        if (entry.message) console.error(entry.message);
         console.error(`   ${entry.fileName}@${entry.lineNumber}, Statement: ${entry.statement}.\n`);
       });
 

scripts/release/stage-release.sh

@@ -9,11 +9,11 @@ set -exu
 
 
 # Clear dist/ and deploy/ so that we guarantee there are no stale artifacts.
-#rm -rf ./dist
-#rm -rf ./deploy
-#
-## Perform a build with the modified tsconfig.json.
-#ng build
+rm -rf ./dist
+rm -rf ./deploy
+
+# Perform a build with the modified tsconfig.json.
+ng build
 
 # Inline the css and html into the component ts files.
 npm run inline-resources

src/components/menu/menu.html

@@ -0,0 +1,35 @@
+import {
+    it,
+    describe,
+    expect,
+    beforeEach,
+    inject,
+} from '@angular/core/testing';
+import {TestComponentBuilder} from '@angular/compiler/testing';
+import {Component} from '@angular/core';
+
+import {MD_MENU_DIRECTIVES} from './menu';
+
+describe('MdMenu', () => {
+  let builder: TestComponentBuilder;
+
+  beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+    builder = tcb;
+  }));
+
+  it('should add and remove focus class on focus/blur', () => {
+    var template = ``;
+    return builder.overrideTemplate(TestList, template)
+        .createAsync(TestList).then((fixture) => {
+           expect(true).toBe(true);
+        });
+  });
+
+});
+
+@Component({
+  selector: 'test-menu',
+  template: ``,
+  directives: [MD_MENU_DIRECTIVES]
+})
+class TestList {}

src/components/menu/menu.scss

@@ -0,0 +1,13 @@
+import {Component, ViewEncapsulation} from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'md-menu',
+  templateUrl: 'menu.html',
+  styleUrls: ['menu.css'],
+  encapsulation: ViewEncapsulation.None
+})
+export class MdMenu {}
+
+export const MD_MENU_DIRECTIVES = [MdMenu];
+