Fix cypress tests/start refactor search story

- Cannot use data-test in cypress tests as we use production image and
data-test are removed to minimize the image. Select based on styleguide
input's class

- Story is still not working because of filter dateTime and
$i18n.locale(), we can fix this later.

- Co-authored-by: Moriz Wahl <moriz.wahl@gmx.de>

cypress/integration/common/search.js

@@ -1,6 +1,6 @@
 import { When, Then } from "cypress-cucumber-preprocessor/steps";
 When("I search for {string}", value => {
-  cy.get("[data-test='search-field']")
+  cy.get(".searchable-input .ds-select-search")
     .focus()
     .type(value);
 });
@@ -16,7 +16,7 @@ Then("the search has no results", () => {
     expect($li).to.have.length(1);
   });
   cy.get(".ds-select-dropdown").should("contain", 'Nothing found');
-  cy.get("[data-test='search-field']")
+  cy.get(".searchable-input .ds-select-search")
     .focus()
     .type("{esc}");
 });
@@ -35,21 +35,21 @@ Then("I should see the following users in the select dropdown:", table => {
 });
 
 When("I type {string} and press Enter", value => {
-  cy.get("[data-test='search-field']")
+  cy.get(".searchable-input .ds-select-search")
     .focus()
     .type(value)
     .type("{enter}", { force: true });
 });
 
 When("I type {string} and press escape", value => {
-  cy.get("[data-test='search-field']")
+  cy.get(".searchable-input .ds-select-search")
     .focus()
     .type(value)
     .type("{esc}");
 });
 
 Then("the search field should clear", () => {
-  cy.get("[data-test='search-field']").should("have.text", "");
+  cy.get(".searchable-input .ds-select-search").should("have.text", "");
 });
 
 When("I select a post entry", () => {

webapp/components/features/SearchField/SearchField.spec.js

@@ -2,7 +2,7 @@ import { config, mount } from '@vue/test-utils'
 import Vuex from 'vuex'
 import SearchField from './SearchField.vue'
 import SearchableInput from '~/components/generic/SearchableInput/SearchableInput'
-import { results as searchResults } from './SearchField.story'
+import { searchResults } from '~/components/generic/SearchableInput/SearchableInput.story'
 const localVue = global.localVue
 
 localVue.filter('truncate', () => 'truncated string')

webapp/components/generic/SearchableInput/SearchableInput.spec.js

@@ -2,7 +2,7 @@ import { config, mount } from '@vue/test-utils'
 import Vuex from 'vuex'
 import Vue from 'vue'
 import SearchableInput from './SearchableInput'
-import { results } from '~/components/features/SearchField/SearchField.story'
+import { searchResults } from '~/components/generic/SearchableInput/SearchableInput.story'
 
 const localVue = global.localVue
 
@@ -77,7 +77,7 @@ describe('SearchableInput.vue', () => {
 
       describe('navigating to resource', () => {
         beforeEach(() => {
-          propsData = { options: results }
+          propsData = { options: searchResults }
           wrapper = Wrapper()
           select = wrapper.find('.ds-select')
           select.trigger('focus')

webapp/components/generic/SearchableInput/SearchableInput.story.js

@@ -1,11 +1,11 @@
 import { storiesOf } from '@storybook/vue'
 import { withA11y } from '@storybook/addon-a11y'
-import SearchField from './SearchField.vue'
+import SearchableInput from './SearchableInput.vue'
 import helpers from '~/storybook/helpers'
 
 helpers.init()
 
-export const results = [
+export const searchResults = [
   {
     id: 'post-by-jenny',
     __typename: 'Post',
@@ -104,14 +104,12 @@ storiesOf('Search Field', module)
   .addDecorator(withA11y)
   .addDecorator(helpers.layout)
   .add('test', () => ({
-    components: { SearchField },
+    components: { SearchableInput },
     store: helpers.store,
     data: () => ({
-      results: results,
+      searchResults,
     }),
     template: `
-      <search-field
+      <searchable-input :options="searchResults" />
-        :searchResults="results"
-      />
     `,
   }))

webapp/components/generic/SearchableInput/SearchableInput.vue

@@ -185,7 +185,6 @@ export default {
     display: flex;
     flex-wrap: wrap;
   }
-  &,
   .ds-select-dropdown {
     transition: box-shadow 100ms;
     max-height: 70vh;