web-infra-dev · chenjiahan · Jul 8, 2024 · Jul 8, 2024 · Jul 8, 2024 · Jul 8, 2024
diff --git a/e2e/cases/html-tags/function-usage/index.test.ts b/e2e/cases/html-tags/function-usage/index.test.ts
@@ -1,4 +1,4 @@
-import { build } from '@e2e/helper';
+import { build, normalizeNewlines } from '@e2e/helper';
 import { expect, test } from '@playwright/test';
 
 test('should inject tags with function usage correctly', async () => {
@@ -11,7 +11,12 @@ test('should inject tags with function usage correctly', async () => {
   const indexHtml =
     files[Object.keys(files).find((file) => file.endsWith('index.html'))!];
 
-  expect(indexHtml).toEqual(
-    `<!doctype html><html><head><script src="/foo.js"></script><script src="/bar.js"></script><script src="/baz.js"></script><title>Rsbuild App</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><script defer="defer" src="/static/js/index.js"></script></head><body><div id="root"></div></body></html>`,
-  );
+  expect(normalizeNewlines(indexHtml)).toEqual(`<!doctype html>
+<html>
+  <head><script src="/foo.js"></script><script src="/bar.js"></script><script src="/baz.js"></script><title>Rsbuild App</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script defer src="/static/js/index.js"></script></head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
+`);
 });
diff --git a/e2e/cases/html/inject/index.test.ts b/e2e/cases/html/inject/index.test.ts
@@ -1,5 +1,5 @@
 import path from 'node:path';
-import { build } from '@e2e/helper';
+import { build, normalizeNewlines } from '@e2e/helper';
 import { expect, test } from '@playwright/test';
 import { pluginRem } from '@rsbuild/plugin-rem';
 
@@ -42,6 +42,9 @@ test('should set inject via function correctly', async () => {
           foo: path.resolve(__dirname, './src/foo.js'),
         },
       },
+      output: {
+        filenameHash: false,
+      },
       html: {
         inject({ value, entryName }) {
           return entryName === 'foo' ? 'body' : value;
@@ -53,11 +56,23 @@ test('should set inject via function correctly', async () => {
 
   const fooHtml =
     files[Object.keys(files).find((file) => file.endsWith('foo.html'))!];
-  expect(fooHtml).toContain('<body><div id="root"></div><script defer="defer"');
+  expect(normalizeNewlines(fooHtml)).toEqual(`<!doctype html>
+<html>
+  <head><title>Rsbuild App</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"></head>
+  <body>
+    <div id="root"></div>
+  <script defer src="/static/js/foo.js"></script></body>
+</html>
+`);
 
   const indexHtml =
     files[Object.keys(files).find((file) => file.endsWith('index.html'))!];
-  expect(indexHtml).toContain(
-    'content="width=device-width,initial-scale=1"><script defer="defer"',
-  );
+  expect(normalizeNewlines(indexHtml)).toEqual(`<!doctype html>
+<html>
+  <head><title>Rsbuild App</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script defer src="/static/js/index.js"></script><link href="/static/css/index.css" rel="stylesheet"></head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
+`);
 });
diff --git a/e2e/cases/html/legal-comments/index.test.ts b/e2e/cases/html/legal-comments/index.test.ts
diff --git a/e2e/cases/html/legal-comments/rsbuild.config.ts b/e2e/cases/html/legal-comments/rsbuild.config.ts
diff --git a/e2e/cases/html/legal-comments/src/index.html b/e2e/cases/html/legal-comments/src/index.html
diff --git a/e2e/cases/html/legal-comments/src/index.js b/e2e/cases/html/legal-comments/src/index.js
diff --git a/e2e/cases/html/meta/index.test.ts b/e2e/cases/html/meta/index.test.ts
@@ -1,4 +1,4 @@
-import { build } from '@e2e/helper';
+import { build, normalizeNewlines } from '@e2e/helper';
 import { expect, test } from '@playwright/test';
 
 test('should not inject charset meta if template already contains it', async () => {
@@ -17,7 +17,15 @@ test('should not inject charset meta if template already contains it', async ()
 
   const html =
     files[Object.keys(files).find((file) => file.endsWith('index.html'))!];
-  expect(html).toEqual(
-    '<!doctype html><html><head><title>Page Title</title><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"><script defer="defer" src="/static/js/index.js"></script></head><body><div id="root"></div></body></html>',
-  );
+  expect(normalizeNewlines(html)).toEqual(`<!doctype html>
+<html>
+  <head>
+    <title>Page Title</title>
+    <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"><script defer src="/static/js/index.js"></script></head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
+`);
 });
diff --git a/e2e/cases/html/minify/index.test.ts b/e2e/cases/html/minify/index.test.ts
@@ -1,89 +1,39 @@
-import { build, gotoPage } from '@e2e/helper';
-import { expect, test } from '@playwright/test';
+import { build, gotoPage, rspackOnlyTest } from '@e2e/helper';
+import { expect } from '@playwright/test';
 
 const fixtures = __dirname;
 
-test('should minify template js & css', async ({ page }) => {
-  const rsbuild = await build({
-    cwd: fixtures,
-    runServer: true,
-    rsbuildConfig: {
-      html: {
-        template: './static/index.html',
+rspackOnlyTest(
+  'should minify template success when inlineScripts & inlineStyles',
+  async ({ page }) => {
+    const rsbuild = await build({
+      cwd: fixtures,
+      runServer: true,
+      rsbuildConfig: {
+        html: {
+          template: './static/index.html',
+          // avoid Minified React error #200;
+          inject: 'body',
+        },
+        output: {
+          inlineScripts: true,
+          inlineStyles: true,
+        },
       },
-      performance: {
-        removeConsole: ['log', 'warn'],
-      },
-    },
-  });
-
-  await gotoPage(page, rsbuild);
-
-  const test = page.locator('#test');
-
-  await expect(test).toHaveCSS('text-align', 'center');
-  await expect(test).toHaveCSS('font-size', '146px');
-  await expect(test).toHaveText('Hello Rsbuild!');
-  await expect(page.evaluate('window.b')).resolves.toBe(2);
-
-  const files = await rsbuild.unwrapOutputJSON();
-
-  const content =
-    files[Object.keys(files).find((file) => file.endsWith('.html'))!];
-
-  expect(
-    content.includes('.test{font-size:146px;background-color:green}'),
-  ).toBeTruthy();
-  expect(
-    content.includes('#a{text-align:center;line-height:1.5;font-size:1.5rem}'),
-  ).toBeTruthy();
-  expect(content.includes('window.a=1,window.b=2')).toBeTruthy();
-  expect(content.includes('console.info(111111)')).toBeTruthy();
-  expect(content.includes('console.warn(111111)')).toBeFalsy();
-
-  // keep html comments
-  expect(content.includes('<!-- HTML COMMENT-->')).toBeTruthy();
-
-  await rsbuild.close();
-});
-
-test('should minify template success when inlineScripts & inlineStyles', async ({
-  page,
-}) => {
-  const rsbuild = await build({
-    cwd: fixtures,
-    runServer: true,
-    rsbuildConfig: {
-      html: {
-        template: './static/index.html',
-        // avoid Minified React error #200;
-        inject: 'body',
-      },
-      output: {
-        inlineScripts: true,
-        inlineStyles: true,
-      },
-    },
-  });
-
-  await gotoPage(page, rsbuild);
-
-  const test = page.locator('#test');
+    });
 
-  await expect(test).toHaveCSS('text-align', 'center');
-  await expect(test).toHaveCSS('font-size', '146px');
-  await expect(test).toHaveText('Hello Rsbuild!');
-  await expect(page.evaluate('window.b')).resolves.toBe(2);
+    await gotoPage(page, rsbuild);
 
-  const files = await rsbuild.unwrapOutputJSON();
+    const files = await rsbuild.unwrapOutputJSON();
 
-  const content =
-    files[Object.keys(files).find((file) => file.endsWith('.html'))!];
+    const content =
+      files[Object.keys(files).find((file) => file.endsWith('.html'))!];
 
-  expect(
-    content.includes('.test{font-size:146px;background-color:green}'),
-  ).toBeTruthy();
-  expect(content.includes('window.a=1,window.b=2')).toBeTruthy();
+    expect(content.includes('html,body{margin:0;padding:0}')).toBeTruthy();
+    expect(
+      content.includes('let n=document.createElement("div")'),
+    ).toBeTruthy();
 
-  await rsbuild.close();
-});
+    await rsbuild.close();
+  },
+);
diff --git a/e2e/cases/html/minify/static/index.html b/e2e/cases/html/minify/static/index.html
@@ -4,32 +4,6 @@
     <meta charset="utf-8" />
     <title>custom template</title>
     <!-- HTML COMMENT-->
-    <script>
-      window.a = 1;
-      window.b = 2;
-      console.log(111111);
-      console.info(111111);
-      console.warn(111111);
-    </script>
-    <style>
-      .test {
-        font-size: 146px;
-        background-color: green;
-      }
-
-      #a {
-        text-align: center;
-        line-height: 1.5;
-        font-size: 1.5rem;
-      }
-
-      #b {
-        text-align: center;
-        line-height: 1.5;
-        font-size: 1.5rem;
-        background: #fafafa;
-      }
-    </style>
   </head>
   <body>
     <div id="test-template">bar</div>

diff --git a/e2e/cases/html/script-loading/index.test.ts b/e2e/cases/html/script-loading/index.test.ts
@@ -10,7 +10,7 @@ test('should apply defer by default', async () => {
   const html =
     files[Object.keys(files).find((file) => file.endsWith('index.html'))!];
 
-  expect(html).toContain('<script defer="defer" src="');
+  expect(html).toContain('<script defer src="');
 });
 
 test('should remove defer when scriptLoading is "blocking"', async () => {

diff --git a/e2e/cases/nonce/basic/index.test.ts b/e2e/cases/nonce/basic/index.test.ts
@@ -8,9 +8,7 @@ test('should apply nonce to script and style tags', async () => {
   const files = await rsbuild.unwrapOutputJSON();
   const html =
     files[Object.keys(files).find((file) => file.endsWith('index.html'))!];
-  expect(html).toContain(
-    `<script defer="defer" nonce="CSP_NONCE_PLACEHOLDER">`,
-  );
+  expect(html).toContain(`<script defer nonce="CSP_NONCE_PLACEHOLDER">`);
   expect(html).toContain(`<style nonce="CSP_NONCE_PLACEHOLDER">body{`);
 });
 
@@ -45,17 +43,13 @@ test('should apply environment nonce', async () => {
   const files = await rsbuild.unwrapOutputJSON();
   const html =
     files[Object.keys(files).find((file) => file.endsWith('dist/index.html'))!];
-  expect(html).toContain(
-    `<script defer="defer" nonce="CSP_NONCE_PLACEHOLDER">`,
-  );
+  expect(html).toContain(`<script defer nonce="CSP_NONCE_PLACEHOLDER">`);
   expect(html).toContain(`<style nonce="CSP_NONCE_PLACEHOLDER">body{`);
 
   const html1 =
     files[
       Object.keys(files).find((file) => file.endsWith('dist1/index.html'))!
     ];
-  expect(html1).toContain(
-    `<script defer="defer" nonce="CSP_NONCE_PLACEHOLDER1">`,
-  );
+  expect(html1).toContain(`<script defer nonce="CSP_NONCE_PLACEHOLDER1">`);
   expect(html1).toContain(`<style nonce="CSP_NONCE_PLACEHOLDER1">body{`);
 });
diff --git a/e2e/cases/plugin-api/plugin-modify-tags/index.test.ts b/e2e/cases/plugin-api/plugin-modify-tags/index.test.ts
@@ -15,12 +15,12 @@ test('should allow plugin to modify HTML tags', async () => {
 
   expect(
     html.includes(
-      '<script defer="defer" src="https://example.com/static/js/index.js"></script><link href="https://example.com/static/css/index.css" rel="stylesheet"><script id="foo" src="https://example.com/foo.js"></script></head>',
+      '<script defer src="https://example.com/static/js/index.js"></script><link href="https://example.com/static/css/index.css" rel="stylesheet"><script id="foo" src="https://example.com/foo.js"></script></head>',
     ),
   ).toBeTruthy();
   expect(
     html.includes(
-      '<body><div id="root"></div><script id="bar" src="https://cdn.com/bar.js"></script><div>index.html</div><div>assets: 2</div>',
+      '<script id="bar" src="https://cdn.com/bar.js"></script><div>index.html</div><div>assets: 2</div></body>',
     ),
   ).toBeTruthy();
 });
diff --git a/e2e/cases/rem/basic/index.test.ts b/e2e/cases/rem/basic/index.test.ts
@@ -126,7 +126,7 @@ test('should apply html.scriptLoading to rem runtime script', async ({
 
   expect(htmlFile).toBeTruthy();
   expect(files[htmlFile!]).toMatch(
-    /<script type="module" src="\/static\/js\/convert-rem.\d+\.\d+\.\d+(?:-(beta|alpha|rc)\.\d+)?.js">/,
+    /<script src="\/static\/js\/convert-rem.\d+\.\d+\.\d+(?:-(beta|alpha|rc)\.\d+)?.js" type="module">/,
   );
   expect(files[htmlFile!].includes('function setRootPixel')).toBeFalsy();
 

diff --git a/e2e/cases/sri/algotithm/index.test.ts b/e2e/cases/sri/algotithm/index.test.ts
@@ -12,7 +12,7 @@ test('generate integrity using sha512 algorithm', async ({ page }) => {
     files[Object.keys(files).find((file) => file.endsWith('index.html'))!];
 
   expect(html).toMatch(
-    /<script defer="defer" src="\/static\/js\/index\.\w{8}\.js" integrity="sha512-[A-Za-z0-9+\/=]+"/,
+    /<script defer src="\/static\/js\/index\.\w{8}\.js" integrity="sha512-[A-Za-z0-9+\/=]+"/,
   );
 
   expect(html).toMatch(

diff --git a/e2e/cases/sri/basic/index.test.ts b/e2e/cases/sri/basic/index.test.ts
@@ -14,7 +14,7 @@ test('generate integrity for script and style tags in prod build', async ({
     files[Object.keys(files).find((file) => file.endsWith('index.html'))!];
 
   expect(html).toMatch(
-    /<script defer="defer" src="\/static\/js\/index\.\w{8}\.js" integrity="sha384-[A-Za-z0-9+\/=]+"/,
+    /<script defer src="\/static\/js\/index\.\w{8}\.js" integrity="sha384-[A-Za-z0-9+\/=]+"/,
   );
 
   expect(html).toMatch(

diff --git a/e2e/scripts/helper.ts b/e2e/scripts/helper.ts
@@ -102,3 +102,6 @@ export const proxyConsole = (
     },
   };
 };
+
+// Windows and macOS use different new lines
+export const normalizeNewlines = (str: string) => str.replace(/\r\n/g, '\n');
-Original file line number
+Diff line change
@@ Expand Up / @@ -102,3 +102,6 @@ export const proxyConsole = ( @@
         },
       };
     };
+    // Windows and macOS use different new lines
+    export const normalizeNewlines = (str: string) => str.replace(/\r\n/g, '\n');