added unit test for Value and List

fixed bug where child_removed was not cleaned up for List

CHANGELOG.md

@@ -0,0 +1,7 @@
+## 1.1.0 (June 18, 2018)
+ * added unit test for Value and List
+ * fixed bug where child_removed was not cleaned up for List
+
+## 1.0.0 (June 18, 2018)
+ * added value, list and user
+ * added umd build

__snapshots__/list.spec.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`list should render {} initially 1`] = `"list: {}"`;
+
+exports[`list when a child is added, component is re-rendered 1`] = `"list: {\\"some key\\":\\"some value\\"}"`;
+
+exports[`list when a child is changed, component is re-rendered 1`] = `"list: {\\"some key\\":\\"some other value\\"}"`;
+
+exports[`list when a child is removed, component is re-rendered 1`] = `"list: {}"`;

firebase-mock.js

@@ -0,0 +1,25 @@
+module.exports = () => {
+  const self = {
+    onMock: jest.fn((event, listener) => {
+      return listener
+    }),
+    offMock: jest.fn((event, listener) => {
+      return listener
+    }),
+    refMock: jest.fn((path) => {
+      return {
+        on: self.onMock,
+        off: self.offMock
+      }
+    }),
+    Firebase: {
+      database() {
+        return {
+          ref: self.refMock
+        }
+      }
+    }
+  }
+
+  return self;
+}

list.js

@@ -90,7 +90,7 @@ module.exports = (Firebase) => class extends Component {
         return
       }
       this.reference.off('child_added', this.onChildAddedListener)
-      this.reference.off('child_removed', this.onChildAddonChildRemovedListeneredListener)
+      this.reference.off('child_removed', this.onChildRemovedListener)
       this.reference.off('child_changed', this.onChildChangedListener)
       this.reference = undefined
     }

list.spec.js

@@ -0,0 +1,135 @@
+const {createElement} = require('react')
+const {create} = require('react-test-renderer')
+
+const FirebaseMock = require('./firebase-mock')
+const ListFactory = require('./list')
+
+describe('list', () => {
+  it('should render {} initially', () => {
+    const {refMock, Firebase} = FirebaseMock()
+    const List = ListFactory(Firebase)
+    const component = create(createElement(List, {path: 'some path'},
+      (list) => `list: ${JSON.stringify(list)}`
+    ))
+    expect(refMock.mock.calls[0][0]).toBe('some path')
+    expect(component.toJSON())
+      .toMatchSnapshot()
+  })
+
+  it('when a child is added, component is re-rendered', () => {
+    const {onMock, refMock, Firebase} = FirebaseMock()
+    const List = ListFactory(Firebase)
+    const component = create(createElement(List, {path: 'some path'},
+      (list) => `list: ${JSON.stringify(list)}`
+    ))
+    expect(refMock.mock.calls[0][0]).toBe('some path')
+    expect(onMock.mock.calls[0][0]).toBe('child_added')
+    const childAddedListener = onMock.mock.calls[0][1]
+    childAddedListener({
+      key: 'some key',
+      val() {
+        return 'some value'
+      }
+    })
+    expect(component.toJSON())
+      .toMatchSnapshot()
+  })
+
+  it('when a child is removed, component is re-rendered', () => {
+    const {onMock, refMock, Firebase} = FirebaseMock()
+    const List = ListFactory(Firebase)
+    const component = create(createElement(List, {path: 'some path'},
+      (list) => `list: ${JSON.stringify(list)}`
+    ))
+    expect(refMock.mock.calls[0][0]).toBe('some path')
+    expect(onMock.mock.calls[0][0]).toBe('child_added')
+    const childAddedListener = onMock.mock.calls[0][1]
+    childAddedListener({
+      key: 'some key',
+      val() {
+        return 'some value'
+      }
+    })
+    expect(onMock.mock.calls[1][0]).toBe('child_removed')
+    const childRemovedListener = onMock.mock.calls[1][1]
+    childRemovedListener({
+      key: 'some key'
+    })
+    expect(component.toJSON())
+      .toMatchSnapshot()
+  })
+
+  it('when a child is changed, component is re-rendered', () => {
+    const {onMock, refMock, Firebase} = FirebaseMock()
+    const List = ListFactory(Firebase)
+    const component = create(createElement(List, {path: 'some path'},
+      (list) => `list: ${JSON.stringify(list)}`
+    ))
+    expect(refMock.mock.calls[0][0]).toBe('some path')
+    expect(onMock.mock.calls[0][0]).toBe('child_added')
+    const childAddedListener = onMock.mock.calls[0][1]
+    childAddedListener({
+      key: 'some key',
+      val() {
+        return 'some value'
+      }
+    })
+    expect(onMock.mock.calls[2][0]).toBe('child_changed')
+    const childChangedListener = onMock.mock.calls[2][1]
+    childChangedListener({
+      key: 'some key',
+      val() {
+        return 'some other value'
+      }
+    })
+    expect(component.toJSON())
+      .toMatchSnapshot()
+  })
+
+  it('when component is unmounted, listeners are removed', () => {
+    const {onMock, offMock, refMock, Firebase} = FirebaseMock()
+    const List = ListFactory(Firebase)
+    const component = create(createElement(List, {path: 'some path'},
+      (list) => `list: ${JSON.stringify(list)}`
+    ))
+    expect(refMock.mock.calls[0][0]).toBe('some path')
+    component.unmount()
+    expect(onMock.mock.calls.length).toBe(3)
+    expect(offMock.mock.calls.length).toBe(3)
+    expect(onMock.mock.calls[0][1]).toBe(offMock.mock.calls[0][1])
+    expect(onMock.mock.calls[1][1]).toBe(offMock.mock.calls[1][1])
+    expect(onMock.mock.calls[2][1]).toBe(offMock.mock.calls[2][1])
+  })
+
+  it('when the path changes a new listeners are created', () => {
+    const {onMock, offMock, refMock, Firebase} = FirebaseMock()
+    const List = ListFactory(Firebase)
+    const component = create(createElement(List, {path: 'some path'},
+      (list) => `list: ${JSON.stringify(list)}`
+    ))
+    expect(refMock.mock.calls[0][0]).toBe('some path')
+    component.update(createElement(List, {path: 'some other path'},
+      (list) => `list: ${JSON.stringify(list)}`
+    ))
+    expect(refMock.mock.calls[1][0]).toBe('some other path')
+    expect(onMock.mock.calls.length).toBe(3 + 3)
+  })
+
+  it('when the path changes the existing listeners are cleaned up', () => {
+    const {onMock, offMock, refMock, Firebase} = FirebaseMock()
+    const List = ListFactory(Firebase)
+    const component = create(createElement(List, {path: 'some path'},
+      (list) => `list: ${JSON.stringify(list)}`
+    ))
+    expect(refMock.mock.calls[0][0]).toBe('some path')
+    component.update(createElement(List, {path: 'some other path'},
+      (list) => `list: ${JSON.stringify(list)}`
+    ))
+    expect(refMock.mock.calls[1][0]).toBe('some other path')
+    expect(onMock.mock.calls.length).toBe(3 + 3)
+    expect(offMock.mock.calls.length).toBe(3)
+    expect(onMock.mock.calls[0][1]).toBe(offMock.mock.calls[0][1])
+    expect(onMock.mock.calls[1][1]).toBe(offMock.mock.calls[1][1])
+    expect(onMock.mock.calls[2][1]).toBe(offMock.mock.calls[2][1])
+  })
+})

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-firebase-fns",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Firebase SDK turned into declarative React components",
   "main": "index.js",
   "scripts": {

value.spec.js

@@ -1,37 +1,12 @@
 const {createElement} = require('react')
 const {create} = require('react-test-renderer')
 
+const FirebaseMock = require('./firebase-mock')
 const ValueFactory = require('./value')
 
-function MockFirebase() {
-  const self = {
-    onMock: jest.fn((event, listener) => {
-      return listener
-    }),
-    offMock: jest.fn((event, listener) => {
-      return listener
-    }),
-    refMock: jest.fn((path) => {
-      return {
-        on: self.onMock,
-        off: self.offMock
-      }
-    }),
-    Firebase: {
-      database() {
-        return {
-          ref: self.refMock
-        }
-      }
-    }
-  }
-
-  return self;
-}
-
 describe('value', () => {
   it('should render undefined initially', () => {
-    const {refMock, Firebase} = MockFirebase()
+    const {refMock, Firebase} = FirebaseMock()
     const Value = ValueFactory(Firebase)
     const component = create(createElement(Value, {path: 'some path'},
       (value) => `value: ${value}`
@@ -41,8 +16,8 @@ describe('value', () => {
       .toMatchSnapshot()
   })
 
-  it('when a value is updated, component is re-rendered', () => {
-    const {onMock, refMock, Firebase} = MockFirebase()
+  it('when the value is updated, component is re-rendered', () => {
+    const {onMock, refMock, Firebase} = FirebaseMock()
     const Value = ValueFactory(Firebase)
     const component = create(createElement(Value, {path: 'some path'},
       (value) => `value: ${value}`
@@ -59,7 +34,7 @@ describe('value', () => {
   })
 
   it('when component is unmounted, listener is removed', () => {
-    const {onMock, offMock, refMock, Firebase} = MockFirebase()
+    const {onMock, offMock, refMock, Firebase} = FirebaseMock()
     const Value = ValueFactory(Firebase)
     const component = create(createElement(Value, {path: 'some path'},
       (value) => `value: ${value}`
@@ -72,7 +47,7 @@ describe('value', () => {
   })
 
   it('when the path changes a new listener is created', () => {
-    const {onMock, offMock, refMock, Firebase} = MockFirebase()
+    const {onMock, offMock, refMock, Firebase} = FirebaseMock()
     const Value = ValueFactory(Firebase)
     const component = create(createElement(Value, {path: 'some path'},
       (value) => `value: ${value}`
@@ -86,7 +61,7 @@ describe('value', () => {
   })
 
   it('when the path changes the existing listener is cleaned up', () => {
-    const {onMock, offMock, refMock, Firebase} = MockFirebase()
+    const {onMock, offMock, refMock, Firebase} = FirebaseMock()
     const Value = ValueFactory(Firebase)
     const component = create(createElement(Value, {path: 'some path'},
       (value) => `value: ${value}`