From b1955e64f48e4fbdd9f1732810c8d706b7c4865a Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Wed, 4 Dec 2019 16:57:42 +0300
Subject: [PATCH] improve tests, following @roschaefer suggestions

---
 .../MasonryGrid/MasonryGrid.spec.js           | 27 ++++++++---
 .../MasonryGrid/MasonryGridItem.spec.js       | 48 +++++++++++++------
 2 files changed, 53 insertions(+), 22 deletions(-)

diff --git a/webapp/components/MasonryGrid/MasonryGrid.spec.js b/webapp/components/MasonryGrid/MasonryGrid.spec.js
index 8eed5e150..b42b9b221 100644
--- a/webapp/components/MasonryGrid/MasonryGrid.spec.js
+++ b/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', () => {
-    masonryGrid.$emit('calculating-item-height')
+  it('adds the "reset-grid-height" class when itemsCalculating is more than 0', () => {
+    wrapper.setData({ itemsCalculating: 1 })
 
     expect(wrapper.classes()).toContain('reset-grid-height')
   })
 
-  it('removes the "reset-grid-height" class when all children have completed updating', () => {
-    wrapper.setData({ itemsCalculating: 1 })
-    masonryGrid.$emit('finished-calculating-item-height')
+  it('removes the "reset-grid-height" class when itemsCalculating is 0', () => {
+    wrapper.setData({ itemsCalculating: 0 })
 
     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)
+  })
 })
diff --git a/webapp/components/MasonryGrid/MasonryGridItem.spec.js b/webapp/components/MasonryGrid/MasonryGridItem.spec.js
index 6b117ada6..d37be8d58 100644
--- a/webapp/components/MasonryGrid/MasonryGridItem.spec.js
+++ b/webapp/components/MasonryGrid/MasonryGridItem.spec.js
@@ -8,23 +8,41 @@ config.stubs['ds-grid-item'] = '<span><slot /></span>'
 describe('MasonryGridItem', () => {
   let wrapper
 
-  beforeEach(() => {
-    wrapper = mount(MasonryGridItem, { localVue })
+  describe('given an imageAspectRatio', () => {
+    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 () => {
-    wrapper.vm.calculateItemHeight()
-    await wrapper.vm.$nextTick()
+  describe('given no aspect ratio', () => {
+    it('sets the initial rowSpan to 8 when not given an imageAspectRatio', () => {
+      wrapper = mount(MasonryGridItem, { localVue })
 
-    const firstEmittedFunction = wrapper.vm.$parent.__emittedByOrder[0]
-    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')
+      expect(wrapper.vm.rowSpan).toBe(8)
+    })
   })
 })