Merged in feature/MS-747-TestforInstrumentFilters (pull request #139)

Feature/MS-747 TestforInstrumentFilters

Approved-by: Ramon Wenger

client/cypress.frontend.ts

@@ -7,7 +7,7 @@ export default defineConfig({
   chromeWebSecurity: false,
 
   e2e: {
-    baseUrl: 'http://127.0.0.1:8080',
+    baseUrl: 'http://localhost:8080',
     specPattern: 'cypress/e2e/frontend/**/*.{cy,spec}.{js,ts}',
     supportFile: 'cypress/support/e2e.ts',
     setupNodeEvents(on, config) {

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

@@ -55,16 +55,25 @@ describe('Instruments Page', () => {
               type: analyse,
               title: 'Instrument: Analyse',
               slug: 'analyse',
+              language: 'de',
             },
             {
               type: argumentation,
               title: 'Instrument: Argumentation',
               slug: 'argumentation',
+              language: 'de',
             },
             {
               type: ethik,
               title: 'Instrument: Ethik',
               slug: 'ethik',
+              language: 'de',
+            },
+            {
+              type: ethik,
+              title: 'Instrument: La éthique, bourgois',
+              slug: 'ethik-burgois',
+              language: 'fr',
             },
           ],
         },
@@ -138,4 +147,36 @@ describe('Instruments Page', () => {
         cy.getByDataCy('instrument-subheader').should('contain', 'Instrumente – Sprache & Kommunikation');
       });
   });
+
+  it('filter by title', () => {
+    cy.visit('instruments/');
+    cy.getByDataCy('instrument').should('have.length', 3);
+
+    cy.getByDataCy('filter-input').type('Analyse');
+    cy.getByDataCy('instrument').should('have.length', 1);
+
+    cy.getByDataCy('filter-input').clear();
+    cy.getByDataCy('instrument').should('have.length', 3);
+  });
+
+  it.skip('filter by language', () => {
+    // todo: move this to a myKV test env
+
+    cy.visit('instruments/');
+
+    // todo: replace this invoke with something that works like a user as soon as the myKV test env is running
+    // cy.get('.filter-bar__language-selection').invoke('show');
+    cy.getByDataCy('radio-button-de').click();
+    cy.getByDataCy('instrument').should('have.length', 3);
+
+    cy.getByDataCy('radio-button-en').click();
+    cy.getByDataCy('instrument').should('have.length', 0);
+    cy.getByDataCy('info-message-no-entry').should(
+      'contain',
+      'Für die ausgewählten Filtereinstellungen sind keine Einträge vorhanden'
+    );
+
+    cy.getByDataCy('radio-button-fr').click();
+    cy.getByDataCy('instrument').should('have.length', 1);
+  });
 });

client/src/components/LanguageSwitcher.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="language-switcher">
     <pill-radio-buttons
+      data-cy="language-switcher-buttons"
       :items="languages"
       :selected-item="language"
       @update:selected-item="changeLanguage"

client/src/components/instruments/FilterBar.vue

@@ -5,6 +5,7 @@
         class="filter-bar__search-input skillbox-input"
         type="text"
         placeholder="Suchbegriff eingeben..."
+        data-cy="filter-input"
         ref="searchInputRef"
         v-model="searchQuery"
         @input="updateSearchQuery"

client/src/components/ui/PillRadioButtons.vue

@@ -2,6 +2,7 @@
   <div class="pill-radio">
     <button
       :class="['pill-radio__button', { 'pill-radio__button--active': item === selectedItem }]"
+      :data-cy="'radio-button-' + item"
       v-for="item in props.items"
       :key="item"
       @click="updateSelectedItem(item)"

client/src/pages/instrumentOverview.vue

@@ -17,6 +17,7 @@
 
       <info-message
         class="instrument-overview__no-instruments"
+        data-cy="info-message-no-entry"
         v-if="instruments.length > 1 && filteredInstruments.length === 0 && !loading"
       >
         Für die ausgewählten Filtereinstellungen sind keine Einträge vorhanden