test(ssr): add ssr testing cases (element-plus#6647)

commitlint.config.js

@@ -26,6 +26,7 @@ const scopes = [
   'color',
   'border',
   'var',
+  'ssr',
 ]
 
 module.exports = {

packages/components/affix/ssr/basic.vue

@@ -0,0 +1,5 @@
+<template>
+  <el-affix :offset="120">
+    <el-button type="primary">Offset top 120px</el-button>
+  </el-affix>
+</template>

packages/components/alert/ssr/basic.vue

@@ -0,0 +1,6 @@
+<template>
+  <el-alert title="success alert" type="success" style="margin-bottom: 20px" />
+  <el-alert title="info alert" type="info" style="margin-bottom: 20px" />
+  <el-alert title="warning alert" type="warning" style="margin-bottom: 20px" />
+  <el-alert title="error alert" type="error" style="margin-bottom: 20px" />
+</template>

packages/components/autocomplete/ssr/basic.vue

@@ -0,0 +1,61 @@
+<template>
+  <el-row class="demo-autocomplete text-center">
+    <el-col :span="12">
+      <div class="sub-title my-2 text-sm text-gray-600">
+        list suggestions when activated
+      </div>
+      <el-autocomplete
+        v-model="state1"
+        :fetch-suggestions="querySearch"
+        class="inline-input"
+        placeholder="Please Input"
+        @select="handleSelect"
+      />
+    </el-col>
+    <el-col :span="12">
+      <div class="sub-title my-2 text-sm text-gray-600">
+        list suggestions on input
+      </div>
+      <el-autocomplete
+        v-model="state2"
+        :fetch-suggestions="querySearch"
+        :trigger-on-focus="false"
+        class="inline-input"
+        placeholder="Please Input"
+        @select="handleSelect"
+      />
+    </el-col>
+  </el-row>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface RestaurantItem {
+  value: string
+  link: string
+}
+
+const state1 = ref('')
+const state2 = ref('')
+
+const restaurants = ref<RestaurantItem[]>([])
+const querySearch = (queryString: string, cb: any) => {
+  const results = queryString
+    ? restaurants.value.filter(createFilter(queryString))
+    : restaurants.value
+  // call callback function to return suggestions
+  cb(results)
+}
+const createFilter = (queryString: string) => {
+  return (restaurant: RestaurantItem) => {
+    return (
+      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
+    )
+  }
+}
+
+const handleSelect = () => {
+  //
+}
+</script>

packages/components/avatar/ssr/basic.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="demo-type">
+    <div>
+      <el-avatar :icon="UserFilled" />
+    </div>
+    <div>
+      <el-avatar
+        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
+      />
+    </div>
+    <div>
+      <el-avatar> user </el-avatar>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UserFilled } from '@element-plus/icons-vue'
+</script>
+
+<style scoped>
+.demo-type {
+  display: flex;
+}
+.demo-type > div {
+  flex: 1;
+  text-align: center;
+}
+
+.demo-type > div:not(:last-child) {
+  border-right: 1px solid var(--el-border-color);
+}
+</style>

ssr-testing/demo.spec.puppeteer.tsx

@@ -4,24 +4,25 @@ import { renderToString } from '@vue/server-renderer'
 import { beforeAll, describe, expect, it } from 'vitest'
 import puppeteer from 'puppeteer'
 import glob from 'fast-glob'
-import ElementPlus from '../dist/element-plus'
+import ElementPlus, { ID_INJECTION_KEY } from '../dist/element-plus'
 
 import type { Browser } from 'puppeteer'
 
 const projectRoot = process.cwd()
 const testRoot = `${projectRoot}/ssr-testing`
-const exampleRoot = path.resolve(projectRoot, 'docs/examples')
+const demoRoot = path.resolve(projectRoot, 'packages/components')
 describe('Cypress Button', () => {
   let browser: Browser
   beforeAll(async () => {
     browser = await puppeteer.launch()
   })
 
   describe('when initialized', () => {
-    const demos = glob
-      .sync(`${projectRoot}/docs/examples/**/*.vue`)
-      .map((demo) => demo.slice(exampleRoot.length + 1))
-    it.each(demos)(`render %s correctly`, async (demoPath) => {
+    const demoPaths = glob
+      .sync(`${demoRoot}/**/ssr/*.vue`)
+      .map((demo) => demo.slice(demoRoot.length + 1))
+
+    it.each(demoPaths)(`render %s correctly`, async (demoPath) => {
       const page = await browser.newPage()
       await page.goto(`file://${projectRoot}/ssr-testing/index.html`)
       await page.addStyleTag({
@@ -33,8 +34,13 @@ describe('Cypress Button', () => {
           'index.css'
         ),
       })
-      const { default: Demo } = await import(path.join(exampleRoot, demoPath))
-      const app = createApp(<Demo />).use(ElementPlus)
+      const { default: Demo } = await import(path.join(demoRoot, demoPath))
+      const app = createApp(<Demo />)
+        .use(ElementPlus)
+        .provide(ID_INJECTION_KEY, {
+          prefix: 100,
+          current: 0,
+        })
       const html = await renderToString(app)
 
       await page.evaluate((innerHTML) => {

ssr-testing/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "extends": "@vue/tsconfig/tsconfig.node.json",
+  "include": ["../packages/components/**/ssr/*.vue"],
   "compilerOptions": {
     "isolatedModules": false,
     "module": "esnext",