tests

Stationeers-ic · May 1, 2024 · 0dbd314 · 0dbd314
1 parent 0ecb467
commit 0dbd314
Show file tree

Hide file tree

Showing 52 changed files with 335 additions and 131 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/cypress.config.ts b/cypress.config.ts
@@ -0,0 +1,16 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+
+  component: {
+    devServer: {
+      framework: "vue",
+      bundler: "vite",
+    },
+  },
+});
diff --git a/cypress/fixtures/example.json b/cypress/fixtures/example.json
@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }
diff --git a/cypress/support/component-index.html b/cypress/support/component-index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <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">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>
diff --git a/cypress/support/component.ts b/cypress/support/component.ts
@@ -0,0 +1,80 @@
+// ***********************************************************
+// This example support/component.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+import { mount } from 'cypress/vue'
+import router from "../../src/router";
+import PrimeVue from "primevue/config";
+import ConfirmationService from "primevue/confirmationservice";
+import ToastService from "primevue/toastservice";
+import DialogService from "primevue/dialogservice";
+import VueCodemirror from "vue-codemirror";
+import {setupI18n} from "../../src/i18n";
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount
+    }
+  }
+}
+const i18n = setupI18n({
+	legacy: false,
+	locale: "en", // set locale
+	fallbackLocale: "en", // set fallback locale
+})
+dayjs.extend(relativeTime)
+Cypress.Commands.add('mount', (component, options = {}) => {
+	// Setup options object
+	options.global = options.global || {}
+	options.global.plugins = options.global.plugins || []
+	// Add router plugin
+	options.global.plugins.push({
+		install(app) {
+			// @ts-ignore
+			window.dayjs = dayjs
+			app.use(i18n)
+			app.use(router)
+			app.use(PrimeVue, { ripple: true })
+			app.use(ConfirmationService)
+			app.use(ToastService)
+			app.use(DialogService)
+			app.use(VueCodemirror, {
+				// optional default global options
+				autofocus: true,
+				disabled: false,
+				indentWithTab: true,
+				tabSize: 2,
+				// ...
+			})
+		},
+	})
+
+	return mount(component, options)
+})
+// Example use:
+// cy.mount(MyComponent)
diff --git a/cypress/support/e2e.ts b/cypress/support/e2e.ts
@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
diff --git a/package.json b/package.json
@@ -10,8 +10,10 @@
     "download:lang": "bun ./tools/langUpdate.ts"
   },
   "dependencies": {
+    "@types/cypress": "^1.1.3",
     "@uiw/codemirror-theme-monokai": "^4.22.0",
     "codemirror-lang-ic10": "^0.3.6",
+    "cypress": "^13.8.1",
     "dayjs": "^1.11.11",
     "delay": "^6.0.0",
     "driver.js": "^1.3.1",
@@ -34,16 +36,16 @@
     "zod": "^3.23.5"
   },
   "devDependencies": {
+    "@babel/runtime": "^7.24.5",
     "@types/axios": "^0.14.0",
     "@types/bun": "^1.1.1",
-    "axios": "^1.6.8",
-    "@types/uuid": "^9.0.8",
-    "@babel/runtime": "^7.24.5",
     "@types/is-hotkey": "^0.1.10",
     "@types/pako": "^2.0.3",
+    "@types/uuid": "^9.0.8",
     "@vitejs/plugin-vue": "^5.0.4",
+    "axios": "^1.6.8",
     "typescript": "^5.4.5",
-    "vite": "^5.2.10",
+    "vite": "^4.0.0",
     "vue-tsc": "^2.0.16"
   }
 }
diff --git a/src/App.vue b/src/App.vue
@@ -2,11 +2,11 @@
 import Footer from "./components/Footer.vue"
 import Header from "./components/Header.vue"
 import SocialButtons from "./components/SocialButtons.vue"
-import { startupLoad, tmpSave } from "./core/Save.ts"
-import { useToast } from "primevue/usetoast"
-import { onBeforeUnmount, onMounted } from "vue"
+import {startupLoad, tmpSave} from "./core/Save.ts"
+import {useToast} from "primevue/usetoast"
+import {onBeforeUnmount, onMounted} from "vue"
 import ic10 from "./core/ic10.ts"
-import { useI18n } from "vue-i18n"
+import {useI18n} from "vue-i18n"
 
 const { t } = useI18n()
 

diff --git a/src/components/CodeMirror.cy.ts b/src/components/CodeMirror.cy.ts
@@ -0,0 +1,8 @@
+import CodeMirror from './CodeMirror.vue'
+
+describe('<CodeMirror />', () => {
+  it('renders', () => {
+    // see: https://on.cypress.io/mounting-vue
+    cy.mount(CodeMirror)
+  })
+})
diff --git a/src/components/CodeMirror.vue b/src/components/CodeMirror.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { codeStore } from "../store"
-import { Codemirror } from "vue-codemirror"
-import { createRuler, hoverOptions, ic10, ic10HoverTooltip, ic10Snippets, lineClassController, zeroLineNumbers } from "codemirror-lang-ic10"
+import {codeStore} from "../store"
+import {Codemirror} from "vue-codemirror"
+import {createRuler, hoverOptions, ic10, ic10HoverTooltip, ic10Snippets, lineClassController, zeroLineNumbers} from "codemirror-lang-ic10"
 import interpretator from "../core/ic10.ts"
-import { Device, Register } from "ic10/zodTypes"
-import { onBeforeUnmount, onMounted, watch } from "vue"
-import { monokai } from "@uiw/codemirror-theme-monokai"
-import { EditorView } from "codemirror"
+import {Device, Register} from "ic10/zodTypes"
+import {onBeforeUnmount, onMounted, watch} from "vue"
+import {monokai} from "@uiw/codemirror-theme-monokai"
+import {EditorView} from "codemirror"
 
 const line = new lineClassController("nextRunLine")
 

diff --git a/src/components/Control.vue b/src/components/Control.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import { ref, watch } from "vue"
+import {ref, watch} from "vue"
 import ToggleButton from "primevue/togglebutton"
 import InputGroup from "primevue/inputgroup"
 import Button from "primevue/button"
 import ic10 from "../core/ic10.ts"
-import { str as hash } from "crc-32"
-import { settingStore } from "../store"
+import {str as hash} from "crc-32"
+import {settingStore} from "../store"
 import AddDevice from "../ui/AddDevice.vue"
 import clipboard from "web-clipboard"
-import { emit } from "../core/Events.ts"
-import { MenuItem } from "primevue/menuitem"
-import { getShareLink } from "../core/Save.ts"
-import { useToast } from "primevue/usetoast"
-import { start } from "../core/Tour.ts"
-import { useI18n } from "vue-i18n"
+import {emit} from "../core/Events.ts"
+import {MenuItem} from "primevue/menuitem"
+import {getShareLink} from "../core/Save.ts"
+import {useToast} from "primevue/usetoast"
+import {start} from "../core/Tour.ts"
+import {useI18n} from "vue-i18n"
 
 const { t } = useI18n()
 const i18n = useI18n()

diff --git a/src/components/Devises.vue b/src/components/Devises.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import ic10 from "../core/ic10.ts"
-import { defineAsyncComponent, getCurrentInstance, onBeforeUnmount, onMounted, ref } from "vue"
+import {getCurrentInstance, onBeforeUnmount, onMounted, ref} from "vue"
 import DeviceCard from "../ui/devices/DeviceCard.vue"
-import { useDialog } from "primevue/usedialog"
+import {useDialog} from "primevue/usedialog"
 import DeviceCardPin from "../ui/devices/DeviceCardPin.vue"
 
 const devices = ref<Map<string, any>>(ic10.getEnv().getDevices())

diff --git a/src/components/Errors.vue b/src/components/Errors.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { Codemirror } from "vue-codemirror"
-import { monokai } from "@uiw/codemirror-theme-monokai"
-import { onBeforeUnmount, onMounted, ref } from "vue"
+import {Codemirror} from "vue-codemirror"
+import {monokai} from "@uiw/codemirror-theme-monokai"
+import {onBeforeUnmount, onMounted, ref} from "vue"
 import ic10 from "../core/ic10.ts"
-import { useToast } from "primevue/usetoast"
-import { Err } from "ic10"
+import {useToast} from "primevue/usetoast"
+import {Err} from "ic10"
 
-import { EditorView } from "codemirror"
-import { zeroLineNumbers } from "codemirror-lang-ic10"
+import {EditorView} from "codemirror"
+import {zeroLineNumbers} from "codemirror-lang-ic10"
 
 const test = ref<string>("")
 const toast = useToast()

diff --git a/src/components/Footer.cy.ts b/src/components/Footer.cy.ts
@@ -0,0 +1,8 @@
+import Footer from './Footer.vue'
+
+describe('<Footer />', () => {
+  it('renders', () => {
+    // see: https://on.cypress.io/mounting-vue
+    cy.mount(Footer)
+  })
+})
diff --git a/src/components/Header.cy.ts b/src/components/Header.cy.ts
@@ -0,0 +1,9 @@
+import Header from './Header.vue'
+
+describe('<Header />', () => {
+  it('renders', () => {
+
+    // see: https://on.cypress.io/mounting-vue
+    cy.mount(Header)
+  })
+})
diff --git a/src/components/Header.vue b/src/components/Header.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { MenuItem } from "primevue/menuitem"
-import { routes } from "../router.ts"
-import { onMounted } from "vue"
-import { useConfirm } from "primevue/useconfirm"
-import { useToast } from "primevue/usetoast"
-import { useI18n } from "vue-i18n"
-import LangSwither from "../ui/LangSwitcher.vue"
+import {MenuItem} from "primevue/menuitem"
+import {routes} from "../router.ts"
+import {onMounted} from "vue"
+import {useConfirm} from "primevue/useconfirm"
+import {useToast} from "primevue/usetoast"
+import {useI18n} from "vue-i18n"
+import LangSwitcher from "../ui/LangSwitcher.vue"
 
 const { t } = useI18n()
 const confirm = useConfirm()
@@ -76,7 +76,7 @@ const confirmReset = (event: any) => {
 		<template #end>
 			<div :class="$style.end">
 				<Button v-if="is1April()" severity="secondary" class="pulse" label="🤡" @click="toggle1April" />
-				<LangSwither :short="true" />
+				<LangSwitcher :short="true" />
 				<Button id="ResetAll" severity="danger" icon="pi pi-trash" v-tooltip.down="$t('headers.ResetAllData')" @click="confirmReset" />
 			</div>
 		</template>

diff --git a/src/components/Register.vue b/src/components/Register.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import ic10 from "../core/ic10.ts"
 import EnvInput from "../ui/EnvInput.vue"
-import { Register } from "ic10/zodTypes"
-import { z } from "zod"
+import {Register} from "ic10/zodTypes"
+import {z} from "zod"
 </script>
 
 <template>

diff --git a/src/components/SettingBar.vue b/src/components/SettingBar.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref } from "vue"
-import { getActiveSaveSlot, getScriptNames, removeFromBrowser, setActiveSaveSlot } from "../core/Save.ts"
-import { off, on } from "../core/Events.ts"
-import { useConfirm } from "primevue/useconfirm"
-import { useI18n } from "vue-i18n"
+import {onBeforeUnmount, onMounted, ref} from "vue"
+import {getActiveSaveSlot, getScriptNames, removeFromBrowser, setActiveSaveSlot} from "../core/Save.ts"
+import {off, on} from "../core/Events.ts"
+import {useConfirm} from "primevue/useconfirm"
+import {useI18n} from "vue-i18n"
 import LangSwither from "../ui/LangSwitcher.vue"
 
 const { t } = useI18n()