Add tests for sheetsObserver

Author: lttb

.flowconfig

@@ -7,3 +7,4 @@
 
 [options]
 all=true
+suppress_comment= \\(.\\|\n\\)*\\$FlowFixMe

src/createStyled.js

@@ -1,6 +1,5 @@
-import asap from 'asap'
-
 import styled from './styled'
+import sheetsObserver from './utils/sheetsObserver'
 
 import type {
   BaseStylesType,
@@ -11,30 +10,20 @@ import type {
   TagNameOrStyledElementType
 } from './types'
 
-const dynamicSheets = []
-let sheetsToUpdate = {}
-
-asap(() => {
-  const sheetNames = Object.keys(sheetsToUpdate)
-  if (sheetNames.length) {
-    sheetsToUpdate = {}
-    sheetNames.forEach(sheetName =>
-      dynamicSheets[Number(sheetName)].attach().link())
-  }
-})
+sheetsObserver.listen()
 
 const createStyled = (jss: Function) => (
   baseStyles: BaseStylesType = {}
 ): StyledType => {
   let staticSheet
   let dynamicSheet
-  let dynamicSheetName
+  let dynamicSheetId
 
   const addRule = (name: string, style: ComponentStyleType, data: Object) => {
     if (data) {
       dynamicSheet.detach().addRule(name, style)
       dynamicSheet.update(name, data)
-      sheetsToUpdate[dynamicSheetName] = true
+      sheetsObserver.update(dynamicSheetId)
     }
     else {
       staticSheet.addRule(name, style)
@@ -51,8 +40,7 @@ const createStyled = (jss: Function) => (
         link: true,
         meta: 'DynamicComponentSheet',
       }).attach()
-      dynamicSheets.push(dynamicSheet)
-      dynamicSheetName = dynamicSheets.length - 1
+      dynamicSheetId = sheetsObserver.add(dynamicSheet)
     }
 
     return {staticSheet, dynamicSheet}

src/tests/sheetsObserver.spec.js

@@ -0,0 +1,33 @@
+import sheetsObserver, {observe, dynamicSheets} from '../utils/sheetsObserver'
+
+const Mocks = {
+  // $FlowFixMe: get/set are not supported yet by flow
+  get sheetMock() {
+    const mock = {
+      attach: jest.fn(),
+      link: jest.fn(),
+    }
+    mock.attach.mockReturnValue(mock)
+    mock.link.mockReturnValue(mock)
+    return mock
+  }
+}
+
+it('should add sheet and return sheetId', () => {
+  const {sheetMock} = Mocks
+  const sheetId = sheetsObserver.add(sheetMock)
+
+  expect(dynamicSheets).toEqual([sheetMock])
+  expect(sheetId).toEqual(0)
+})
+
+it('should reattach updated sheet by observe call', () => {
+  const {sheetMock} = Mocks
+  const sheetId = sheetsObserver.add(sheetMock)
+  sheetsObserver.update(sheetId)
+
+  observe()
+
+  expect(sheetMock.attach).toHaveBeenCalled()
+  expect(sheetMock.link).toHaveBeenCalled()
+})

src/utils/sheetsObserver.js

@@ -0,0 +1,30 @@
+import asap from 'asap'
+
+import type {
+  JssDynamicSheet
+} from '../types'
+
+export const dynamicSheets = []
+let sheetsToUpdate = {}
+
+export const observe = () => {
+  const sheetIds = Object.keys(sheetsToUpdate)
+  if (sheetIds.length) {
+    sheetsToUpdate = {}
+    sheetIds.forEach(sheetId =>
+      dynamicSheets[Number(sheetId)].attach().link())
+  }
+}
+
+export default {
+  listen() {
+    asap(observe)
+  },
+  add(sheet: JssDynamicSheet) {
+    dynamicSheets.push(sheet)
+    return dynamicSheets.length - 1
+  },
+  update(sheetId: number) {
+    sheetsToUpdate[sheetId] = true
+  }
+}