improve tests, following @roschaefer suggestions

webapp/components/MasonryGrid/MasonryGrid.spec.js

@@ -6,23 +6,36 @@ const localVue = global.localVue
 
 describe('MasonryGrid', () => {
   let wrapper
-  let masonryGrid
+  let masonryGridItem
 
   beforeEach(() => {
     wrapper = mount(MasonryGrid, { localVue })
-    masonryGrid = wrapper.vm.$children[0]
+    masonryGridItem = wrapper.vm.$children[0]
   })
 
-  it('adds the "reset-grid-height" class when one or more children are updating', () => {
+  it('adds the "reset-grid-height" class when itemsCalculating is more than 0', () => {
-    masonryGrid.$emit('calculating-item-height')
+    wrapper.setData({ itemsCalculating: 1 })
 
     expect(wrapper.classes()).toContain('reset-grid-height')
   })
 
-  it('removes the "reset-grid-height" class when all children have completed updating', () => {
+  it('removes the "reset-grid-height" class when itemsCalculating is 0', () => {
-    wrapper.setData({ itemsCalculating: 1 })
+    wrapper.setData({ itemsCalculating: 0 })
-    masonryGrid.$emit('finished-calculating-item-height')
 
     expect(wrapper.classes()).not.toContain('reset-grid-height')
   })
+
+  it('adds 1 to itemsCalculating when a child emits "calculating-item-height"', () => {
+    wrapper.setData({ itemsCalculating: 0 })
+    masonryGridItem.$emit('calculating-item-height')
+
+    expect(wrapper.vm.itemsCalculating).toBe(1)
+  })
+
+  it('subtracts 1 from itemsCalculating when a child emits "finished-calculating-item-height"', () => {
+    wrapper.setData({ itemsCalculating: 2 })
+    masonryGridItem.$emit('finished-calculating-item-height')
+
+    expect(wrapper.vm.itemsCalculating).toBe(1)
+  })
 })

webapp/components/MasonryGrid/MasonryGridItem.spec.js

@@ -8,23 +8,41 @@ config.stubs['ds-grid-item'] = '<span><slot /></span>'
 describe('MasonryGridItem', () => {
   let wrapper
 
-  beforeEach(() => {
+  describe('given an imageAspectRatio', () => {
-    wrapper = mount(MasonryGridItem, { localVue })
+    it('sets the initial rowSpan to 13 when the ratio is higher than 1.3', () => {
+      const propsData = { imageAspectRatio: 2 }
+      wrapper = mount(MasonryGridItem, { localVue, propsData })
+
+      expect(wrapper.vm.rowSpan).toBe(13)
+    })
+
+    it('sets the initial rowSpan to 15 when the ratio is between 1.3 and 1', () => {
+      const propsData = { imageAspectRatio: 1.1 }
+      wrapper = mount(MasonryGridItem, { localVue, propsData })
+
+      expect(wrapper.vm.rowSpan).toBe(15)
+    })
+
+    it('sets the initial rowSpan to 18 when the ratio is between 1 and 0.7', () => {
+      const propsData = { imageAspectRatio: 0.7 }
+      wrapper = mount(MasonryGridItem, { localVue, propsData })
+
+      expect(wrapper.vm.rowSpan).toBe(18)
+    })
+
+    it('sets the initial rowSpan to 25 when the ratio is lower than 0.7', () => {
+      const propsData = { imageAspectRatio: 0.3 }
+      wrapper = mount(MasonryGridItem, { localVue, propsData })
+
+      expect(wrapper.vm.rowSpan).toBe(25)
+    })
   })
 
-  it('parent emits "calculating-item-height" when starting calculation', async () => {
+  describe('given no aspect ratio', () => {
-    wrapper.vm.calculateItemHeight()
+    it('sets the initial rowSpan to 8 when not given an imageAspectRatio', () => {
-    await wrapper.vm.$nextTick()
+      wrapper = mount(MasonryGridItem, { localVue })
 
-    const firstEmittedFunction = wrapper.vm.$parent.__emittedByOrder[0]
+      expect(wrapper.vm.rowSpan).toBe(8)
-    expect(firstEmittedFunction.name).toBe('calculating-item-height')
+    })
-  })
-
-  it('parent emits "finished-calculating-item-height" after the calculation', async () => {
-    wrapper.vm.calculateItemHeight()
-    await wrapper.vm.$nextTick()
-
-    const secondEmittedFunction = wrapper.vm.$parent.__emittedByOrder[1]
-    expect(secondEmittedFunction.name).toBe('finished-calculating-item-height')
   })
 })