feat(vue): add wrapper e2e test app

ovh · Jul 29, 2024 · e3054e8 · e3054e8
1 parent fb2fd24
commit e3054e8
Show file tree

Hide file tree

Showing 19 changed files with 2,459 additions and 223 deletions.
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "packages/ods/src/components/!(dist|loader)*",
     "packages/ods/style",
     "packages/ods/vue",
+    "packages/ods/vue/tests/*",
     "packages/storybook",
     "packages/themes"
   ],

diff --git a/packages/ods/vue/.gitignore b/packages/ods/vue/.gitignore
@@ -1,2 +1,3 @@
 dist/
 src/
+!tests/_app/src
diff --git a/packages/ods/vue/package.json b/packages/ods/vue/package.json
@@ -11,7 +11,9 @@
     "clean": "rimraf dist",
     "compile": "npm run compile:esm && npm run compile:cjs",
     "compile:esm": "tsc -p tsconfig.json",
-    "compile:cjs": "tsc -p tsconfig.cjs.json"
+    "compile:cjs": "tsc -p tsconfig.cjs.json",
+    "test:e2e": "concurrently -s first -k \"npm run start --prefix tests/_app\" \"jest -c tests/jest.config.js\"",
+    "test:e2e:ci": "npm run test:e2e"
   },
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

diff --git a/packages/ods/vue/tests/_app/babel.config.js b/packages/ods/vue/tests/_app/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}
diff --git a/packages/ods/vue/tests/_app/package.json b/packages/ods/vue/tests/_app/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "ods-components-vue-test-app",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "start": "vue-cli-service serve"
+  },
+  "dependencies": {
+    "core-js": "3.36.0",
+    "vue": "3.4.21",
+    "vue-router": "4.3.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "5.0.8",
+    "@vue/cli-plugin-router": "5.0.8",
+    "@vue/cli-plugin-typescript": "5.0.8",
+    "@vue/cli-service": "5.0.8"
+  }
+}
diff --git a/packages/ods/vue/tests/_app/public/favicon.ico b/packages/ods/vue/tests/_app/public/favicon.ico
diff --git a/packages/ods/vue/tests/_app/public/index.html b/packages/ods/vue/tests/_app/public/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+  </body>
+</html>
diff --git a/packages/ods/vue/tests/_app/src/App.vue b/packages/ods/vue/tests/_app/src/App.vue
@@ -0,0 +1,6 @@
+<template>
+  <router-view />
+</template>
+
+<script setup>
+</script>
diff --git a/packages/ods/vue/tests/_app/src/main.ts b/packages/ods/vue/tests/_app/src/main.ts
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import router from './router';
+
+createApp(App).use(router).mount('#app');
diff --git a/packages/ods/vue/tests/_app/src/router/index.ts b/packages/ods/vue/tests/_app/src/router/index.ts
@@ -0,0 +1,24 @@
+import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
+import SpinnerView from '../views/Spinner.vue';
+import TextView from '../views/Text.vue';
+
+// TODO generate
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/ods-spinner',
+    name: 'ods-spinner',
+    component: SpinnerView,
+  },
+  {
+    path: '/ods-text',
+    name: 'ods-text',
+    component: TextView,
+  },
+];
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes,
+});
+
+export default router;
diff --git a/packages/ods/vue/tests/_app/src/views/Spinner.vue b/packages/ods/vue/tests/_app/src/views/Spinner.vue
@@ -0,0 +1,15 @@
+<template>
+  <OdsSpinner />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { OdsSpinner } from '@ovhcloud/ods-components/vue';
+
+export default defineComponent({
+  name: 'App',
+  components: {
+    OdsSpinner,
+  },
+});
+</script>
diff --git a/packages/ods/vue/tests/_app/src/views/Text.vue b/packages/ods/vue/tests/_app/src/views/Text.vue
@@ -0,0 +1,15 @@
+<template>
+  <OdsText>Ods Text Vue</OdsText>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { OdsText } from '@ovhcloud/ods-components/vue';
+
+export default defineComponent({
+  name: 'App',
+  components: {
+    OdsText,
+  },
+});
+</script>
diff --git a/packages/ods/vue/tests/_app/tsconfig.json b/packages/ods/vue/tests/_app/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "extends": "../../../tsconfig.vue.json",
+  "compilerOptions": {
+    "lib": ["ES2020", "DOM"],
+    "module": "ESNext",
+    "paths": {
+      "ods-components-react": ["../../src/components/stencil-generated"]
+    }
+  },
+  "include": ["src"]
+}
diff --git a/packages/ods/vue/tests/_app/vue.config.js b/packages/ods/vue/tests/_app/vue.config.js
@@ -0,0 +1,8 @@
+const { defineConfig } = require('@vue/cli-service');
+
+module.exports = defineConfig({
+  devServer: {
+    port: 3000,
+  },
+  transpileDependencies: true,
+});
diff --git a/packages/ods/vue/tests/e2e/ods-spinner.e2e.ts b/packages/ods/vue/tests/e2e/ods-spinner.e2e.ts
@@ -0,0 +1,23 @@
+import type { Page } from 'puppeteer';
+import { goToComponentPage, setupBrowser } from '../setup';
+
+describe('ods-spinner vue', () => {
+  const setup = setupBrowser();
+  let page: Page;
+
+  beforeAll(async () => {
+    page = setup().page;
+  });
+
+  beforeEach(async () => {
+    await goToComponentPage(page, 'ods-spinner');
+  });
+
+  it('render the component correctly', async () => {
+    const elem = await page.$('ods-spinner');
+    const boundingBox = await elem?.boundingBox();
+
+    expect(boundingBox?.height).toBeGreaterThan(0);
+    expect(boundingBox?.width).toBeGreaterThan(0);
+  });
+});
diff --git a/packages/ods/vue/tests/e2e/ods-text.e2e.ts b/packages/ods/vue/tests/e2e/ods-text.e2e.ts
@@ -0,0 +1,21 @@
+import type { Page } from 'puppeteer';
+import { goToComponentPage, setupBrowser } from '../setup';
+
+describe('ods-text vue', () => {
+  const setup = setupBrowser();
+  let page: Page;
+
+  beforeAll(async () => {
+    page = setup().page;
+  });
+
+  beforeEach(async () => {
+    await goToComponentPage(page, 'ods-text');
+  });
+
+  it('render the component correctly', async () => {
+    const text = await page.$eval('ods-text', (e) => e.textContent);
+
+    expect(text).toBe('Ods Text Vue');
+  });
+});
diff --git a/packages/ods/vue/tests/jest.config.js b/packages/ods/vue/tests/jest.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  preset: 'jest-puppeteer',
+  testRegex: "./*\\e2e\\.ts$",
+  transform: {
+    '\\.(ts|tsx)$': 'ts-jest',
+  },
+};
diff --git a/packages/ods/vue/tests/setup.ts b/packages/ods/vue/tests/setup.ts
@@ -0,0 +1,30 @@
+import puppeteer, { Browser, Page } from 'puppeteer';
+
+async function goToComponentPage(page, componentName) {
+  await page.goto(`http://localhost:3000/#/${componentName}`);
+  await page.waitForSelector(componentName);
+}
+
+function setupBrowser() {
+  let browser: Browser;
+  let page: Page;
+
+  beforeAll(async () => {
+    browser = await puppeteer.launch({
+      args: ['--no-sandbox', '--disable-setuid-sandbox'],
+      headless: true
+    });
+    page = await browser.newPage();
+  });
+
+  afterAll(async () => {
+    await browser.close();
+  });
+
+  return () => ({ browser, page });
+}
+
+export {
+  goToComponentPage,
+  setupBrowser,
+};