test: with-dynamic

HomyeeKing · Mar 15, 2024 · c3d34fc · c3d34fc
1 parent 6d1913b
commit c3d34fc
Show file tree

Hide file tree

Showing 16 changed files with 251 additions and 0 deletions.
diff --git a/examples/with-dynamic/.browserslistrc b/examples/with-dynamic/.browserslistrc
@@ -0,0 +1 @@
+chrome 55
diff --git a/examples/with-dynamic/ice.config.mts b/examples/with-dynamic/ice.config.mts
@@ -0,0 +1,5 @@
+import { defineConfig } from '@ice/app';
+
+export default defineConfig(() => ({
+  ssr: true,
+}));
diff --git a/examples/with-dynamic/package.json b/examples/with-dynamic/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "@examples/with-dynamic",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "start": "ice start",
+    "build": "ice build"
+  },
+  "description": "ICE example with dynamic",
+  "author": "ICE Team",
+  "license": "MIT",
+  "dependencies": {
+    "@ice/app": "workspace:*",
+    "@ice/runtime": "workspace:*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tslib": "^2.4.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6"
+  }
+}
diff --git a/examples/with-dynamic/src/app.tsx b/examples/with-dynamic/src/app.tsx
@@ -0,0 +1,6 @@
+export default {
+  app: {
+    rootId: 'app',
+    type: 'browser',
+  },
+};
diff --git a/examples/with-dynamic/src/components/nonssr.tsx b/examples/with-dynamic/src/components/nonssr.tsx
@@ -0,0 +1,6 @@
+export default (props) => {
+  window.addEventListener('load', () => {
+    console.log('load');
+  });
+  return <div>{props.text}</div>;
+};
diff --git a/examples/with-dynamic/src/components/normal.tsx b/examples/with-dynamic/src/components/normal.tsx
@@ -0,0 +1,3 @@
+export default () => {
+  return <div>normal text</div>;
+};
diff --git a/examples/with-dynamic/src/document.tsx b/examples/with-dynamic/src/document.tsx
@@ -0,0 +1,22 @@
+import { Meta, Title, Links, Main, Scripts } from 'ice';
+
+function Document() {
+  return (
+    <html>
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="description" content="ICE 3 Example for plugin request." />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Title />
+        <Links />
+      </head>
+      <body>
+        <Main />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+
+export default Document;
diff --git a/examples/with-dynamic/src/pages/nonssr/no-ssr-fallback.tsx b/examples/with-dynamic/src/pages/nonssr/no-ssr-fallback.tsx
@@ -0,0 +1,10 @@
+import { dynamic } from '@ice/runtime';
+
+const NonSSR = dynamic(() => import('@/components/nonssr'), {
+  ssr: false,
+  fallback: () => <div>fallback</div>,
+});
+
+export default () => {
+  return <NonSSR text={'hello world'} />;
+};
diff --git a/examples/with-dynamic/src/pages/nonssr/no-ssr-no-fallback.tsx b/examples/with-dynamic/src/pages/nonssr/no-ssr-no-fallback.tsx
@@ -0,0 +1,9 @@
+import { dynamic } from '@ice/runtime';
+
+const NonSSR = dynamic(() => import('@/components/nonssr'), {
+  ssr: false,
+});
+
+export default () => {
+  return <NonSSR text={'hello world'} />;
+};
diff --git a/examples/with-dynamic/src/pages/nonssr/ssr-no-fallback.tsx b/examples/with-dynamic/src/pages/nonssr/ssr-no-fallback.tsx
@@ -0,0 +1,7 @@
+import { dynamic } from '@ice/runtime';
+
+const NonSSR = dynamic(() => import('@/components/nonssr'));
+
+export default () => {
+  return <NonSSR text={'hello world'} />;
+};
diff --git a/examples/with-dynamic/src/pages/nonssr/without-dynamic.tsx b/examples/with-dynamic/src/pages/nonssr/without-dynamic.tsx
@@ -0,0 +1,5 @@
+import NonSsr from '@/components/nonssr';
+
+export default () => {
+  return <NonSsr text={'without dynamic'} />;
+};
diff --git a/examples/with-dynamic/src/pages/normal/bare-import.tsx b/examples/with-dynamic/src/pages/normal/bare-import.tsx
@@ -0,0 +1,9 @@
+import { dynamic } from '@ice/runtime';
+
+const Normal = dynamic(import('../../components/normal'), {
+  fallback: () => <div>bare import fallback</div>,
+});
+
+export default () => {
+  return <Normal />;
+};
diff --git a/examples/with-dynamic/src/pages/normal/basic.tsx b/examples/with-dynamic/src/pages/normal/basic.tsx
@@ -0,0 +1,9 @@
+import { dynamic } from '@ice/runtime';
+
+const Normal = dynamic(() => import('../../components/normal'), {
+  fallback: () => <div>normal fallback</div>,
+});
+
+export default () => {
+  return <Normal />;
+};
diff --git a/examples/with-dynamic/src/typings.d.ts b/examples/with-dynamic/src/typings.d.ts
@@ -0,0 +1 @@
+/// <reference types="@ice/app/types" />
diff --git a/examples/with-dynamic/tsconfig.json b/examples/with-dynamic/tsconfig.json
@@ -0,0 +1,44 @@
+{
+  "compileOnSave": false,
+  "buildOnSave": false,
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "build",
+    "module": "esnext",
+    "target": "es6",
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "sourceMap": true,
+    "allowJs": true,
+    "rootDir": "./",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": false,
+    "importHelpers": true,
+    "strictNullChecks": true,
+    "noUnusedLocals": true,
+    "skipLibCheck": true,
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ],
+      "ice": [
+        ".ice"
+      ]
+    }
+  },
+  "include": [
+    "src",
+    ".ice", "src/pages/with-dynamic/.tsx",
+  ],
+  "exclude": [
+    "build",
+    "public"
+  ]
+}
diff --git a/tests/integration/with-dynamic.test.ts b/tests/integration/with-dynamic.test.ts
@@ -0,0 +1,91 @@
+import * as path from 'path';
+import * as fs from 'fs';
+import { fileURLToPath } from 'url';
+import { expect, test, describe, afterAll, beforeAll } from 'vitest';
+import { buildFixture, setupBrowser } from '../utils/build';
+import type { Page } from '../utils/browser';
+import type Browser from '../utils/browser';
+
+// @ts-ignore
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+const example = 'with-dynamic';
+
+describe(`build ${example}`, () => {
+  let page: Page;
+  let browser: Browser;
+
+  beforeAll(async () => {
+    await buildFixture(example);
+    const res = await setupBrowser({ example });
+
+    page = res.page;
+    browser = res.browser;
+  });
+
+  describe('normal case', () => {
+    test('basic case', async () => {
+      const htmlPath = '/normal/basic.html';
+      await page.push(htmlPath);
+      const htmlContent = fs.readFileSync(path.join(__dirname, `../../examples/${example}/build${htmlPath}`), 'utf-8');
+
+      expect(htmlContent.includes('"renderMode":"SSG"')).toBe(true);
+      expect(htmlContent.includes('<!--$?--><template id="B:0"></template><div>normal fallback</div>')).toBe(true);
+      expect(htmlContent.includes('<div hidden id="S:0"><div>normal text</div>')).toBe(true);
+    });
+
+    test('should support call w/ a bare import', async () => {
+      const htmlPath = '/normal/bare-import.html';
+      await page.push(htmlPath);
+      const htmlContent = fs.readFileSync(path.join(__dirname, `../../examples/${example}/build${htmlPath}`), 'utf-8');
+
+      expect(htmlContent.includes('"renderMode":"SSG"')).toBe(true);
+      expect(htmlContent.includes('<!--$?--><template id="B:0"></template><div>bare import fallback</div>')).toBe(true);
+      expect(htmlContent.includes('<div hidden id="S:0"><div>normal text</div>')).toBe(true);
+    });
+  });
+
+  describe('non-ssr pkg case', () => {
+    test('should downgrade when ssr w/o fallback', async () => {
+      const htmlPath = '/nonssr/ssr-no-fallback.html';
+      await page.push(htmlPath);
+      const htmlContent = fs.readFileSync(path.join(__dirname, `../../examples/${example}/build${htmlPath}`), 'utf-8');
+
+      expect(await page.$$text('#app')).toStrictEqual(['']);
+      expect(htmlContent.includes('"renderMode":"CSR"')).toBe(true);
+      expect(htmlContent.includes('"downgrade":true')).toBe(true);
+    });
+
+    test('should not downgrade when no ssr no fallback', async () => {
+      const htmlPath = '/nonssr/no-ssr-no-fallback.html';
+      await page.push(htmlPath);
+      const htmlContent = fs.readFileSync(path.join(__dirname, `../../examples/${example}/build${htmlPath}`), 'utf-8');
+      expect(await page.$$text('#app')).toStrictEqual(['']);
+      expect(htmlContent.includes('"renderMode":"SSG"')).toBe(true);
+      expect(htmlContent.includes('"downgrade":true')).toBe(false);
+    });
+
+    test('should not downgrade and display fallback when no ssr with fallback', async () => {
+      const htmlPath = '/nonssr/no-ssr-fallback.html';
+      await page.push(htmlPath);
+      const htmlContent = fs.readFileSync(path.join(__dirname, `../../examples/${example}/build${htmlPath}`), 'utf-8');
+      expect(await page.$$text('#app')).toStrictEqual(['fallback']);
+      expect(htmlContent.includes('"renderMode":"SSG"')).toBe(true);
+      expect(htmlContent.includes('"downgrade":true')).toBe(false);
+    });
+
+    test('should downgrade w/o using dynamic', async () => {
+      const htmlPath = '/nonssr/without-dynamic.html';
+      await page.push(htmlPath);
+      const htmlContent = fs.readFileSync(path.join(__dirname, `../../examples/${example}/build${htmlPath}`), 'utf-8');
+
+      expect(await page.$$text('#app')).toStrictEqual(['']);
+      expect(htmlContent.includes('"renderMode":"CSR"')).toBe(true);
+      expect(htmlContent.includes('"downgrade":true')).toBe(true);
+    });
+  });
+
+  afterAll(async () => {
+    await browser.close();
+  });
+});