From 65ebc55cfcf35fbed7eb363d65013520ca22954e Mon Sep 17 00:00:00 2001 From: tholulomo Date: Sun, 31 Jul 2022 23:04:56 -0400 Subject: [PATCH] #236: Refactored unit test --- app/tests/unit/pages/explorer/Image.spec.js | 33 +++++ .../pages/explorer/ImageDetailView.spec.js | 129 ++++++++++++++++++ .../unit/pages/explorer/Visualization.spec.js | 36 +++++ .../explorer/__snapshots__/Image.spec.js.snap | 111 +++++++++++++++ 4 files changed, 309 insertions(+) create mode 100644 app/tests/unit/pages/explorer/ImageDetailView.spec.js create mode 100644 app/tests/unit/pages/explorer/Visualization.spec.js create mode 100644 app/tests/unit/pages/explorer/__snapshots__/Image.spec.js.snap diff --git a/app/tests/unit/pages/explorer/Image.spec.js b/app/tests/unit/pages/explorer/Image.spec.js index 0af5c802..bc8b19d2 100644 --- a/app/tests/unit/pages/explorer/Image.spec.js +++ b/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') + }) }) diff --git a/app/tests/unit/pages/explorer/ImageDetailView.spec.js b/app/tests/unit/pages/explorer/ImageDetailView.spec.js new file mode 100644 index 00000000..0859ce13 --- /dev/null +++ b/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!!!') + }) +}) \ No newline at end of file diff --git a/app/tests/unit/pages/explorer/Visualization.spec.js b/app/tests/unit/pages/explorer/Visualization.spec.js new file mode 100644 index 00000000..ac6c25d7 --- /dev/null +++ b/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') + }) +}) \ No newline at end of file diff --git a/app/tests/unit/pages/explorer/__snapshots__/Image.spec.js.snap b/app/tests/unit/pages/explorer/__snapshots__/Image.spec.js.snap new file mode 100644 index 00000000..46ae1d56 --- /dev/null +++ b/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`] = ` +
+
+
+
+
+
+
+
    +
  • +
    +
    • +
  • +
    +
    • +
  • +
    +
    • +
+
+ +
+
+
+
+
+
Showing all images + 1 result +
+
+
+
+
Morphology and electrical resistivity of melt mixed blends of polyethylene and carbon nanotube filled polycarbonate
+
+
height image... Morphology and electrical resistivity of melt mixed blends of polyethylene and carbon nanotube filled polycarbonate...
+
+ +
+
+
+
Page 1 of 1 +
+
+
+
+`; + +exports[`Image.vue renders pagination 2`] = ` +
+
+
+
+
+
+
+
    +
  • +
    +
    • +
  • +
    +
    • +
  • +
    +
    • +
+
+ +
+
+
+
+
+
Showing all images + 1 result +
+
+
+
+
Morphology and electrical resistivity of melt mixed blends of polyethylene and carbon nanotube filled polycarbonate
+
+
height image... Morphology and electrical resistivity of melt mixed blends of polyethylene and carbon nanotube filled polycarbonate...
+
+ +
+
+
+
Page 1 of 1 +
+
+
+
+`;