Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/danielroe/zero-vue. Vue bindings for Zero
sync vue zero
Something went wrong. Try again.
TypeScript
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503import type { Change, ErroredQuery, Node, Query } from '@rocicorp/zero'
import { createBuilder, createSchema, defineMutatorsWithType, defineMutatorWithType, defineQueriesWithType, defineQuery, number, relationships, string, table, Zero,} from '@rocicorp/zero'import { addContextToQuery } from '@rocicorp/zero/bindings'import { assert, describe, expect, it, vi } from 'vitest'import { nextTick, watch } from 'vue'import z from 'zod'import { VueView, vueViewFactory } from './view'
const simpleSchema = createSchema({ tables: [ table('table') .columns({ a: number(), b: string(), }) .primaryKey('a'), ],})
function setupSimple() { const defineMutators = defineMutatorsWithType<typeof simpleSchema>() const defineMutator = defineMutatorWithType<typeof simpleSchema>() const mutators = defineMutators({ insert: defineMutator( z.object({ a: z.number(), b: z.string() }), async ({ tx, args: { a, b } }) => { return tx.mutate.table.insert({ a, b }) }, ), update: defineMutator( z.object({ a: z.number(), b: z.string() }), async ({ tx, args: { a, b } }) => { return tx.mutate.table.update({ a, b }) }, ), delete: defineMutator( z.object({ a: z.number() }), async ({ tx, args: { a } }) => { return tx.mutate.table.delete({ a }) }, ), insertTwo: defineMutator( z.object({ a1: z.number(), a2: z.number() }), async ({ tx, args: { a1, a2 } }) => { await tx.mutate.table.insert({ a: a1, b: 'x' }) await tx.mutate.table.insert({ a: a2, b: 'y' }) }, ), })
const zero = new Zero({ userID: 'asdf', server: null, schema: simpleSchema, mutators, // This is often easier to develop with if you're frequently changing // the schema. Switch to 'idb' for local-persistence. kvStore: 'mem', })
const zql = createBuilder(simpleSchema) const defineQueries = defineQueriesWithType<typeof simpleSchema>() const queries = defineQueries({ table: defineQuery(() => zql.table), })
const tableQuery = addContextToQuery(queries.table(), zero.context)
return { zero, queries, mutators, tableQuery }}
const recursiveTable = table('tree') .columns({ id: number(), name: string(), data: string().optional(), childID: number().optional(), }) .primaryKey('id')
const treeSchema = createSchema({ tables: [recursiveTable], relationships: [ relationships(recursiveTable, ({ many }) => ({ children: many({ sourceField: ['childID'], destSchema: recursiveTable, destField: ['id'], }), })), ],})
function setupTree() { const defineMutators = defineMutatorsWithType<typeof treeSchema>() const defineMutator = defineMutatorWithType<typeof treeSchema>() const mutators = defineMutators({ insert: defineMutator( z.object({ id: z.number(), name: z.string(), data: z.string().optional().nullable(), childID: z.number().nullable() }), async ({ tx, args: { id, name, data, childID } }) => { return tx.mutate.tree.insert({ id, name, data, childID, }) }, ), update: defineMutator( z.object({ id: z.number(), data: z.string() }), async ({ tx, args: { id, data } }) => { return tx.mutate.tree.update({ id, data, }) }, ), delete: defineMutator( z.object({ id: z.number() }), async ({ tx, args: { id } }) => { return tx.mutate.tree.delete({ id }) }, ), })
const zero = new Zero({ userID: 'asdf', server: null, schema: treeSchema, mutators, // This is often easier to develop with if you're frequently changing // the schema. Switch to 'idb' for local-persistence. kvStore: 'mem', })
const zql = createBuilder(treeSchema) const defineQueries = defineQueriesWithType<typeof treeSchema>() const queries = defineQueries({ table: defineQuery(() => zql.tree.related('children')), one: defineQuery(() => zql.tree.related('children').one()), })
const treeWithChildrenQuery = addContextToQuery(queries.table(), zero.context) const one = addContextToQuery(queries.one(), zero.context)
return { zero, queries, mutators, treeWithChildrenQuery, one }}
const issue = table('issue') .columns({ id: number(), name: string(), }) .primaryKey('id')
const label = table('label') .columns({ id: number(), name: string(), }) .primaryKey('id')
const issueLabel = table('issueLabel') .columns({ id: number(), issueID: number(), labelID: number(), extra: string(), }) .primaryKey('id')
const collapseSchema = createSchema({ tables: [issue, label, issueLabel], relationships: [ relationships(issue, ({ many }) => ({ labels: many( { sourceField: ['id'], destSchema: issueLabel, destField: ['issueID'], }, { sourceField: ['labelID'], destSchema: label, destField: ['id'], }, ), })), ],})
function setupCollapse() { const zero = new Zero({ userID: 'asdf', server: null, schema: collapseSchema, // This is often easier to develop with if you're frequently changing // the schema. Switch to 'idb' for local-persistence. kvStore: 'mem', })
const zql = createBuilder(collapseSchema) const defineQueries = defineQueriesWithType<typeof collapseSchema>() const queries = defineQueries({ issuesWithLabelsQuery: defineQuery(() => zql.issue.related('labels')), })
const issuesWithLabelsQuery = addContextToQuery(queries.issuesWithLabelsQuery(), zero.context)
return { zero, queries, issuesWithLabelsQuery }}
function makeAddChange(node: Node): Change { return [0, node, null]}
function makeRemoveChange(node: Node): Change { return [1, node, null]}
function makeEditChange(node: Node, oldNode: Node): Change { return [2, node, oldNode]}
function makeChildChange(node: Node, child: { relationshipName: string, change: Change }): Change { return [3, node, child]}
function manualCommitFactory() { let commit = () => {} const factory: typeof vueViewFactory = (query, input, format, onDestroy, _onTransactionCommit, queryComplete, updateTTL) => vueViewFactory(query, input, format, onDestroy, (cb) => { commit = cb }, queryComplete, updateTTL) return { factory, commit: () => commit() }}
describe('vueView', () => { it('basics', async () => { const { zero, mutators, tableQuery } = setupSimple()
await zero.mutate(mutators.insert({ a: 1, b: 'a' })).client await zero.mutate(mutators.insert({ a: 2, b: 'b' })).client
const view = zero.materialize( tableQuery, vueViewFactory, )
expect(view.data).toMatchInlineSnapshot(` [ { "a": 1, "b": "a", Symbol(rc): 1, }, { "a": 2, "b": "b", Symbol(rc): 1, }, ] `)
// TODO: Test with a real resolver // expect(view.status).toEqual("complete");
await zero.mutate(mutators.insert({ a: 3, b: 'c' })).client
expect(view.data).toMatchInlineSnapshot(` [ { "a": 1, "b": "a", Symbol(rc): 1, }, { "a": 2, "b": "b", Symbol(rc): 1, }, { "a": 3, "b": "c", Symbol(rc): 1, }, ] `)
await zero.mutate(mutators.delete({ a: 1 })).client await zero.mutate(mutators.delete({ a: 2 })).client
expect(view.data).toMatchInlineSnapshot(` [ { "a": 3, "b": "c", Symbol(rc): 1, }, ] `)
await zero.mutate(mutators.delete({ a: 3 })).client
expect(view.data).toEqual([]) })
it.skip('basics-perf', async () => { const iterations = 10_000
const { zero, mutators, tableQuery } = setupSimple()
const view = zero.materialize(tableQuery, vueViewFactory) assert(view.data) assert(typeof view.data === 'object') assert('length' in view.data) expect(view.data?.length).toBe(0)
for (const i in [...Array.from({ length: iterations }).keys()]) { await zero.mutate(mutators.insert({ a: Number(i), b: 'a' })).client }
expect(view.data?.length).toBe(iterations) })
it('hydrate-empty', async () => { const { zero, tableQuery } = setupSimple()
const view = zero.materialize(tableQuery, vueViewFactory)
expect(view.data).toEqual([]) })
it('preserves identity of unchanged rows across transactions', async () => { const { zero, mutators, tableQuery } = setupSimple()
await zero.mutate(mutators.insert({ a: 1, b: 'a' })).client await zero.mutate(mutators.insert({ a: 2, b: 'b' })).client
const view = zero.materialize(tableQuery, vueViewFactory)
const before = view.data assert(Array.isArray(before)) const [row1, row2] = before
await zero.mutate(mutators.update({ a: 2, b: 'c' })).client
const after = view.data assert(Array.isArray(after)) expect(after).not.toBe(before) expect(after[0]).toBe(row1) expect(after[1]).not.toBe(row2) })
it('notifies sync watchers with final state at transaction commit', async () => { const { zero, mutators, tableQuery } = setupSimple()
const view = zero.materialize(tableQuery, vueViewFactory)
const seen: number[] = [] watch(() => view.data, (data) => { assert(Array.isArray(data)) seen.push(data.length) }, { flush: 'sync' })
await zero.mutate(mutators.insertTwo({ a1: 1, a2: 2 })).client
expect(seen.at(-1)).toBe(2) })
it('tree', async () => { const { zero, mutators, treeWithChildrenQuery } = setupTree()
await zero.mutate(mutators.insert({ id: 1, name: 'foo', data: null, childID: 2 })).client await zero.mutate(mutators.insert({ id: 2, name: 'foobar', data: null, childID: null, })).client await zero.mutate(mutators.insert({ id: 3, name: 'mon', data: null, childID: 4 })).client await zero.mutate(mutators.insert({ id: 4, name: 'monkey', data: null, childID: null, })).client
const view = zero.materialize(treeWithChildrenQuery, vueViewFactory)
expect(view.data).toMatchInlineSnapshot(` [ { "childID": 2, "children": [ { "childID": null, "data": null, "id": 2, "name": "foobar", Symbol(rc): 1, }, ], "data": null, "id": 1, "name": "foo", Symbol(rc): 1, }, { "childID": null, "children": [], "data": null, "id": 2, "name": "foobar", Symbol(rc): 1, }, { "childID": 4, "children": [ { "childID": null, "data": null, "id": 4, "name": "monkey", Symbol(rc): 1, }, ], "data": null, "id": 3, "name": "mon", Symbol(rc): 1, }, { "childID": null, "children": [], "data": null, "id": 4, "name": "monkey", Symbol(rc): 1, }, ] `)
await zero.mutate(mutators.insert({ id: 5, name: 'chocolate', childID: 2 })).client expect(view.data).toMatchInlineSnapshot(` [ { "childID": 2, "children": [ { "childID": null, "data": null, "id": 2, "name": "foobar", Symbol(rc): 1, }, ], "data": null, "id": 1, "name": "foo", Symbol(rc): 1, }, { "childID": null, "children": [], "data": null, "id": 2, "name": "foobar", Symbol(rc): 1, }, { "childID": 4, "children": [ { "childID": null, "data": null, "id": 4, "name": "monkey", Symbol(rc): 1, }, ], "data": null, "id": 3, "name": "mon", Symbol(rc): 1, }, { "childID": null, "children": [], "data": null, "id": 4, "name": "monkey", Symbol(rc): 1, }, { "childID": 2, "children": [ { "childID": null, "data": null, "id": 2, "name": "foobar", Symbol(rc): 1, }, ], "data": null, "id": 5, "name": "chocolate", Symbol(rc): 1, }, ] `)
await zero.mutate(mutators.delete({ id: 2 })).client expect(view.data).toMatchInlineSnapshot(` [ { "childID": 2, "children": [], "data": null, "id": 1, "name": "foo", Symbol(rc): 1, }, { "childID": 4, "children": [ { "childID": null, "data": null, "id": 4, "name": "monkey", Symbol(rc): 1, }, ], "data": null, "id": 3, "name": "mon", Symbol(rc): 1, }, { "childID": null, "children": [], "data": null, "id": 4, "name": "monkey", Symbol(rc): 1, }, { "childID": 2, "children": [], "data": null, "id": 5, "name": "chocolate", Symbol(rc): 1, }, ] `)
await zero.mutate(mutators.insert({ id: 2, name: 'foobaz', childID: null, })).client
expect(view.data).toMatchInlineSnapshot(` [ { "childID": 2, "children": [ { "childID": null, "data": null, "id": 2, "name": "foobaz", Symbol(rc): 1, }, ], "data": null, "id": 1, "name": "foo", Symbol(rc): 1, }, { "childID": null, "children": [], "data": null, "id": 2, "name": "foobaz", Symbol(rc): 1, }, { "childID": 4, "children": [ { "childID": null, "data": null, "id": 4, "name": "monkey", Symbol(rc): 1, }, ], "data": null, "id": 3, "name": "mon", Symbol(rc): 1, }, { "childID": null, "children": [], "data": null, "id": 4, "name": "monkey", Symbol(rc): 1, }, { "childID": 2, "children": [ { "childID": null, "data": null, "id": 2, "name": "foobaz", Symbol(rc): 1, }, ], "data": null, "id": 5, "name": "chocolate", Symbol(rc): 1, }, ] `) })
it('tree-single', async () => { const { zero, mutators, one } = setupTree()
await zero.mutate(mutators.insert({ id: 1, name: 'foo', childID: 2 })).client await zero.mutate(mutators.insert({ id: 2, name: 'foobar', childID: null })).client
const view = zero.materialize(one, vueViewFactory)
expect(view.data).toMatchInlineSnapshot(` { "childID": 2, "children": [ { "childID": null, "data": null, "id": 2, "name": "foobar", Symbol(rc): 1, }, ], "data": null, "id": 1, "name": "foo", Symbol(rc): 1, } `)
// remove the child await zero.mutate(mutators.delete({ id: 2 })).client
expect(view.data).toMatchInlineSnapshot(` { "childID": 2, "children": [], "data": null, "id": 1, "name": "foo", Symbol(rc): 1, } `)
// remove the parent await zero.mutate(mutators.delete({ id: 1 })).client expect(view.data).toEqual(undefined) })
it('collapse', async () => { const { zero, issuesWithLabelsQuery } = setupCollapse()
const { factory, commit } = manualCommitFactory() const view = zero.materialize(issuesWithLabelsQuery, factory) const push = (change: Change) => { view.push(change) commit() }
expect(view.data).toEqual([])
const changeSansType = { node: { row: { id: 1, name: 'issue', }, relationships: { labels: () => [ { row: { id: 1, issueId: 1, labelId: 1, extra: 'a', }, relationships: { labels: () => [ { row: { id: 1, name: 'label', }, relationships: {}, }, ], }, }, ], }, }, } as const
push(makeAddChange(changeSansType.node))
expect(view.data).toMatchInlineSnapshot(` [ { "id": 1, "labels": [ { "id": 1, "name": "label", Symbol(rc): 1, }, ], "name": "issue", Symbol(rc): 1, }, ] `)
push(makeRemoveChange(changeSansType.node)) expect(view.data).toEqual([])
push(makeAddChange(changeSansType.node))
push(makeChildChange( { row: { id: 1, name: 'issue', }, relationships: { labels: () => [ { row: { id: 1, issueId: 1, labelId: 1, extra: 'a', }, relationships: { labels: () => [ { row: { id: 1, name: 'label', }, relationships: {}, }, ], }, }, { row: { id: 2, issueId: 1, labelId: 2, extra: 'b', }, relationships: { labels: () => [ { row: { id: 2, name: 'label2', }, relationships: {}, }, ], }, }, ], }, }, { relationshipName: 'labels', change: makeAddChange({ row: { id: 2, issueId: 1, labelId: 2, extra: 'b', }, relationships: { labels: () => [ { row: { id: 2, name: 'label2', }, relationships: {}, }, ], }, }), }, ))
expect(view.data).toMatchInlineSnapshot(` [ { "id": 1, "labels": [ { "id": 1, "name": "label", Symbol(rc): 1, }, { "id": 2, "name": "label2", Symbol(rc): 1, }, ], "name": "issue", Symbol(rc): 1, }, ] `)
// edit the hidden row push(makeChildChange( { row: { id: 1, name: 'issue', }, relationships: { labels: () => [ { row: { id: 1, issueId: 1, labelId: 1, extra: 'a', }, relationships: { labels: () => [ { row: { id: 1, name: 'label', }, relationships: {}, }, ], }, }, { row: { id: 2, issueId: 1, labelId: 2, extra: 'b2', }, relationships: { labels: () => [ { row: { id: 2, name: 'label2', }, relationships: {}, }, ], }, }, ], }, }, { relationshipName: 'labels', change: makeEditChange( { row: { id: 2, issueId: 1, labelId: 2, extra: 'b2', }, relationships: { labels: () => [ { row: { id: 2, name: 'label2', }, relationships: {}, }, ], }, }, { row: { id: 2, issueId: 1, labelId: 2, extra: 'b', }, relationships: { labels: () => [ { row: { id: 2, name: 'label2', }, relationships: {}, }, ], }, }, ), }, ))
expect(view.data).toMatchInlineSnapshot(` [ { "id": 1, "labels": [ { "id": 1, "name": "label", Symbol(rc): 1, }, { "id": 2, "name": "label2", Symbol(rc): 1, }, ], "name": "issue", Symbol(rc): 1, }, ] `)
// edit the leaf push(makeChildChange( { row: { id: 1, name: 'issue', }, relationships: { labels: () => [ { row: { id: 1, issueId: 1, labelId: 1, extra: 'a', }, relationships: { labels: () => [ { row: { id: 1, name: 'label', }, relationships: {}, }, ], }, }, { row: { id: 2, issueId: 1, labelId: 2, extra: 'b2', }, relationships: { labels: () => [ { row: { id: 2, name: 'label2x', }, relationships: {}, }, ], }, }, ], }, }, { relationshipName: 'labels', change: makeChildChange( { row: { id: 2, issueId: 1, labelId: 2, extra: 'b2', }, relationships: { labels: () => [ { row: { id: 2, name: 'label2x', }, relationships: {}, }, ], }, }, { relationshipName: 'labels', change: makeEditChange( { row: { id: 2, name: 'label2x', }, relationships: {}, }, { row: { id: 2, name: 'label2', }, relationships: {}, }, ), }, ), }, ))
expect(view.data).toMatchInlineSnapshot(` [ { "id": 1, "labels": [ { "id": 1, "name": "label", Symbol(rc): 1, }, { "id": 2, "name": "label2x", Symbol(rc): 1, }, ], "name": "issue", Symbol(rc): 1, }, ] `) })
it('collapse-single', async () => { const { zero, issuesWithLabelsQuery } = setupCollapse() const { factory, commit } = manualCommitFactory() const view = zero.materialize(issuesWithLabelsQuery, factory) const push = (change: Change) => { view.push(change) commit() }
expect(view.data).toEqual([])
const changeSansType = { node: { row: { id: 1, name: 'issue', }, relationships: { labels: () => [ { row: { id: 1, issueId: 1, labelId: 1, }, relationships: { labels: () => [ { row: { id: 1, name: 'label', }, relationships: {}, }, ], }, }, ], }, }, } as const push(makeAddChange(changeSansType.node))
expect(view.data).toMatchInlineSnapshot(` [ { "id": 1, "labels": [ { "id": 1, "name": "label", Symbol(rc): 1, }, ], "name": "issue", Symbol(rc): 1, }, ] `) })
it('basic with edit pushes', async () => { const { zero, tableQuery, mutators } = setupSimple() await zero.mutate(mutators.insert({ a: 1, b: 'a' })).client await zero.mutate(mutators.insert({ a: 2, b: 'b' })).client
const view = zero.materialize(tableQuery, vueViewFactory) expect(view.data).toMatchInlineSnapshot(` [ { "a": 1, "b": "a", Symbol(rc): 1, }, { "a": 2, "b": "b", Symbol(rc): 1, }, ] `)
await zero.mutate(mutators.update({ a: 2, b: 'b2' })).client
expect(view.data).toMatchInlineSnapshot(` [ { "a": 1, "b": "a", Symbol(rc): 1, }, { "a": 2, "b": "b2", Symbol(rc): 1, }, ] `)
await zero.mutate(mutators.insert({ a: 3, b: 'b3' })).client await zero.mutate(mutators.delete({ a: 2 })).client
expect(view.data).toMatchInlineSnapshot(` [ { "a": 1, "b": "a", Symbol(rc): 1, }, { "a": 3, "b": "b3", Symbol(rc): 1, }, ] `) })
it('tree edit', async () => { const { zero, mutators, treeWithChildrenQuery } = setupTree()
await zero.mutate(mutators.insert({ id: 1, name: 'foo', data: 'a', childID: 2 })).client await zero.mutate(mutators.insert({ id: 2, name: 'foobar', data: 'b', childID: null, })).client await zero.mutate(mutators.insert({ id: 3, name: 'mon', data: 'c', childID: 4 })).client await zero.mutate(mutators.insert({ id: 4, name: 'monkey', data: 'd', childID: null, })).client
const view = zero.materialize(treeWithChildrenQuery, vueViewFactory)
expect(view.data).toMatchInlineSnapshot(` [ { "childID": 2, "children": [ { "childID": null, "data": "b", "id": 2, "name": "foobar", Symbol(rc): 1, }, ], "data": "a", "id": 1, "name": "foo", Symbol(rc): 1, }, { "childID": null, "children": [], "data": "b", "id": 2, "name": "foobar", Symbol(rc): 1, }, { "childID": 4, "children": [ { "childID": null, "data": "d", "id": 4, "name": "monkey", Symbol(rc): 1, }, ], "data": "c", "id": 3, "name": "mon", Symbol(rc): 1, }, { "childID": null, "children": [], "data": "d", "id": 4, "name": "monkey", Symbol(rc): 1, }, ] `)
// Edit root await zero.mutate(mutators.update({ id: 1, data: 'a2' })).client
expect(view.data).toMatchInlineSnapshot(` [ { "childID": 2, "children": [ { "childID": null, "data": "b", "id": 2, "name": "foobar", Symbol(rc): 1, }, ], "data": "a2", "id": 1, "name": "foo", Symbol(rc): 1, }, { "childID": null, "children": [], "data": "b", "id": 2, "name": "foobar", Symbol(rc): 1, }, { "childID": 4, "children": [ { "childID": null, "data": "d", "id": 4, "name": "monkey", Symbol(rc): 1, }, ], "data": "c", "id": 3, "name": "mon", Symbol(rc): 1, }, { "childID": null, "children": [], "data": "d", "id": 4, "name": "monkey", Symbol(rc): 1, }, ] `)
// Edit leaf await zero.mutate(mutators.update({ id: 4, data: 'd2' })).client expect(view.data).toMatchInlineSnapshot(` [ { "childID": 2, "children": [ { "childID": null, "data": "b", "id": 2, "name": "foobar", Symbol(rc): 1, }, ], "data": "a2", "id": 1, "name": "foo", Symbol(rc): 1, }, { "childID": null, "children": [], "data": "b", "id": 2, "name": "foobar", Symbol(rc): 1, }, { "childID": 4, "children": [ { "childID": null, "data": "d2", "id": 4, "name": "monkey", Symbol(rc): 1, }, ], "data": "c", "id": 3, "name": "mon", Symbol(rc): 1, }, { "childID": null, "children": [], "data": "d2", "id": 4, "name": "monkey", Symbol(rc): 1, }, ] `) })
it('queryComplete promise', async () => { const { zero, mutators, tableQuery } = setupSimple() await zero.mutate(mutators.insert({ a: 1, b: 'a' })).client await zero.mutate(mutators.insert({ a: 2, b: 'b' })).client
const queryCompleteResolver = Promise.withResolvers<true>()
const onTransactionCommit = () => {}
const view = zero.materialize(tableQuery, (_, input) => { return new VueView( input, onTransactionCommit, { singular: false, relationships: {} }, () => {}, queryCompleteResolver.promise, () => {}, ) })
expect(view.data).toMatchInlineSnapshot(` [ { "a": 1, "b": "a", Symbol(rc): 1, }, { "a": 2, "b": "b", Symbol(rc): 1, }, ] `) expect(view.status).toEqual('unknown')
queryCompleteResolver.resolve(true) await nextTick() expect(view.status).toEqual('complete') })
it('uses query error message', async () => { const { zero, mutators, tableQuery } = setupSimple() await zero.mutate(mutators.insert({ a: 1, b: 'a' })).client
const queryError = { id: 'q1', name: 'TestQuery', message: 'Something went wrong', details: { reason: 'test' }, error: 'app', } satisfies ErroredQuery
const view = zero.materialize(tableQuery, (_, input) => { return new VueView( input, () => {}, { singular: false, relationships: {} }, () => {}, queryError, () => {}, ) })
expect(view.status).toEqual('error') expect(view.error).toEqual({ type: 'app', message: 'Something went wrong', details: { reason: 'test' }, }) })})
describe('vueViewFactory', () => { interface TestReturn { a: number b: string }
it('correctly calls corresponding handlers', async () => { const { zero, mutators, tableQuery } = setupSimple() await zero.mutate(mutators.insert({ a: 1, b: 'a' })).client await zero.mutate(mutators.insert({ a: 2, b: 'b' })).client
const onDestroy = vi.fn() const onTransactionCommit = vi.fn()
const view = zero.materialize(tableQuery, (_, input) => { return vueViewFactory( undefined as unknown as Query<'table', typeof simpleSchema, TestReturn>, input, { singular: false, relationships: {} }, onDestroy, onTransactionCommit, true, () => {}, ) })
expect(view).toBeDefined() expect(onTransactionCommit).toHaveBeenCalledTimes(1) expect(onTransactionCommit).toHaveBeenCalledWith(expect.any(Function)) expect(onDestroy).not.toHaveBeenCalled() view.destroy() expect(onDestroy).toHaveBeenCalledTimes(1) })})