       expectResizeElement = (index) ->
         child = paneAxisElement.children[index]
         expect(paneAxisElement.isPaneResizeHandleElement(child)).toBe(true)
+
+      models = (new PaneAxis({}) for i in [0..2])
+      paneAxis.addChild(models[0])
+      paneAxis.addChild(models[1])
       expectResizeElement(1)
 
-      paneAxis.addChild(modelChildren[2])
-      paneAxis.addChild(modelChildren[3])
-      expectPaneAxisElement(i) for i in [0, 2, 4, 6]
-      expectResizeElement(i) for i in [1, 3, 5]
+      paneAxis.addChild(models[2])
+      expectPaneAxisElement(i) for i in [0, 2, 4]
+      expectResizeElement(i) for i in [1, 3]
 
       # test removeChild
-      paneAxis.removeChild(modelChildren[2])
+      paneAxis.removeChild(models[2])
       expectResizeElement(i) for i in [1, 3]
 
-      # test replaceChild
-      paneAxis.replaceChild(modelChildren[0], modelChildren[4])
-      expectResizeElement(i) for i in [1, 3]
-
-  describe "when mouse drag the resize element", ->
-    [container, containerElement, resizeElementMove, getElementWidth] = []
+  describe "when user drag the resize element", ->
+    [container, containerElement] = []
+    [resizeElementMove, getElementWidth, expectFlexScale] = []
 
     beforeEach ->
       container = new PaneContainer

      paneAxisElement.initialize(paneAxis)
      document.querySelector('#jasmine-content').appendChild(paneAxisElement)

    it "inserts or remove resize elements when pane axis added or removed", ->
      modelChildren = (new PaneAxis({}) for i in [1..5])
      paneAxis.addChild(modelChildren[0])
      paneAxis.addChild(modelChildren[1])

      expectPaneAxisElement = (index) ->
        child = paneAxisElement.children[index]
        expect(child.nodeName.toLowerCase()).toBe('atom-pane-axis')

      getElementWidth = (element) ->
        element.getBoundingClientRect().width

      # assert the pane's flex scale. arguments is list of pane-scale pair
      expectFlexScale = ->
        args = Array::slice.apply(arguments, 0)
        for paneScale in args
          expect(paneScale[0].getFlexScale()).toBeCloseTo(paneScale[1], 0.1)

    it "add and remove panes in the same direction", ->
      leftPane = container.getActivePane()
      middlePane = leftPane.splitRight()

      resizeElements = containerElement.querySelectorAll('atom-pane-resize-handle')
      paneElements = containerElement.querySelectorAll('atom-pane')
      expect(resizeElements.length).toBe(2)

      resizeElementMove(resizeElements[0], getElementWidth(paneElements[0]) / 2)
      expectPaneScale [leftPane, 0.5], [middlePane, 1.5]

      rightPane = middlePane.splitRight()
      clientX = getElementWidth(paneElements[0]) + getElementWidth(paneElements[1]) / 2
      resizeElementMove(resizeElements[1], clientX)
      expectPaneScale [leftPane, 0.5], [middlePane, 0.75], [rightPane, 1.75]

      middlePane.close()
      expectPaneScale [leftPane, 0.44], [rightPane, 1.55]

      leftPane.close()
      expectPaneScale [rightPane, 1]

    it "split or close panes in orthogonal direction", ->
      leftPane = container.getActivePane()
      rightPane = leftPane.splitRight()

      resizeElement = containerElement.querySelector('atom-pane-resize-handle')
      resizeElementMove(resizeElement, getElementWidth(resizeElement.previousSibling) / 2)

      # dynamically split pane, pane's flexScale will become to 1
      lowerPane = leftPane.splitDown()
      expectPaneScale [lowerPane, 1], [leftPane, 1], [leftPane.getParent(), 0.5]

      # dynamically close pane, the pane's flexscale will recorver to origin value
      lowerPane.close()
      expectPaneScale [leftPane, 0.5], [rightPane, 1.5]


