Use root config as a shared configuration for vitest instead

Author: leeyi45

devserver/src/components/__tests__/Playground.tsx

@@ -28,7 +28,7 @@ describe('Playground tests', () => {
   test('Running js-slang by clicking the run button', async () => {
     const component = render(<Playground />);
     await clickRunButton(component);
-    expect(runInContext).toHaveBeenCalled();
+    await expect.poll(() => runInContext).toHaveBeenCalled();
   });
 
   test('Loading tabs via Vite', async () => {
@@ -37,7 +37,7 @@ describe('Playground tests', () => {
     const component = render(<Playground />);
 
     await clickRunButton(component);
-    expect(runInContext).toHaveBeenCalled();
+    await expect.poll(() => runInContext).toHaveBeenCalled();
     expect(importers.getDynamicTabs).toHaveBeenCalled();
   });
 
@@ -54,26 +54,7 @@ describe('Playground tests', () => {
     await userEvent.click(settingsButton);
 
     await clickRunButton(component);
-    expect(runInContext).toHaveBeenCalled();
+    await expect.poll(() => runInContext).toHaveBeenCalled();
     expect(importers.getCompiledTabs).toHaveBeenCalled();
   });
-
-  test('Multiple evaluations', async () => {
-    const component = render(<Playground />);
-
-    await commands.setLocalStorage('editorValue', 'delete this');
-    await clickRunButton(component);
-
-    const crossIcon = component.baseElement.getElementsByClassName('bp5-icon bp5-icon-cross').item(0);
-    console.log(crossIcon);
-    await userEvent.click(crossIcon!);
-
-    const replCard = component.baseElement.getElementsByTagName('pre');
-    console.log(replCard);
-
-    await commands.setLocalStorage('editorValue', '0;');
-    await clickRunButton(component);
-
-    expect(runInContext).toHaveBeenCalledTimes(2);
-  });
 });

lib/buildtools/build.js

@@ -3,8 +3,11 @@
  */
 
 // @ts-check
+import pathlib from 'path';
 import getBuildCommand from '@sourceacademy/lib-compiler';
 
+const repoRoot = pathlib.resolve(import.meta.dirname, '../..');
+
 const command = getBuildCommand({
   entryPoints: ['./src/commands/index.ts'],
   banner: {
@@ -17,6 +20,24 @@ const command = getBuildCommand({
   platform: 'node',
   target: 'node20',
   tsconfig: './tsconfig.json',
+  plugins: [{
+    name: 'Local Externalizer',
+    setup({ onResolve }) {
+      onResolve({
+        filter: /^\.{1,2}(\/.+)?/
+      }, args => {
+        const absolutePath = pathlib.resolve(args.resolveDir, args.path);
+        const { dir, ext, base } = pathlib.parse(absolutePath);
+        if (ext === '.json' || dir !== repoRoot) return undefined;
+
+        const newDirectory = pathlib.relative('./bin', repoRoot);
+        return {
+          external: true,
+          path: pathlib.join(newDirectory, base),
+        };
+      });
+    }
+  }]
 });
 
 await command.parseAsync();

lib/buildtools/src/testing/configs.ts

@@ -1,42 +1,16 @@
-import pathlib from 'path';
 import react from '@vitejs/plugin-react';
-import { coverageConfigDefaults, defineConfig, defineProject, mergeConfig } from 'vitest/config';
-import { getGitRoot } from '../getGitRoot.js';
+import { defineProject, mergeConfig, type ViteUserConfig } from 'vitest/config';
+// @ts-expect-error I'm too lazy to make the root config work with typescript
+import rootConfig from '../../../../vitest.config.js';
 
-const gitRoot = await getGitRoot();
+rootConfig.test.projects = undefined;
+rootConfig.test.environment = 'jsdom';
 
 /**
  * A shared Vitest configuration object that can be combined with {@link mergeConfig}
  * to create custom Vitest configurations for each sub project
  */
-export const sharedVitestConfiguration = defineConfig({
-  resolve: {
-    alias: [{
-      find: /^js-slang\/context/,
-      replacement: pathlib.join(gitRoot, 'src/__mocks__/context.ts')
-    }]
-  },
-  test: {
-    clearMocks: true,
-    coverage: {
-      provider: 'v8',
-      exclude: [
-        ...coverageConfigDefaults.exclude,
-        './build/**',
-        '**/__mocks__/**',
-        '**/__test_mocks__/**',
-        '**/bin/**',
-        '**/build.js',
-        '**/*.config.?(c)[jt]s',
-        '**/dist.?(c)js',
-        './docs',
-        '**/src/**/samples/**',
-        './lib/buildtools/src/build/docs/drawdown.ts'
-      ]
-    },
-    silent: 'passed-only',
-  }
-});
+export const sharedVitestConfiguration: ViteUserConfig = rootConfig;
 
 /**
  * Vitest configuration specific to tabs

lib/buildtools/src/testing/runner.ts

@@ -23,6 +23,7 @@ export async function runVitest(mode: VitestRunMode, filters: string[] | undefin
         },
       }
     );
+
     const vitest = await startVitest(mode, filters, finalConfig);
 
     if (vitest.shouldKeepServer()) {

lib/buildtools/src/testing/utils.ts

@@ -125,7 +125,6 @@ async function getBundleOrTabTestConfiguration(asset: ResolvedTab | ResolvedBund
     }
 
     setBrowserOptions(indivConfig, asset, watch);
-
     return indivConfig;
   }
 
@@ -135,14 +134,11 @@ async function getBundleOrTabTestConfiguration(asset: ResolvedTab | ResolvedBund
     indivConfig = cloneDeep(sharedVitestConfiguration);
   }
 
-  if (!indivConfig.test) {
-    throw new Error(`Vitest config for ${asset.type} does not contain a 'test' section!`);
-  }
-
-  indivConfig.test.name = `${capitalize(asset.name)} ${capitalize(asset.type)}`;
-  indivConfig.test.root = asset.directory;
+  indivConfig!.test!.name = `${capitalize(asset.name)} ${capitalize(asset.type)}`;
+  indivConfig!.test!.root = asset.directory;
+  indivConfig!.test!.include = ['**/__tests__/**/*.{ts,tsx}'];
 
-  setBrowserOptions(indivConfig, asset, watch);
+  setBrowserOptions(indivConfig!, asset, watch);
   return indivConfig;
 }
 

lib/lintplugin/src/index.ts

@@ -2,13 +2,10 @@ import type { ESLint } from 'eslint';
 import * as configs from './configs';
 import regionComment from './rules/regionComment';
 import tabType from './rules/tabType';
-import collateTypeImports from './rules/typeimports';
 
 const plugin: ESLint.Plugin = {
   name: 'Source Academy Lint Plugin',
   rules: {
-    // @ts-expect-error typescript-eslint rules are typed differently
-    'collate-type-imports': collateTypeImports,
     'tab-type': tabType,
     'region-comment': regionComment
   },

lib/lintplugin/src/rules/__tests__/tabType.test.ts

@@ -1,14 +1,39 @@
 // @ts-check
 // Root vitest config
-import { defineConfig } from 'vitest/config';
+import pathlib from 'path';
+import { coverageConfigDefaults, defineConfig } from 'vitest/config';
 
 export default defineConfig({
+  resolve: {
+    alias: [{
+      find: /^js-slang\/context/,
+      replacement: pathlib.join(import.meta.dirname, 'src/__mocks__/context.ts')
+    }]
+  },
   test: {
     projects: [
       './devserver',
       './lib/*',
       './src/bundles/*',
       './src/tabs/*'
-    ]
+    ],
+    clearMocks: true,
+    coverage: {
+      provider: 'v8',
+      exclude: [
+        ...coverageConfigDefaults.exclude,
+        './build/**',
+        '**/__mocks__/**',
+        '**/__test_mocks__/**',
+        '**/bin/**',
+        '**/build.js',
+        '**/*.config.?(c)[jt]s',
+        '**/dist.?(c)js',
+        './docs',
+        '**/src/**/samples/**',
+        './lib/buildtools/src/build/docs/drawdown.ts'
+      ]
+    },
+    silent: 'passed-only',
   }
 });