Add frontend test for instrument page and fix query bug

client/cypress/integration/frontend/instrument-page.spec.js

@@ -0,0 +1,27 @@
+describe('Instruments Page', () => {
+  beforeEach(() => {
+    cy.setup();
+  });
+
+  it('opens the instruments page', () => {
+    cy.mockGraphqlOps({
+      operations: {
+        MeQuery: {},
+        InstrumentQuery: {
+          instrument: {
+            title: 'A Guitar',
+              intro: 'Money for Nothing',
+              contents: ''
+            //   id: ID!
+            //   bookmarks: [InstrumentBookmarkNode]
+            //   type: InstrumentTypeNode
+          }
+        },
+      },
+    });
+    cy.visit('instrument/blabliblablub');
+
+    cy.getByDataCy('instrument-title').should('exist').should('contain', 'A Guitar');
+    cy.getByDataCy('instrument-intro').should('exist').should('contain', 'Money for Nothing');
+  });
+});

client/src/graphql/gql/fragments/instrumentParts.gql

@@ -10,6 +10,11 @@ fragment InstrumentParts on InstrumentNode {
       text
     }
   }
+  type {
+    id
+    name
+    category
     type
+  }
   contents
 }

client/src/pages/instrument.vue

@@ -1,9 +1,12 @@
 <template>
   <div class="instrument">
-    <h1 class="instrument__title">{{ instrument.title }}</h1>
+    <h1
+      class="instrument__title"
+      data-cy="instrument-title">{{ instrument.title }}</h1>
 
     <div
       class="instrument__intro intro"
+      data-cy="instrument-intro"
       v-html="instrument.intro"/>
 
     <content-component