test: update E2E tests to support using npm 7+

Several tests that perform package actions during the test have been updated to
function correctly when used with npm. npm 7+ performs additional resolution
on peer dependencies which can result in failures during testing.
The following tests have been updated:
* `build/material` - This test contained an actual error in that it was installing the `latest`
version of `@angular/material-moment-adapter` when testing prereleases even though
it should have been installing the `next` tag instead.
* `build/styles/tailwind-v2` - This test had to be reordered due to npm 7+ keeping the
installed `tailwindcss` peer dependency in a non-hoisted location even after the project
level package was uninstalled. The ordering also uncovered a Webpack cache key creation defect
wherein the cache key does not account for the presence of `tailwindcss`. Until this
is corrected, the test temporarily disables caching.
* `commands/add/version-specifier` - This test intentionally attempts to install package
versions that do not meet peer dependency requirements to ensure that the `ng add` command
correctly notifies the user. To allow for this to occur, the npm `force` option is used
to prevent the package install aspects of the command from failing.

Author: clydin

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

@@ -28,7 +28,7 @@ export default async function () {
 
     await installWorkspacePackages();
   } else {
-    await installPackage('@angular/material-moment-adapter');
+    await installPackage(`@angular/material-moment-adapter${tag}`);
   }
 
   await installPackage('moment');

tests/legacy-cli/e2e/tests/build/styles/tailwind-v2.ts

@@ -4,18 +4,32 @@ import { ng, silentExec } from '../../../utils/process';
 import { expectToFail } from '../../../utils/utils';
 
 export default async function () {
-  // Install Tailwind
-  await installPackage('tailwindcss@2');
+  // Temporarily turn off caching until the build cache accounts for the presence of tailwind
+  // and its configuration file. Otherwise cached builds without tailwind will cause test failures.
+  await ng('cache', 'off');
 
   // Create configuration file
-  await silentExec('npx', 'tailwindcss', 'init');
+  await silentExec('npx', 'tailwindcss@2', 'init');
 
   // Add Tailwind directives to a component style
   await writeFile('src/app/app.component.css', '@tailwind base; @tailwind components;');
 
   // Add Tailwind directives to a global style
   await writeFile('src/styles.css', '@tailwind base; @tailwind components;');
 
+  // Ensure installation warning is present
+  const { stderr } = await ng('build', '--configuration=development');
+  if (!stderr.includes("To enable Tailwind CSS, please install the 'tailwindcss' package.")) {
+    throw new Error(`Expected tailwind installation warning. STDERR:\n${stderr}`);
+  }
+
+  // Tailwind directives should be unprocessed with missing package
+  await expectFileToMatch('dist/test-project/styles.css', '@tailwind base; @tailwind components;');
+  await expectFileToMatch('dist/test-project/main.js', '@tailwind base; @tailwind components;');
+
+  // Install Tailwind
+  await installPackage('tailwindcss@2');
+
   // Build should succeed and process Tailwind directives
   await ng('build', '--configuration=development');
 
@@ -37,19 +51,6 @@ export default async function () {
   await expectFileToMatch('dist/test-project/styles.css', '@tailwind base; @tailwind components;');
   await expectFileToMatch('dist/test-project/main.js', '@tailwind base; @tailwind components;');
 
-  // Recreate configuration file
-  await silentExec('npx', 'tailwindcss', 'init');
-
   // Uninstall Tailwind
   await uninstallPackage('tailwindcss');
-
-  // Ensure installation warning is present
-  const { stderr } = await ng('build', '--configuration=development');
-  if (!stderr.includes("To enable Tailwind CSS, please install the 'tailwindcss' package.")) {
-    throw new Error('Expected tailwind installation warning');
-  }
-
-  // Tailwind directives should be unprocessed with missing package
-  await expectFileToMatch('dist/test-project/styles.css', '@tailwind base; @tailwind components;');
-  await expectFileToMatch('dist/test-project/main.js', '@tailwind base; @tailwind components;');
 }

tests/legacy-cli/e2e/tests/build/styles/tailwind-v3.ts

@@ -4,18 +4,32 @@ import { ng, silentExec } from '../../../utils/process';
 import { expectToFail } from '../../../utils/utils';
 
 export default async function () {
-  // Install Tailwind
-  await installPackage('tailwindcss@3');
+  // Temporarily turn off caching until the build cache accounts for the presence of tailwind
+  // and its configuration file. Otherwise cached builds without tailwind will cause test failures.
+  await ng('cache', 'off');
 
   // Create configuration file
-  await silentExec('npx', 'tailwindcss', 'init');
+  await silentExec('npx', 'tailwindcss@3', 'init');
 
   // Add Tailwind directives to a component style
   await writeFile('src/app/app.component.css', '@tailwind base; @tailwind components;');
 
   // Add Tailwind directives to a global style
   await writeFile('src/styles.css', '@tailwind base; @tailwind components;');
 
+  // Ensure installation warning is present
+  const { stderr } = await ng('build', '--configuration=development');
+  if (!stderr.includes("To enable Tailwind CSS, please install the 'tailwindcss' package.")) {
+    throw new Error('Expected tailwind installation warning');
+  }
+
+  // Tailwind directives should be unprocessed with missing package
+  await expectFileToMatch('dist/test-project/styles.css', '@tailwind base; @tailwind components;');
+  await expectFileToMatch('dist/test-project/main.js', '@tailwind base; @tailwind components;');
+
+  // Install Tailwind
+  await installPackage('tailwindcss@3');
+
   // Build should succeed and process Tailwind directives
   await ng('build', '--configuration=development');
 
@@ -37,19 +51,6 @@ export default async function () {
   await expectFileToMatch('dist/test-project/styles.css', '@tailwind base; @tailwind components;');
   await expectFileToMatch('dist/test-project/main.js', '@tailwind base; @tailwind components;');
 
-  // Recreate configuration file
-  await silentExec('npx', 'tailwindcss', 'init');
-
   // Uninstall Tailwind
   await uninstallPackage('tailwindcss');
-
-  // Ensure installation warning is present
-  const { stderr } = await ng('build', '--configuration=development');
-  if (!stderr.includes("To enable Tailwind CSS, please install the 'tailwindcss' package.")) {
-    throw new Error('Expected tailwind installation warning');
-  }
-
-  // Tailwind directives should be unprocessed with missing package
-  await expectFileToMatch('dist/test-project/styles.css', '@tailwind base; @tailwind components;');
-  await expectFileToMatch('dist/test-project/main.js', '@tailwind base; @tailwind components;');
 }

tests/legacy-cli/e2e/tests/commands/add/version-specifier.ts

@@ -1,12 +1,20 @@
+import { appendFile } from 'fs/promises';
 import { expectFileToMatch, rimraf } from '../../../utils/fs';
-import { uninstallPackage } from '../../../utils/packages';
+import { getActivePackageManager, uninstallPackage } from '../../../utils/packages';
 import { ng } from '../../../utils/process';
 import { isPrereleaseCli } from '../../../utils/project';
 
 export default async function () {
   // forcibly remove in case another test doesn't clean itself up.
   await rimraf('node_modules/@angular/localize');
 
+  // If using npm, enable the force option to allow testing the output behavior of the
+  // `ng add` command itself and not the behavior of npm which may otherwise fail depending
+  // on the npm version in use and the version specifier supplied in each test.
+  if (getActivePackageManager() === 'npm') {
+    appendFile('.npmrc', '\nforce=true\n');
+  }
+
   const tag = (await isPrereleaseCli()) ? '@next' : '';
 
   await ng('add', `@angular/localize${tag}`, '--skip-confirmation');