test: refetch + notifyOnNetworkStatusChange

packages/test-e2e-composable-vue3/server.js

@@ -133,6 +133,9 @@ app.get('/_reset', (req, res) => {
 const server = new ApolloServer({
   typeDefs,
   resolvers,
+  context: () => new Promise(resolve => {
+    setTimeout(() => resolve({}), 50)
+  }),
 })
 
 server.applyMiddleware({ app })

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

@@ -19,7 +19,7 @@ export default defineComponent({
   },
 
   setup (props) {
-    const { result, loading } = useQuery(gql`
+    const { result, loading, refetch } = useQuery(gql`
       query channel ($id: ID!) {
         channel (id: $id) {
           id
@@ -32,7 +32,9 @@ export default defineComponent({
       }
     `, () => ({
       id: props.id,
-    }))
+    }), {
+      notifyOnNetworkStatusChange: true,
+    })
     const channel = useResult(result)
 
     const messagesEl = ref()
@@ -52,6 +54,7 @@ export default defineComponent({
 
     return {
       loading,
+      refetch,
       channel,
       messagesEl,
     }
@@ -60,7 +63,10 @@ export default defineComponent({
 </script>
 
 <template>
-  <div v-if="loading">
+  <div
+    v-if="loading"
+    class="loading-channel"
+  >
     Loading channel...
   </div>
 
@@ -70,6 +76,12 @@ export default defineComponent({
   >
     <div class="flex-none p-6 border-b border-gray-200 bg-white">
       Currently viewing # {{ channel.label }}
+
+      <a
+        class="text-green-500 cursor-pointer"
+        data-test-id="refetch"
+        @click="refetch()"
+      >Refetch</a>
     </div>
 
     <div

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

@@ -35,17 +35,27 @@ describe('Vue 3 + Apollo Composable', () => {
   it('sends multiple messages', () => {
     cy.get('.channel-link').eq(1).click()
     cy.get('input').type('Message 1{enter}')
-      .type('Message 2{enter}')
-      .type('Message 3{enter}')
-    cy.get('.message').should('have.lengthOf', 3)
     cy.contains('.message', 'Message 1')
+    cy.get('input').should('have.value', '')
+    cy.get('input').type('Message 2{enter}')
+    cy.get('input').should('have.value', '')
     cy.contains('.message', 'Message 2')
+    cy.get('input').type('Message 3{enter}')
+    cy.get('input').should('have.value', '')
     cy.contains('.message', 'Message 3')
+    cy.get('.message').should('have.lengthOf', 3)
     cy.get('input').should('have', 'value', '')
     cy.get('.channel-link').eq(0).click()
     cy.get('.message').should('have.lengthOf', 0)
     cy.reload()
     cy.get('.channel-link').eq(1).click()
+    cy.contains('.loading-channel', 'Loading channel...')
+    cy.get('.message').should('have.lengthOf', 3)
+    cy.contains('.message', 'Message 1')
+    cy.contains('.message', 'Message 2')
+    cy.contains('.message', 'Message 3')
+    cy.get('[data-test-id="refetch"]').click()
+    cy.contains('.loading-channel', 'Loading channel...')
     cy.get('.message').should('have.lengthOf', 3)
     cy.contains('.message', 'Message 1')
     cy.contains('.message', 'Message 2')