From db7d79c50674b12c64afeb341da765c2196971ce Mon Sep 17 00:00:00 2001
From: Guillaume Chau <guillaume.b.chau@gmail.com>
Date: Tue, 16 May 2023 12:16:40 +0200
Subject: [PATCH] test: enabled

---
 .../src/components/Disabled.vue               | 67 +++++++++++++++++++
 .../test-e2e-composable-vue3/src/router.ts    |  4 ++
 .../tests/e2e/specs/test.cy.js                |  8 +++
 3 files changed, 79 insertions(+)
 create mode 100644 packages/test-e2e-composable-vue3/src/components/Disabled.vue

diff --git a/packages/test-e2e-composable-vue3/src/components/Disabled.vue b/packages/test-e2e-composable-vue3/src/components/Disabled.vue
new file mode 100644
index 0000000..b62b938
--- /dev/null
+++ b/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>
diff --git a/packages/test-e2e-composable-vue3/src/router.ts b/packages/test-e2e-composable-vue3/src/router.ts
index 9f6eff9..cd90f7b 100644
--- a/packages/test-e2e-composable-vue3/src/router.ts
+++ b/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'),
+    },
   ],
 })
diff --git a/packages/test-e2e-composable-vue3/tests/e2e/specs/test.cy.js b/packages/test-e2e-composable-vue3/tests/e2e/specs/test.cy.js
index be03c3c..4616f0c 100644
--- a/packages/test-e2e-composable-vue3/tests/e2e/specs/test.cy.js
+++ b/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')
+  })
 })