test(mock-compiler): make testing the stencil compiler and it's outputs easier

src/cli/task-build.ts

@@ -35,7 +35,7 @@ export const taskBuild = async (coreCompiler: CoreCompiler, config: d.ValidatedC
         coreCompiler,
         config,
         results.hydrateAppFilePath,
-        results.componentGraph,
+        results.buildResults.componentGraph,
         null
       );
       config.logger.printDiagnostics(prerenderDiagnostics);

src/cli/telemetry/telemetry.ts

@@ -17,17 +17,17 @@ export async function telemetryBuildFinishedAction(
   sys: d.CompilerSystem,
   config: d.ValidatedConfig,
   coreCompiler: CoreCompiler,
-  result: d.CompilerBuildResults
+  result: d.BuildCtx
 ) {
   const tracking = await shouldTrack(config, sys, config.flags.ci);
 
   if (!tracking) {
     return;
   }
 
-  const component_count = Object.keys(result.componentGraph).length;
+  const component_count = Object.keys(result.buildResults.componentGraph).length;
 
-  const data = await prepareData(coreCompiler, config, sys, result.duration, component_count);
+  const data = await prepareData(coreCompiler, config, sys, result.buildResults.duration, component_count);
 
   await sendMetric(sys, config, 'stencil_cli_command', data);
 

src/cli/telemetry/test/telemetry.spec.ts

@@ -30,9 +30,11 @@ describe('telemetryBuildFinishedAction', () => {
     );
 
     const results = {
-      componentGraph: {},
-      duration: 100,
-    } as d.CompilerBuildResults;
+      buildResults: {
+        componentGraph: {},
+        duration: 100,
+      },
+    } as d.BuildCtx;
 
     await telemetry.telemetryBuildFinishedAction(sys, config, coreCompiler, results);
     expect(spyShouldTrack).toHaveBeenCalled();

src/compiler/build/build-finish.ts

@@ -10,7 +10,7 @@ import { relative } from 'path';
  * @param buildCtx the build context for the build being aborted
  * @returns the build results
  */
-export const buildFinish = async (buildCtx: d.BuildCtx): Promise<d.CompilerBuildResults> => {
+export const buildFinish = async (buildCtx: d.BuildCtx): Promise<d.BuildCtx> => {
   const results = await buildDone(buildCtx.config, buildCtx.compilerCtx, buildCtx, false);
 
   const buildLog: d.BuildLog = {
@@ -28,9 +28,9 @@ export const buildFinish = async (buildCtx: d.BuildCtx): Promise<d.CompilerBuild
  * Finish a build early due to failure. During the build process, a fatal error has occurred where the compiler cannot
  * continue further
  * @param buildCtx the build context for the build being aborted
- * @returns the build results
+ * @returns the build context
  */
-export const buildAbort = (buildCtx: d.BuildCtx): Promise<d.CompilerBuildResults> => {
+export const buildAbort = (buildCtx: d.BuildCtx): Promise<d.BuildCtx> => {
   return buildDone(buildCtx.config, buildCtx.compilerCtx, buildCtx, true);
 };
 
@@ -40,18 +40,18 @@ export const buildAbort = (buildCtx: d.BuildCtx): Promise<d.CompilerBuildResults
  * @param compilerCtx the compiler context associated with the build
  * @param buildCtx the build context associated with the build to mark as done
  * @param aborted true if the build ended early due to failure, false otherwise
- * @returns the build results
+ * @returns the build context
  */
 const buildDone = async (
   config: d.Config,
   compilerCtx: d.CompilerCtx,
   buildCtx: d.BuildCtx,
   aborted: boolean
-): Promise<d.CompilerBuildResults> => {
+): Promise<d.BuildCtx> => {
   if (buildCtx.hasFinished && buildCtx.buildResults) {
     // we've already marked this build as finished and
     // already created the build results, just return these
-    return buildCtx.buildResults;
+    return buildCtx;
   }
 
   // create the build results data
@@ -107,7 +107,7 @@ const buildDone = async (
     }
 
     // emit a buildFinish event for anyone who cares
-    compilerCtx.events.emit('buildFinish', buildCtx.buildResults);
+    compilerCtx.events.emit('buildFinish', buildCtx);
 
     // write all of our logs to disk if config'd to do so
     // do this even if there are errors or not the active build
@@ -128,7 +128,7 @@ const buildDone = async (
     }
   }
 
-  return buildCtx.buildResults;
+  return buildCtx;
 };
 
 const logHmr = (logger: d.Logger, buildCtx: d.BuildCtx) => {

src/compiler/build/build.ts

@@ -14,7 +14,7 @@ export const build = async (
   compilerCtx: d.CompilerCtx,
   buildCtx: d.BuildCtx,
   tsBuilder: ts.BuilderProgram
-) => {
+): Promise<d.BuildCtx> => {
   try {
     // reset process.cwd() for 3rd-party plugins
     process.chdir(config.rootDir);

src/compiler/build/full-build.ts

@@ -10,11 +10,8 @@ import ts from 'typescript';
  * @param compilerCtx the current Stencil compiler context
  * @returns the results of a full build of Stencil
  */
-export const createFullBuild = async (
-  config: d.ValidatedConfig,
-  compilerCtx: d.CompilerCtx
-): Promise<d.CompilerBuildResults> => {
-  return new Promise<d.CompilerBuildResults>((resolve) => {
+export const createFullBuild = async (config: d.ValidatedConfig, compilerCtx: d.CompilerCtx): Promise<d.BuildCtx> => {
+  return new Promise<d.BuildCtx>((resolve) => {
     let tsWatchProgram: ts.WatchOfConfigFile<ts.BuilderProgram> = null;
 
     compilerCtx.events.on('fileUpdate', (p) => {

src/compiler/compiler.ts

@@ -61,6 +61,7 @@ export const createCompiler = async (userConfig: Config): Promise<Compiler> => {
     createWatcher,
     destroy,
     sys,
+    compilerCtx,
   };
 
   config.logger.printDiagnostics(diagnostics);

src/compiler/output-targets/test/output-targets-dist.spec.ts

@@ -1,94 +1,89 @@
-// @ts-nocheck
+import type * as d from '@stencil/core/declarations';
 import { expectFilesDoNotExist, expectFilesExist } from '../../../testing/testing-utils';
-import { Compiler, Config } from '@stencil/core/compiler';
-import { mockConfig } from '@stencil/core/testing';
+import { mockCreateCompiler, MockCompiler, mockCompilerRoot } from '../../../testing/mock-compiler';
 import path from 'path';
 
-describe.skip('outputTarget, dist', () => {
-  jest.setTimeout(20000);
-  let compiler: Compiler;
-  let config: Config;
-  const root = path.resolve('/');
+describe('outputTarget, dist', () => {
+  jest.setTimeout(25000);
+  let compiler: MockCompiler;
+  let config: d.Config = {};
 
   it('default dist files', async () => {
-    config = mockConfig({
+    config = {
       buildAppCore: true,
       buildEs5: true,
-      globalScript: path.join(root, 'User', 'testing', 'src', 'global.ts'),
+      globalScript: path.join(mockCompilerRoot, 'src', 'global.ts'),
       namespace: 'TestApp',
       outputTargets: [{ type: 'dist' }],
-      rootDir: path.join(root, 'User', 'testing', '/'),
-    });
+      sourceMap: true,
+    };
 
-    compiler = new Compiler(config);
+    compiler = await mockCreateCompiler(config);
+    config = compiler.config;
 
-    await compiler.fs.writeFiles({
-      [path.join(config.sys.getClientPath('polyfills/index.js'))]: `/* polyfills */`,
-      [path.join(root, 'User', 'testing', 'package.json')]: `{
-        "module": "dist/index.mjs",
-        "main": "dist/index.js",
+    await config.sys.writeFile(
+      config.packageJsonFilePath,
+      `{
+        "module": "dist/index.js",
+        "main": "dist/index.cjs.js",
         "collection": "dist/collection/collection-manifest.json",
         "types": "dist/types/components.d.ts"
-      }`,
-      [path.join(root, 'User', 'testing', 'src', 'index.html')]: `<cmp-a></cmp-a>`,
-      [path.join(root, 'User', 'testing', 'src', 'components', 'cmp-a.tsx')]: `
-        @Component({
-          tag: 'cmp-a',
-          styleUrls: {
-            ios: 'cmp-a.ios.css',
-            md: 'cmp-a.md.css'
-          }
-        }) export class CmpA {}`,
-      [path.join(root, 'User', 'testing', 'src', 'components', 'cmp-a.ios.css')]: `cmp-a { color: blue; }`,
-      [path.join(root, 'User', 'testing', 'src', 'components', 'cmp-a.md.css')]: `cmp-a { color: green; }`,
-      [path.join(
-        root,
-        'User',
-        'testing',
-        'src',
-        'global.ts'
-      )]: `export default function() { console.log('my global'); }`,
-    });
-    await compiler.fs.commit();
+      }`
+    );
+    await config.sys.writeFile(
+      path.join(config.srcDir, 'components', 'cmp-a.tsx'),
+      `
+      import { Component, h } from '@stencil/core';
+      @Component({
+        tag: 'cmp-a',
+        styleUrls: {
+          ios: 'cmp-a.ios.css',
+          md: 'cmp-a.md.css'
+        }
+      }) export class CmpA {}
+    `
+    );
+    await config.sys.writeFile(path.join(config.srcDir, 'components', 'cmp-a.ios.css'), `cmp-a { color: blue; }`);
+    await config.sys.writeFile(path.join(config.srcDir, 'components', 'cmp-a.md.css'), `cmp-a { color: green; }`);
+    await config.sys.writeFile(
+      path.join(config.srcDir, 'global.ts'),
+      `export default function() { console.log('my global'); }`
+    );
 
     const r = await compiler.build();
     expect(r.diagnostics).toHaveLength(0);
 
-    expectFilesExist(compiler.fs, [
-      path.join(root, 'User', 'testing', 'dist', 'index.js'),
-      path.join(root, 'User', 'testing', 'dist', 'index.mjs'),
-      path.join(root, 'User', 'testing', 'dist', 'index.js.map'),
+    expectFilesExist(compiler.compilerCtx.fs, [
+      path.join(mockCompilerRoot, 'dist', 'index.js'),
 
-      path.join(root, 'User', 'testing', 'dist', 'collection', 'collection-manifest.json'),
-      path.join(root, 'User', 'testing', 'dist', 'collection', 'components', 'cmp-a.js'),
-      path.join(root, 'User', 'testing', 'dist', 'collection', 'components', 'cmp-a.js.map'),
-      path.join(root, 'User', 'testing', 'dist', 'collection', 'components', 'cmp-a.ios.css'),
-      path.join(root, 'User', 'testing', 'dist', 'collection', 'components', 'cmp-a.md.css'),
-      path.join(root, 'User', 'testing', 'dist', 'collection', 'global.js'),
-      path.join(root, 'User', 'testing', 'dist', 'collection', 'global.js.map'),
+      path.join(mockCompilerRoot, 'dist', 'collection', 'collection-manifest.json'),
+      path.join(mockCompilerRoot, 'dist', 'collection', 'components', 'cmp-a.js'),
+      path.join(mockCompilerRoot, 'dist', 'collection', 'components', 'cmp-a.js.map'),
+      path.join(mockCompilerRoot, 'dist', 'collection', 'components', 'cmp-a.ios.css'),
+      path.join(mockCompilerRoot, 'dist', 'collection', 'components', 'cmp-a.md.css'),
+      path.join(mockCompilerRoot, 'dist', 'collection', 'global.js'),
+      path.join(mockCompilerRoot, 'dist', 'collection', 'global.js.map'),
 
-      path.join(root, 'User', 'testing', 'dist', 'esm', 'index.mjs'),
-      path.join(root, 'User', 'testing', 'dist', 'esm', 'index.js.map'),
-      path.join(root, 'User', 'testing', 'dist', 'esm', 'loader.mjs'),
-      path.join(root, 'User', 'testing', 'dist', 'esm-es5', 'index.mjs'),
-      path.join(root, 'User', 'testing', 'dist', 'esm-es5', 'index.js.map'),
-      path.join(root, 'User', 'testing', 'dist', 'esm-es5', 'loader.mjs'),
-      path.join(root, 'User', 'testing', 'dist', 'esm', 'polyfills', 'index.js'),
-      path.join(root, 'User', 'testing', 'dist', 'esm', 'polyfills', 'index.js.map'),
-
-      path.join(root, 'User', 'testing', 'dist', 'loader'),
-
-      path.join(root, 'User', 'testing', 'dist', 'types'),
-
-      path.join(root, 'User', 'testing', 'src', 'components.d.ts'),
+      path.join(mockCompilerRoot, 'dist', 'esm', 'index.js'),
+      path.join(mockCompilerRoot, 'dist', 'esm', 'index.js.map'),
+      path.join(mockCompilerRoot, 'dist', 'esm', 'loader.js'),
+      path.join(mockCompilerRoot, 'dist', 'esm-es5', 'index.js'),
+      path.join(mockCompilerRoot, 'dist', 'esm-es5', 'index.js.map'),
+      path.join(mockCompilerRoot, 'dist', 'esm-es5', 'loader.js'),
+      path.join(mockCompilerRoot, 'dist', 'esm', 'polyfills'),
+      path.join(mockCompilerRoot, 'dist', 'loader'),
+      path.join(mockCompilerRoot, 'dist', 'types'),
+      path.join(mockCompilerRoot, 'src', 'components.d.ts'),
     ]);
 
-    expectFilesDoNotExist(compiler.fs, [
-      path.join(root, 'User', 'testing', 'build'),
-      path.join(root, 'User', 'testing', 'esm'),
-      path.join(root, 'User', 'testing', 'es5'),
-      path.join(root, 'User', 'testing', 'www'),
-      path.join(root, 'User', 'testing', 'index.html'),
+    expectFilesDoNotExist(compiler.compilerCtx.fs, [
+      path.join(mockCompilerRoot, 'build'),
+      path.join(mockCompilerRoot, 'esm'),
+      path.join(mockCompilerRoot, 'es5'),
+      path.join(mockCompilerRoot, 'www'),
+      path.join(mockCompilerRoot, 'index.html'),
     ]);
+
+    compiler.destroy();
   });
 });