aberdeen 0.1.1 → 0.2.1

package/tests/array.js

@@ -0,0 +1,109 @@
+describe('Array', () => {
+	it('fires higher-scope isEmpty before getting to content', () => {
+		let store = new Store(['a'])
+		let cnt1 = 0, cnt2 = 0
+		mount(document.body, () => {
+			cnt1++
+			if (!store.isEmpty()) {
+				node('div', () => {
+					cnt2++;
+					text(store.get(0))
+				})
+			}
+		})
+		assertBody(`div{"a"}`)
+
+		store.set(0, 'b')
+		passTime();
+		assertBody(`div{"b"}`)
+		assertEqual([cnt1,cnt2], [1,2])
+
+		store.delete(0);
+		passTime()
+		assertBody(``)
+		assertEqual([cnt1,cnt2], [2,2])
+	})
+
+	it('reactively get() full array', () => {
+		let store = new Store([3, 4, new Store([5, 6])])
+		mount(document.body, () => {
+			text(JSON.stringify(store.get()))
+			text(JSON.stringify(store.query({depth: 1})[2].get()))
+		})
+		passTime()
+		assertBody(`"[3,4,[5,6]]" "[5,6]"`)
+
+		store.push(7)
+		store.ref(2).push(8)
+		passTime()
+		assertBody(`"[3,4,[5,6,8],7]" "[5,6,8]"`)
+
+		assertEqual(store.get(6), undefined)
+		assertEqual(store.get(6, 'a'), undefined)
+	})
+
+	it('handles invalid indexes', () => {
+		let store = new Store(["a","b","c"])
+		for(let index in [-1, 1000000, "1", 0.5]) {
+			assertThrow('Invalid array index', () => store.set(index, "test"))
+		}
+
+		assertEqual(store.get("1"), "b")
+		assertThrow("Invalid array index", () => store.get('a'))
+		assertThrow("Invalid array index", () => store.get(true))
+	})
+
+	it('merges', () => {
+		let cnt1 = 0, cnt2 = 0
+		let store = new Store([1,undefined,3])
+		mount(document.body, () => {
+			cnt1++
+			store.onEach(item => {
+				cnt2++
+				node('div', item.get())
+			})
+		})
+
+		assertBody(`div{"1"} div{"3"}`)
+		assertEqual([cnt1, cnt2], [1,2])
+
+		store.set(1, 2)
+		passTime()
+		assertBody(`div{"1"} div{"2"} div{"3"}`)
+		assertEqual([cnt1, cnt2], [1,3])
+
+		// Merging just replace the entire array
+		store.merge([1,"two"])
+		passTime()
+		assertBody(`div{"1"} div{"two"}`)
+		assertEqual([cnt1, cnt2], [1,4])
+
+		store.set(9,'ten')
+		passTime()
+		assertBody(`div{"1"} div{"two"} div{"ten"}`)
+		assertEqual([cnt1, cnt2], [1,5])
+
+		store.set(4, 'five')
+		passTime()
+		assertBody(`div{"1"} div{"two"} div{"five"} div{"ten"}`)
+		assertEqual([cnt1, cnt2], [1,6])
+
+		store.delete(1)
+		passTime()
+		assertBody(`div{"1"} div{"five"} div{"ten"}`)
+		assertEqual([cnt1, cnt2], [1,6])
+
+		store.delete(9)
+		store.push("six")
+		assertEqual(store.get(5), "six")
+		passTime()
+		assertBody(`div{"1"} div{"five"} div{"six"}`)
+		assertEqual([cnt1, cnt2], [1,7])
+
+		store.set([1, undefined, 3])
+		passTime()
+		assertBody(`div{"1"} div{"3"}`)
+		assertEqual([cnt1, cnt2], [1,8])
+		
+	})
+})

package/tests/binding.js

@@ -0,0 +1,106 @@
+describe('Value binding', function() {
+	it('binds input values', () => {
+		let store = new Store('test')
+		let inputElement;
+		mount(document.body, () => {
+			node('input', store, () => {
+				inputElement = getParentElement()
+				prop('class', {correct: store.get().length >= 5})
+			})
+		})
+		assertBody(`input{value="test"}`)
+
+		inputElement.value = "testx"
+		inputElement.event("input")
+		passTime()
+
+		assertBody(`input{@class="correct" value="testx"}`)
+	})
+
+	it('binds checkboxes', () => {
+		let store = new Store(true)
+		let inputElement;
+		mount(document.body, () => {
+			node('input', {type: 'checkbox'}, store, () => {
+				inputElement = getParentElement()
+			})
+		})
+		assertBody(`input{@type="checkbox" checked=true}`)
+
+		inputElement.checked = false
+		inputElement.event("input")
+		passTime()
+
+		assertBody(`input{@type="checkbox" checked=false}`)
+	})
+
+	it('binds radio buttons', () => {
+		let store = new Store('woman')
+		let inputElement1, inputElement2;
+		mount(document.body, () => {
+			node('input', {type: 'radio', name: 'gender', value: 'man'}, store, () => {
+				inputElement1 = getParentElement()
+			})
+			node('input', {type: 'radio', name: 'gender', value: 'woman'}, store, () => {
+				inputElement2 = getParentElement()
+			})
+		})
+		assertBody(`input{@name="gender" @type="radio" checked=false value="man"} input{@name="gender" @type="radio" checked=true value="woman"}`)
+
+		inputElement1.checked = true
+		inputElement1.event("input")
+		inputElement2.checked = false
+		inputElement2.event("input")
+		passTime()
+
+		assertEqual(store.get(), 'man')
+	})
+
+	it('reads initial value when Store is undefined', () => {
+		let store = new Store({})
+		mount(document.body, () => {
+			node('input', {value: 'a'}, store.ref('input'))
+			node('input', {type: 'checkbox', checked: true}, store.ref('checkbox'))
+			node('input', {type: 'radio', name: 'abc', value: 'x', checked: false}, store.ref('radio'))
+			node('input', {type: 'radio', name: 'abc', value: 'y', checked: true}, store.ref('radio'))
+			node('input', {type: 'radio', name: 'abc', value: 'z', checked: false}, store.ref('radio'))
+		})
+		assertEqual(store.get(), {input: 'a', checkbox: true, radio: 'y'})
+	})
+
+	it('changes DOM when Store value is updated', () => {
+		let store = new Store("test")
+		let toggle = new Store(true)
+		mount(document.body, () => {
+			node('input', store)
+			node('input', {type: 'checkbox'}, toggle)
+		})
+		assertBody(`input{value="test"} input{@type="checkbox" checked=true}`)
+
+		store.set("changed")
+		toggle.set(false)
+		passTime()
+		assertBody(`input{value="changed"} input{@type="checkbox" checked=false}`)
+	})
+
+	it('returns numbers for number/range typed inputs', () => {
+		let store = new Store("")
+		let inputElement;
+		mount(document.body, () => {
+			node('input', {type: 'number'}, store, () => {
+				inputElement = getParentElement()
+			})
+		})
+		assertBody(`input{@type="number" value=""}`)
+
+		inputElement.value = "123"
+		inputElement.event("input")
+		passTime()
+		assertEqual(store.get(), 123)
+
+		inputElement.value = ""
+		inputElement.event("input")
+		passTime()
+		assertEqual(store.get(), null)
+	})
+})

package/tests/browsers.js

@@ -0,0 +1,22 @@
+describe('Browsers', () => {
+	it('works without Array.from', () => {
+		let oldFrom = Array.from
+		Array.from = undefined
+		
+		let store = new Store(false)
+		let cnt = 0
+		mount(document.body, () => {
+			cnt++
+			if (store.get()) node('a')
+		})
+		assertBody(``)
+
+
+		store.set(true)
+		passTime()
+		assertBody(`a{}`)
+		assertEqual(cnt, 2)
+
+		Array.from = oldFrom
+	})
+})

package/tests/clean.js

@@ -0,0 +1,26 @@
+describe('Clean', function() {
+	it('triggers once when redrawing', () => {
+
+        let cnt1 = 0, cnt2 = 0
+        let store = new Store(1)
+        mount(document.body, () => {
+            cnt1++
+            text(store.get())
+            clean(() => {
+                cnt2++
+            })
+        })
+
+        passTime()
+        assertBody(`"1"`)
+        assertEqual([cnt1, cnt2], [1, 0])
+
+        store.set(2)
+        passTime()
+        assertBody(`"2"`)
+        assertEqual([cnt1, cnt2], [2, 1])
+
+        unmount()
+        assertEqual([cnt1, cnt2], [2, 2])
+    })
+})

package/tests/count.js

@@ -0,0 +1,105 @@
+describe('Count', () => {
+	it('reactively counts object keys', () => {
+        let store = new Store()
+        let cnt = 0
+        mount(document.body, () => {
+            text(store.count())
+            cnt++
+        })
+        passTime()
+        assertBody(`"0"`)
+        assertEqual(cnt, 1)
+
+        store.set('a', 1)
+        passTime()
+        assertBody(`"1"`)
+        assertEqual(cnt, 2)
+
+        store.set('a', 2)
+        passTime()
+        assertBody(`"1"`)
+        assertEqual(cnt, 2)
+
+        store.set('b', 1)
+        passTime()
+        assertBody(`"2"`)
+        assertEqual(cnt, 3)
+
+        store.delete('a')
+        passTime()
+        assertBody(`"1"`)
+        assertEqual(cnt, 4)
+
+        store.delete('b')
+        passTime()
+        assertBody(`"0"`)
+        assertEqual(cnt, 5)
+    })
+
+    it('counts non-reflectively', () => {
+        let cases = [
+            {data: [], count: 0},
+            {data: [1,2], count: 2},
+            {data: {}, count: 0},
+            {data: {a:1, b:2}, count: 2},
+            {data: objToMap({}), count: 0},
+            {data: objToMap({a:1, b:2}), count: 2},
+        ]
+        for(let c of cases) {
+            let store = new Store(c.data)
+            assertEqual(store.count(), c.count)
+            assertEqual(store.isEmpty(), c.count==0)
+        }
+    })
+
+    it('throws when counting uncountable things', () => {
+        let store = new Store({a: 3})
+        assertThrow(() => {
+            store.count('a')
+        })
+        assertThrow(() => {
+            store.isEmpty('a')
+        })
+        assertEqual(store.count('b'), 0)
+        assertEqual(store.count('b', 'c', 'd'), 0)
+        assertEqual(store.isEmpty('b'), true)
+        assertEqual(store.isEmpty('b', 'c', 'd'), true)
+    })
+
+    it('reactively handles isEmpty', () => {
+        let store = new Store()
+        let cnt = 0
+        mount(document.body, () => {
+            text(store.isEmpty())
+            cnt++
+        })
+        passTime()
+        assertBody(`"true"`)
+        assertEqual(cnt, 1)
+
+        store.set('a', 1)
+        passTime()
+        assertBody(`"false"`)
+        assertEqual(cnt, 2)
+
+        store.set('a', 2)
+        passTime()
+        assertBody(`"false"`)
+        assertEqual(cnt, 2)
+
+        store.set('b', 1)
+        passTime()
+        assertBody(`"false"`)
+        assertEqual(cnt, 2)
+
+        store.delete('a')
+        passTime()
+        assertBody(`"false"`)
+        assertEqual(cnt, 2)
+
+        store.delete('b')
+        passTime()
+        assertBody(`"true"`)
+        assertEqual(cnt, 3)
+    })
+})

package/tests/create.js

@@ -0,0 +1,92 @@
+describe('Create event', function() {
+
+    it('does not apply on initial rendering', () => {
+        let store = new Store(true)
+		mount(document.body, () => {
+            node('b', {create: 'y'})
+		})
+        
+		assertBody(`b{}`)
+    });
+
+    it('works at top-level', () => {
+        let store = new Store(false)
+		mount(document.body, () => {
+            if (store.get()) node('b', {create: 'y'})
+		})
+        
+		assertBody(``)
+
+        store.set(true)
+        // We'll do this in a setTimeout 0, so that the assert can be done before the temporary class is removed in a later setTimeout 0.
+		setTimeout(() => assertBody(`b{@class="y"}`), 0)
+        passTime(0)
+		assertBody(`b{}`)
+    });
+
+    it('does not apply when it is part of a larger whole newly rendered', () => {
+        let store = new Store(false)
+		mount(document.body, () => {
+            if (store.get()) node('b', () => node('c', {create: 'y'}))
+		})
+        
+		assertBody(``)
+
+        store.set(true)
+        // We do the assert in a setTimeout 0, so it's performed before the temporary class is removed in a later setTimeout 0.
+		setTimeout(() => assertBody(`b{c{}}`), 0)
+        passTime(0)
+		assertBody(`b{c{}}`)
+    });
+
+    it('works in an onEach', () => {
+        let store = new Store([])
+		mount(document.body, () => {
+            store.onEach(item => {
+                node(item.get(), {create: "y"})
+            })
+		})
+
+        store.set(['a', undefined, 'c'])
+        // We do the assert in a setTimeout 0, so it's performed before the temporary class is removed in a later setTimeout 0.
+		setTimeout(() => assertBody(`a{@class="y"} c{@class="y"}`), 0)
+        passTime(0)
+		assertBody(`a{} c{}`)
+    });
+
+    it('performs a grow animation', () => {
+        let store = new Store(false)
+        mount(document.body, () => {
+            node('div', {style: {display: 'flex'}}, () => {
+                if (store.get()) node('a', {create: grow})
+            })
+        })
+
+        assertBody(`div{:display="flex"}`)
+        
+        store.set(true)
+        passTime(0)
+        assert(getBody().startsWith('div{:display="flex" a{'))
+        assert(getBody().indexOf('transition')>=0)
+
+        passTime(2000)
+        assertBody(`div{:display="flex" a{}}`)
+    })
+
+    it('aborts a grow animation', () => {
+        let store = new Store(false)
+        mount(document.body, () => {
+            if (store.get()) {
+                node('a', {create: grow})
+                store.set(false)
+            }
+        })
+
+        assertBody(``)
+        
+        store.set(true) // Naughty render function will set this back to false
+
+        passTime()
+        assertBody(``)
+    })
+})