test(e2e): split slow test file (#4310)

e2e/cases/create-rsbuild/basic.test.ts

@@ -0,0 +1,22 @@
+import { rspackOnlyTest } from '@e2e/helper';
+import { createAndValidate } from './helper';
+
+rspackOnlyTest('should create vanilla project as expected', async () => {
+  await createAndValidate(__dirname, 'vanilla');
+});
+
+rspackOnlyTest('should create vanilla-ts project as expected', async () => {
+  await createAndValidate(__dirname, 'vanilla-ts');
+});
+
+rspackOnlyTest('should allow to create project in sub dir', async () => {
+  await createAndValidate(__dirname, 'vanilla', {
+    name: 'test-temp-dir/rsbuild-project',
+  });
+});
+
+rspackOnlyTest('should allow to create project in relative dir', async () => {
+  await createAndValidate(__dirname, 'vanilla', {
+    name: './test-temp-relative-dir',
+  });
+});

e2e/cases/create-rsbuild/helper.ts

@@ -1,5 +1,5 @@
-import { execSync } from 'node:child_process';
-import { existsSync } from 'node:fs';
+import { exec } from 'node:child_process';
+import { access } from 'node:fs/promises';
 import path from 'node:path';
 import { expect } from '@playwright/test';
 import fse from 'fs-extra';
@@ -14,7 +14,7 @@ export const expectPackageJson = (
   expect(pkgJson.devDependencies['@rsbuild/core']).toBeTruthy();
 };
 
-export const createAndValidate = (
+export const createAndValidate = async (
   cwd: string,
   template: string,
   {
@@ -28,27 +28,40 @@ export const createAndValidate = (
   } = {},
 ) => {
   const dir = path.join(cwd, name);
-  fse.removeSync(dir);
+  await fse.remove(dir);
 
   let command = `npx create-rsbuild -d ${name} -t ${template}`;
   if (tools.length) {
     const toolsCmd = tools.map((tool) => `--tools ${tool}`).join(' ');
     command += ` ${toolsCmd}`;
   }
 
-  execSync(command, { cwd });
+  await new Promise<void>((resolve, reject) => {
+    exec(command, { cwd }, (error) => {
+      if (error) {
+        reject(error);
+      } else {
+        resolve();
+      }
+    });
+  });
 
-  const pkgJson = fse.readJSONSync(path.join(dir, 'package.json'));
+  const pkgJson = await fse.readJSON(path.join(dir, 'package.json'));
   expectPackageJson(pkgJson, path.basename(name));
 
   if (template.endsWith('-ts')) {
     expect(pkgJson.devDependencies.typescript).toBeTruthy();
-    expect(existsSync(path.join(dir, 'tsconfig.json'))).toBeTruthy();
+    try {
+      await access(path.join(dir, 'tsconfig.json'));
+      expect(true).toBeTruthy();
+    } catch {
+      expect(false).toBeTruthy();
+    }
   }
 
-  const cleanFn = () => fse.removeSync(dir);
+  const cleanFn = async () => await fse.remove(dir);
   if (clean) {
-    cleanFn();
+    await cleanFn();
   }
 
   return { dir, pkgJson, clean: cleanFn };

e2e/cases/create-rsbuild/jsTemplates.test.ts

@@ -0,0 +1,45 @@
+import { rspackOnlyTest } from '@e2e/helper';
+import { expect } from '@playwright/test';
+import { createAndValidate } from './helper';
+
+rspackOnlyTest('should create react project as expected', async () => {
+  const { pkgJson } = await createAndValidate(__dirname, 'react');
+  expect(pkgJson.dependencies.react).toBeTruthy();
+  expect(pkgJson.dependencies['react-dom']).toBeTruthy();
+  expect(pkgJson.devDependencies['@rsbuild/plugin-react']).toBeTruthy();
+});
+
+rspackOnlyTest('should create preact project as expected', async () => {
+  const { pkgJson } = await createAndValidate(__dirname, 'preact');
+  expect(pkgJson.dependencies.preact).toBeTruthy();
+  expect(pkgJson.devDependencies['@rsbuild/plugin-preact']).toBeTruthy();
+});
+
+rspackOnlyTest('should create vue3 project as expected', async () => {
+  const { pkgJson } = await createAndValidate(__dirname, 'vue3');
+  expect(pkgJson.dependencies.vue).toBeTruthy();
+  expect(pkgJson.devDependencies['@rsbuild/plugin-vue']).toBeTruthy();
+});
+
+rspackOnlyTest('should create vue2 project as expected', async () => {
+  const { pkgJson } = await createAndValidate(__dirname, 'vue2');
+  expect(pkgJson.dependencies.vue).toBeTruthy();
+  expect(pkgJson.devDependencies['@rsbuild/plugin-vue2']).toBeTruthy();
+});
+
+rspackOnlyTest('should create lit project as expected', async () => {
+  const { pkgJson } = await createAndValidate(__dirname, 'lit');
+  expect(pkgJson.dependencies.lit).toBeTruthy();
+});
+
+rspackOnlyTest('should create solid project as expected', async () => {
+  const { pkgJson } = await createAndValidate(__dirname, 'solid');
+  expect(pkgJson.dependencies['solid-js']).toBeTruthy();
+  expect(pkgJson.devDependencies['@rsbuild/plugin-solid']).toBeTruthy();
+});
+
+rspackOnlyTest('should create svelte project as expected', async () => {
+  const { pkgJson } = await createAndValidate(__dirname, 'svelte');
+  expect(pkgJson.dependencies.svelte).toBeTruthy();
+  expect(pkgJson.devDependencies['@rsbuild/plugin-svelte']).toBeTruthy();
+});

e2e/cases/create-rsbuild/tools.test.ts

@@ -0,0 +1,70 @@
+import { existsSync } from 'node:fs';
+import { join } from 'node:path';
+import { rspackOnlyTest } from '@e2e/helper';
+import { expect } from '@playwright/test';
+import { createAndValidate } from './helper';
+
+rspackOnlyTest('should create project with eslint as expected', async () => {
+  const { dir, pkgJson, clean } = await createAndValidate(
+    __dirname,
+    'vanilla',
+    {
+      name: 'test-temp-eslint',
+      tools: ['eslint'],
+      clean: false,
+    },
+  );
+  expect(pkgJson.devDependencies.eslint).toBeTruthy();
+  expect(existsSync(join(dir, 'eslint.config.mjs'))).toBeTruthy();
+  await clean();
+});
+
+rspackOnlyTest('should create project with prettier as expected', async () => {
+  const { dir, pkgJson, clean } = await createAndValidate(
+    __dirname,
+    'vanilla',
+    {
+      name: 'test-temp-prettier',
+      tools: ['prettier'],
+      clean: false,
+    },
+  );
+  expect(pkgJson.devDependencies.prettier).toBeTruthy();
+  expect(existsSync(join(dir, '.prettierrc'))).toBeTruthy();
+  await clean();
+});
+
+rspackOnlyTest(
+  'should create project with eslint and prettier as expected',
+  async () => {
+    const { dir, pkgJson, clean } = await createAndValidate(
+      __dirname,
+      'vanilla',
+      {
+        name: 'test-temp-eslint-prettier',
+        tools: ['eslint', 'prettier'],
+        clean: false,
+      },
+    );
+    expect(pkgJson.devDependencies.eslint).toBeTruthy();
+    expect(pkgJson.devDependencies.prettier).toBeTruthy();
+    expect(existsSync(join(dir, '.prettierrc'))).toBeTruthy();
+    expect(existsSync(join(dir, 'eslint.config.mjs'))).toBeTruthy();
+    await clean();
+  },
+);
+
+rspackOnlyTest('should create project with biome as expected', async () => {
+  const { dir, pkgJson, clean } = await createAndValidate(
+    __dirname,
+    'vanilla',
+    {
+      name: 'test-temp-eslint',
+      tools: ['biome'],
+      clean: false,
+    },
+  );
+  expect(pkgJson.devDependencies['@biomejs/biome']).toBeTruthy();
+  expect(existsSync(join(dir, 'biome.json'))).toBeTruthy();
+  await clean();
+});