Write cypress tests

- Press enter starts search
- Press escape clears search
- Select entry goes to post
- Select dropdown content

components/SearchInput.spec.js

@@ -2,7 +2,7 @@ import { shallowMount, mount } from '@vue/test-utils'
 import SearchInput from './SearchInput.vue'
 import Vue from 'vue'
 import Styleguide from '@human-connection/styleguide'
-Vue.use(Styleguide) 
+Vue.use(Styleguide)
 
 describe('SearchInput.vue', () => {
   let wrapper
@@ -35,6 +35,6 @@ describe('SearchInput.vue', () => {
     let input = wrapper.find('input#nav-search')
     input.trigger('focus')
     input.setValue('abc')
-    expect(wrapper.vm.searchValue).toBe('abc')
+    expect(wrapper.vm.value).toBe('abc')
   })
 })

cypress/integration/06.Search.feature

@@ -6,10 +6,31 @@ Feature: Search
   Background:
     Given I have a user account
     And we have the following posts in our database:
-      | Author        | id | title                                         | content                |
-      | Brianna Wiest | p1 | 101 Essays that will change the way you think | 101 Essays, of course! |
+      | Author        | id | title                                         | content                                 |
+      | Brianna Wiest | p1 | 101 Essays that will change the way you think | 101 Essays, of course!                  |
+      | Brianna Wiest | p1 | No searched for content                       | will be found in this post, I guarantee |
 
   Scenario: Search for specific words
     Given I am logged in
     When I search for "Essays"
     Then I should see posts with that word included
+
+  Scenario: Press enter starts search
+    Given I am logged in
+    When I type "Ess" and press Enter
+    Then I should see posts with that word included
+
+  Scenario: Press escape clears search
+    Given I am logged in
+    When I type "Ess" and press escape
+    Then the search field should clear
+
+  Scenario: Select entry goes to post
+    When I search for "Essays"
+    And I select an entry
+    Then I should be on the post's page
+
+  Scenario: Select dropdown content
+    When I search for "Essays"
+    Then I should see posts with the searched-for term in the select dropdown
+    And I should not see posts without the searched-for term in the select dropdown

cypress/integration/common/search.js

@@ -9,3 +9,51 @@ When('I search for {string}', value => {
 Then('I should see posts with that word included', () => {
   cy.get('.ds-card-header:first').should('contain', 'Essays')
 })
+
+When('I type {string} and press Enter', value => {
+  cy.get('#nav-search')
+    .focus()
+    .type(value)
+    .type('{enter}')
+})
+
+When('I type {string} and press escape', value => {
+  cy.get('#nav-search')
+    .focus()
+    .type(value)
+    .type('{esc}')
+})
+
+Then('the search field should clear', () => {
+  cy.get('#nav-search').should('have.text', '')
+})
+
+When('I select an entry', () => {
+  cy.get('a')
+    .first()
+    .trigger('click')
+})
+
+Then("I should be on the post's page", () => {
+  cy.get('.hc-editor-content').should('contain', '101 Essays, of course!')
+})
+
+Then(
+  'I should see posts with the searched-for term in the select dropdown',
+  () => {
+    cy.get('.ds-select-dropdown-message').should(
+      'be.visible',
+      '101 Essays that will change the way you think'
+    )
+  }
+)
+
+Then(
+  'I should not see posts without the searched-for term in the select dropdown',
+  () => {
+    cy.get('.ds-select-dropdown-message').should(
+      'not.be.visible',
+      'No searched for content'
+    )
+  }
+)

cypress/integration/common/steps.js

@@ -152,8 +152,6 @@ When('I press {string}', label => {
 
 Given('we have the following posts in our database:', table => {
   table.hashes().forEach(({ Author, id, title, content }) => {
-    console.log('table', table)
-    console.log('id', id, 'title', title, 'content', content)
     cy.factory()
       .create('User', {
         name: Author,