Refactor cypress/component tests

components/SearchInput.spec.js

@@ -1,40 +1,51 @@
-import { shallowMount, mount } from '@vue/test-utils'
+import { mount, createLocalVue } from '@vue/test-utils'
 import SearchInput from './SearchInput.vue'
 import Vue from 'vue'
+import Vuex from 'vuex'
 import Styleguide from '@human-connection/styleguide'
-Vue.use(Styleguide)
+const localVue = createLocalVue()
+
+localVue.use(Vuex)
+localVue.use(Styleguide)
 
 describe('SearchInput.vue', () => {
   let wrapper
-  const mocks = { $t: () => {} }
+  let mocks
+  let propsData
 
   beforeEach(() => {
-    wrapper = shallowMount(SearchInput, { mocks })
+    propsData = {}
   })
 
-  it('renders', () => {
-    expect(wrapper.is('div')).toBe(true)
-  })
+  describe('mount', () => {
+    const Wrapper = () => {
+      mocks = {
+        $t: () => {}
+      }
+      return mount(SearchInput, { mocks, localVue, propsData })
+    }
 
-  it('has id "nav-search"', () => {
-    expect(wrapper.contains('#nav-search')).toBe(true)
-  })
+    it('renders', () => {
+      expect(Wrapper().is('div')).toBe(true)
+    })
 
-  it('defaults to an empty value', () => {
-    wrapper = mount(SearchInput, { mocks })
-    expect(wrapper.vm.value).toBe('')
-  })
+    it('defaults to an empty value', () => {
+      expect(Wrapper().vm.value).toBe('')
+    })
 
-  it('defaults to id "nav-search"', () => {
-    wrapper = mount(SearchInput, { mocks })
-    expect(wrapper.vm.id).toBe('nav-search')
-  })
+    it('has id "nav-search"', () => {
+      expect(Wrapper().contains('#nav-search')).toBe(true)
+    })
 
-  it('changes searchValue as a user inputs a value', () => {
-    wrapper = mount(SearchInput, { mocks })
-    let input = wrapper.find('input#nav-search')
-    input.trigger('focus')
-    input.setValue('abc')
-    expect(wrapper.vm.value).toBe('abc')
+    it('defaults to id "nav-search"', () => {
+      expect(Wrapper().vm.id).toBe('nav-search')
+    })
+
+    it('changes searchValue as a user inputs a value', () => {
+      const wrapper = Wrapper()
+      let input = wrapper.find('input')
+      input.setValue('abc') 
+      expect(wrapper.vm.searchValue).toBe('abc')
+    })
   })
-})
+})

cypress/integration/06.Search.feature

@@ -9,19 +9,23 @@ Feature: Search
       | 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
-    Given I am logged in
     When I search for "Essays"
-    Then I should see posts with that word included
+    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
-    Given I am logged in
-    When I type "Ess" and press Enter
-    Then I should see posts with that word included
+    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
-    Given I am logged in
     When I type "Ess" and press escape
     Then the search field should clear
 
@@ -32,5 +36,6 @@ Feature: Search
 
   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

cypress/integration/common/search.js

@@ -1,20 +1,27 @@
 import { When, Then } from 'cypress-cucumber-preprocessor/steps'
-
 When('I search for {string}', value => {
   cy.get('#nav-search')
     .focus()
     .type(value)
 })
 
-Then('I should see posts with that word included', () => {
-  cy.get('.ds-card-header:first').should('contain', 'Essays')
+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}')
+    .type('{enter}', { force: true })
 })
 
 When('I type {string} and press escape', value => {
@@ -29,20 +36,20 @@ Then('the search field should clear', () => {
 })
 
 When('I select an entry', () => {
-  cy.get('a')
+  cy.get('.ds-select-dropdown ul li')
     .first()
     .trigger('click')
 })
 
 Then("I should be on the post's page", () => {
-  cy.get('.hc-editor-content').should('contain', '101 Essays, of course!')
+  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-message').should(
-      'be.visible',
+    cy.get('.ds-select-dropdown').should(
+      'contain',
       '101 Essays that will change the way you think'
     )
   }
@@ -51,8 +58,8 @@ Then(
 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',
+    cy.get('.ds-select-dropdown').should(
+      'not.contain',
       'No searched for content'
     )
   }