@operato/context 10.13.0 → 10.16.0

package/test/page-frames.test.ts

@@ -0,0 +1,63 @@
+import { expect, fixture } from '@open-wc/testing'
+import { html, LitElement } from 'lit'
+
+import { DocumentPageStyles, WorkSurfacePageStyles } from '@operato/styles'
+
+/**
+ * Page frames (ADR-0060 decision 8): the frame owns spacing, width and scroll, so two screens of the
+ * same kind come out the same. The numbers are written out, so a change to the frame shows up here as
+ * a decision.
+ */
+
+class DocumentScreen extends LitElement {
+  static styles = [DocumentPageStyles]
+  render() {
+    return html`
+      <div class="page">
+        <section class="page-section">
+          <header class="page-section-header"><h3>today</h3><div class="page-section-actions"><button>refresh</button></div></header>
+          <div class="page-card">card</div>
+        </section>
+        <section class="page-section"><header class="page-section-header"><h3>later</h3></header></section>
+      </div>
+    `
+  }
+}
+customElements.define('test-document-screen', DocumentScreen)
+
+class WorkScreen extends LitElement {
+  static styles = [WorkSurfacePageStyles]
+  render() {
+    return html`<div class="page-headroom"><button>tab</button></div><div class="page-fill" style="height: 5000px"></div>`
+  }
+}
+customElements.define('test-work-screen', WorkScreen)
+
+describe('page frames', () => {
+  it('document: one column 1080px wide at most, 18/20/40 padding, sections 24px apart, the page scrolls', async () => {
+    const host = await fixture<HTMLElement>(html`<div style="width: 1600px; height: 600px"><test-document-screen></test-document-screen></div>`)
+    const screen = host.querySelector('test-document-screen') as DocumentScreen
+    await screen.updateComplete
+    const page = screen.shadowRoot!.querySelector('.page') as HTMLElement
+    const [first, second] = Array.from(screen.shadowRoot!.querySelectorAll('.page-section'))
+    const style = getComputedStyle(page)
+
+    expect(Math.round(page.getBoundingClientRect().width)).to.equal(1080)
+    expect([style.paddingTop, style.paddingRight, style.paddingBottom, style.paddingLeft]).to.deep.equal(['18px', '20px', '40px', '20px'])
+    expect(Math.round(second.getBoundingClientRect().top - first.getBoundingClientRect().bottom)).to.equal(24)
+    expect(getComputedStyle(screen).overflowY).to.equal('auto')
+
+    const actions = screen.shadowRoot!.querySelector('.page-section-actions') as HTMLElement
+    expect(Math.round(actions.getBoundingClientRect().right)).to.equal(Math.round(page.getBoundingClientRect().right) - 20)
+  })
+
+  it('work surface: the content fills and scrolls inside itself, the page does not scroll', async () => {
+    const host = await fixture<HTMLElement>(html`<div style="height: 400px"><test-work-screen></test-work-screen></div>`)
+    const screen = host.querySelector('test-work-screen') as WorkScreen
+    await screen.updateComplete
+
+    expect(getComputedStyle(screen).overflow).to.equal('hidden')
+    expect(Math.round(screen.getBoundingClientRect().height)).to.equal(400)
+    expect(getComputedStyle(screen.shadowRoot!.querySelector('.page-fill')!).minHeight).to.equal('0px')
+  })
+})

package/test/page-title-description.test.ts

@@ -0,0 +1,43 @@
+import { expect, fixture } from '@open-wc/testing'
+import { html } from 'lit'
+
+import { store } from '@operato/shell'
+
+import '../src/tools/ox-page-title-bar.js'
+
+/**
+ * `context.description` draws one line under the screen title (ADR-0060 decision 8). A screen that
+ * does not give it must look exactly as before: no line, no wrapping.
+ */
+
+async function bar(context: Record<string, unknown>) {
+  store.dispatch({ type: 'UPDATE_CONTEXT', context } as any)
+  const el = await fixture<HTMLElement & { updateComplete: Promise<unknown> }>(html`<ox-page-title-bar></ox-page-title-bar>`)
+  await el.updateComplete
+  await el.updateComplete
+  return el
+}
+
+describe('ox-page-title-bar description', () => {
+  it('draws the description under the title', async () => {
+    const el = await bar({ title: 'work orders', description: 'orders released to the floor today' })
+    const line = el.shadowRoot!.querySelector('[description]')
+
+    expect(line?.textContent).to.equal('orders released to the floor today')
+    expect(el.hasAttribute('described')).to.equal(true)
+    expect(line!.getBoundingClientRect().top).to.be.greaterThan(el.shadowRoot!.querySelector('[titler]')!.getBoundingClientRect().top)
+  })
+
+  it('★ draws nothing more when the screen gives no description', async () => {
+    const el = await bar({ title: 'work orders' })
+
+    expect(el.shadowRoot!.querySelector('[description]') === null).to.equal(true)
+    expect(el.hasAttribute('described')).to.equal(false)
+  })
+
+  it('leaves the description out when the screen turns the title row off', async () => {
+    const el = await bar({ title: 'learn', heading: false, description: 'what the platform does' })
+
+    expect(el.shadowRoot!.querySelector('[description]') === null).to.equal(true)
+  })
+})