//html
<template>
<div data-test="content">
    Root
    <childComponent :title="title"/>
    <childComponent :title="title"/>
</div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
import childComponent from './Test.vue'
const title =ref<string>('這是測試')
</script>

//引入描述、它、期望
import { describe, it } from 'vitest'
//引入測試實用程式
import { mount } from '@vue/test-utils'
//引入元件
import Content from '../Content.vue'

describe('Content', () =>
{
    if (typeof document !== 'undefined') {
        const wrapper = mount(Content)
    }
    it('正確渲染text', () =>{
        if (typeof document !== 'undefined') {
            wrapper.find('[data-test="content"]').text()
            console.log(wrapper.find('[data-test="content"]').text())
        }
    })
    it('正確渲染Html', () =>{
        if (typeof document !== 'undefined') {
            wrapper.find('[data-test="content"]').html()
            console.log(wrapper.find('[data-test="content"]').html())
        }
    })
})

import { describe, it} from 'vitest'
import { mount } from "@vue/test-utils"

const number = 2

describe('Number', () => {
  test('is 2', () => {
    expect(number).toBe(2)
  })

  test('is even', () => {
    expect(number % 2).toBe(0)
  })
})

import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import HelloWorld from '../HelloWorld.vue'

describe('HelloWorld', () =>
{
    //1+1 應該是2
  it('1 + 1 should be 2', () => {
    expect(1 + 1).toBe(2)
  })
    //
  it('正確渲染', () => {
    const wrapper = mount(HelloWorld, { props: { msg: 'Hello Vitest' } })
    expect(wrapper.text()).toContain('Hello Vitest')
  })
  it('在此測試檔案中使用 jsdom', () => {
    const element = document.createElement('div')
    element.innerHTML = '<p>Hello, HTML!</p>'
    expect(element.innerHTML).toBe('<p>Hello, HTML!</p>')
  })
})

import { mount, shallowMount } from '@vue/test-utils'

const Child = {
  template: "<div>Child component</div>"
}

const Parent = {
  template: "<div><child /></div>",
  components: {
    Child
  }
}

describe('shallowMount example', () => {
  test('test', () => {
    const childShallowWrapper = shallowMount(Child)
    const childMountWrapper = mount(Child)
    console.log(childShallowWrapper.html())
    console.log(childMountWrapper.html())

    const parentShallowWrapper = shallowMount(Parent)
    const parentMountWrapper = mount(Parent)
    console.log(parentShallowWrapper.html())
    console.log(parentMountWrapper.html())
  })
})

import { mount } from '@vue/test-utils'

const Component = {
  template: '<div data-test="target">dataset</div>'
}

test('render dataset', () => {
  const wrapper = mount(Component)

  expect(wrapper.get('[data-test="target"]').text()).toBe('dataset')
})

<template>
<div>
      <input type="email" v-model="email" data-test="email" />
</div>
</template>

<script setup lang="ts">
    import { ref } from 'vue'
    const email = ref<string>('')
</script>

test('輸入元素的值應該是 my@mail.com', async () => {
  const wrapper = mount(Component)
  const input = wrapper.get('[data-test="email"]')

  await input.setValue('my@mail.com')

  expect(input.element.value).toBe('my@mail.com')
})

test('設定值後，電子郵件的值應為 my@mail.com', async () => {
  const wrapper = mount(Component)

  await wrapper.get('[data-test="email"]').setValue('my@mail.com')

  expect(wrapper.vm.email).toBe('my@mail.com')
})

<template>
  <form data-test="form" @submit.prevent="submit">
      <input data-test="email" type="email" v-model="form.email" />

      <textarea data-test="description" v-model="form.description" />

      <select data-test="city" v-model="form.city">
        <option value="taipei">Taipei</option>
        <option value="tainan">Tainan</option>
      </select>

      <input data-test="subscribe" type="checkbox" v-model="form.subscribe" />

      <input data-test="interval.weekly" type="radio" value="weekly" v-model="form.interval" />
      <input data-test="interval.monthly" type="radio" value="monthly" v-model="form.interval" />

      <button type="submit"
      @click="sendSubmit"
      >Submit</button>
    </form>
</template>

<script setup lang="ts">
const props = defineProps({ 
    form:{type:Object}
})
    const emit = defineEmits(['sendSubmit'])
    const sendSubmit=()=>{
        emit('sendSubmit')
    }
</script>

<template>
<div>
 <Forms 
    :form="form"
    @sendSubmit ="submit"
 ></Forms>
</div>
</template>

<script setup lang="ts">
    import { ref } from 'vue'
    import Forms from '../component/form.vue'
    interface formType{
      email: string,
      description:  string,
      city:  string,
      subscribe:  boolean,
      interval:  string,
    }
    const form = ref<formType>({
      email: '',
      description: '',
      city: '',
      subscribe: false,
      interval: ''
    })
    const submit = () => {
      emit('submit', form)
    }
</script>

test('填寫表單', async () => {
  const wrapper = mount(Component)

  const email = 'name@mail.com'
  const description = 'Lorem ipsum dolor sit amet'
  const city = 'taipei'
  const subscribe = true

  await wrapper.get('[data-test="email"]').setValue(email)
  await wrapper.get('[data-test="description"]').setValue(description)
  await wrapper.get('[data-test="city"]').setValue(city)
  await wrapper.get('[data-test="subscribe"]').setValue()
  await wrapper.get('[data-test="interval.weekly"]').setValue()

  expect(wrapper.vm.form).toEqual({
    email,
    description,
    city,
    subscribe,
    interval: 'weekly'
  })
})

test('提交表單', async () => {
  const wrapper = mount(Component)

  const email = 'name@mail.com'
  const description = 'Lorem ipsum dolor sit amet'
  const city = 'taipei'
  const subscribe = true

  await wrapper.get('[data-test="email"]').setValue(email)
  await wrapper.get('[data-test="description"]').setValue(description)
  await wrapper.get('[data-test="city"]').setValue(city)
  await wrapper.get('[data-test="subscribe"]').setValue(subscribe)
  await wrapper.get('[data-test="interval.monthly"]').setValue()

  await wrapper.get('[data-test="form"]').trigger('submit.prevent')

  expect(wrapper.emitted('submit')[0][0]).toEqual({
    email,
    description,
    city,
    subscribe,
    interval: 'monthly'
  })
})

import { ref, computed } from 'vue'

const Component = {
  template: `
    <div>
      <input data-test="password" v-model="password">
      <p v-if="showError && isError" data-test="errorMsg">Password must be at least {{minLength}} characters.</p>
    </div>
  `,
  props: {
    minLength: {
      type: Number,
      required: true
    },
    showError: {
      type: Boolean,
      default: true
    }
  },
  setup (props) {
    const password = ref('')
    const isError = computed(() => password.value.length < props.minLength)

    return {
      isError,
      password
    }
  }
}

describe('Props & Computed', () => {
  let wrapper
  const minLength = 6
  beforeEach(() => {
    wrapper = mount(Component, {
      props: {
        minLength
      }
    })
  })
  
  // Case 1: 密碼在大於或等於最短長度限制時，不會出現錯誤訊息。
  test(`not renders an error if length is more than or equal to ${minLength}`, async () => {
    await wrapper.get('[data-test="password"]').setValue('123456')

    expect(wrapper.find('[data-test="errorMsg"]').exists()).toBe(false)
  })

  // Case 2: 密碼少於最短長度限制時，出現錯誤訊息。
  test(`renders an error if length is less than ${minLength}`, async () => {
    await wrapper.get('[data-test="password"]').setValue('12345')

    expect(wrapper.html()).toContain(`Password must be at least ${minLength} characters`)
  })

  // Case 3: 當 showError 為 false 時，不顯示錯誤訊息。
  test('not renders an error if showError is false ', async () => {
    await wrapper.get('[data-test="password"]').setValue('12345')

    expect(wrapper.html()).toContain(`Password must be at least ${minLength} characters`)

    await wrapper.setProps({ showError: false })

    expect(wrapper.find('[data-test="errorMsg"]').exists()).toBe(false)
  })
})

npm create vite-extra@latest 專案名稱

 create-vite@5.5.2
Ok to proceed? (y) 
? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
❯   Vue
    React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others

cd vite-project
npm install
npm run dev

├── .vscode
├── public
│   └── vite.svg
├── src
│   ├── App.vue
│   ├── assets
│   │   └── vue.svg
│   ├── components
│   │   └── HelloWorld.vue
│   ├── main.js
│   └── style.css
├── .gitignore
├── index.html
├── package.json
├── package-lock.json
├── README.md
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.js

npm install express
npm install --save-dev nodemon concurrently

import express from "express";

const port = process.env.PORT || 3000;

const app = express();

app.get("/api/v1/hello", (_req, res) => {
  res.json({ message: "Hello, world!" });
});

app.listen(port, () => {
  console.log("Server listening on port", port);
});

   "version": "1.0.1",
   "type": "module",
+  "main": "server/index.js",
   "scripts": {
-    "dev": "vite",
+    "dev:frontend": "vite",
+    "dev:backend": "nodemon server/index.js",
+    "dev": "concurrently 'npm:dev:frontend' 'npm:dev:backend'",
+    "build": "vite build",
     "preview": "vite preview"
   },

npm run dev

{
  "message": "Hello, world!"
}

npm install ejs

import express from "express";
import fs from "fs/promises";
import path from "path";

const router = express.Router();
//
const environment = process.env.NODE_ENV;

//開發中，獲取所有的數據（來自打包產生dist/manifest.json
router.get("/*", async (_req, res) => {
    const data = {
        environment,
        manifest: await parseManifest(),
    };
    console.log('data', data)
    res.render("index.html.ejs", data);
});

const parseManifest = async () => {
  if (environment !== "production") return {};

    const manifestPath = path.join(path.resolve(), "dist", "manifest.json");
    console.log('manifestPath', manifestPath)
    const manifestFile = await fs.readFile(manifestPath);
    console.log(' manifestFile', manifestFile)
  return JSON.parse(manifestFile);
};

export default router;

import express from "express";

const router = express.Router();
//支持的檔案類型
const supportedAssets = ["svg", "png", "jpg", "png", "jpeg", "mp4", "ogv"];

const assetExtensionRegex = () =>
{
    //JS 把陣列 Array 所有元素併成字串，且可任意穿插符號的 join()
  const formattedExtensionList = supportedAssets.join("|");
    //JS Regex 正則表達式
  return new RegExp(`/.+\.(${formattedExtensionList})$`);
};

router.get(assetExtensionRegex(), (req, res) => {
  res.redirect(303, `http://localhost:5173/src${req.path}`);
});

export default router;

import express from "express";
import path from "path";
import homepageRouter from "./homepageRouter.js";
import assetsRouter from "./assetsRouter.js";

const port = process.env.PORT || 3000;
//載入為靜態目錄
const publicPath = path.join(path.resolve(), "public");
const distPath = path.join(path.resolve(), "dist");

const app = express();

app.get("/api/v1/hello", (_req, res) => {
  res.json({ message: "Hello, Lara!" });
});

//如果是生產階段就連結到dist/，否則連接到public與/src
if (process.env.NODE_ENV === "production") {
  app.use("/", express.static(distPath));
} else {
  app.use("/", express.static(publicPath));
  app.use("/src", assetsRouter);
}

//將路由器連接到 Express 應用程式
app.use(homepageRouter);

app.listen(port, () => {
  console.log("Server listening on port", port);
});

<script setup lang="ts">
import { ref } from 'vue'
  const count = ref(0)
  const serverHello = ref({})
  fetch('/api/v1/hello')
  .then((res) => res.json())
  .then(({ message }) => {
    serverHello.value = message
  })
</script>

<template>
<h2>{{ serverHello }}</h2>
</template>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
    <% if (environment === 'production') { %>
    <link rel="stylesheet" href="<%= manifest['src/main.css'].file %>" />
    <% } %>
  </head>
  <body>
    <div id="app"></div>
    <% if (environment === 'production') { %>
    <script type="module" src="<%= manifest['src/main.ts'].file %>"></script>
    <% } else { %>
    <script type="module" src="http://localhost:5173/@vite/client"></script>
    <script type="module" src="http://localhost:5173/src/main.ts"></script>
    <% } %>
  </body>
</html>

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  // 新增打包
  build: {
    manifest: true,
    rollupOptions: {
      input: "./src/main.ts",
    },
  },
});

npm run build

{
  "src/assets/vue.svg": {
    "file": "vite.svg",
    "src": "src/assets/vue.svg"//物件名與src名相同
  },
  "src/main.css": {
    "file": "assets/main-CYBnthfA.css",//打包後的檔案
    "src": "src/main.css"//物件名與src名相同
  },
  "src/main.ts": {
    "file": "assets/main-CpTINVMW.js",//打包後的檔案
    "name": "main",
    "src": "src/main.ts",//物件名與src名相同
    "isEntry": true,
    "css": [
      "assets/main-CYBnthfA.css"//打包後的檔案
    ]
  }
}

npm i -D vite-plugin-pwa

import { VitePWA } from "vite-plugin-pwa"
export default defineConfig({
  plugins: [
    VitePWA({ registerType: 'autoUpdate' })
    <!-- VitePWA({
       srcDir: "/",
      filename: "vite_pwa.js",
      registerType: 'autoUpdate',
      devOptions: {
        enabled: true,
        type: 'module',
      },
      strategies: "injectManifest",
      injectRegister: false,
      manifest: false,
      injectManifest: {
        injectionPoint: undefined,
      },
    }), -->
  ],
  server: {
    hmr: {
      overlay: false
    }
  },
})

npm install --global vue-pwa-asset-generator

//剛剛製作的icon路徑 =>(產生) ＝> icons
npx vue-pwa-asset-generator -a ./public/logo.png -o ./public/img/icons

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lara Huang 出勤系統</title>
    <link rel="apple-touch-icon" sizes="180x180" href="/img/icons/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/img/icons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/img/icons/favicon-16x16.png">
    <!--manifest.json 注意路徑--->
    <link rel="manifest" href="/img/icons/manifest.json">
    <link rel="mask-icon" href="/img/icons/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

{
  "name": "Lara Huang",
  "short_name": "Lara Huang",
  "description":"描述",
   "start_url":"/",
  "icons": [
    {
      "src": "./android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "./android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "./android-chrome-maskable-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "./android-chrome-maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "./apple-touch-icon-60x60.png",
      "sizes": "60x60",
      "type": "image/png"
    },
    {
      "src": "./apple-touch-icon-76x76.png",
      "sizes": "76x76",
      "type": "image/png"
    },
    {
      "src": "./apple-touch-icon-120x120.png",
      "sizes": "120x120",
      "type": "image/png"
    },
    {
      "src": "./apple-touch-icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "./apple-touch-icon-180x180.png",
      "sizes": "180x180",
      "type": "image/png"
    },
    {
      "src": "./apple-touch-icon.png",
      "sizes": "180x180",
      "type": "image/png"
    },
    {
      "src": "./favicon-16x16.png",
      "sizes": "16x16",
      "type": "image/png"
    },
    {
      "src": "./favicon-32x32.png",
      "sizes": "32x32",
      "type": "image/png"
    },
    {
      "src": "./msapplication-icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "./mstile-150x150.png",
      "sizes": "150x150",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

self.addEventListener("notificationclick", function (event) {
  console.log("開啟通知");
});

self.addEventListener("notificationclick", function (event) {
  const channel = new BroadcastChannel("sw-mensajes");
  if (event.action == "aceptar") {
    channel.postMessage({ title: "接受" });
  }

  if (event.action == "rechazar") {
    channel.postMessage({ title: "衰退" });
  }
});

npm run build

npm run dev

server {
 listen 80;
 server_name your_domain_or_IP;

 location / {
 root /var/www/mywebsite;
 index index.html;
 try_files $uri $uri/ =404;
 }
}

sudo ln -s /etc/nginx/sites-available/mywebsite /etc/nginx/sites-enabled/

sudo nginx -t

nginx: configuration file /etc/nginx/nginx.conf test is successful

sudo service nginx restart

server {
    listen 80;
    server_name your_domain_or_IP;
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;

    server_name your_domain_or_IP;

    ssl_certificate /etc/letsencrypt/live/your_domain_or_IP/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/your_domain_or_IP/privkey.pem;

    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_prefer_server_ciphers on;
    ssl_ciphers "EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH";

    location / {
        root /var/www/mywebsite;
        index index.html;
        try_files $uri $uri/ =404;
    }

    location ~* \\.(jpg|jpeg|png|gif|ico|css|js|pdf)$ {
        expires 30d;
    }

    gzip on;
    gzip_vary on;
    gzip_min_length 10240;
    gzip_proxied expired no-cache no-store private auth;
    gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml;
    gzip_disable "MSIE [1-6]\\.";
}

http {
    upstream myapp {
        server app1.example.com;
        server app2.example.com;
    }
    ...
}

server {
    listen 80;

    location / {
        proxy_pass <http://myapp>;
    }
}

# 使用官方的 Nginx 镜像
FROM nginx:latest

# 删除 Nginx 默认的静态资源
RUN rm -rf /usr/share/nginx/html/*

# 将你的静态资源复制到 Nginx 的静态资源目录下
COPY ./dist /usr/share/nginx/html

# 暴露 80 端口
EXPOSE 80

# 启动 Nginx
CMD ["nginx", "-g", "daemon off;"]

docker build -t my-frontend-app .

docker run -p 80:80 -d my-frontend-app

docker service create --name my-frontend-app --publish 80:80 --replicas 3 my-frontend-app

apiVersion: apps/v1
kind: Deployment
metadata:
  name: my-frontend-app
spec:
  replicas: 3
  selector:
    matchLabels:
      app: my-frontend-app
  template:
    metadata:
      labels:
        app: my-frontend-app
    spec:
      containers:
      - name: my-frontend-app
        image: my-frontend-app
        ports:
        - containerPort: 80

---

apiVersion: v1
kind: Service
metadata:
  name: my-frontend-app
spec:
  type: LoadBalancer
  ports:
  - port: 80
  selector:
    app: my-frontend-app

npm install http-server --save

module.exports = {
 apps: [
 {
    name: 'frontend',
    script: 'node_modules/http-server/bin/http-server',
    args: './dist -p 8080', // 這裡的 ./dist 是你的前端頁面的路徑，-p 8080 是你要監聽的端口
    instances: 'max',
    exec_mode: 'cluster',
    watch: true, // 如果你希望在檔案改變時自動重新啟動伺服器，可以設定 watch 為 true
    env: {
    NODE_ENV: 'production',
 },
 },
 ],
};

pm2 start ecosystem.config.js

fetch(url, options)
    .then(response => response.json())
    .then(data => {
        // 处理返回的数据
    })
.catch(error => {
    // 处理请求错误
});

export default {
  // GET請求
  get(url, params = {}) {
    if (params) {
        //
      url += '?' + Object.keys(params).map(key => `${key}=${params[key]}`).join('&');
    }
    return fetch(url)
      .then(response => response.json())
      .catch(error => {
        console.error('Request failed:', error);
        throw new Error(error);
      });
  },
  
  // POST請求
  post(url, data) {
    return fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    })
      .then(response => response.json())
      .catch(error => {
        console.error('Request failed:', error);
        throw new Error(error);
      });
  },
  
  // PUT請求
  put(url, data) {
    return fetch(url, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    })
      .then(response => response.json())
      .catch(error => {
        console.error('Request failed:', error);
        throw new Error(error);
      });
  },
  
  // DELETE請求
  delete(url) {
    return fetch(url, {
      method: 'DELETE',
    })
      .then(response => response.json())
      .catch(error => {
        console.error('Request failed:', error);
        throw new Error(error);
      });
  },
};

<template>
  <div>
    <!-- 展示数据 -->
  </div>
</template>

<script>
import request from '@/api/request.js';

export default {
  name: 'ExampleComponent',
  data() {
    return {
      data: [],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
        //
      request.get('/api/data')
        .then(response => {
          this.data = response;
        })
        .catch(error => {
          console.error('error);
        });
    },
    postData() {
      const data = {
        // 提交的数据
      };
      request.post('/api/data', data)
        .then(response => {
          // 处理返回结果
        })
        .catch(error => {
          console.error(error);
        });
    },
   
  },
};
</script>

import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'

describe('HelloWorld', () =>
{
    //1+1 應該是2
    it('1 + 1 should be 2', () => {
        expect(1 + 1).toBe(2)
    })
    //正確渲染
    it('正確渲染', () => {
        const wrapper = mount(HelloWorld, { props: { msg: 'Hello Vitest' } })
        expect(wrapper.text()).toContain('Hello Vitest')
    })
    //在此測試檔案中使用 jsdom
    it('在此測試檔案中使用 jsdom', () => {
        const element = document.createElement('div')
        element.innerHTML = '<p>Hello, HTML!</p>'
        expect(element.innerHTML).toBe('<p>Hello, HTML!</p>')
    })
})

import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import Nav from '../Nav.vue'

describe('Nav.vue gets the following array from the parent element frontLayout.vue', () =>
{ 
    const navLists = [
        { id_set: '001', title: '出勤打卡', href: '/' },
        { id_set: '002', title: '出勤設定', href: '/set_check' },
        { id_set: '003', title: '出勤列表', href: '/work_check_lists' },
        { id_set:'004',  title:'出勤行事曆', href:'/work_calendar'}
    ]
    const pageNameActive = '001';
    const wrapper = mount(Nav, {
        props: {
            navLists: navLists,
            pageNameActive:pageNameActive
        }
    })
    
    it('Is navLists data correctly rendering information? ', () => {
        const items = wrapper.findAll('li');
        expect(items.length).toBe(4);
        expect(items[0].text()).toBe('出勤打卡');
        expect(items[1].text()).toBe('出勤設定');
        expect(items[2].text()).toBe('出勤列表');
        expect(items[3].text()).toBe('出勤行事曆');
      
    });
    it('pageNameActive is rendered when the initial value is passed', () => { 
         expect(pageNameActive).toMatch(pageNameActive);
    })

    it('Emits the event of the current data when clicked',  () =>
    { 
         const items = wrapper.findAll('li');
        const button = wrapper.find('li');
        button.trigger('click');
        expect(pageNameActive).toMatch(items[0].id_set);
        expect(pageNameActive).toMatch(items[1].id_set)
        expect(pageNameActive).toMatch(items[2].id_set)
        expect(pageNameActive).toMatch(items[3].id_set)
        expect(button.find('li.isActive'));
    })
    //emitted ,toHaveProperty 點擊時取出當筆數據的事件
    it('Event to retrieve the current data when clicked', async () =>
    {
        await wrapper.get('[data-test="button"]').trigger('click')
        expect(wrapper.emitted()).toHaveProperty('sendMenuClickActive')
    })
})

import { describe, it} from 'vitest'
import { mount } from "@vue/test-utils"

describe('登入元件', () => {
    // Happy Path
    it('輸入正確帳號密碼，應登入到ＯＯ頁面', () => {
        // ...
    })
    // Sad Path
    it('只輸入帳號，應該顯示請輸入密碼', () => {
        // ...
    })
    it('只輸入密碼，應該顯示請輸入帳號', () => {
        // ...
    })
    it('輸入錯誤帳號密碼，應該顯示登入資訊錯誤', () => {
        // ...
    })
})

describe('父層情境', () => {
  describe('基於父層情境的情境一', () => {
    it('測試案例', () => {
        // ...
    })
  })
  describe('基於父層情境的情境二', () => {
    it('測試案例', () => {
        // ...
    })
    it('出現提示寄件者姓名與電話將直接註冊成會員', () => {
        // ...
    })
  })
})

describe.only('測試情境 1', () => { /* */ })
describe('測試情境 2', () => { /* */ }) // skipped
describe('測試情境 3', () => { /* */ }) // skipped

describe('測試情境 1', () => {
  it.only('測試案例', () => { /* */ })
  it('測試案例', () => { /* */ }) // skipped
})

describe('測試情境 2', () => {
  it.only('測試案例', () => { /* */ })
  it('測試案例', () => { /* */ }) // skipped
})

describe('測試情境 3', () => { /* */ }) // skipped

describe.skip('測試情境 1', () => {
  it('測試案例', () => { /* */ }) skipped
  it('測試案例', () => { /* */ }) // skipped
})

describe('測試情境 2', () => {
  it('測試案例', () => { /* */ })
  it.skip('測試案例', () => { /* */ }) // skipped
})

it.fails(`'1' + '1' should not to be '11'`, () => {
  const add = (x, y) => Number(x) + Number(y)
  expect(add('1', '1')).toBe('11')
})

it(`'1' + '1' should not to be '11'`, () => {
  const add = (x, y) => Number(x) + Number(y)
  expect(add('1', '1')).not.toBe('11')
})

beforeEach(() => {
    // 針對測試案例重新初始化
    initTestEnv()
})

const history = []
describe('父層情境', () => {
  beforeAll(() => {
    history.push('beforeAll - 父層情境')
  })
  beforeEach(() => {
    history.push('beforeEach - 父層情境')
  })
  afterAll(() => {
    history.push('afterAll - 父層情境')
  })
  afterEach(() => {
    history.push('afterEach - 父層情境')
  })
  describe('子層情境 A', () => {
    beforeAll(() => {
      history.push('beforeAll - 子層情境 A')
    })
    beforeEach(() => {
      history.push('beforeEach - 子層情境 A')
    })
    afterAll(() => {
      history.push('afterAll - 子層情境 A')
    })
    afterEach(() => {
      history.push('afterEach - 子層情境 A')
    })
    it('案例 1', () => {
      history.push('子層情境 A 案例 1')
    })
    it('案例 2', () => {
      history.push('子層情境 A 案例 2')
    })
  })
  describe('子層情境 B', () => {
    beforeAll(() => {
      history.push('beforeAll - 子層情境 B')
    })
    beforeEach(() => {
      history.push('beforeEach - 子層情境 B')
    })
    afterAll(() => {
      history.push('afterAll - 子層情境 B')
    })
    afterEach(() => {
      history.push('afterEach - 子層情境 B')
    })
    it('案例 1', () => {
      history.push('子層情境 B 案例 1')
    })
    it('案例 2', () => {
      history.push('子層情境 B 案例 2')
    })
  })
})

--- 進入測試程式碼本身的 Context
--- 進入父層情境的 Context
beforeAll - 父層情境
--- 進入子層情境 A 的 Context
beforeAll - 子層情境 A
beforeEach - 父層情境
beforeEach - 子層情境 A
子層情境 A 案例 1 // 執行 情境 A 案例 1 的時間點
afterEach - 子層情境 A
afterEach - 父層情境
beforeEach - 父層情境
beforeEach - 子層情境 A
子層情境 A 案例 2 // 執行 情境 A 案例 2 的時間點
afterEach - 子層情境 A
afterEach - 父層情境
afterAll - 子層情境 A
--- 離開子層情境 A 的 Context

--- 進入子層情境 B 的 Context
beforeAll - 子層情境 B
beforeEach - 父層情境
beforeEach - 子層情境 B
子層情境 B 案例 1 // 執行 情境 B 案例 1 的時間點
afterEach - 子層情境 B
afterEach - 父層情境
beforeEach - 父層情境
beforeEach - 子層情境 B
子層情境 B 案例 2 // 執行 情境 B 案例 2 的時間點
afterEach - 子層情境 B
afterEach - 父層情境
afterAll - 子層情境 B
--- 離開子層情境 B 的 Context
afterAll - 父層情境
--- 離開父層情境的 Context
--- 離開測試程式碼本身的 Context

describe('', () => {
    it('', () => {
        expect().toBe()
        // 在這裡做清除
        resetTestingEnv()
    })
})

describe('', () => {
    it('', () => {
        expect().toBe() // AssertionError，這個測試案例就停在這了
        resetTestingEnv() 
    })
    it('', () => {
        // 在沒有經過 `resetTestingEnv()` 下進行測試
    })
    it('', () => {
        // 在沒有經過 `resetTestingEnv()` 下進行測試
    })
    it('', () => {
        // 在沒有經過 `resetTestingEnv()` 下進行測試
    })
    it('', () => {
        // 在沒有經過 `resetTestingEnv()` 下進行測試
    })
})

describe('', () => {
    beforeEach('', () => {
        setupTestingEnv()
    })
    afterEach('', () => {
        resetTestingEnv() 
    })
    it('', () => {})
    it('', () => {})
    it('', () => {})
    it('', () => {})
    it('', () => {})
})

npm create vite-extra@latest 專案名稱

yarn create vite-extra 專案名稱

pnpm create vite-extra 專案名稱

deno run -A npm:create-vite-extra

├── node_modules // 安裝的所有套件
├── package.json //整個專案的設定檔
├── package-lock.json //整個專案的設定檔
├── public
│   └── favicon.ico
├── env 環境變數資料夾
│   └── .env.development 開發中環境變數
│   └── .env.production 正式環境變數
│   └── .env.staging 測試環境變數
│
├── README.md
├── src
│   ├── App.vue
│   ├── entry-client.ts //客戶端
│   ├── entry-server.ts//伺服器
│   ├── assets //放靜態資源
│   ├── components //子元件
│   │──layouts //佈局  
├── main.ts //進入點
│   ├── router//路由
│   │   └── router.ts //路由
│   ├── stores//Pinina 狀態管理庫
│   │
│   └── views
│   └── type //屬性設定
│        ├── engineering.ts
│   └── filter //過濾
│
└── vite.config.js // Vite 的設定檔

import { createSSRApp } from 'vue'
import App from './App.vue'

// SSR requires a fresh app instance per request, therefore we export a function
//每個請求都需要一個新的應用程式實例，因此我們匯出一個函數
// that creates a fresh app instance. If using Vuex, we'd also be creating a
// fresh store here.

export function createApp() {
  const app = createSSRApp(App)
  return { app }
}

"scripts": {
  "build:client": "vite build --ssrManifest --outDir dist/client",
  "build:server": "vite build --ssr src/entry-server.ts --outDir dist/server",
}

npm run build:client ＝>dist/client會多出這個資料夾
npm run build:server =>dist/server"會多出這個資料夾