From bc96333bae3bdabf4fbc79a398203e8c6c7800f6 Mon Sep 17 00:00:00 2001 From: Matt Rider Date: Fri, 8 Mar 2019 14:41:08 -0300 Subject: [PATCH] Refactor cypress/component tests --- components/SearchInput.spec.js | 61 ++++++++++++++++----------- cypress/integration/06.Search.feature | 17 +++++--- cypress/integration/common/search.js | 27 +++++++----- 3 files changed, 64 insertions(+), 41 deletions(-) diff --git a/components/SearchInput.spec.js b/components/SearchInput.spec.js index 316c774c0..2d1ffbda8 100644 --- a/components/SearchInput.spec.js +++ b/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') + }) }) -}) +}) \ No newline at end of file diff --git a/cypress/integration/06.Search.feature b/cypress/integration/06.Search.feature index 6e047cca5..0a4450829 100644 --- a/cypress/integration/06.Search.feature +++ b/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 diff --git a/cypress/integration/common/search.js b/cypress/integration/common/search.js index 05bdce0ff..47edae695 100644 --- a/cypress/integration/common/search.js +++ b/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' ) }