Use a custom cache directory for each test that runs yarn

microsoft · Dec 7, 2021 · a30c870 · a30c870
1 parent d5d3ef6
commit a30c870
Show file tree

Hide file tree

Showing 11 changed files with 97 additions and 49 deletions.
diff --git a/apps/ts-minbar-test-react-components/src/index.ts b/apps/ts-minbar-test-react-components/src/index.ts
@@ -1,12 +1,11 @@
 import config from '@fluentui/scripts/config';
-import sh from '@fluentui/scripts/gulp/sh';
 import * as fs from 'fs-extra';
 import * as path from 'path';
 import {
   addResolutionPathsForProjectPackages,
   packProjectPackages,
 } from '@fluentui/scripts/projects-test/packPackages';
-import { createTempDir, log } from '@fluentui/scripts/projects-test/utils';
+import { createTempDir, log, setYarnCache, shEcho } from '@fluentui/scripts/projects-test/utils';
 
 const tsVersion = '3.9';
 
@@ -16,42 +15,46 @@ async function performTest() {
 
   try {
     const scaffoldPath = config.paths.withRootAt(path.resolve(__dirname, '../assets/'));
-    tmpDirectory = createTempDir('ts-minbar-react-components');
 
+    tmpDirectory = createTempDir('ts-minbar-react-components');
     logger(`✔️ Temporary directory was created: ${tmpDirectory}`);
 
+    const yarnCache = createTempDir('project-cra-yarn-');
+    setYarnCache(yarnCache, tmpDirectory);
+    logger(`✔️ Temporary yarn cache directory was created: ${yarnCache}`);
+
     // Install dependencies, using the minimum TS version supported for consumers
     const dependencies = ['@types/react', '@types/react-dom', 'react', 'react-dom', `typescript@${tsVersion}`].join(
       ' ',
     );
-    await sh(`yarn add ${dependencies}`, tmpDirectory);
+    await shEcho(`yarn add ${dependencies}`, tmpDirectory);
     logger(`✔️ Dependencies were installed`);
 
     const lernaRoot = config.paths.allPackages();
     const packedPackages = await packProjectPackages(logger, lernaRoot, ['@fluentui/react-components']);
     await addResolutionPathsForProjectPackages(tmpDirectory);
 
-    await sh(`yarn add ${packedPackages['@fluentui/react-components']}`, tmpDirectory);
+    await shEcho(`yarn add ${packedPackages['@fluentui/react-components']}`, tmpDirectory);
     logger(`✔️ Fluent UI packages were added to dependencies`);
 
     fs.mkdirSync(path.resolve(tmpDirectory, 'src'));
     fs.copyFileSync(scaffoldPath('index.tsx'), path.resolve(tmpDirectory, 'src/index.tsx'));
     fs.copyFileSync(scaffoldPath('tsconfig.json'), path.resolve(tmpDirectory, 'tsconfig.json'));
     logger(`✔️ Source and configs were copied`);
 
-    await sh(`npx npm-which yarn`);
+    await shEcho(`npx npm-which yarn`);
 
-    await sh(`yarn --version`);
-    await sh(`yarn tsc --version`);
-    await sh(`yarn tsc --version`, tmpDirectory);
+    await shEcho(`yarn --version`);
+    await shEcho(`yarn tsc --version`);
+    await shEcho(`yarn tsc --version`, tmpDirectory);
   } catch (e) {
     console.error('Something went wrong setting up the test:');
     console.error(e?.stack || e);
     process.exit(1);
   }
 
   try {
-    await sh(`yarn tsc --noEmit`, tmpDirectory);
+    await shEcho(`yarn tsc --noEmit`, tmpDirectory);
     logger(`✔️ Example project was successfully built with typescript@${tsVersion}`);
   } catch (e) {
     console.error(e);

diff --git a/apps/ts-minbar-test-react/src/index.ts b/apps/ts-minbar-test-react/src/index.ts
@@ -1,12 +1,11 @@
 import config from '@fluentui/scripts/config';
-import sh from '@fluentui/scripts/gulp/sh';
 import * as fs from 'fs-extra';
 import * as path from 'path';
 import {
   addResolutionPathsForProjectPackages,
   packProjectPackages,
 } from '@fluentui/scripts/projects-test/packPackages';
-import { createTempDir, log } from '@fluentui/scripts/projects-test/utils';
+import { createTempDir, log, setYarnCache, shEcho } from '@fluentui/scripts/projects-test/utils';
 
 const tsVersion = '3.9';
 
@@ -16,10 +15,14 @@ async function performTest() {
 
   try {
     const scaffoldPath = config.paths.withRootAt(path.resolve(__dirname, '../assets/'));
-    tmpDirectory = createTempDir('ts-minbar-react-typings-');
 
+    tmpDirectory = createTempDir('ts-minbar-react-typings-');
     logger(`✔️ Temporary directory was created: ${tmpDirectory}`);
 
+    const yarnCache = createTempDir('project-cra-yarn-');
+    setYarnCache(yarnCache, tmpDirectory);
+    logger(`✔️ Temporary yarn cache directory was created: ${yarnCache}`);
+
     // Install dependencies, using the minimum TS version supported for consumers
     const dependencies = [
       '@types/node',
@@ -29,34 +32,34 @@ async function performTest() {
       'react-dom',
       `typescript@${tsVersion}`,
     ].join(' ');
-    await sh(`yarn add ${dependencies}`, tmpDirectory);
+    await shEcho(`yarn add ${dependencies}`, tmpDirectory);
     logger(`✔️ Dependencies were installed`);
 
     const lernaRoot = config.paths.allPackages();
     const packedPackages = await packProjectPackages(logger, lernaRoot, ['@fluentui/react']);
     await addResolutionPathsForProjectPackages(tmpDirectory);
 
-    await sh(`yarn add ${packedPackages['@fluentui/react']}`, tmpDirectory);
+    await shEcho(`yarn add ${packedPackages['@fluentui/react']}`, tmpDirectory);
     logger(`✔️ Fluent UI packages were added to dependencies`);
 
     fs.mkdirSync(path.resolve(tmpDirectory, 'src'));
     fs.copyFileSync(scaffoldPath('index.tsx'), path.resolve(tmpDirectory, 'src/index.tsx'));
     fs.copyFileSync(scaffoldPath('tsconfig.json'), path.resolve(tmpDirectory, 'tsconfig.json'));
     logger(`✔️ Source and configs were copied`);
 
-    await sh(`npx npm-which yarn`);
+    await shEcho(`npx npm-which yarn`);
 
-    await sh(`yarn --version`);
-    await sh(`yarn tsc --version`);
-    await sh(`yarn tsc --version`, tmpDirectory);
+    await shEcho(`yarn --version`);
+    await shEcho(`yarn tsc --version`);
+    await shEcho(`yarn tsc --version`, tmpDirectory);
   } catch (e) {
     console.error('Something went wrong setting up the test:');
     console.error(e?.stack || e);
     process.exit(1);
   }
 
   try {
-    await sh(`yarn tsc --noEmit`, tmpDirectory);
+    await shEcho(`yarn tsc --noEmit`, tmpDirectory);
     logger(`✔️ Example project was successfully built with typescript@${tsVersion}`);
   } catch (e) {
     console.error(e);

diff --git a/change/@fluentui-cra-template-48461590-a8b5-440d-8741-30860247bd1b.json b/change/@fluentui-cra-template-48461590-a8b5-440d-8741-30860247bd1b.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Use a custom yarn cache in the test",
+  "packageName": "@fluentui/cra-template",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}
diff --git a/packages/cra-template/scripts/test.ts b/packages/cra-template/scripts/test.ts
@@ -8,6 +8,7 @@ import {
   performBrowserTest,
   createTempDir,
   log,
+  setYarnCache,
   shEcho,
   prepareCreateReactApp,
 } from '@fluentui/scripts/projects-test/index';
@@ -70,18 +71,23 @@ async function runE2ETest() {
   const tmpDirectory = createTempDir('test-cra-template-');
   logger(`✔️ Temporary directory was created: ${tmpDirectory}`);
 
+  const yarnCache = createTempDir('test-cra-template-yarn-');
+  setYarnCache(yarnCache, tmpDirectory);
+  logger(`✔️ Temporary yarn cache directory was created: ${yarnCache}`);
+
   logger('STEP 1. Update template to reference local packages');
   const templatePath = await prepareTemplate(logger, tmpDirectory);
 
   logger('STEP 2. Create test React app from template');
-  const testAppPath = await prepareCreateReactApp(tmpDirectory, `file:${templatePath}`, 'test-app');
+  const testAppPath = await prepareCreateReactApp(tmpDirectory, yarnCache, `file:${templatePath}`, 'test-app');
+  await shEcho('yarn add cross-env', testAppPath);
   logger(`✔️ Test React app is successfully created: ${testAppPath}`);
 
   logger('STEP 3. Build test app');
-  await shEcho(`npx cross-env CI=1 yarn build`, testAppPath);
+  await shEcho(`yarn cross-env CI=1 yarn build`, testAppPath);
 
   logger('STEP 4. Run test app tests');
-  await shEcho(`npx cross-env CI=1 yarn test`, testAppPath);
+  await shEcho(`yarn cross-env CI=1 yarn test`, testAppPath);
 
   logger('STEP 5. Load the test app in the browser');
   await performBrowserTest(path.join(testAppPath, 'build'));

diff --git a/packages/fluentui/projects-test/src/createReactApp.ts b/packages/fluentui/projects-test/src/createReactApp.ts
@@ -1,5 +1,4 @@
 import config from '@fluentui/scripts/config';
-import sh from '@fluentui/scripts/gulp/sh';
 import fs from 'fs-extra';
 import path from 'path';
 
@@ -8,6 +7,8 @@ import {
   packProjectPackages,
   createTempDir,
   log,
+  setYarnCache,
+  shEcho,
   performBrowserTest,
   prepareCreateReactApp,
 } from '@fluentui/scripts/projects-test';
@@ -25,24 +26,31 @@ export async function createReactApp() {
 
   const tmpDirectory = createTempDir('project-cra-');
   logger(`✔️ Temporary directory was created: ${tmpDirectory}`);
+
+  const yarnCache = createTempDir('project-cra-yarn-');
+  setYarnCache(yarnCache, tmpDirectory);
+  logger(`✔️ Temporary yarn cache directory was created: ${yarnCache}`);
+
   logger('STEP 1. Create test React project with TSX scripts..');
 
-  const testAppPath = config.paths.withRootAt(await prepareCreateReactApp(tmpDirectory, 'typescript', 'test-app'));
+  const testAppPath = config.paths.withRootAt(
+    await prepareCreateReactApp(tmpDirectory, yarnCache, 'typescript', 'test-app'),
+  );
   logger(`Test React project is successfully created: ${testAppPath()}`);
 
   logger('STEP 2. Add Fluent UI dependency to test project..');
 
   const packedPackages = await packProjectPackages(logger, config.paths.packages(), ['@fluentui/react-northstar']);
   await addResolutionPathsForProjectPackages(testAppPath());
 
-  await sh(`yarn add ${packedPackages['@fluentui/react-northstar']}`, testAppPath());
+  await shEcho(`yarn add ${packedPackages['@fluentui/react-northstar']}`, testAppPath());
   logger(`✔️ Fluent UI packages were added to dependencies`);
 
   logger("STEP 3. Reference Fluent UI components in test project's App.tsx");
   fs.copyFileSync(scaffoldPath('App.tsx'), testAppPath('src', 'App.tsx'));
 
   logger('STEP 4. Build test project..');
-  await sh(`yarn build`, testAppPath());
+  await shEcho(`yarn build`, testAppPath());
 
   await performBrowserTest(testAppPath('build'));
   logger(`✔️ Browser test was passed`);

diff --git a/packages/fluentui/projects-test/src/nextjs.ts b/packages/fluentui/projects-test/src/nextjs.ts
@@ -1,5 +1,4 @@
 import config from '@fluentui/scripts/config';
-import sh from '@fluentui/scripts/gulp/sh';
 import fs from 'fs-extra';
 import path from 'path';
 
@@ -8,6 +7,8 @@ import {
   packProjectPackages,
   createTempDir,
   log,
+  setYarnCache,
+  shEcho,
   performBrowserTest,
 } from '@fluentui/scripts/projects-test';
 
@@ -19,22 +20,26 @@ export async function nextjs() {
 
   logger(`✔️ Temporary directory was created: ${tmpDirectory}`);
 
+  const yarnCache = createTempDir('project-nextjs-yarn-');
+  setYarnCache(yarnCache, tmpDirectory);
+  logger(`✔️ Temporary yarn cache directory was created: ${yarnCache}`);
+
   const dependencies = ['next', 'react', 'react-dom'].join(' ');
-  await sh(`yarn add ${dependencies}`, tmpDirectory);
+  await shEcho(`yarn add ${dependencies}`, tmpDirectory);
   logger(`✔️ Dependencies were installed`);
 
   const packedPackages = await packProjectPackages(logger, config.paths.packages(), ['@fluentui/react-northstar']);
   await addResolutionPathsForProjectPackages(tmpDirectory);
 
-  await sh(`yarn add ${packedPackages['@fluentui/react-northstar']}`, tmpDirectory);
+  await shEcho(`yarn add ${packedPackages['@fluentui/react-northstar']}`, tmpDirectory);
   logger(`✔️ Fluent UI packages were added to dependencies`);
 
   fs.mkdirSync(path.resolve(tmpDirectory, 'pages'));
   fs.copyFileSync(scaffoldPath('index.js'), path.resolve(tmpDirectory, 'pages', 'index.js'));
   logger(`✔️ Source and bundler's config were created`);
 
-  await sh(`yarn next build`, tmpDirectory);
-  await sh(`yarn next export`, tmpDirectory);
+  await shEcho(`yarn next build`, tmpDirectory);
+  await shEcho(`yarn next export`, tmpDirectory);
   logger(`✔️ Example project was successfully built: ${tmpDirectory}`);
 
   await performBrowserTest(path.resolve(tmpDirectory, 'out'));

diff --git a/packages/fluentui/projects-test/src/rollup.ts b/packages/fluentui/projects-test/src/rollup.ts
@@ -1,5 +1,4 @@
 import config from '@fluentui/scripts/config';
-import sh from '@fluentui/scripts/gulp/sh';
 import fs from 'fs-extra';
 import path from 'path';
 
@@ -9,16 +8,21 @@ import {
   performBrowserTest,
   createTempDir,
   log,
+  shEcho,
+  setYarnCache,
 } from '@fluentui/scripts/projects-test';
 
 export async function rollup() {
   const logger = log('test:projects:rollup');
 
   const scaffoldPath = config.paths.withRootAt(path.resolve(__dirname, '../assets/rollup'));
   const tmpDirectory = createTempDir('project-rollup-');
-
   logger(`✔️ Temporary directory was created: ${tmpDirectory}`);
 
+  const yarnCache = createTempDir('project-rollup-yarn-');
+  setYarnCache(yarnCache, tmpDirectory);
+  logger(`✔️ Temporary yarn cache directory was created: ${yarnCache}`);
+
   const rollupVersion = '2.7.3';
   const dependencies = [
     `rollup@${rollupVersion}`,
@@ -30,21 +34,21 @@ export async function rollup() {
     'react-dom',
   ].join(' ');
 
-  await sh(`yarn add ${dependencies}`, tmpDirectory);
+  await shEcho(`yarn add ${dependencies}`, tmpDirectory);
   logger(`✔️ Dependencies were installed`);
 
   const packedPackages = await packProjectPackages(logger, config.paths.packages(), ['@fluentui/react-northstar']);
   await addResolutionPathsForProjectPackages(tmpDirectory);
 
-  await sh(`yarn add ${packedPackages['@fluentui/react-northstar']}`, tmpDirectory);
+  await shEcho(`yarn add ${packedPackages['@fluentui/react-northstar']}`, tmpDirectory);
   logger(`✔️ Fluent UI packages were added to dependencies`);
 
   fs.copyFileSync(scaffoldPath('app.js'), path.resolve(tmpDirectory, 'app.js'));
   fs.copyFileSync(scaffoldPath('rollup.config.js'), path.resolve(tmpDirectory, 'rollup.config.js'));
   fs.copyFileSync(scaffoldPath('index.html'), path.resolve(tmpDirectory, 'index.html'));
   logger(`✔️ Source and bundler's config were created`);
 
-  await sh(`yarn rollup -c`, tmpDirectory);
+  await shEcho(`yarn rollup -c`, tmpDirectory);
   logger(`✔️ Example project was successfully built: ${tmpDirectory}`);
 
   await performBrowserTest(tmpDirectory);

diff --git a/packages/fluentui/projects-test/src/typings.ts b/packages/fluentui/projects-test/src/typings.ts
@@ -1,5 +1,4 @@
 import config from '@fluentui/scripts/config';
-import sh from '@fluentui/scripts/gulp/sh';
 import fs from 'fs-extra';
 import path from 'path';
 
@@ -8,38 +7,43 @@ import {
   packProjectPackages,
   createTempDir,
   log,
+  setYarnCache,
+  shEcho,
 } from '@fluentui/scripts/projects-test';
 
 export async function typings() {
   const logger = log('test:projects:typings');
 
   const scaffoldPath = config.paths.withRootAt(path.resolve(__dirname, '../assets/typings'));
   const tmpDirectory = createTempDir('project-typings-');
-
   logger(`✔️ Temporary directory was created: ${tmpDirectory}`);
 
+  const yarnCache = createTempDir('project-typings-yarn-');
+  setYarnCache(yarnCache, tmpDirectory);
+  logger(`✔️ Temporary yarn cache directory was created: ${yarnCache}`);
+
   // Install dependencies, ensuring we specify the same TS version as our projects use
   const rootPkgJson: { devDependencies: Record<string, string> } = fs.readJSONSync(config.paths.base('package.json'));
   const { typescript: tsVersion } = rootPkgJson.devDependencies;
 
   const dependencies = ['@types/react', '@types/react-dom', 'react', 'react-dom', `typescript@${tsVersion}`].join(' ');
-  await sh(`yarn add ${dependencies}`, tmpDirectory);
+  await shEcho(`yarn add ${dependencies}`, tmpDirectory);
   logger(`✔️ Dependencies were installed`);
 
   const packedPackages = await packProjectPackages(logger, config.paths.packages(), ['@fluentui/react-northstar']);
   await addResolutionPathsForProjectPackages(tmpDirectory);
 
-  await sh(`yarn add ${packedPackages['@fluentui/react-northstar']}`, tmpDirectory);
+  await shEcho(`yarn add ${packedPackages['@fluentui/react-northstar']}`, tmpDirectory);
   logger(`✔️ Fluent UI packages were added to dependencies`);
 
   fs.mkdirSync(path.resolve(tmpDirectory, 'src'));
   fs.copyFileSync(scaffoldPath('index.tsx'), path.resolve(tmpDirectory, 'src/index.tsx'));
   fs.copyFileSync(scaffoldPath('tsconfig.json'), path.resolve(tmpDirectory, 'tsconfig.json'));
   logger(`✔️ Source and configs were copied`);
 
-  await sh(`which yarn`);
-  await sh(`yarn --version`);
-  await sh(`yarn tsc --version`);
-  await sh(`yarn tsc --noEmit`, tmpDirectory);
+  await shEcho(`which yarn`);
+  await shEcho(`yarn --version`);
+  await shEcho(`yarn tsc --version`);
+  await shEcho(`yarn tsc --noEmit`, tmpDirectory);
   logger(`✔️ Example project was successfully built: ${tmpDirectory}`);
 }
diff --git a/scripts/gulp/sh.ts b/scripts/gulp/sh.ts
@@ -7,7 +7,7 @@ const sh = (command: string, cwd?: string, pipeOutputToResult: boolean = false):
     const options: childProcess.SpawnOptions = {
       cwd: cwd || process.cwd(),
       env: process.env,
-      stdio: pipeOutputToResult ? 'pipe' : [0, 1, 2],
+      stdio: pipeOutputToResult ? 'pipe' : 'inherit',
       shell: true,
     };