Add unit tests

Author: sarayourfriend

src/components/DownloadButton.vue

@@ -42,7 +42,7 @@
  setSelectedFormat(format)
  toggleOpen()
  "
- @keydown="onItemKeydown"
+ @keydown="onItemKeydown($event)"
  >
  <span class="font-bold mr-2">{{ format.extension_name }}</span>
  <span>{{ getFormatSize(format.extension_name) }}</span>
@@ -57,17 +57,19 @@
 import filesize from 'filesize'
 import axios from 'axios'
 import local from '~/utils/local'
+import DropdownButton from '~/components/DropdownButton'
 
 const LS_DOWNLOAD_FORMAT_EXTENSION_KEY = 'openverse:download-format-extension'
 
 export default {
  name: 'DownloadButton',
+ components: { DropdownButton },
  props: {
  formats: {
  type: Array,
  required: true,
  validator: (formats) => {
- const properties = ['extension_name', 'download_url', 'filesize']
+ const properties = ['extension_name', 'download_url']
  return formats.every((format) => properties.every((p) => p in format))
  },
  },

src/components/meta/DownloadButton.stories.js

@@ -6,7 +6,7 @@ export default {
 }
 
 export const Default = () => ({
- template: `<DownloadButton :file-name="fileName" :formats="formats" />`,
+ template: `<DownloadButton :formats="formats" />`,
  components: { DownloadButton },
  data: () => ({
  formats: [

test/unit/specs/components/download-button.spec.js

@@ -0,0 +1,84 @@
+import DownloadButton from '~/components/DownloadButton'
+import render from '../../test-utils/render'
+import { mount } from '@vue/test-utils'
+import axios from 'axios'
+
+import local from '~/utils/local'
+
+jest.mock('~/utils/local', () => ({
+ get: jest.fn(),
+ set: jest.fn(),
+}))
+
+const mockFilesizes = {
+ 'MP3 98kbs': 1000,
+ 'MP3 VBR': 1500,
+ FLAC: 2500,
+ OGG: 2000,
+}
+
+jest.mock('axios', () => ({
+ head: jest.fn((extensionName) => mockFilesizes[extensionName]),
+}))
+
+const formats = [
+ {
+ extension_name: 'MP3 98kbs',
+ download_url: 'https://mp3d.jamendo.com/download/track/1532771/mp31/',
+ },
+ {
+ extension_name: 'MP3 VBR',
+ download_url: 'https://mp3d.jamendo.com/download/track/1532771/mp32/',
+ },
+ {
+ extension_name: 'FLAC',
+ download_url: 'https://mp3d.jamendo.com/download/track/1532771/flac/',
+ },
+ {
+ extension_name: 'OGG',
+ download_url: 'https://mp3d.jamendo.com/download/track/1532771/ogg/',
+ },
+]
+
+const doRender = async () => {
+ const wrapper = render(DownloadButton, { propsData: { formats } }, mount)
+ await DownloadButton.fetch.call(wrapper.vm)
+ return wrapper
+}
+
+describe('DownloadButton', () => {
+ beforeEach(() => {
+ axios.head.mockReset()
+ })
+
+ // TODO(@sarayourfriend) convert this to testing-library once it's possible to get the `vm` from the wrapper
+ it('should default to the first format', async () => {
+ const wrapper = await doRender()
+ const downloadLink = wrapper.element.querySelector('a')
+ expect(downloadLink.getAttribute('href')).toEqual(formats[0].download_url)
+ })
+
+ it('should use the local storage default on first render', async () => {
+ local.get.mockImplementationOnce(() => formats[1].extension_name)
+ const wrapper = await doRender()
+ const downloadLink = wrapper.element.querySelector('a')
+ expect(downloadLink.getAttribute('href')).toEqual(formats[1].download_url)
+ })
+
+ it('should set the local storage default when a format is selected', async () => {
+ const wrapper = await doRender()
+ wrapper.find('[aria-haspopup="menu"]').trigger('click')
+ wrapper.findAll('[role="menuitem"]').wrappers[1].trigger('click')
+ expect(local.set).toHaveBeenCalledWith(
+ expect.any(String),
+ formats[1].extension_name
+ )
+ })
+
+ it('should retrieve the filesizes using a head request', async () => {
+ await doRender()
+ formats.forEach(({ download_url }) =>
+ expect(axios.head).toHaveBeenCalledWith(download_url)
+ )
+ })
+})

test/unit/test-utils/render.js

@@ -15,15 +15,19 @@ const i18n = new VueI18n({
  messages,
 })
 
-const render = (Component, options = { localVue, i18n }) => {
+const render = (
+ Component,
+ options = { localVue, i18n },
+ renderer = shallowMount
+) => {
  if (!options.store) {
  const store = new Vuex.Store(sampleStore)
  options.store = store
  }
  if (!options.i18n) {
  options.i18n = i18n
  }
- return shallowMount(Component, options)
+ return renderer(Component, options)
 }
 
 export default render