From 5fd5a5be4ad428c1506e20abfe5ed441914450dc Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 20 Oct 2021 13:57:32 +0200
Subject: [PATCH] Add new test for instruments page, start refactor and style
 changes

---
 client/build/webpack.base.conf.js             | 10 ++--
 client/cypress/fixtures/mocks.js              |  8 ++++
 .../frontend/instruments-page.spec.js         | 12 ++++-
 client/package-lock.json                      | 14 ++++++
 .../components/instruments/FilterGroup.vue    | 25 ++++++++++
 .../instruments/InstrumentFilter.vue          | 48 +++++++++++--------
 client/src/pages/instrumentOverview.vue       | 25 ++--------
 7 files changed, 96 insertions(+), 46 deletions(-)
 create mode 100644 client/src/components/instruments/FilterGroup.vue

diff --git a/client/build/webpack.base.conf.js b/client/build/webpack.base.conf.js
index b70630b9..81b79aca 100644
--- a/client/build/webpack.base.conf.js
+++ b/client/build/webpack.base.conf.js
@@ -2,7 +2,7 @@
 const path = require('path');
 const config = require('../config');
 
-const VueLoaderPlugin = require('vue-loader/lib/plugin');
+const {VueLoaderPlugin} = require('vue-loader');
 
 const {isDev, styleRule, assetsPath} = require('./utils');
 
@@ -42,7 +42,7 @@ module.exports = {
     alias: {
       '@': resolve('src'),
       styles: resolve('src/styles'),
-      gql: resolve('src/graphql/gql')
+      gql: resolve('src/graphql/gql'),
     },
   },
   module: {
@@ -64,9 +64,9 @@ module.exports = {
         test: /\.tsx?$/,
         loader: 'ts-loader',
         options: {
-          appendTsSuffixTo: [/\.vue$/]
+          appendTsSuffixTo: [/\.vue$/],
         },
-        exclude: /node_modules/
+        exclude: /node_modules/,
       },
       {
         test: /\.js$/,
@@ -79,7 +79,7 @@ module.exports = {
       {
         test: /\.(gql|graphql)$/,
         loader: 'graphql-tag/loader',
-        exclude: /node_modules/
+        exclude: /node_modules/,
       },
       {
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
diff --git a/client/cypress/fixtures/mocks.js b/client/cypress/fixtures/mocks.js
index f66111a1..61cddee1 100644
--- a/client/cypress/fixtures/mocks.js
+++ b/client/cypress/fixtures/mocks.js
@@ -20,11 +20,13 @@ const classMemberIdIterator = idGenerator('ClassMemberNode');
 const chapterIdIterator = idGenerator('ChapterNode');
 const moduleIdIterator = idGenerator('ModuleNode');
 const contentBlockIdIterator = idGenerator('ContentBlockNode');
+const instrumentIdGenerator = idGenerator('InstrumentNode');
 
 const getClassMemberId = () => classMemberIdIterator.next().value;
 const getChapterId = () => chapterIdIterator.next().value;
 const getModuleId = () => moduleIdIterator.next().value;
 const getContentBlockId = () => contentBlockIdIterator.next().value;
+const getInstrumentId = () => instrumentIdGenerator.next().value;
 
 export default {
   UUID: () => '123-456-789',
@@ -109,4 +111,10 @@ export default {
     title: 'A Room Entry',
     contents: [],
   }),
+  InstrumentNode: () => ({
+    contents: [],
+    title: 'instrument-title',
+    slug: 'instrument-slug',
+    id: getInstrumentId(),
+  })
 };
diff --git a/client/cypress/integration/frontend/instruments-page.spec.js b/client/cypress/integration/frontend/instruments-page.spec.js
index 1a7cfa19..66e15e2b 100644
--- a/client/cypress/integration/frontend/instruments-page.spec.js
+++ b/client/cypress/integration/frontend/instruments-page.spec.js
@@ -8,10 +8,20 @@ describe('Instruments Page', () => {
       operations: {
         MeQuery: {},
         InstrumentsQuery: {
-          instruments: []
+          instruments: [
+            {},
+            {}
+          ]
         }
       }
     });
     cy.visit('instruments/');
+
+    cy.getByDataCy('filter-all-instruments').should('exist');
+    cy.getByDataCy('filter-language-communication').should('exist');
+    cy.getByDataCy('filter-society').should('exist');
+    cy.getByDataCy('filter-interdisciplinary').should('exist');
+    cy.getByDataCy('filter-analysis').should('exist');
+    cy.getByDataCy('filter-ethics').should('exist');
   });
 });
diff --git a/client/package-lock.json b/client/package-lock.json
index d8001d86..723c1d84 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -18294,6 +18294,13 @@
       "integrity": "sha512-q8GgAIPU7xHCsUhB1PUgR//8GoI0bUdMRUKd69jw2UcKy7pGuu0NbJsOGqdSpdpvhO4LY/dgqohPEkE1TrBwKQ==",
       "requires": {
         "vue": "^2.1.10"
+      },
+      "dependencies": {
+        "vue": {
+          "version": "2.6.14",
+          "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz",
+          "integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ=="
+        }
       }
     },
     "svgo": {
@@ -19724,6 +19731,13 @@
         "babel-preset-env": "^1.6.0",
         "rollup-plugin-babel": "^3.0.2",
         "vue": "^2.4.4"
+      },
+      "dependencies": {
+        "vue": {
+          "version": "2.6.14",
+          "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz",
+          "integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ=="
+        }
       }
     },
     "vuejs-logger": {
diff --git a/client/src/components/instruments/FilterGroup.vue b/client/src/components/instruments/FilterGroup.vue
new file mode 100644
index 00000000..e9313a58
--- /dev/null
+++ b/client/src/components/instruments/FilterGroup.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="filter-group">
+    <a v-bind="$attrs">{{ title }}</a>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      title: {
+        type: String,
+        default: ''
+      }
+    },
+    inheritAttrs: false
+  };
+</script>
+
+<style scoped lang="scss">
+  @import '~styles/helpers';
+
+  .filter-group {
+    border-bottom: 1px solid black;
+  }
+</style>
diff --git a/client/src/components/instruments/InstrumentFilter.vue b/client/src/components/instruments/InstrumentFilter.vue
index 82f8e082..9591c40c 100644
--- a/client/src/components/instruments/InstrumentFilter.vue
+++ b/client/src/components/instruments/InstrumentFilter.vue
@@ -1,24 +1,33 @@
 <template>
   <div class="instrument-filter">
-    <checkbox
-      :checked="type.enabled"
-      :class="`instrument-filter__checkbox--${type.cls}`"
-      :label="type.label"
-      :key="i"
-      class="instrument-filter__checkbox"
-      v-for="(type, i) in types"
-      @input="change($event, i)"
-    />
+    <filter-group
+      title="Alle Instrumente"
+      data-cy="filter-all-instruments"/>
+
+    <filter-group
+      title="Sprache und Kommunikation"
+      data-cy="filter-language-communication"/>
+
+    <filter-group
+      title="Gesellschaft"
+      data-cy="filter-society"/>
+
+    <filter-group
+      title="Überfachliche Instrumente"
+      data-cy="filter-society"/>
+
   </div>
 </template>
 
 <script>
   import Checkbox from '@/components/ui/Checkbox';
+  import FilterGroup from '@/components/instruments/FilterGroup';
 
   export default {
 
     components: {
-      Checkbox
+      FilterGroup,
+      Checkbox,
     },
     data() {
       return {
@@ -28,21 +37,21 @@
             label: 'Sprache und Kommunikation',
             enabled: true,
             prop: 'LANGUAGE_COMMUNICATION',
-            cls: 'language'
+            cls: 'language',
           },
           {
             label: 'Gesellschaft',
             enabled: true,
             prop: 'SOCIETY',
-            cls: 'society'
+            cls: 'society',
           },
           {
             label: 'Überfachliches Instrument',
             enabled: true,
             prop: 'INTERDISCIPLINARY',
-            cls: 'interdisciplinary'
+            cls: 'interdisciplinary',
           },
-        ]
+        ],
       };
     },
 
@@ -53,26 +62,27 @@
           ...this.types.slice(0, index),
           {
             ...type,
-            enabled
+            enabled,
           },
           ...this.types.slice(index + 1),
         ];
         this.$emit('filter',
           this.types
             .filter(t => t.enabled)
-            .map(t => t.prop)
+            .map(t => t.prop),
         );
-      }
+      },
     },
   };
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
+  @import "~styles/helpers";
 
   .instrument-filter {
     display: flex;
-    align-content: center;
+    flex-direction: column;
+    //align-content: center;
 
     &__checkbox {
       &--language {
diff --git a/client/src/pages/instrumentOverview.vue b/client/src/pages/instrumentOverview.vue
index c28387de..228530f3 100644
--- a/client/src/pages/instrumentOverview.vue
+++ b/client/src/pages/instrumentOverview.vue
@@ -1,10 +1,5 @@
 <template>
   <div class="instrument-overview">
-    <div class="instrument-overview__heading">
-      <h1 class="instrument-overview__title">
-        Instrumente
-      </h1>
-    </div>
     <instrument-filter
       class="instrument-overview__filter"
       @filter="updateFilter"/>
@@ -65,24 +60,12 @@
 
   .instrument-overview {
     display: grid;
-    grid-template-rows: auto auto 1fr;
-    @include centered(800px);
-
-    &__heading {
-      padding: 2*$large-spacing 0;
-      width: 100%;
-      display: flex;
-      justify-content: flex-start;
-    }
-
-    &__title {
-      max-width: $screen-width;
-      line-height: 1.2;
-      margin-bottom: 0;
-    }
+    //grid-template-rows: auto auto 1fr;
+    grid-template-columns: 300px auto;
+    //@include centered(800px);
 
     &__filter {
-      justify-self: start;
+
     }
 
     &__list {