From 7a850b3a9457dd4bcbc5c4769978199252467f45 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 11 Nov 2021 13:59:37 +0100
Subject: [PATCH] Add frontend test for instrument page and fix query bug

---
 .../frontend/instrument-page.spec.js          | 27 +++++++++++++++++++
 .../graphql/gql/fragments/instrumentParts.gql |  7 ++++-
 client/src/pages/instrument.vue               |  5 +++-
 3 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 client/cypress/integration/frontend/instrument-page.spec.js

diff --git a/client/cypress/integration/frontend/instrument-page.spec.js b/client/cypress/integration/frontend/instrument-page.spec.js
new file mode 100644
index 00000000..68ab2b0b
--- /dev/null
+++ b/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');
+  });
+});
diff --git a/client/src/graphql/gql/fragments/instrumentParts.gql b/client/src/graphql/gql/fragments/instrumentParts.gql
index 98538201..26d3f5c3 100644
--- a/client/src/graphql/gql/fragments/instrumentParts.gql
+++ b/client/src/graphql/gql/fragments/instrumentParts.gql
@@ -10,6 +10,11 @@ fragment InstrumentParts on InstrumentNode {
       text
     }
   }
-  type
+  type {
+    id
+    name
+    category
+    type
+  }
   contents
 }
diff --git a/client/src/pages/instrument.vue b/client/src/pages/instrument.vue
index 92fedc6e..2dac00ce 100644
--- a/client/src/pages/instrument.vue
+++ b/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