#236: Refactored unit test

app/tests/unit/pages/explorer/Image.spec.js

@@ -75,4 +75,37 @@ describe('Image.vue', () => {
       })
     }
   })
+
+  it('limits result to page size', async () => {
+    expect.assertions(1)
+    await wrapper.setData({ pageSize: 5 })
+    expect(wrapper.vm.images.images.length).toBeLessThanOrEqual(wrapper.vm.pageSize)
+  })
+
+  it('renders image title and description', () => {
+    expect.assertions(6)
+    const image = wrapper.find('.gallery-item')
+    expect(image.exists()).toBe(true)
+    expect(image.html()).toContain('Morphology and electrical')
+    expect(image.find('.md-subheading').exists()).toBe(true)
+    expect(image.find('.md-subheading').text()).not.toBe('')
+    expect(image.find('.md-body-1').exists()).toBe(true)
+    expect(image.find('.md-body-1').text()).not.toBe('')
+  })
+
+  it('renders pagination', async () => {
+    expect.assertions(3)
+    expect(wrapper.html()).toContain('pagination')
+    const prev = wrapper.findAll('button').at(2)
+    expect(wrapper.html()).toMatchSnapshot()
+    await prev.trigger('click')
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('renders searchbox', () => {
+    expect(wrapper.find('.search_box').exists()).toBe(true)
+    expect(wrapper.find('.search_box').html()).toContain('filter')
+    const searchBtn = wrapper.findAll('button').at(0)
+    expect(searchBtn.text()).toBe('Search Images')
+  })
 })

app/tests/unit/pages/explorer/ImageDetailView.spec.js

@@ -0,0 +1,129 @@
+import createWrapper from '../../../jest/script/wrapper'
+import { enableAutoDestroy } from '@vue/test-utils'
+import ImageDetailView from '@/pages/explorer/image/ImageDetailView.vue'
+
+const apollo = {
+  images: {
+    totalItems: 1,
+    pageSize: 1,
+    pageNumber: 1,
+    totalPages: 1,
+    hasPreviousPage: false,
+    hasNextPage: true,
+    images: [
+      {
+        file: '/api/files/583e05cfe74a1d205f4e2177',
+        description: 'height image',
+        microscopyType: 'AFM',
+        type: 'grayscale',
+        dimension: {
+          width: 20,
+          height: 20
+        },
+        metaData: {
+          title: 'Morphology and electrical resistivity of melt mixed blends of polyethylene and carbon nanotube filled polycarbonate',
+          doi: '10.1016/j.polymer.2003.10.003',
+          id: '583e0672e74a1d205f4e21be',
+          keywords: [
+            'Blends',
+            'Multiwalled carbon nanotube composites',
+            'Electrical resistivity'
+          ]
+        }
+      },
+      {
+        file: '/api/files/583e05cfe74a1d205f4e2155',
+        description: 'Test Image description',
+        microscopyType: 'AFM',
+        type: 'grayscale',
+        dimension: {
+          width: 40,
+          height: 30
+        },
+        metaData: {
+          title: 'Morphology and electrical resistivity of melt mixed blends of polyethylene and carbon nanotube filled polycarbonate',
+          doi: '10.1016/j.polymer.2003.10.003',
+          id: '583e0672e74a1d205f4e21be',
+          keywords: [
+            'Blends',
+            'Multiwalled carbon nanotube composites',
+            'Electrical resistivity'
+          ]
+        }
+      }
+    ]
+  }
+}
+
+const fileId = '/api/files/583e05cfe74a1d205f4e2177'
+
+const mockMethods = jest.fn()
+
+describe('ImageDetailView.vue', () => {
+  let wrapper
+  beforeAll(async () => {
+    wrapper = await createWrapper(ImageDetailView, {
+      mocks: {
+        $apollo: {
+          loading: false
+        }
+      },
+    }, true)
+    await wrapper.setData({ getSingleImages: apollo.images })
+    wrapper.vm.$route.params.fileId = fileId
+    await wrapper.vm.setCurrentImage(apollo.images)
+  })
+
+//   enableAutoDestroy(afterEach)
+
+  it('loads page container div', () => {
+    expect.assertions(1)
+    expect(wrapper.find('.image-detail-page').exists()).toBe(true)
+  })
+
+  it('sets fileId based on route param value', () => {
+    expect.assertions(1)
+    expect(wrapper.vm.$route.params.fileId).toEqual(fileId)
+  })
+
+  it('loads and call navs', async() => {
+    wrapper.setMethods({ navBack: mockMethods, handleShare: mockMethods })
+    expect.assertions(3)
+    expect(wrapper.find('.utility-roverflow').exists()).toBe(true)
+    await wrapper.find('#navbackBtn').trigger('click')
+    expect(mockMethods).toHaveBeenCalled()
+    await wrapper.find('#shareChartBtn').trigger('click')
+    expect(mockMethods).toHaveBeenCalled()
+  })
+
+  it('renders current image title', () => {
+    const currentImageDiv = wrapper.find('.md-card')
+    expect(currentImageDiv.find('.md-title').text()).toContain('height image')
+    expect(currentImageDiv.find('.md-subhead').text()).toContain('Morphology and electrical resistivity o')
+  })
+
+  it('routes to article when "view article" is clicked', async () => {
+    const viewArticle = wrapper.find('.u--b-rad')
+    expect(viewArticle.text()).toContain('View Article')
+    await viewArticle.trigger('click')
+    expect(wrapper.vm.$route.path).toBe('/explorer/article/10.1016/j.polymer.2003.10.003')
+  })
+
+  it('renders three tabs sections', async () => {
+    expect.assertions(1)
+    expect(wrapper.findAll('.u--margin-rightmd').length).toEqual(3)
+  })
+
+  it('shows metadata', () => {
+    expect(wrapper.find('#microscropy').text()).toBe('AFM')
+  })
+
+  it('renders related images', async() => {
+    expect(wrapper.findAll('.md-card-class').length).toEqual(1)
+  })
+
+  it('render error page on empty result', async() => {
+    await wrapper.setData({getSingleImages: undefined})
+    expect(wrapper.find('.visualize_header-h1').text()).toBe('Cannot Load Images!!!')
+  })
+})

app/tests/unit/pages/explorer/Visualization.spec.js

@@ -0,0 +1,36 @@
+
+import createWrapper from '../../../jest/script/wrapper'
+import { enableAutoDestroy, RouterLinkStub } from '@vue/test-utils'
+import VisualizationHome from '@/pages/explorer/Visualization.vue'
+
+enableAutoDestroy(afterEach)
+
+describe('Visualization.vue', () => {
+  let wrapper
+  beforeEach(async () => {
+    wrapper = await createWrapper(VisualizationHome, {
+      stubs: {
+        RouterLink: RouterLinkStub
+      }
+    }, false)
+  })
+
+  it('renders visualization page correctly', () => {
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  it('renders page header', () => {
+    expect(wrapper.html()).toContain('Gallery Categories')
+  })
+
+  it('renders layout items', async () => {
+    const layoutItems = wrapper.findAll('.md-layout-item')
+    expect(layoutItems.length).toBe(4)
+    expect(layoutItems.at(1).is('div')).toBe(true)
+  })
+
+  it('routes to chart and image gallery', async () => {
+    expect(wrapper.findAllComponents(RouterLinkStub).at(0).props().to).toBe('/explorer/chart')
+    expect(wrapper.findAllComponents(RouterLinkStub).at(1).props().to).toBe('/explorer/images')
+  })
+})

app/tests/unit/pages/explorer/__snapshots__/Image.spec.js.snap

@@ -0,0 +1,111 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Image.vue renders pagination 1`] = `
+<div class="gallery">
+  <div class="utility-roverflow u--margin-toplg">
+    <div class="search_box card-icon-container u--margin-toplg">
+      <form class="form">
+        <div class="search_box_form">
+          <div class="form__group search_box_form-item-1"><input type="text" placeholder="Search Microstructure Image" name="search" id="search" required="required" class="form__input form__input--flat"> <label htmlfor="search" class="form__label search_box_form_label">Search Microstructure Image</label></div>
+        </div>
+        <ul class="contactus_radios u--margin-neg u_centralize_text">
+          <li>
+            <div class="form__radio-group"><input type="radio" value="filterByFiller" id="filterByFiller" name="question" class="form__radio-input"> <label for="filterByFiller" class="form__radio-label"><span class="form__radio-button form__radio-button_less"></span>
+                Search by filler
+              </label></div>
+          </li>
+          <li>
+            <div class="form__radio-group"><input type="radio" id="filterByKeyword" value="filterByKeyword" name="question" class="form__radio-input"> <label for="filterByKeyword" class="form__radio-label"><span class="form__radio-button form__radio-button_less"></span>
+                Search by keyword
+              </label></div>
+          </li>
+          <li>
+            <div class="form__radio-group"><input type="radio" id="filterByYear" value="filterByYear" name="question" class="form__radio-input"> <label for="filterByYear" class="form__radio-label"><span class="form__radio-button form__radio-button_less"></span>
+                Search by year
+              </label></div>
+          </li>
+        </ul>
+        <div class="form__group search_box_form-item-2 explorer_page-nav u--margin-neg"><button type="submit" class="btn btn--primary btn--noradius search_box_form_btn mid-first-li display-text u--margin-pos">
+            Search Images
+          </button>
+          <!---->
+        </div>
+      </form>
+    </div>
+  </div>
+  <div class="utility-roverflow">
+    <div class="u_content__result u_margin-top-small"><span id="css-adjust-navfont" class="u_color utility-navfont"><strong>Showing all images</strong> <span>
+            1 result
+          </span> <span class="utility-absolute-input"><label for="pagesize"><strong>Page size:</strong></label> <input placeholder="Enter page size" type="number" id="pagesize" name="pagesize" title="specify number of items per size" class="u_width--xs utility-navfont"></span></span></div>
+    <div class="gallery-grid grid grid_col-5">
+      <div class="md-card btn--animated gallery-item md-theme-default"><a>
+          <div class="md-card-media-cover md-solid">
+            <div class="md-card-media md-ratio-4-3"><img src="http://localhost/api/files/583e05cfe74a1d205f4e2177" alt="Morphology and electrical resistivity of melt mixed blends of polyethylene and carbon nanotube filled polycarbonate" crossorigin="Anonymous"></div>
+            <div class="md-card-area u_gridbg">
+              <div class="md-card-header u_show_hide"><span class="md-subheading"><strong> height image...</strong></span> <span class="md-body-1"> Morphology and electrical resistivity of melt mixed blends of polyethylene and carbon nanotube filled polycarbonate...</span></div>
+            </div>
+            <!---->
+          </div>
+        </a></div>
+    </div>
+    <div class="viz-pagination-container"><span>Page 1 of 1</span>
+      <div class="viz-pagination"><button disabled="disabled" class="pagination-button pagination-button-home">Home</button> <button disabled="disabled" class="pagination-button pagination-button-prev">Prev</button> <button disabled="disabled" class="pagination-button pagination-button-next">Next</button> <button disabled="disabled" class="pagination-button pagination-button-end">End</button></div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Image.vue renders pagination 2`] = `
+<div class="gallery">
+  <div class="utility-roverflow u--margin-toplg">
+    <div class="search_box card-icon-container u--margin-toplg">
+      <form class="form">
+        <div class="search_box_form">
+          <div class="form__group search_box_form-item-1"><input type="text" placeholder="Search Microstructure Image" name="search" id="search" required="required" class="form__input form__input--flat"> <label htmlfor="search" class="form__label search_box_form_label">Search Microstructure Image</label></div>
+        </div>
+        <ul class="contactus_radios u--margin-neg u_centralize_text">
+          <li>
+            <div class="form__radio-group"><input type="radio" value="filterByFiller" id="filterByFiller" name="question" class="form__radio-input"> <label for="filterByFiller" class="form__radio-label"><span class="form__radio-button form__radio-button_less"></span>
+                Search by filler
+              </label></div>
+          </li>
+          <li>
+            <div class="form__radio-group"><input type="radio" id="filterByKeyword" value="filterByKeyword" name="question" class="form__radio-input"> <label for="filterByKeyword" class="form__radio-label"><span class="form__radio-button form__radio-button_less"></span>
+                Search by keyword
+              </label></div>
+          </li>
+          <li>
+            <div class="form__radio-group"><input type="radio" id="filterByYear" value="filterByYear" name="question" class="form__radio-input"> <label for="filterByYear" class="form__radio-label"><span class="form__radio-button form__radio-button_less"></span>
+                Search by year
+              </label></div>
+          </li>
+        </ul>
+        <div class="form__group search_box_form-item-2 explorer_page-nav u--margin-neg"><button type="submit" class="btn btn--primary btn--noradius search_box_form_btn mid-first-li display-text u--margin-pos">
+            Search Images
+          </button>
+          <!---->
+        </div>
+      </form>
+    </div>
+  </div>
+  <div class="utility-roverflow">
+    <div class="u_content__result u_margin-top-small"><span id="css-adjust-navfont" class="u_color utility-navfont"><strong>Showing all images</strong> <span>
+            1 result
+          </span> <span class="utility-absolute-input"><label for="pagesize"><strong>Page size:</strong></label> <input placeholder="Enter page size" type="number" id="pagesize" name="pagesize" title="specify number of items per size" class="u_width--xs utility-navfont"></span></span></div>
+    <div class="gallery-grid grid grid_col-5">
+      <div class="md-card btn--animated gallery-item md-theme-default"><a>
+          <div class="md-card-media-cover md-solid">
+            <div class="md-card-media md-ratio-4-3"><img src="http://localhost/api/files/583e05cfe74a1d205f4e2177" alt="Morphology and electrical resistivity of melt mixed blends of polyethylene and carbon nanotube filled polycarbonate" crossorigin="Anonymous"></div>
+            <div class="md-card-area u_gridbg">
+              <div class="md-card-header u_show_hide"><span class="md-subheading"><strong> height image...</strong></span> <span class="md-body-1"> Morphology and electrical resistivity of melt mixed blends of polyethylene and carbon nanotube filled polycarbonate...</span></div>
+            </div>
+            <!---->
+          </div>
+        </a></div>
+    </div>
+    <div class="viz-pagination-container"><span>Page 1 of 1</span>
+      <div class="viz-pagination"><button disabled="disabled" class="pagination-button pagination-button-home">Home</button> <button disabled="disabled" class="pagination-button pagination-button-prev">Prev</button> <button disabled="disabled" class="pagination-button pagination-button-next">Next</button> <button disabled="disabled" class="pagination-button pagination-button-end">End</button></div>
+    </div>
+  </div>
+</div>
+`;