fix(vue): wait for server start before running tests

ovh · Jul 29, 2024 · 25232e9 · 25232e9
1 parent a886d34
commit 25232e9
Show file tree

Hide file tree

Showing 18 changed files with 284 additions and 2,131 deletions.
diff --git a/packages/ods/package.json b/packages/ods/package.json
@@ -45,6 +45,7 @@
     "ts-jest": "29.1.2",
     "typedoc": "0.25.8",
     "typedoc-plugin-markdown": "3.17.1",
-    "typescript": "5.3.3"
+    "typescript": "5.3.3",
+    "wait-on": "7.2.0"
   }
 }
diff --git a/packages/ods/react/package.json b/packages/ods/react/package.json
@@ -12,7 +12,7 @@
     "compile": "npm run compile:esm && npm run compile:cjs",
     "compile:esm": "tsc -p tsconfig.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": "concurrently -s first -k \"npm run start --prefix tests/_app\" \"wait-on http://localhost:3000 && jest -c tests/jest.config.js\"",
     "test:e2e:ci": "npm run test:e2e"
   },
   "main": "dist/cjs/index.js",

diff --git a/packages/ods/vue/package.json b/packages/ods/vue/package.json
@@ -12,7 +12,7 @@
     "compile": "npm run compile:esm && npm run compile:cjs",
     "compile:esm": "tsc -p tsconfig.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": "concurrently -s first -k \"npm run start --prefix tests/_app\" \"wait-on http://localhost:3000 && jest -c tests/jest.config.js\"",
     "test:e2e:ci": "npm run test:e2e"
   },
   "main": "dist/cjs/index.js",

diff --git a/packages/ods/vue/tests/_app/babel.config.js b/packages/ods/vue/tests/_app/babel.config.js
diff --git a/packages/ods/vue/tests/_app/index.html b/packages/ods/vue/tests/_app/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Vue Test App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/packages/ods/vue/tests/_app/package.json b/packages/ods/vue/tests/_app/package.json
@@ -2,18 +2,18 @@
   "name": "ods-components-vue-test-app",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
-    "start": "vue-cli-service serve"
+    "start": "vite"
   },
   "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"
+    "@vitejs/plugin-vue": "5.0.4",
+    "vite": "5.0.10",
+    "vite-tsconfig-paths": "4.2.3"
   }
 }
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
diff --git a/packages/ods/vue/tests/_app/vite.config.ts b/packages/ods/vue/tests/_app/vite.config.ts
@@ -0,0 +1,10 @@
+import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vite'
+import tsconfigPaths from 'vite-tsconfig-paths'
+
+export default defineConfig({
+  plugins: [vue(), tsconfigPaths({ root: '.' })],
+  server: {
+    port: 3000,
+  },
+})
diff --git a/packages/ods/vue/tests/_app/vue.config.js b/packages/ods/vue/tests/_app/vue.config.js
diff --git a/packages/storybook/stories/components/spinner/1_specifications.stories.mdx b/packages/storybook/stories/components/spinner/1_specifications.stories.mdx
@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/addon-docs';
 import SpecificationsSpinner from '@ovhcloud/ods-components/src/components/spinner/documentation/specifications/specifications-spinner.mdx';
 
-<Meta title="ODS Components/User feedback/Spinner [atom]/Specifications" />
+<Meta title="ODS Components/User feedback/Spinner Specifications" />
 
 # Spinner - Design Specifications
 ----

diff --git a/packages/storybook/stories/components/spinner/2_usage.stories.mdx b/packages/storybook/stories/components/spinner/2_usage.stories.mdx
@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/addon-docs';
 import Usage from '@ovhcloud/ods-components/src/components/spinner/documentation/usage-guidelines/usage.mdx';
 
-<Meta title="ODS Components/User feedback/Spinner [atom]/Usage Guidelines" />
+<Meta title="ODS Components/User feedback/Spinner Usage Guidelines" />
 
 # Spinner - Usage Guidelines
 ----

diff --git a/packages/storybook/stories/components/spinner/3_demo.stories.ts b/packages/storybook/stories/components/spinner/3_demo.stories.ts
@@ -5,7 +5,7 @@ import { html } from 'lit-html';
 defineCustomElement();
 
 export default {
-  title: 'ODS Components/User feedback/Spinner [atom]/Demo',
+  title: 'ODS Components/User feedback/Spinner Demo',
   render: (args) => html`
     <ods-spinner color="${args.color}"
                  size="${args.size}">

diff --git a/scripts/component-generator/plopfile.js b/scripts/component-generator/plopfile.js
@@ -28,32 +28,29 @@ module.exports = function (plop) {
 
   plop.setGenerator('component', {
     description: 'New component',
-    prompts: [{
+    prompts: [
       // TODO put back if we finally want to expose namespaced components
-      // type: 'list',
-      // name: 'prefix',
-      // message: 'Which kind of component do you want to create?',
-      // choices: [
-      //   { name: 'ODS component (<ods-___>)', value: '' },
-      //   { name: 'OVH component (<ods-ovh-___>)', value: 'ovh' },
-      // ],
-      // TODO do we keep the atomic information?
-      // }, {
+      // {
       //   type: 'list',
-      //   name: 'level',
-      //   message: 'Which atomic stage your component is?',
-      //   choices: ['quark', 'atom', 'molecule', 'meta', 'organism', 'layout', 'meta'],
-      // }, {
-      type: 'input',
-      name: 'name',
-      message: 'Type the component name using kebab-case, without any "ods-" prefix (ex: text, search-bar, ...):',
-      validate: function (value) {
-        if (/.+/.test(value)) {
-          return true;
-        }
-        return 'Component name is required';
+      //   name: 'prefix',
+      //   message: 'Which kind of component do you want to create?',
+      //   choices: [
+      //     { name: 'ODS component (<ods-___>)', value: '' },
+      //     { name: 'OVH component (<ods-ovh-___>)', value: 'ovh' },
+      //   ],
+      // },
+      {
+        type: 'input',
+        name: 'name',
+        message: 'Type the component name using kebab-case, without any "ods-" prefix (ex: text, search-bar, ...):',
+        validate: function (value) {
+          if (/.+/.test(value)) {
+            return true;
+          }
+          return 'Component name is required';
+        },
       },
-    }],
+    ],
     actions: [
       // --- Add the components files
       {

diff --git a/scripts/component-generator/templates/storybook/1_specifications.stories.mdx.hbs b/scripts/component-generator/templates/storybook/1_specifications.stories.mdx.hbs
@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/addon-docs';
 import Specifications{{> ComponentName }} from '@ovhcloud/ods-{{> component-dir}}/src/components/{{ name }}/documentation/specifications/specifications-{{> component-name }}.mdx';
 
-<Meta title="ODS Components/TODO/{{> ComponentName }} [{{ level }}]/Specifications" />
+<Meta title="ODS Components/TODO/{{> ComponentName }} Specifications" />
 
 # {{> ComponentName }} - Design Specifications
 ----

diff --git a/scripts/component-generator/templates/storybook/2_usage.stories.mdx.hbs b/scripts/component-generator/templates/storybook/2_usage.stories.mdx.hbs
@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/addon-docs';
 import Usage from '@ovhcloud/ods-{{> component-dir}}/src/components/{{ name }}/documentation/usage-guidelines/usage.mdx';
 
-<Meta title="ODS Components/TODO/{{> ComponentName }} [{{ level }}]/Usage Guidelines" />
+<Meta title="ODS Components/TODO/{{> ComponentName }} Usage Guidelines" />
 
 # {{> ComponentName }} - Usage Guidelines
 ----

diff --git a/scripts/component-generator/templates/storybook/3_demo.stories.ts.hbs b/scripts/component-generator/templates/storybook/3_demo.stories.ts.hbs
@@ -4,7 +4,7 @@ import { html } from 'lit-html';
 defineCustomElement();
 
 export default {
-  title: 'ODS Components/TODO/{{> ComponentName }} [{{ level }}]/Demo',
+  title: 'ODS Components/TODO/{{> ComponentName }} Demo',
   render: (args) => html`
     <ods-{{> component-name }} dummy="${args.dummy}">
     </ods-{{> component-name }}>