Remove Q in title, and fix unit tests

src/views/AudioRecorder.vue

@@ -2,10 +2,7 @@
   <div class="h5p-audio-recorder-view">
     <vuMeter :avgMicFrequency="avgMicFrequency" :enablePulse="state === 'recording'"></vuMeter>
 
-    <div v-if="state !== 'done'  && title" class="title">
-      <span class="title-label">Q:</span>
-      <span clasS="title-text">{{ title }}</span>
-    </div>
+    <div v-if="state !== 'done'  && title" class="title">{{ title }}</div>
 
     <div role="status" v-bind:class="state">{{statusMessages[state]}}</div>
 
@@ -186,10 +183,6 @@
       }
     }
 
-    .title-label {
-      color: #8f8f8f;
-    }
-
     /* status bar */
     [role="status"] {
       background-color: #f8f8f8;

tests/views/audioRecorderView.test.js

@@ -31,21 +31,20 @@ test.beforeEach(t => {
 });
 
 test('ready state', async t => {
-  t.plan(5);
+  t.plan(4);
 
   Vue.nextTick(() => {
     const el = t.context.vm.$el;
 
     // check that title is rendered
-    const titleEl = el.querySelector('.title-text');
+    const titleEl = el.querySelector('.title');
     t.is(titleEl.textContent, initialData.title);
 
     // check that status message is updated
     const statusEl = el.querySelector('[role="status"]');
     t.is(statusEl.textContent, statusMessages[State.READY]);
 
     // check that pulse and record button is present
-    t.falsy(el.querySelector('.background-enabled.pulse'));
     t.truthy(el.querySelector('.button.record'));
 
     // check that only 1 buttons is showing
@@ -67,11 +66,11 @@ test('change state to "RECORDING"', async t => {
     t.is(statusEl.textContent, statusMessages[State.RECORDING]);
 
     // check that pulse, pause button, finish button is present
-    t.truthy(el.querySelector('.background-enabled.pulse'));
+    t.truthy(el.querySelector('.button.retry'));
     t.truthy(el.querySelector('.button.pause'));
-    t.truthy(el.querySelector('.button.finish'));
+    t.truthy(el.querySelector('.button.done'));
 
     // check that only 2 buttons are showing
-    t.is(el.querySelectorAll('.button').length, 2);
+    t.is(el.querySelectorAll('.button').length, 3);
   });
 });