Handle waveform with peaks prop as a blank array

src/components/VAudioTrack/VWaveform.vue

@@ -186,7 +186,6 @@ export default defineComponent({
     peaks: {
       type: Array,
       required: false,
-      default: () => Array.from({ length: 100 }, () => Math.random()),
       validator: (val) => val.every((item) => item >= 0 && item <= 1),
     },
     /**
@@ -332,8 +331,13 @@ export default defineComponent({
     const peakCount = computed(() =>
       getPeaksInWidth(waveformDimens.value.width)
     )
+    const peaks = computed(() =>
+      props.peaks?.length
+        ? props.peaks
+        : Array.from({ length: 100 }, () => Math.random())
+    )
     const normalizedPeaks = computed(() => {
-      let samples = props.peaks
+      let samples = peaks.value
 
       const givenLength = samples.length
       const required = peakCount.value

src/locales/po-files/openverse.pot

@@ -4,7 +4,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Openverse \n"
 "Report-Msgid-Bugs-To: https://github.com/wordpress/openverse/issues \n"
-"POT-Creation-Date: 2022-03-10T13:09:29+00:00\n"
+"POT-Creation-Date: 2022-03-11T08:08:25+00:00\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
@@ -272,7 +272,7 @@ msgid "Audio seek bar"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/components/VAudioTrack/VWaveform.vue:573
+#: src/components/VAudioTrack/VWaveform.vue:577
 msgctxt "waveform.current-time"
 msgid "###time### second"
 msgid_plural "###time### seconds"

test/unit/specs/components/AudioTrack/waveform.spec.js

@@ -0,0 +1,42 @@
+import { mount } from '@vue/test-utils'
+
+import VWaveform from '~/components/VAudioTrack/VWaveform.vue'
+
+jest.mock('~/utils/resampling', () => {
+  return {
+    downsampleArray: jest.fn((data) => data),
+    upsampleArray: jest.fn((data) => data),
+  }
+})
+
+describe('VWaveform', () => {
+  let options = null
+  let props = null
+
+  beforeEach(() => {
+    props = {
+      peaks: [],
+    }
+
+    options = {
+      propsData: props,
+    }
+  })
+
+  it('should use given peaks when peaks array is provided', () => {
+    props.peaks = Array.from({ length: 5 }, () => 0)
+    const wrapper = mount(VWaveform, options)
+    expect(wrapper.vm.normalizedPeaks.length).toBe(5)
+  })
+
+  it('should use random peaks when peaks not set', () => {
+    const wrapper = mount(VWaveform, options)
+    expect(wrapper.vm.normalizedPeaks.length).toBe(100)
+  })
+
+  it('should use random peaks when peaks array is blank', () => {
+    props.peaks = null
+    const wrapper = mount(VWaveform, options)
+    expect(wrapper.vm.normalizedPeaks.length).toBe(100)
+  })
+})