@operato/graphql 10.29.76 → 10.29.79

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/graphql",
   "description": "Webcomponent graphql-client following open-wc recommendations",
   "author": "heartyoh@hatiolab.com",
-  "version": "10.29.76",
+  "version": "10.29.79",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -127,5 +127,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "08d33aec6fbe7c55cbb8e5018781a8500c792d4d"
+  "gitHead": "f86fbc40c2d343d7996573fe49f82829c1ac1ea4"
 }

package/test/active-request-counter.test.ts

@@ -0,0 +1,146 @@
+import { expect, fixture } from '@open-wc/testing'
+import gql from 'graphql-tag'
+import { html, LitElement } from 'lit'
+
+import { resetActiveRequestCounterCallback, setActiveRequestCounterCallback } from '../src/active-request-counter-link.js'
+import { client } from '../src/graphql-client.js'
+import { QueryController } from '../src/query-controller.js'
+
+/**
+ * The shell shows its progress bar while the count is not zero (shell/actions/busy.ts). Every request that counts up
+ * counts down exactly once - answered, failed, refused, aborted, or left by the screen that asked.
+ */
+
+const query = gql`
+  query ($id: String) {
+    ping(id: $id)
+  }
+`
+
+const respond = (body: unknown, status = 200) =>
+  new Response(JSON.stringify(body), { status, headers: { 'content-type': 'application/json' } })
+
+const settle = () => new Promise(resolve => setTimeout(resolve, 20))
+
+let count: number
+let calls: number[]
+let fetched: typeof window.fetch
+const silence = (event: Event) => event.stopImmediatePropagation()
+
+beforeEach(() => {
+  count = 0
+  calls = []
+  fetched = window.fetch
+  setActiveRequestCounterCallback(now => {
+    count = now
+    calls.push(now)
+  })
+  document.addEventListener('notify', silence)
+  document.addEventListener('auth-required', silence)
+  document.addEventListener('domain-required', silence)
+})
+
+afterEach(() => {
+  window.fetch = fetched
+  resetActiveRequestCounterCallback()
+  document.removeEventListener('notify', silence)
+  document.removeEventListener('auth-required', silence)
+  document.removeEventListener('domain-required', silence)
+})
+
+const read = () => client.query({ query, fetchPolicy: 'no-cache' }).catch(error => error)
+
+describe('the active request count', () => {
+  it('goes back to zero after an answer', async () => {
+    window.fetch = async () => respond({ data: { ping: 'pong' } })
+    await read()
+    expect(calls).to.deep.equal([1, 0])
+  })
+
+  it('goes back to zero after an answer with errors', async () => {
+    window.fetch = async () => respond({ data: null, errors: [{ message: 'no' }] })
+    await read()
+    expect(calls).to.deep.equal([1, 0])
+  })
+
+  it('goes back to zero after a dropped connection', async () => {
+    window.fetch = () => Promise.reject(new TypeError('Failed to fetch'))
+    await read()
+    expect(calls).to.deep.equal([1, 0])
+  })
+
+  it('goes back to zero once after an error status that carries data and errors', async () => {
+    window.fetch = async () => respond({ data: { ping: null }, errors: [{ message: 'refused' }] }, 403)
+    await read()
+    await settle()
+    expect(calls).to.deep.equal([1, 0])
+  })
+
+  it('goes back to zero after a 401', async () => {
+    window.fetch = async () => respond({ errors: [{ message: 'sign in' }] }, 401)
+    await read()
+    expect(calls).to.deep.equal([1, 0])
+  })
+
+  it('goes back to zero after a read aborted with its signal', async () => {
+    window.fetch = (_input, init) =>
+      new Promise((_, reject) =>
+        init!.signal!.addEventListener('abort', () => reject(new DOMException('aborted', 'AbortError')))
+      )
+    const controller = new AbortController()
+    const reading = client
+      .query({ query, fetchPolicy: 'no-cache', context: { fetchOptions: { signal: controller.signal } } })
+      .catch(error => error)
+    controller.abort()
+    await reading
+    await settle()
+    expect(count).to.equal(0)
+  })
+
+  it('goes back to zero when the watcher stops before the answer', async () => {
+    let answer!: (response: Response) => void
+    window.fetch = () => new Promise(resolve => (answer = resolve))
+    const subscription = client.watchQuery({ query, fetchPolicy: 'no-cache' }).subscribe({ error: () => {} })
+    await settle()
+    expect(count).to.equal(1)
+    subscription.unsubscribe()
+    await settle()
+    expect(count).to.equal(0)
+    /* The answer that comes after is not counted again. */
+    answer(respond({ data: { ping: 'late' } }))
+    await settle()
+    expect(calls).to.deep.equal([1, 0])
+  })
+
+  it('goes back to zero when a screen asks for other variables, and when it leaves', async () => {
+    const pending: ((response: Response) => void)[] = []
+    window.fetch = () => new Promise(resolve => pending.push(resolve))
+
+    class PingView extends LitElement {
+      static properties = { pingId: {} }
+      pingId = 'a'
+      ping = new QueryController(this, query, { variables: () => ({ id: this.pingId }) })
+      render() {
+        return html``
+      }
+    }
+    customElements.define('active-request-ping-view', PingView)
+
+    const view = await fixture<PingView>(html`<active-request-ping-view></active-request-ping-view>`)
+    await settle()
+    expect(count).to.equal(1)
+
+    view.pingId = 'b'
+    await view.updateComplete
+    await settle()
+    expect(count).to.equal(1)
+
+    view.remove()
+    await settle()
+    expect(count).to.equal(0)
+
+    pending.forEach(resolve => resolve(respond({ data: { ping: 'late' } })))
+    await settle()
+    expect(count).to.equal(0)
+  })
+})