@lovett/ui 0.0.11 → 0.2.0

package/src/__tests__/display-store.test.tsx

@@ -0,0 +1,307 @@
+/**
+ * createDisplayStore — per-scope display settings, by context.
+ *
+ * Two contracts, both of them inversions of a source defect
+ * (`docs/design-briefs/tasks-board-header-primitives.md` §4):
+ *
+ *   1. TWO PROVIDERS ARE TWO PANELS. Their cards subscribe to a module-level
+ *      singleton, so two boards on one page cannot hold different settings.
+ *      The test below renders two and changes one.
+ *   2. PERSISTENCE IS PER SCOPE and VALIDATED. A key from another scope never
+ *      leaks; a hand-edited value that is the wrong type or outside the
+ *      allow-list falls back to the default instead of reaching a component.
+ *
+ * And one contract that is not an inversion but a PIN. `prefix` moves the key
+ * for a host that is not this workspace, and the default has to stay
+ * byte-identical: these keys hold operator preferences already on disk, so a
+ * changed default would not migrate them, it would lose them. The default is
+ * asserted as a literal, and asserted again through a value written by hand at
+ * the key an older build wrote.
+ */
+import { describe, expect, it, beforeEach } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { createDisplayStore, type DisplayStore } from '../display-store'
+
+type Settings = {
+  readonly grouping: 'column' | 'assignee'
+  readonly showEmpty: boolean
+  /** A MEASUREMENT — a size the operator drags rather than picks. */
+  readonly panelSize: number
+}
+
+const DEFAULTS: Settings = { grouping: 'column', showEmpty: true, panelSize: 560 }
+
+const store = createDisplayStore<Settings>(
+  'test',
+  DEFAULTS,
+  { grouping: ['column', 'assignee'] },
+  {
+    // An allow-list cannot express a RANGE, so a numeric setting sanitises on
+    // the migration seam and anything that is not a plausible size falls back
+    // to the default exactly as a bad enum would.
+    panelSize: (raw) =>
+      typeof raw === 'number' && Number.isFinite(raw) && raw >= 1 && raw <= 8000
+        ? Math.round(raw)
+        : undefined,
+  },
+)
+
+/**
+ * The same store under a different PREFIX, and identical in every other way —
+ * same name, same defaults, same allow-list. The pair is what proves the
+ * option moves the key and touches nothing else: if the prefix were dropped
+ * these two would be one store sharing one key.
+ */
+const prefixedStore = createDisplayStore<Settings>(
+  'test',
+  DEFAULTS,
+  { grouping: ['column', 'assignee'] },
+  undefined,
+  { prefix: 'lightwork' },
+)
+
+/**
+ * A panel per store. `useDisplay` reaches the nearest provider, so a second
+ * store needs a component that calls the second store's hook — the panel is
+ * built from the store rather than closing over one.
+ */
+function panelFor(target: DisplayStore<Settings>) {
+  return function Panel({ name }: { name: string }) {
+    const { settings, set, reset, isDefault } = target.useDisplay()
+    return (
+      <div>
+        <span data-testid={`${name}-grouping`}>{settings.grouping}</span>
+        <span data-testid={`${name}-empty`}>{String(settings.showEmpty)}</span>
+        <span data-testid={`${name}-default`}>{String(isDefault)}</span>
+        <button type="button" onClick={() => set('grouping', 'assignee')}>
+          {`${name}: group by assignee`}
+        </button>
+        <button type="button" onClick={() => set('showEmpty', false)}>
+          {`${name}: hide empty`}
+        </button>
+        <span data-testid={`${name}-size`}>{String(settings.panelSize)}</span>
+        <button type="button" onClick={() => set('panelSize', 820)}>
+          {`${name}: widen`}
+        </button>
+        <button type="button" onClick={reset}>{`${name}: reset`}</button>
+      </div>
+    )
+  }
+}
+
+const Panel = panelFor(store)
+const PrefixedPanel = panelFor(prefixedStore)
+
+describe('createDisplayStore', () => {
+  beforeEach(() => window.localStorage.clear())
+
+  it('namespaces its key by name and scope', () => {
+    expect(store.storageKey('brn_1')).toBe('workspace:test:brn_1:display')
+  })
+
+  it('refuses an empty prefix rather than silently sharing the default namespace', () => {
+    // Both quiet alternatives are worse than a throw: defaulting hands a caller
+    // who asked for isolation the shared namespace, and accepting produces
+    // `:name:scope:display`, which collides with every other empty-prefix
+    // caller — the cross-product the option exists to prevent.
+    expect(() => createDisplayStore('board', { a: 1 }, undefined, undefined, { prefix: '' })).toThrow(
+      /prefix.*cannot be empty/i,
+    )
+    // And the default path is untouched by the guard.
+    expect(createDisplayStore('board', { a: 1 }).storageKey('ws_1')).toBe('workspace:board:ws_1:display')
+  })
+
+  it('reads a key written before the prefix option existed', () => {
+    // The key is spelled out rather than taken from `storageKey`, because what
+    // is under test is that the two still agree. A store built without the
+    // option has to find exactly what the build before it left behind.
+    window.localStorage.setItem(
+      'workspace:test:brn_old:display',
+      JSON.stringify({ grouping: 'assignee', showEmpty: false, panelSize: 700 }),
+    )
+    render(
+      <store.Provider scope="brn_old">
+        <Panel name="old" />
+      </store.Provider>,
+    )
+    expect(screen.getByTestId('old-grouping')).toHaveTextContent('assignee')
+    expect(screen.getByTestId('old-empty')).toHaveTextContent('false')
+    expect(screen.getByTestId('old-size')).toHaveTextContent('700')
+  })
+
+  it('takes a prefix, and the prefix is the only segment it changes', () => {
+    expect(prefixedStore.storageKey('brn_1')).toBe('lightwork:test:brn_1:display')
+  })
+
+  it('a prefixed store writes its own key and never the unprefixed one', async () => {
+    const user = userEvent.setup()
+    render(
+      <prefixedStore.Provider scope="brn_p">
+        <PrefixedPanel name="p" />
+      </prefixedStore.Provider>,
+    )
+    await user.click(screen.getByRole('button', { name: 'p: group by assignee' }))
+    expect(window.localStorage.getItem('lightwork:test:brn_p:display')).toContain(
+      'assignee',
+    )
+    // The point of the option: another product on the same origin, using the
+    // same primitive under the same name, is not writing over this workspace.
+    expect(window.localStorage.getItem('workspace:test:brn_p:display')).toBeNull()
+  })
+
+  it('two prefixes over one name and one scope do not see each other', async () => {
+    const user = userEvent.setup()
+    const { unmount } = render(
+      <store.Provider scope="brn_shared">
+        <Panel name="host" />
+      </store.Provider>,
+    )
+    await user.click(screen.getByRole('button', { name: 'host: group by assignee' }))
+    unmount()
+
+    render(
+      <prefixedStore.Provider scope="brn_shared">
+        <PrefixedPanel name="guest" />
+      </prefixedStore.Provider>,
+    )
+    expect(screen.getByTestId('guest-grouping')).toHaveTextContent('column')
+  })
+
+  it('persists a change and reads it back on the next mount', async () => {
+    const user = userEvent.setup()
+    const { unmount } = render(
+      <store.Provider scope="brn_1">
+        <Panel name="a" />
+      </store.Provider>,
+    )
+    await user.click(screen.getByRole('button', { name: 'a: group by assignee' }))
+    expect(screen.getByTestId('a-grouping')).toHaveTextContent('assignee')
+    unmount()
+
+    render(
+      <store.Provider scope="brn_1">
+        <Panel name="b" />
+      </store.Provider>,
+    )
+    expect(screen.getByTestId('b-grouping')).toHaveTextContent('assignee')
+  })
+
+  it('partitions by scope — one brand never sees another brand settings', async () => {
+    const user = userEvent.setup()
+    const { unmount } = render(
+      <store.Provider scope="brn_1">
+        <Panel name="a" />
+      </store.Provider>,
+    )
+    await user.click(screen.getByRole('button', { name: 'a: group by assignee' }))
+    unmount()
+
+    render(
+      <store.Provider scope="brn_2">
+        <Panel name="b" />
+      </store.Provider>,
+    )
+    expect(screen.getByTestId('b-grouping')).toHaveTextContent('column')
+  })
+
+  it('two providers hold independent settings', async () => {
+    const user = userEvent.setup()
+    render(
+      <>
+        <store.Provider>
+          <Panel name="left" />
+        </store.Provider>
+        <store.Provider>
+          <Panel name="right" />
+        </store.Provider>
+      </>,
+    )
+    await user.click(screen.getByRole('button', { name: 'left: group by assignee' }))
+    expect(screen.getByTestId('left-grouping')).toHaveTextContent('assignee')
+    // The singleton trap: with a module-level store this would read "assignee".
+    expect(screen.getByTestId('right-grouping')).toHaveTextContent('column')
+  })
+
+  it('drops a persisted value that is the wrong type or off the allow-list', () => {
+    window.localStorage.setItem(
+      store.storageKey('brn_3'),
+      JSON.stringify({ grouping: 'sideways', showEmpty: 'yes' }),
+    )
+    render(
+      <store.Provider scope="brn_3">
+        <Panel name="c" />
+      </store.Provider>,
+    )
+    expect(screen.getByTestId('c-grouping')).toHaveTextContent('column')
+    expect(screen.getByTestId('c-empty')).toHaveTextContent('true')
+  })
+
+  it('persists a numeric setting and reads it back', async () => {
+    const user = userEvent.setup()
+    const { unmount } = render(
+      <store.Provider scope="brn_n">
+        <Panel name="n" />
+      </store.Provider>,
+    )
+    await user.click(screen.getByRole('button', { name: 'n: widen' }))
+    expect(screen.getByTestId('n-size')).toHaveTextContent('820')
+    unmount()
+
+    render(
+      <store.Provider scope="brn_n">
+        <Panel name="n2" />
+      </store.Provider>,
+    )
+    expect(screen.getByTestId('n2-size')).toHaveTextContent('820')
+  })
+
+  it('drops a stored size that is not a size', () => {
+    // `NaN` is `typeof 'number'` and survives a hand edit; a pane laid out at
+    // `NaN` px has no width at all, so it is rejected like any other value
+    // that does not hold up.
+    for (const [scope, stored] of [
+      ['brn_n1', Number.NaN],
+      ['brn_n2', -40],
+      ['brn_n3', 99999],
+      ['brn_n4', '560'],
+    ] as const) {
+      window.localStorage.setItem(
+        store.storageKey(scope),
+        JSON.stringify({ panelSize: stored }),
+      )
+      const view = render(
+        <store.Provider scope={scope}>
+          <Panel name={scope} />
+        </store.Provider>,
+      )
+      expect(screen.getByTestId(`${scope}-size`)).toHaveTextContent('560')
+      view.unmount()
+    }
+  })
+
+  it('survives a payload that is not an object at all', () => {
+    window.localStorage.setItem(store.storageKey('brn_4'), 'not json {{{')
+    render(
+      <store.Provider scope="brn_4">
+        <Panel name="d" />
+      </store.Provider>,
+    )
+    expect(screen.getByTestId('d-grouping')).toHaveTextContent('column')
+  })
+
+  it('reports isDefault, and reset returns to it', async () => {
+    const user = userEvent.setup()
+    render(
+      <store.Provider scope="brn_5">
+        <Panel name="e" />
+      </store.Provider>,
+    )
+    expect(screen.getByTestId('e-default')).toHaveTextContent('true')
+    await user.click(screen.getByRole('button', { name: 'e: hide empty' }))
+    expect(screen.getByTestId('e-default')).toHaveTextContent('false')
+    await user.click(screen.getByRole('button', { name: 'e: reset' }))
+    expect(screen.getByTestId('e-empty')).toHaveTextContent('true')
+    expect(screen.getByTestId('e-default')).toHaveTextContent('true')
+  })
+})