refactor(tests): use composable tester cmp

tests/cypress/component/4-composables/useNodesData.cy.ts

@@ -6,87 +6,109 @@ import { getElements } from '../../utils'
 const { nodes } = getElements()
 
 describe('Composable: `useNodesData`', () => {
-  describe('returns node data for a single node', () => {
+  it('should return node data', () => {
-    let data: any = null
-
     const node = nodes[0]
 
-    beforeEach(() => {
+    const ComposableTester = defineComponent({
+      emits: ['change'],
+      setup(_, { emit }) {
+        const data = useNodesData(node.id)
+
+        emit('change', data.value)
+
+        return 'Composable Tester'
+      },
+    })
+
+    const onChangeSpy = cy.spy().as('onChangeSpy')
+
     cy.vueFlow(
       {
         nodes: nodes.map((node) => ({ ...node, type: 'custom' })),
       },
       {},
       {
-          'node-custom': defineComponent({
+        default: () =>
-            setup() {
+          h(ComposableTester, {
-              data = useNodesData(nodes[0].id)
+            onChange: onChangeSpy,
-
+            nodes: node.id,
-              return () => h('div', 'Custom Node')
-            },
           }),
       },
     )
+
+    cy.get('@onChangeSpy').should('have.been.calledWith', node.data)
   })
 
-    it('should return the node data', () => {
+  it('should return nodes data', () => {
-      expect(data.value).to.deep.equal(node.data)
+    const onChangeSpy = cy.spy().as('onChangeSpy')
-    })
-  })
-
-  describe('returns node data for multiple nodes', () => {
-    let data: any = null
 
     const nodeIds = nodes.map((node) => node.id)
 
-    beforeEach(() => {
+    const ComposableTester = defineComponent({
+      emits: ['change'],
+      setup(_, { emit }) {
+        const data = useNodesData(nodeIds)
+
+        emit('change', data.value)
+
+        return 'Composable Tester'
+      },
+    })
+
     cy.vueFlow(
       {
         nodes: nodes.map((node) => ({ ...node, type: 'custom' })),
       },
       {},
       {
-          'node-custom': defineComponent({
+        default: () =>
-            setup() {
+          h(ComposableTester, {
-              data = useNodesData(nodeIds)
+            onChange: onChangeSpy,
-
+            nodes: nodeIds,
-              return () => h('div', 'Custom Node')
-            },
           }),
       },
     )
+
+    cy.get('@onChangeSpy').should(
+      'have.been.calledWith',
+      nodes.map((node) => node.data),
+    )
   })
 
-    it('should return the node data', () => {
+  it('should return the node data with typeguard', () => {
-      expect(data.value).to.deep.equal(nodes.map((node) => node.data))
+    const onChangeSpy = cy.spy().as('onChangeSpy')
-    })
-  })
-
-  describe('returns node data for multiple nodes with a guard', () => {
-    let data: any = null
 
     const nodeIds = nodes.map((node) => node.id)
 
-    beforeEach(() => {
+    const ComposableTester = defineComponent<{ guard?: (node: Node) => node is Node }>({
+      emits: ['change'],
+      setup(props, { emit }) {
+        const data = useNodesData(nodeIds, props.guard || ((node): node is Node => true))
+
+        emit('change', data.value)
+
+        return 'Composable Tester'
+      },
+    })
+
     cy.vueFlow(
       {
         nodes: nodes.map((node) => ({ ...node, type: 'custom' })),
       },
       {},
       {
-          'node-custom': defineComponent({
+        default: () =>
-            setup() {
+          h(ComposableTester, {
-              data = useNodesData(nodeIds, (node): node is Node<{ randomData: number }> => node.type === 'custom')
+            onChange: onChangeSpy,
-
+            nodes: nodeIds,
-              return () => h('div', 'Custom Node')
+            guard: (node): node is Node<{ randomData: number }> => node.type === 'custom',
-            },
           }),
       },
     )
-    })
 
-    it('should return the node data', () => {
+    cy.get('@onChangeSpy').should(
-      expect(data.value).to.deep.equal(nodes.map((node) => node.data))
+      'have.been.calledWith',
-    })
+      nodes.map((node) => node.data),
+    )
   })
 })