@operato/shell 10.29.68 → 10.29.70

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/shell",
   "description": "WebApplication architecturing shell following open-wc recommendations",
   "author": "heartyoh",
-  "version": "10.29.68",
+  "version": "10.29.70",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -60,11 +60,11 @@
   },
   "dependencies": {
     "@material/web": "^2.0.0",
-    "@operato/graphql": "^10.29.61",
+    "@operato/graphql": "^10.29.69",
     "@operato/i18n": "^10.29.27",
-    "@operato/popup": "^10.29.68",
-    "@operato/styles": "^10.29.68",
-    "@operato/utils": "^10.29.61",
+    "@operato/popup": "^10.29.70",
+    "@operato/styles": "^10.29.70",
+    "@operato/utils": "^10.29.69",
     "@webcomponents/scoped-custom-element-registry": "^0.0.9",
     "lit": "^3.1.2",
     "lodash-es": "^4.17.21",
@@ -103,5 +103,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "28edfb19074463ffa10f36bdc9a3fb899c496e8a"
+  "gitHead": "7451d7242ca5e396bbdeb89fc46470d52c89e8cd"
 }

package/test/draft-controller.test.ts

@@ -0,0 +1,186 @@
+import { expect, fixture } from '@open-wc/testing'
+import { html, LitElement } from 'lit'
+
+import { QUERY_ANSWERED } from '@operato/graphql'
+import { DraftController, draftsOn } from '../src/drafts/draft-controller.js'
+import { draftKey, readDraft, removeDraft } from '../src/drafts/draft-store.js'
+import { UnsavedDraftController } from '../src/drafts/unsaved-draft-controller.js'
+
+/**
+ * An edit form over what was read (ADR-0190 decision 2): a field shows its edit, else the read; a save clears only
+ * the edits still as sent; another record drops the edits.
+ */
+type Rule = { name: string; body: string }
+
+class RuleForm extends LitElement {
+  static properties = { read: { attribute: false }, recordId: {} }
+  read?: Rule
+  recordId = 'a'
+  draft = new DraftController<Rule>(this, { read: () => this.read, key: () => this.recordId })
+}
+customElements.define('rule-form', RuleForm)
+
+const open = async () => {
+  const form = await fixture<RuleForm>(html`<rule-form .read=${{ name: 'A', body: 'old' }}></rule-form>`)
+  await form.updateComplete
+  return form
+}
+
+describe('DraftController', () => {
+  it('shows an edit, else what was read', async () => {
+    const form = await open()
+    expect(form.draft.value('name')).to.equal('A')
+    form.draft.set('name', 'A2')
+    expect(form.draft.value('name')).to.equal('A2')
+    expect(form.draft.value('body')).to.equal('old')
+    expect(form.draft.dirty).to.equal(true)
+  })
+
+  it('a save clears only what it sent and is still as sent; a failed save clears nothing', async () => {
+    const form = await open()
+    form.draft.set('name', 'A2')
+    let release!: (answer: string | undefined) => void
+    const saving = form.draft.submit(sent => {
+      expect(sent).to.deep.equal({ name: 'A2' })
+      return new Promise<string | undefined>(resolve => (release = resolve))
+    })
+    form.draft.set('body', 'typed while saving')
+    release('saved')
+    await saving
+    expect(form.draft.edits).to.deep.equal({ body: 'typed while saving' })
+
+    form.draft.set('name', 'A3')
+    await form.draft.submit(async () => undefined)
+    expect(form.draft.edits).to.deep.equal({ body: 'typed while saving', name: 'A3' })
+  })
+
+  it('a value put back to what was read is no edit', async () => {
+    const form = await open()
+    form.draft.set('name', 'A2')
+    form.draft.set('name', 'A')
+    expect(form.draft.dirty).to.equal(false)
+    expect(form.draft.value('name')).to.equal('A')
+  })
+
+  it('a field typed back to what was read while a save is out stays an edit after the answer', async () => {
+    const form = await open()
+    form.draft.set('name', 'B')
+    let release!: (answer: string | undefined) => void
+    const saving = form.draft.submit(() => new Promise<string | undefined>(resolve => (release = resolve)))
+    form.draft.set('name', 'A')
+    release('saved')
+    await saving
+    expect(form.draft.edits).to.deep.equal({ name: 'A' })
+    expect(form.draft.value('name')).to.equal('A')
+  })
+
+  it('another record drops the edits', async () => {
+    const form = await open()
+    form.draft.set('name', 'A2')
+    form.recordId = 'b'
+    await form.updateComplete
+    expect(form.draft.dirty).to.equal(false)
+  })
+
+  it('is known to its host while connected', async () => {
+    const form = await open()
+    expect(draftsOn(form)).to.deep.equal([form.draft])
+    form.remove()
+    expect(draftsOn(form)).to.deep.equal([])
+  })
+})
+
+class KeptForm extends LitElement {
+  static properties = { read: { attribute: false }, recordId: {} }
+  read?: Rule
+  recordId = 'a'
+  draft = new DraftController<Rule>(this, {
+    read: () => this.read,
+    key: () => this.recordId,
+    keep: { address: () => ({ user: 'u', domain: 'd', screen: '/rules', target: this.recordId }) }
+  })
+}
+customElements.define('kept-rule-form', KeptForm)
+
+describe('DraftController keep', () => {
+  const at = (target: string) => draftKey({ user: 'u', domain: 'd', screen: '/rules', target })
+  let wait: number
+  beforeEach(async () => {
+    wait = UnsavedDraftController.WAIT_MS
+    UnsavedDraftController.WAIT_MS = 0
+    await removeDraft(at('a'))
+    await removeDraft(at('b'))
+  })
+  afterEach(() => (UnsavedDraftController.WAIT_MS = wait))
+  const settle = () => new Promise(resolve => setTimeout(resolve, 50))
+
+  it('writes the edits for the record, and keeps them when the form moves to another', async () => {
+    const form = await fixture<KeptForm>(html`<kept-rule-form .read=${{ name: 'A', body: 'old' }}></kept-rule-form>`)
+    form.draft.set('name', 'A2')
+    await settle()
+    expect((await readDraft(at('a')))?.value).to.deep.equal({ name: 'A2' })
+    expect(form.draft.kept).to.equal(true)
+    /* Typed and moved at once: what was typed is written for the record left, not lost or written for the next. */
+    form.draft.set('name', 'A3')
+    form.recordId = 'b'
+    await form.updateComplete
+    await settle()
+    expect(form.draft.dirty).to.equal(false)
+    expect((await readDraft(at('a')))?.value).to.deep.equal({ name: 'A3' })
+    expect(await readDraft(at('b'))).to.equal(undefined)
+  })
+
+  it('a save that clears the edits drops what was kept', async () => {
+    const form = await fixture<KeptForm>(html`<kept-rule-form .read=${{ name: 'A', body: 'old' }}></kept-rule-form>`)
+    form.draft.set('name', 'A2')
+    await settle()
+    await form.draft.submit(async () => 'saved')
+    await settle()
+    expect(await readDraft(at('a'))).to.equal(undefined)
+  })
+
+  it('a save that answers after a move clears what was kept for the record it was sent from, and nothing else', async () => {
+    const form = await fixture<KeptForm>(html`<kept-rule-form .read=${{ name: 'A', body: 'old' }}></kept-rule-form>`)
+    form.draft.set('name', 'A2')
+    await settle()
+    let answer!: (value: string) => void
+    const saving = form.draft.submit(() => new Promise<string>(resolve => (answer = resolve)))
+    form.recordId = 'b'
+    await form.updateComplete
+    form.draft.set('name', 'A2')
+    await settle()
+    answer('saved')
+    await saving
+    await settle()
+    expect(await readDraft(at('a'))).to.equal(undefined)
+    expect(form.draft.edits).to.deep.equal({ name: 'A2' }, "b's edit equal to what was sent stays")
+    expect((await readDraft(at('b')))?.value).to.deep.equal({ name: 'A2' })
+  })
+
+  it('a save that answers after the form came back to its record leaves what is edited there now kept', async () => {
+    const form = await fixture<KeptForm>(html`<kept-rule-form .read=${{ name: 'A', body: 'old' }}></kept-rule-form>`)
+    form.draft.set('name', 'A2')
+    await settle()
+    let answer!: (value: string) => void
+    const saving = form.draft.submit(() => new Promise<string>(resolve => (answer = resolve)))
+    form.recordId = 'b'
+    await form.updateComplete
+    form.recordId = 'a'
+    await form.updateComplete
+    form.draft.set('name', 'A2')
+    await settle()
+    answer('saved')
+    await saving
+    await settle()
+    expect(form.draft.edits).to.deep.equal({ name: 'A2' })
+    expect((await readDraft(at('a')))?.value).to.deep.equal({ name: 'A2' })
+    expect(form.draft.kept).to.equal(true)
+  })
+
+  it('offers nothing when the record answers with nothing kept', async () => {
+    const form = await fixture<KeptForm>(html`<kept-rule-form .read=${{ name: 'A', body: 'old' }}></kept-rule-form>`)
+    form.dispatchEvent(new Event(QUERY_ANSWERED))
+    await settle()
+    expect(form.draft.dirty).to.equal(false)
+  })
+})

package/test/draft-owner.test.ts

@@ -0,0 +1,109 @@
+import { expect, fixture } from '@open-wc/testing'
+import { html, LitElement } from 'lit'
+import { OxPrompt } from '@operato/popup'
+
+import { QUERY_ANSWERED } from '@operato/graphql'
+import { DraftController } from '../src/drafts/draft-controller.js'
+import { draftOwner } from '../src/drafts/draft-owner.js'
+import { draftKey, readDraft, removeDraftsOf } from '../src/drafts/draft-store.js'
+import { UnsavedDraftController } from '../src/drafts/unsaved-draft-controller.js'
+import { store } from '../src/store.js'
+
+/**
+ * A draft belongs to the signed-in person (ADR-0190): kept and offered back to them, never to someone else, and
+ * taken away when they sign out. With no one signed in nothing is written.
+ */
+let signedIn: { id?: string } | null = null
+store.addReducers({ auth: () => ({ user: signedIn }) })
+const signIn = (user: { id?: string } | null) => {
+  signedIn = user
+  store.dispatch({ type: 'test-sign-in' })
+}
+
+type Note = { body: string }
+
+class OwnedForm extends LitElement {
+  read?: Note = { body: 'old' }
+  draft = new DraftController<Note>(this, {
+    read: () => this.read,
+    key: () => 'n-1',
+    keep: {
+      address: () => {
+        const user = draftOwner()
+        return user ? { user, domain: 'd', screen: '/notes', target: 'n-1' } : undefined
+      }
+    }
+  })
+}
+customElements.define('owned-note-form', OwnedForm)
+
+describe('draftOwner', () => {
+  const settle = () => new Promise(resolve => setTimeout(resolve, 50))
+  const keyOf = (user: string) => draftKey({ user, domain: 'd', screen: '/notes', target: 'n-1' })
+  const open = OxPrompt.open
+  let wait: number
+  beforeEach(async () => {
+    wait = UnsavedDraftController.WAIT_MS
+    UnsavedDraftController.WAIT_MS = 0
+    await removeDraftsOf('kim')
+    await removeDraftsOf('lee')
+  })
+  afterEach(() => {
+    UnsavedDraftController.WAIT_MS = wait
+    ;(OxPrompt as any).open = open
+    signIn(null)
+  })
+
+  it('is the signed-in id, and nobody while no one is signed in', () => {
+    signIn({ id: 'kim' })
+    expect(draftOwner()).to.equal('kim')
+    signIn({})
+    expect(draftOwner()).to.equal(undefined)
+    signIn(null)
+    expect(draftOwner()).to.equal(undefined)
+  })
+
+  it('a draft is written for its owner and offered back to them', async () => {
+    signIn({ id: 'kim' })
+    const form = await fixture<OwnedForm>(html`<owned-note-form></owned-note-form>`)
+    form.draft.set('body', 'typed')
+    await settle()
+    expect((await readDraft(keyOf('kim')))?.value).to.deep.equal({ body: 'typed' })
+    form.remove()
+
+    ;(OxPrompt as any).open = async () => true
+    const again = await fixture<OwnedForm>(html`<owned-note-form></owned-note-form>`)
+    again.dispatchEvent(new Event(QUERY_ANSWERED))
+    await settle()
+    expect(again.draft.value('body')).to.equal('typed')
+  })
+
+  it('someone else is offered nothing, and signing out takes the draft away', async () => {
+    signIn({ id: 'kim' })
+    const form = await fixture<OwnedForm>(html`<owned-note-form></owned-note-form>`)
+    form.draft.set('body', 'typed')
+    await settle()
+    form.remove()
+
+    signIn({ id: 'lee' })
+    let asked = false
+    ;(OxPrompt as any).open = async () => (asked = true)
+    const theirs = await fixture<OwnedForm>(html`<owned-note-form></owned-note-form>`)
+    theirs.dispatchEvent(new Event(QUERY_ANSWERED))
+    await settle()
+    expect(asked).to.equal(false)
+    expect(theirs.draft.value('body')).to.equal('old')
+
+    await removeDraftsOf('kim')
+    expect(await readDraft(keyOf('kim'))).to.equal(undefined)
+  })
+
+  it('with no one signed in nothing is written', async () => {
+    signIn(null)
+    const form = await fixture<OwnedForm>(html`<owned-note-form></owned-note-form>`)
+    form.draft.set('body', 'typed')
+    await settle()
+    expect(await readDraft(keyOf('kim'))).to.equal(undefined)
+    expect(form.draft.kept).to.equal(false)
+  })
+})

package/test/page-drafts.test.ts

@@ -0,0 +1,23 @@
+import { expect, fixture } from '@open-wc/testing'
+import { html } from 'lit'
+
+import { DraftController } from '../src/drafts/draft-controller.js'
+import { PageView } from '../src/app/pages/page-view.js'
+
+/** A page's drafts (ADR-0190) are its unsaved state: the shell asks before they are lost, and drops them on discard. */
+class EditingPage extends PageView {
+  draft = new DraftController<{ name: string }>(this, { read: () => ({ name: 'A' }) })
+}
+customElements.define('editing-page', EditingPage)
+
+describe('page drafts', () => {
+  it('an edited draft makes the page dirty; a discard drops it', async () => {
+    const page = await fixture<EditingPage>(html`<editing-page></editing-page>`)
+    expect(page.addressDirty).to.equal(false)
+    page.draft.set('name', 'A2')
+    expect(page.addressDirty).to.equal(true)
+    page.discardAddressEdits({ route: false })
+    expect(page.addressDirty).to.equal(false)
+    expect(page.draft.value('name')).to.equal('A')
+  })
+})

package/test/page-refresh-queries.test.ts

@@ -0,0 +1,96 @@
+import { expect, fixture } from '@open-wc/testing'
+import gql from 'graphql-tag'
+import { html } from 'lit'
+
+import { QueryController } from '@operato/graphql'
+import { PageView } from '../src/app/pages/page-view.js'
+
+/** A page refresh (ADR-0174) reads again what the page declared it reads (ADR-0190), as it reads its grids again. */
+
+const frame = () => new Promise(resolve => requestAnimationFrame(resolve))
+const settle = () => new Promise(resolve => setTimeout(resolve, 20))
+
+class DeclaringPage extends PageView {
+  contexts: string[] = []
+  get context() {
+    return { title: this.rule?.data?.rule?.name ?? '' }
+  }
+  updateContext() {
+    this.contexts.push(this.context.title)
+  }
+  rule = new QueryController(
+    this,
+    gql`
+      query {
+        rule {
+          name
+        }
+      }
+    `
+  )
+  render() {
+    return html`${this.rule.data?.rule?.name ?? ''}`
+  }
+}
+customElements.define('declaring-page', DeclaringPage)
+
+describe('page refresh and declared queries', () => {
+  let asked = 0
+  let fetched: typeof window.fetch
+  beforeEach(() => {
+    asked = 0
+    fetched = window.fetch
+    window.fetch = async () => {
+      asked++
+      return new Response(JSON.stringify({ data: { rule: { name: `read ${asked}` } } }), {
+        headers: { 'content-type': 'application/json' }
+      })
+    }
+  })
+  afterEach(() => (window.fetch = fetched))
+
+  it('reads the declared query again', async () => {
+    const page = await fixture<DeclaringPage>(html`<declaring-page></declaring-page>`)
+    page.lifecycle = { active: true, params: {} }
+    page.active = true
+    await page.updateComplete
+    await frame()
+    await settle()
+    expect(asked).to.equal(1)
+    await page.refresh()
+    await settle()
+    expect(asked).to.equal(2)
+    expect(page.rule.data?.rule.name).to.equal('read 2')
+  })
+
+  it('says its context again once a declared query answered - a title read from the data', async () => {
+    const answer = window.fetch
+    window.fetch = async (...args) => (await new Promise(resolve => setTimeout(resolve, 150)), answer(...args))
+    const page = await fixture<DeclaringPage>(html`<declaring-page></declaring-page>`)
+    page.lifecycle = { active: true, params: {} }
+    page.active = true
+    await page.updateComplete
+    await frame()
+    expect(page.contexts[page.contexts.length - 1]).to.equal('')
+    await new Promise(resolve => setTimeout(resolve, 300))
+    expect(page.contexts[page.contexts.length - 1]).to.equal('read 1')
+  })
+
+  it('reads the declared query again when the page is shown again, not on its first opening', async () => {
+    const page = await fixture<DeclaringPage>(html`<declaring-page></declaring-page>`)
+    page.lifecycle = { active: true, params: {} }
+    page.active = true
+    await page.updateComplete
+    await frame()
+    await settle()
+    expect(asked).to.equal(1)
+    page.active = false
+    await page.updateComplete
+    await settle()
+    expect(asked).to.equal(1)
+    page.active = true
+    await page.updateComplete
+    await settle()
+    expect(asked).to.equal(2)
+  })
+})