+
+
+
+
+
diff --git a/cypress/integration/06.Search.feature b/cypress/integration/06.Search.feature
new file mode 100644
index 000000000..0a4450829
--- /dev/null
+++ b/cypress/integration/06.Search.feature
@@ -0,0 +1,41 @@
+Feature: Search
+ As a user
+ I would like to be able to search for specific words
+ In order to find related content
+
+ 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! |
+ | Brianna Wiest | p1 | No searched for content | will be found in this post, I guarantee |
+ Given I am logged in
+
+ Scenario: Search for specific words
+ When I search for "Essays"
+ Then I should have one post in the select dropdown
+ Then I should see the following posts in the select dropdown:
+ | title |
+ | 101 Essays that will change the way you think |
+
+ Scenario: Press enter starts search
+ When I type "Essa" and press Enter
+ Then I should have one post in the select dropdown
+ Then I should see the following posts in the select dropdown:
+ | title |
+ | 101 Essays that will change the way you think |
+
+ Scenario: Press escape clears search
+ 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 have one post in the select dropdown
+ 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
diff --git a/cypress/integration/common/search.js b/cypress/integration/common/search.js
new file mode 100644
index 000000000..4809e8a13
--- /dev/null
+++ b/cypress/integration/common/search.js
@@ -0,0 +1,69 @@
+import { When, Then } from 'cypress-cucumber-preprocessor/steps'
+When('I search for {string}', value => {
+ cy.get('#nav-search')
+ .focus()
+ .type(value)
+})
+
+Then('I should have one post in the select dropdown', () => {
+ cy.get('.ds-select-dropdown').should($li => {
+ expect($li).to.have.length(1)
+ })
+})
+
+Then('I should see the following posts in the select dropdown:', table => {
+ table.hashes().forEach(({ title }) => {
+ cy.get('.ds-select-dropdown').should('contain', title)
+ })
+})
+
+When('I type {string} and press Enter', value => {
+ cy.get('#nav-search')
+ .focus()
+ .type(value)
+ .type('{enter}', { force: true })
+})
+
+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('.ds-select-dropdown ul li')
+ .first()
+ .trigger('click')
+})
+
+Then("I should be on the post's page", () => {
+ cy.location('pathname').should(
+ 'eq',
+ '/post/101-essays-that-will-change-the-way-you-think/'
+ )
+})
+
+Then(
+ 'I should see posts with the searched-for term in the select dropdown',
+ () => {
+ cy.get('.ds-select-dropdown').should(
+ 'contain',
+ '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').should(
+ 'not.contain',
+ 'No searched for content'
+ )
+ }
+)
diff --git a/layouts/default.vue b/layouts/default.vue
index 897cc2724..bdb41f8b2 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,21 +1,33 @@
-
+
+
+ quickSearch({ value })"
+ @select="goToPost"
+ />
+