test: enabled

Author: Akryum

packages/test-e2e-composable-vue3/src/components/Disabled.vue

@@ -0,0 +1,67 @@
+<script lang="ts">
+import gql from 'graphql-tag'
+import { useQuery } from '@vue/apollo-composable'
+import { defineComponent, computed, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
+    const selectedId = ref<string | null>(null)
+
+    const { result, loading } = useQuery(gql`
+      query channel ($id: ID!) {
+        channel (id: $id) {
+          id
+          label
+          messages {
+            id
+          }
+        }
+      }
+    `, () => ({
+      id: selectedId.value,
+    }), () => ({
+      fetchPolicy: 'no-cache',
+      enabled: !!selectedId.value,
+    }))
+    const channel = computed(() => result.value?.channel)
+
+    function load () {
+      selectedId.value = 'general'
+    }
+
+    return {
+      load,
+      loading,
+      channel,
+    }
+  },
+})
+</script>
+
+<template>
+  <div class="m-6">
+    <div>
+      <button
+        class="bg-green-200 rounded-lg p-4"
+        @click="load()"
+      >
+        Load channel
+      </button>
+    </div>
+
+    <div
+      v-if="loading"
+      class="loading"
+    >
+      Loading...
+    </div>
+
+    <div
+      v-if="channel"
+      data-test-id="data"
+    >
+      <div>Loaded channel: {{ channel.label }}</div>
+      <div>Messages: {{ channel.messages.length }}</div>
+    </div>
+  </div>
+</template>

packages/test-e2e-composable-vue3/src/router.ts

@@ -34,5 +34,9 @@ export const router = createRouter({
       path: '/partial-error',
       component: () => import('./components/PartialError.vue'),
     },
+    {
+      path: '/disabled',
+      component: () => import('./components/Disabled.vue'),
+    },
   ],
 })

packages/test-e2e-composable-vue3/tests/e2e/specs/test.cy.js

@@ -109,4 +109,12 @@ describe('Vue 3 + Apollo Composable', () => {
     cy.get('.list-disc').should('have.length', 3)
     cy.get('[data-test-id="refetched"]').should('contain', 'true')
   })
+
+  it('enabled', () => {
+    cy.visit('/disabled')
+    cy.get('[data-test-id="data"]').should('not.exist')
+    cy.get('.loading').should('not.exist')
+    cy.get('button').click()
+    cy.get('[data-test-id="data"]').should('contain', 'Loaded channel: General')
+  })
 })