chore(builder): add some e2e test cases (#4105)

* chore(builder): add some e2e test cases

* fix: test case

packages/document/builder-doc/docs/en/guide/advanced/rspack-start.mdx

@@ -68,7 +68,7 @@ All configurations and capabilities under html are available within rspack.
 
 Unsupported configurations and capabilities include:
 
-- [source.sri](/api/config-security.html#securitysri) ([track issue](https://github.com/web-infra-dev/rspack/issues/2669))
+- [security.sri](/api/config-security.html#securitysri) ([track issue](https://github.com/web-infra-dev/rspack/issues/2669))
 
 #### Dev Config
 

packages/document/builder-doc/docs/zh/guide/advanced/rspack-start.mdx

@@ -68,7 +68,7 @@ Builder 旨在消除不同打包工具之间的主要差异，帮助用户以较
 
 不支持的配置项及能力包括：
 
-- [source.sri](/api/config-security.html#securitysri) ([issue 追踪](https://github.com/web-infra-dev/rspack/issues/2669))
+- [security.sri](/api/config-security.html#securitysri) ([issue 追踪](https://github.com/web-infra-dev/rspack/issues/2669))
 
 #### Dev Config
 

tests/e2e/builder/cases/check-syntax/index.test.ts

@@ -15,7 +15,6 @@ test('should throw error when exist syntax errors', async () => {
           checkSyntax: true,
         },
         tools: {
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
           // @ts-expect-error
           rspack: config => {
             config.target = ['web'];

tests/e2e/builder/cases/inline-chunk/index.test.ts

@@ -1,5 +1,5 @@
 import path from 'path';
-import { expect } from '@modern-js/e2e/playwright';
+import { expect, test } from '@modern-js/e2e/playwright';
 import { webpackOnlyTest } from '@scripts/helper';
 import { build, getHrefByEntryName } from '@scripts/shared';
 import { RUNTIME_CHUNK_NAME } from '@modern-js/builder-shared';
@@ -20,6 +20,55 @@ const toolsConfig = {
   },
 };
 
+test.describe('disableInlineRuntimeChunk', () => {
+  let builder: Awaited<ReturnType<typeof build>>;
+  let files: Record<string, string>;
+
+  test.beforeAll(async () => {
+    builder = await build({
+      cwd: __dirname,
+      entry: { index: path.resolve(__dirname, './src/index.js') },
+      runServer: true,
+      builderConfig: {
+        tools: toolsConfig,
+        output: {
+          disableInlineRuntimeChunk: true,
+        },
+      },
+    });
+
+    files = await builder.unwrapOutputJSON(false);
+  });
+
+  test.afterAll(async () => {
+    builder.close();
+  });
+
+  test('should emit builder runtime', async ({ page }) => {
+    // test runtime
+    await page.goto(getHrefByEntryName('index', builder.port));
+
+    expect(await page.evaluate(`window.test`)).toBe('aaaa');
+
+    // builder-runtime file in output
+    expect(
+      Object.keys(files).some(
+        fileName =>
+          fileName.includes(RUNTIME_CHUNK_NAME) && fileName.endsWith('.js'),
+      ),
+    ).toBe(true);
+  });
+
+  webpackOnlyTest('should emit source map of builder runtime', async () => {
+    expect(
+      Object.keys(files).some(
+        fileName =>
+          fileName.includes(RUNTIME_CHUNK_NAME) && fileName.endsWith('.js.map'),
+      ),
+    ).toBe(true);
+  });
+});
+
 webpackOnlyTest('inline runtime chunk by default', async ({ page }) => {
   const builder = await build({
     cwd: __dirname,
@@ -166,7 +215,7 @@ webpackOnlyTest('using RegExp to inline scripts', async () => {
   ).toEqual(3);
 });
 
-webpackOnlyTest('using RegExp to inline styles', async () => {
+test('using RegExp to inline styles', async () => {
   const builder = await build({
     cwd: __dirname,
     entry: {

tests/e2e/builder/cases/output/output.test.ts

@@ -2,6 +2,7 @@ import { join, dirname } from 'path';
 import { expect, test } from '@modern-js/e2e/playwright';
 import { fs } from '@modern-js/utils';
 import { build } from '@scripts/shared';
+import { webpackOnlyTest } from '@scripts/helper';
 
 const fixtures = __dirname;
 
@@ -56,6 +57,20 @@ test.describe('output configure multi', () => {
 
     expect(fs.existsSync(join(fixtures, 'rem/dist-1/aa/js'))).toBeTruthy();
   });
+
+  // todo: rspack not support disable css sourceMap individually
+  webpackOnlyTest('sourcemap', async () => {
+    const files = await builder.unwrapOutputJSON(false);
+
+    const jsMapFiles = Object.keys(files).filter(files =>
+      files.endsWith('.js.map'),
+    );
+    const cssMapFiles = Object.keys(files).filter(files =>
+      files.endsWith('.css.map'),
+    );
+    expect(jsMapFiles.length).toBeGreaterThanOrEqual(1);
+    expect(cssMapFiles.length).toBe(0);
+  });
 });
 
 test('cleanDistPath disable', async () => {
@@ -89,3 +104,31 @@ test('cleanDistPath disable', async () => {
   builder.close();
   builder.clean();
 });
+
+test('disableSourcemap', async () => {
+  const builder = await build({
+    cwd: join(fixtures, 'rem'),
+    entry: {
+      main: join(fixtures, 'rem/src/index.ts'),
+    },
+    builderConfig: {
+      output: {
+        distPath: {
+          root: 'dist-3',
+        },
+        disableSourceMap: true,
+      },
+    },
+  });
+
+  const files = await builder.unwrapOutputJSON(false);
+
+  const jsMapFiles = Object.keys(files).filter(files =>
+    files.endsWith('.js.map'),
+  );
+  const cssMapFiles = Object.keys(files).filter(files =>
+    files.endsWith('.css.map'),
+  );
+  expect(jsMapFiles.length).toBe(0);
+  expect(cssMapFiles.length).toBe(0);
+});

tests/e2e/builder/cases/output/rem/.gitignore

@@ -1,2 +1 @@
-dist-1
-dist-2
+dist-*

tests/e2e/builder/cases/source/plugin-import/index.test.ts

@@ -2,8 +2,8 @@ import path from 'path';
 import { rspackOnlyTest, webpackOnlyTest } from '@scripts/helper';
 import { build } from '@scripts/shared';
 import { expect } from '@modern-js/e2e/playwright';
-import { builderPluginSwc } from '@modern-js/builder-plugin-swc';
 import { ensureDirSync, copySync } from 'fs-extra';
+import { builderPluginSwc } from '@modern-js/builder-plugin-swc';
 import { SharedTransformImport } from '@modern-js/builder-shared';
 import { BuilderConfig } from '@modern-js/builder-webpack-provider';
 
@@ -46,7 +46,7 @@ webpackOnlyTest('should import with function customName', async () => {
             customName: (member: string) => `foo/lib/${member}`,
           },
         ],
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+
         // @ts-expect-error rspack and webpack all support this
         disableDefaultEntries: true,
         entries: {

tests/e2e/builder/cases/source/source-exclude/index.test.ts

@@ -0,0 +1,24 @@
+import path from 'path';
+import { expect } from '@modern-js/e2e/playwright';
+import { build } from '@scripts/shared';
+import { webpackOnlyTest } from '@scripts/helper';
+
+webpackOnlyTest(
+  'should not compile specified file when source.exclude',
+  async () => {
+    await expect(
+      build({
+        cwd: __dirname,
+        entry: { index: path.resolve(__dirname, './src/index.js') },
+        builderConfig: {
+          source: {
+            exclude: [path.resolve(__dirname, './src/test.js')],
+          },
+          security: {
+            checkSyntax: true,
+          },
+        },
+      }),
+    ).rejects.toThrowError('[Syntax Checker]');
+  },
+);

tests/e2e/builder/cases/source/source-exclude/src/index.js

@@ -0,0 +1,3 @@
+import { printLog } from './test';
+
+printLog();

tests/e2e/builder/cases/source/source-exclude/src/test.js

@@ -0,0 +1,4 @@
+export const printLog = () => {
+  const arr = [1, 2, 3, 4, [5, 6, [7, 8]]];
+  console.log(arr, arr.flat());
+};

tests/e2e/builder/cases/source/source-include/index.test.ts

@@ -0,0 +1,38 @@
+import path from 'path';
+import { expect, test } from '@modern-js/e2e/playwright';
+import { build } from '@scripts/shared';
+import { webpackOnlyTest } from '@scripts/helper';
+
+webpackOnlyTest(
+  'should not compile file which outside of project by default',
+  async () => {
+    await expect(
+      build({
+        cwd: __dirname,
+        entry: { index: path.resolve(__dirname, './src/index.js') },
+        builderConfig: {
+          security: {
+            checkSyntax: true,
+          },
+        },
+      }),
+    ).rejects.toThrowError('[Syntax Checker]');
+  },
+);
+
+test('should compile specified file when source.include', async () => {
+  await expect(
+    build({
+      cwd: __dirname,
+      entry: { index: path.resolve(__dirname, './src/index.js') },
+      builderConfig: {
+        source: {
+          include: [path.resolve(__dirname, '../test.js')],
+        },
+        security: {
+          checkSyntax: true,
+        },
+      },
+    }),
+  ).resolves.toBeDefined();
+});

tests/e2e/builder/cases/source/source-include/src/index.js

@@ -0,0 +1,3 @@
+import { printLog } from '../../test';
+
+printLog();

tests/e2e/builder/cases/source/test.js

@@ -0,0 +1,4 @@
+export const printLog = () => {
+  const arr = [1, 2, 3, 4, [5, 6, [7, 8]]];
+  console.log(arr, arr.flat());
+};

tests/e2e/builder/cases/sri/index.test.ts

@@ -0,0 +1,35 @@
+import path from 'path';
+import { expect } from '@modern-js/e2e/playwright';
+import { build, getHrefByEntryName } from '@scripts/shared';
+import { webpackOnlyTest } from '@scripts/helper';
+
+webpackOnlyTest('security.sri', async ({ page }) => {
+  const builder = await build({
+    cwd: __dirname,
+    entry: { index: path.resolve(__dirname, './src/index.js') },
+    runServer: true,
+    builderConfig: {
+      security: {
+        sri: true,
+      },
+    },
+  });
+
+  const files = await builder.unwrapOutputJSON();
+  const htmlFileName = Object.keys(files).find(f => f.endsWith('.html'))!;
+
+  const regex = /integrity=/g;
+
+  const matches = files[htmlFileName].match(regex);
+
+  // at least 1 js file and 1 css file
+  expect(matches?.length).toBeGreaterThanOrEqual(2);
+
+  await page.goto(getHrefByEntryName('index', builder.port));
+
+  await expect(
+    page.evaluate(`document.getElementById('test').innerHTML`),
+  ).resolves.toBe('Hello Builder!');
+
+  builder.close();
+});

tests/e2e/builder/cases/sri/src/App.css

@@ -0,0 +1,19 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family: nunito_for_arco, Helvetica Neue, Helvetica, PingFang SC,
+    Hiragino Sans GB, Microsoft YaHei, 微软雅黑, Arial, sans-serif;
+}
+
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  box-sizing: border-box;
+}
+
+.description {
+  text-align: center;
+  line-height: 1.5;
+  font-size: 16px;
+}

tests/e2e/builder/cases/sri/src/App.jsx

@@ -0,0 +1,9 @@
+import './App.css';
+
+const App = () => (
+  <div className="container">
+    <div id="test">Hello Builder!</div>
+  </div>
+);
+
+export default App;

tests/e2e/builder/cases/sri/src/index.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { render } from 'react-dom';
+import App from './App';
+
+// eslint-disable-next-line no-undef
+render(React.createElement(App), document.getElementById('root'));

tests/e2e/builder/cases/tools.test.ts

@@ -32,6 +32,30 @@ test('postcss plugins overwrite', async ({ page }) => {
   builder.close();
 });
 
+test('bundlerChain', async ({ page }) => {
+  const builder = await build({
+    cwd: join(fixtures, 'source/basic'),
+    entry: {
+      main: join(fixtures, 'source/basic/src/index.js'),
+    },
+    runServer: true,
+    builderConfig: {
+      tools: {
+        bundlerChain: chain => {
+          chain.resolve.alias.merge({
+            '@common': join(fixtures, 'source/basic/src/common'),
+          });
+        },
+      },
+    },
+  });
+
+  await page.goto(getHrefByEntryName('main', builder.port));
+  await expect(page.innerHTML('#test')).resolves.toBe('Hello Builder! 1');
+
+  builder.close();
+});
+
 webpackOnlyTest('webpackChain plugin', async ({ page }) => {
   const builder = await build({
     cwd: join(fixtures, 'source/global-vars'),

tests/e2e/builder/scripts/helper.ts

@@ -9,7 +9,6 @@ export const getProviderTest = (supportType: string[] = ['webpack']) => {
 
   const testSkip = test.skip;
 
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-expect-error
   testSkip.describe = test.describe.skip;
   return testSkip as typeof test.skip & {