@tanstack/vue-store 0.5.0 → 0.5.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +2 -2
- package/src/tests/index.test.tsx +0 -135
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanstack/vue-store",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.3",
|
|
4
4
|
"author": "Tanner Linsley",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": "tanstack/store",
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
],
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"vue-demi": "^0.14.6",
|
|
40
|
-
"@tanstack/store": "0.5.
|
|
40
|
+
"@tanstack/store": "0.5.3"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
43
|
"@vue/composition-api": "^1.7.2",
|
package/src/tests/index.test.tsx
DELETED
|
@@ -1,135 +0,0 @@
|
|
|
1
|
-
import { describe, expect, it, test, vi } from 'vitest'
|
|
2
|
-
// @ts-expect-error We need to import `h` as it's part of Vue's JSX transform
|
|
3
|
-
import { defineComponent, h } from 'vue-demi'
|
|
4
|
-
import { render, waitFor } from '@testing-library/vue'
|
|
5
|
-
import { Store } from '@tanstack/store'
|
|
6
|
-
import { userEvent } from '@testing-library/user-event'
|
|
7
|
-
import { shallow, useStore } from '../index'
|
|
8
|
-
|
|
9
|
-
const user = userEvent.setup()
|
|
10
|
-
|
|
11
|
-
describe('useStore', () => {
|
|
12
|
-
it('allows us to select state using a selector', async () => {
|
|
13
|
-
const store = new Store({
|
|
14
|
-
select: 0,
|
|
15
|
-
ignored: 1,
|
|
16
|
-
})
|
|
17
|
-
|
|
18
|
-
const Comp = defineComponent(() => {
|
|
19
|
-
const storeVal = useStore(store, (state) => state.select)
|
|
20
|
-
|
|
21
|
-
return () => <p>Store: {storeVal.value}</p>
|
|
22
|
-
})
|
|
23
|
-
|
|
24
|
-
const { getByText } = render(Comp)
|
|
25
|
-
expect(getByText('Store: 0')).toBeInTheDocument()
|
|
26
|
-
})
|
|
27
|
-
|
|
28
|
-
it('only triggers a re-render when selector state is updated', async () => {
|
|
29
|
-
const store = new Store({
|
|
30
|
-
select: 0,
|
|
31
|
-
ignored: 1,
|
|
32
|
-
})
|
|
33
|
-
|
|
34
|
-
const Comp = defineComponent(() => {
|
|
35
|
-
const storeVal = useStore(store, (state) => state.select)
|
|
36
|
-
|
|
37
|
-
const fn = vi.fn()
|
|
38
|
-
|
|
39
|
-
return () => {
|
|
40
|
-
fn()
|
|
41
|
-
return (
|
|
42
|
-
<div>
|
|
43
|
-
<p>Number rendered: {fn.mock.calls.length}</p>
|
|
44
|
-
<p>Store: {storeVal.value}</p>
|
|
45
|
-
<button
|
|
46
|
-
onClick={() =>
|
|
47
|
-
store.setState((v) => ({
|
|
48
|
-
...v,
|
|
49
|
-
select: 10,
|
|
50
|
-
}))
|
|
51
|
-
}
|
|
52
|
-
>
|
|
53
|
-
Update select
|
|
54
|
-
</button>
|
|
55
|
-
<button
|
|
56
|
-
onClick={() =>
|
|
57
|
-
store.setState((v) => ({
|
|
58
|
-
...v,
|
|
59
|
-
ignored: 10,
|
|
60
|
-
}))
|
|
61
|
-
}
|
|
62
|
-
>
|
|
63
|
-
Update ignored
|
|
64
|
-
</button>
|
|
65
|
-
</div>
|
|
66
|
-
)
|
|
67
|
-
}
|
|
68
|
-
})
|
|
69
|
-
|
|
70
|
-
const { getByText } = render(Comp)
|
|
71
|
-
expect(getByText('Store: 0')).toBeInTheDocument()
|
|
72
|
-
expect(getByText('Number rendered: 1')).toBeInTheDocument()
|
|
73
|
-
|
|
74
|
-
await user.click(getByText('Update select'))
|
|
75
|
-
|
|
76
|
-
await waitFor(() => expect(getByText('Store: 10')).toBeInTheDocument())
|
|
77
|
-
expect(getByText('Number rendered: 2')).toBeInTheDocument()
|
|
78
|
-
|
|
79
|
-
await user.click(getByText('Update ignored'))
|
|
80
|
-
expect(getByText('Number rendered: 2')).toBeInTheDocument()
|
|
81
|
-
})
|
|
82
|
-
})
|
|
83
|
-
|
|
84
|
-
describe('shallow', () => {
|
|
85
|
-
test('should return true for shallowly equal objects', () => {
|
|
86
|
-
const objA = { a: 1, b: 'hello' }
|
|
87
|
-
const objB = { a: 1, b: 'hello' }
|
|
88
|
-
expect(shallow(objA, objB)).toBe(true)
|
|
89
|
-
})
|
|
90
|
-
|
|
91
|
-
test('should return false for objects with different values', () => {
|
|
92
|
-
const objA = { a: 1, b: 'hello' }
|
|
93
|
-
const objB = { a: 2, b: 'world' }
|
|
94
|
-
expect(shallow(objA, objB)).toBe(false)
|
|
95
|
-
})
|
|
96
|
-
|
|
97
|
-
test('should return false for objects with different keys', () => {
|
|
98
|
-
const objA = { a: 1, b: 'hello' }
|
|
99
|
-
const objB = { a: 1, c: 'world' }
|
|
100
|
-
// @ts-ignore
|
|
101
|
-
expect(shallow(objA, objB)).toBe(false)
|
|
102
|
-
})
|
|
103
|
-
|
|
104
|
-
test('should return false for objects with different structures', () => {
|
|
105
|
-
const objA = { a: 1, b: 'hello' }
|
|
106
|
-
const objB = [1, 'hello']
|
|
107
|
-
// @ts-ignore
|
|
108
|
-
expect(shallow(objA, objB)).toBe(false)
|
|
109
|
-
})
|
|
110
|
-
|
|
111
|
-
test('should return false for one object being null', () => {
|
|
112
|
-
const objA = { a: 1, b: 'hello' }
|
|
113
|
-
const objB = null
|
|
114
|
-
expect(shallow(objA, objB)).toBe(false)
|
|
115
|
-
})
|
|
116
|
-
|
|
117
|
-
test('should return false for one object being undefined', () => {
|
|
118
|
-
const objA = { a: 1, b: 'hello' }
|
|
119
|
-
const objB = undefined
|
|
120
|
-
expect(shallow(objA, objB)).toBe(false)
|
|
121
|
-
})
|
|
122
|
-
|
|
123
|
-
test('should return true for two null objects', () => {
|
|
124
|
-
const objA = null
|
|
125
|
-
const objB = null
|
|
126
|
-
expect(shallow(objA, objB)).toBe(true)
|
|
127
|
-
})
|
|
128
|
-
|
|
129
|
-
test('should return false for objects with different types', () => {
|
|
130
|
-
const objA = { a: 1, b: 'hello' }
|
|
131
|
-
const objB = { a: '1', b: 'hello' }
|
|
132
|
-
// @ts-ignore
|
|
133
|
-
expect(shallow(objA, objB)).toBe(false)
|
|
134
|
-
})
|
|
135
|
-
})
|