tests: add additional components tests

e2e/cypress/component/3-additional-components/background/App.vue

@@ -0,0 +1,9 @@
+<script setup>
+import { Background, VueFlow } from '@braks/vue-flow'
+</script>
+
+<template>
+  <VueFlow>
+    <Background />
+  </VueFlow>
+</template>

e2e/cypress/component/3-additional-components/background/background.cy.ts

@@ -0,0 +1,18 @@
+import App from './App.vue'
+
+describe('Render Background', () => {
+  beforeEach(() => {
+    cy.mount(App, {
+      attrs: {
+        style: {
+          width: '100vw',
+          height: '100vh',
+        },
+      },
+    })
+  })
+
+  it('renders background', () => {
+    cy.get('.vue-flow__background').should('exist')
+  })
+})

e2e/cypress/component/3-additional-components/controls/App.vue

@@ -0,0 +1,9 @@
+<script setup>
+import { Controls, VueFlow } from '@braks/vue-flow'
+</script>
+
+<template>
+  <VueFlow>
+    <Controls />
+  </VueFlow>
+</template>

e2e/cypress/component/3-additional-components/controls/controls.cy.ts

@@ -0,0 +1,18 @@
+import App from './App.vue'
+
+describe('Render Controls', () => {
+  beforeEach(() => {
+    cy.mount(App, {
+      attrs: {
+        style: {
+          width: '100vw',
+          height: '100vh',
+        },
+      },
+    })
+  })
+
+  it('renders controls', () => {
+    cy.get('.vue-flow__controls').should('exist')
+  })
+})

e2e/cypress/component/3-additional-components/minimap/App.vue

@@ -0,0 +1,20 @@
+<script setup>
+import { MiniMap, VueFlow } from '@braks/vue-flow'
+
+defineProps({
+  nodes: {
+    type: Array,
+    default: () => [],
+  },
+  edges: {
+    type: Array,
+    default: () => [],
+  },
+})
+</script>
+
+<template>
+  <VueFlow :nodes="nodes" :edges="edges">
+    <MiniMap />
+  </VueFlow>
+</template>

e2e/cypress/component/3-additional-components/minimap/minimap.cy.ts

@@ -0,0 +1,29 @@
+import { getElements } from '../../../utils'
+import App from './App.vue'
+
+const { nodes, edges } = getElements()
+
+describe('Render MiniMap', () => {
+  beforeEach(() => {
+    cy.mount(App, {
+      props: {
+        nodes,
+        edges,
+      },
+      attrs: {
+        style: {
+          width: '100vw',
+          height: '100vh',
+        },
+      },
+    })
+  })
+
+  it('renders minimap', () => {
+    cy.get('.vue-flow__minimap').should('exist')
+  })
+
+  it('renders minimap nodes', () => {
+    cy.get('.vue-flow__minimap-node').should('have.length', nodes.length)
+  })
+})

e2e/package.json

@@ -10,6 +10,7 @@
     "@braks/vue-flow": "workspace:*"
   },
   "devDependencies": {
-    "cypress": "^10.9.0"
+    "cypress": "^10.9.0",
+    "@vitejs/plugin-vue": "^2.3.4"
   }
 }

e2e/vite.config.ts

@@ -1,6 +1,8 @@
 import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
 
 export default defineConfig({
+  plugins: [vue({ reactivityTransform: true })],
   server: {
     fs: {
       strict: false,