Replace symbol with correct HTML code

client/cypress/components/ContentBlock.cy.ts

@@ -0,0 +1,14 @@
+import ContentBlock from '@/components/ContentBlock.vue';
+
+describe('<ContentBlock />', () => {
+  it('renders', () => {
+    // see: https://on.cypress.io/mounting-vue
+    cy.mount(ContentBlock, {
+      props: {
+        contentBlock: {},
+        parent: null,
+        editMode: false,
+      },
+    });
+  });
+});

client/cypress/e2e/frontend/instruments/instruments-page.spec.js

@@ -135,7 +135,7 @@ describe('Instruments Page', () => {
     cy.getByDataCy('instrument')
       .first()
       .within(() => {
-        cy.getByDataCy('instrument-subheader').should('contain', 'Instrumente — Sprache & Kommunikation');
+        cy.getByDataCy('instrument-subheader').should('contain', 'Instrumente – Sprache & Kommunikation');
       });
   });
 });

client/cypress/e2e/frontend/instruments/module-page.spec.js

@@ -68,7 +68,7 @@ describe('Instruments on Module page', () => {
     cy.getByDataCy('content-block')
       .first()
       .within(() => {
-        cy.getByDataCy('instrument-label').should('contain', 'Instrumente — Sprache & Kommunikation');
+        cy.getByDataCy('instrument-label').should('contain', 'Instrumente – Sprache & Kommunikation');
       });
     cy.getByDataCy('content-block')
       .eq(1)

client/src/components/ContentBlock.vue

@@ -59,14 +59,14 @@
         />
       </div>
 
+      <!-- eslint-disable vue/no-v-html -->
       <h3
         class="content-block__instrument-label"
         data-cy="instrument-label"
         :style="instrumentLabelStyle"
         v-if="instrumentLabel !== ''"
-      >
-        {{ instrumentLabel }}
-      </h3>
+        v-html="instrumentLabel"
+      />
       <h4
         class="content-block__title"
         v-if="!contentBlock.indent"

client/src/components/instruments/InstrumentEntry.vue

@@ -6,13 +6,13 @@
     }"
     class="instrument-entry"
   >
+    <!-- eslint-disable vue/no-v-html -->
     <h4
       class="instrument-entry__category"
       :style="{ color: instrument.type.category.foreground }"
       data-cy="instrument-subheader"
-    >
-      {{ categoryName }}
-    </h4>
+      v-html="categoryName"
+    />
     <h3 class="instrument-entry__title">
       {{ instrument.title }}
     </h3>

client/src/helpers/instrumentType.js

@@ -12,7 +12,7 @@ const instrumentType = (instrument) => {
 };
 
 const instrumentCategory = (instrument) => {
-  return `${flavor.textInstruments} — ${instrumentType(instrument)}`;
+  return `${flavor.textInstruments} – ${instrumentType(instrument)}`;
 };
 
 export default instrumentType;