test: add snapshot material e2e tests

Author: alan-agius4

tests/legacy-cli/e2e/ng-snapshot/package.json

@@ -3,16 +3,18 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "github:angular/animations-builds#f003815f2763fd17fc5fe096ee2a7f4bf767c2f1",
+    "@angular/cdk": "github:angular/cdk-builds#c941e7722542df2cf9e031aa1715f8a2e37b1a80",
     "@angular/common": "github:angular/common-builds#21e7e8c61555abbb0aa11df48d81e59b125a47f2",
     "@angular/compiler": "github:angular/compiler-builds#454c14560dd6163a4e3a60a5311111944d820d7c",
     "@angular/compiler-cli": "github:angular/compiler-cli-builds#672497fd83daa436971f7c6d81ceddbe79d4c463",
     "@angular/core": "github:angular/core-builds#cfde37d8320664a393012ae9f6aaa41c4ae0dbc5",
     "@angular/forms": "github:angular/forms-builds#ecd930c051152cd2502e1a8e01e0db1d4c25ec8a",
     "@angular/language-service": "github:angular/language-service-builds#f891789a31917e98d6ff1551d1a30862ab04de8f",
     "@angular/localize": "github:angular/localize-builds#2bab28b252fd6a4e4900dae8b13834220020c34a",
+    "@angular/material": "github:angular/material2-builds#77e9c11620c5d535ecb910daaa0f79f61c055e04",
     "@angular/platform-browser": "github:angular/platform-browser-builds#49262e2dfe4f0f68244479de078956e9f875f294",
     "@angular/platform-browser-dynamic": "github:angular/platform-browser-dynamic-builds#65583111b5c173f72a97d677b78549576b892595",
     "@angular/platform-server": "github:angular/platform-server-builds#cfda848b6b556e838ddfe8b9620369253b4860c0",
     "@angular/router": "github:angular/router-builds#f53bbd435141e1514c7495f7b6af99e67e5b55f3"
   }
-}
+}

tests/legacy-cli/e2e/tests/build/material.ts

@@ -0,0 +1,26 @@
+import { getGlobalVariable } from '../../utils/env';
+import { ng, silentNpm } from '../../utils/process';
+import { updateJsonFile } from '../../utils/project';
+
+const snapshots = require('../../ng-snapshot/package.json');
+
+export default async function () {
+    await ng('add', '@angular/material');
+
+    const isSnapshotBuild = getGlobalVariable('argv')['ng-snapshots'];
+    if (isSnapshotBuild) {
+        await updateJsonFile('package.json', packageJson => {
+            const dependencies = packageJson['dependencies'];
+            // Angular material adds dependencies on other Angular packages
+            // Iterate over all of the packages to update them to the snapshot version.
+            for (const { name, version } of Object.entries[snapshots.dependencies]) {
+                if (name in dependencies) {
+                    dependencies[name] = version;
+                }
+            }
+        });
+    }
+
+    await silentNpm('install');
+    await ng('build', '--prod');
+}

tests/legacy-cli/e2e/tests/build/styles/material-import.ts

@@ -1,51 +1,57 @@
+import { stripIndents } from 'common-tags';
+import { getGlobalVariable } from '../../../utils/env';
 import {
+  replaceInFile,
   writeMultipleFiles,
-  replaceInFile
 } from '../../../utils/fs';
 import { ng, silentNpm } from '../../../utils/process';
-import { stripIndents } from 'common-tags';
 import { updateJsonFile } from '../../../utils/project';
 
-export default function () {
+const snapshots = require('../../../ng-snapshot/package.json');
+
+export default async function () {
   // TODO(architect): Delete this test. It is now in devkit/build-angular.
 
-  const extensions = ['css', 'scss', 'less', 'styl'];
-  let promise: Promise<any> = Promise.resolve()
-    .then(() => silentNpm('install', '@angular/[email protected]'))
-    .then(() => silentNpm('install', '@angular/[email protected]'));
+  const isSnapshotBuild = getGlobalVariable('argv')['ng-snapshots'];
+  await updateJsonFile('package.json', packageJson => {
+    const dependencies = packageJson['dependencies'];
+    dependencies['@angular/material'] = isSnapshotBuild ? snapshots.dependencies['@angular/material'] : 'latest';
+    dependencies['@angular/cdk'] = isSnapshotBuild ? snapshots.dependencies['@angular/cdk'] : 'latest';
+  });
+
+  await silentNpm('install');
 
-  extensions.forEach(ext => {
-    promise = promise.then(() => {
-      return writeMultipleFiles({
-        [`src/styles.${ext}`]: stripIndents`
-          @import "~@angular/material/prebuilt-themes/indigo-pink.css";
+  for (const ext of ['css', 'scss', 'less', 'styl']) {
+    await writeMultipleFiles({
+      [`src/styles.${ext}`]: stripIndents`
+        @import "~@angular/material/prebuilt-themes/indigo-pink.css";
+      `,
+      [`src/app/app.component.${ext}`]: stripIndents`
+        @import "~@angular/material/prebuilt-themes/indigo-pink.css";
+      `,
+    });
+
+    // change files to use preprocessor
+    await updateJsonFile('angular.json', workspaceJson => {
+      const appArchitect = workspaceJson.projects['test-project'].architect;
+      appArchitect.build.options.styles = [
+        { input: `src/styles.${ext}` },
+      ];
+    });
+
+    await replaceInFile('src/app/app.component.ts', './app.component.css', `./app.component.${ext}`);
+
+    // run build app
+    await ng('build', '--extract-css', '--source-map');
+    await writeMultipleFiles({
+      [`src/styles.${ext}`]: stripIndents`
+          @import "@angular/material/prebuilt-themes/indigo-pink.css";
         `,
-        [`src/app/app.component.${ext}`]: stripIndents`
-          @import "~@angular/material/prebuilt-themes/indigo-pink.css";
+      [`src/app/app.component.${ext}`]: stripIndents`
+          @import "@angular/material/prebuilt-themes/indigo-pink.css";
         `,
-        })
-        // change files to use preprocessor
-        .then(() => updateJsonFile('angular.json', workspaceJson => {
-          const appArchitect = workspaceJson.projects['test-project'].architect;
-          appArchitect.build.options.styles = [
-            { input: `src/styles.${ext}` },
-          ];
-        }))
-        .then(() => replaceInFile('src/app/app.component.ts',
-          './app.component.css', `./app.component.${ext}`))
-        // run build app
-        .then(() => ng('build', '--extract-css', '--source-map'))
-        .then(() => writeMultipleFiles({
-          [`src/styles.${ext}`]: stripIndents`
-            @import "@angular/material/prebuilt-themes/indigo-pink.css";
-          `,
-          [`src/app/app.component.${ext}`]: stripIndents`
-            @import "@angular/material/prebuilt-themes/indigo-pink.css";
-          `,
-        }))
-        .then(() => ng('build', '--extract-css'));
     });
-  });
 
-  return promise;
+    await ng('build', '--extract-css');
+  }
 }