Add parent class for css selector on cypress/component

This commit is contained in:
Matt Rider 2019-07-22 06:50:58 -03:00
parent 69de04f1eb
commit c8a6792627
2 changed files with 55 additions and 51 deletions

View File

@ -1,73 +1,70 @@
import { When, Then } from 'cypress-cucumber-preprocessor/steps' import { When, Then } from "cypress-cucumber-preprocessor/steps";
When('I search for {string}', value => { When("I search for {string}", value => {
cy.get('#nav-search') cy.get("#nav-search")
.focus() .focus()
.type(value) .type(value);
}) });
Then('I should have one post in the select dropdown', () => { Then("I should have one post in the select dropdown", () => {
cy.get('.ds-select-dropdown').should($li => { cy.get(".input .ds-select-dropdown").should($li => {
expect($li).to.have.length(1) expect($li).to.have.length(1);
}) });
}) });
Then('I should see the following posts in the select dropdown:', table => { Then("I should see the following posts in the select dropdown:", table => {
table.hashes().forEach(({ title }) => { table.hashes().forEach(({ title }) => {
cy.get('.ds-select-dropdown').should('contain', title) cy.get(".ds-select-dropdown").should("contain", title);
}) });
}) });
When('I type {string} and press Enter', value => { When("I type {string} and press Enter", value => {
cy.get('#nav-search') cy.get("#nav-search")
.focus() .focus()
.type(value) .type(value)
.type('{enter}', { force: true }) .type("{enter}", { force: true });
}) });
When('I type {string} and press escape', value => { When("I type {string} and press escape", value => {
cy.get('#nav-search') cy.get("#nav-search")
.focus() .focus()
.type(value) .type(value)
.type('{esc}') .type("{esc}");
}) });
Then('the search field should clear', () => { Then("the search field should clear", () => {
cy.get('#nav-search').should('have.text', '') cy.get("#nav-search").should("have.text", "");
}) });
When('I select an entry', () => { When("I select an entry", () => {
cy.get('.ds-select-dropdown ul li') cy.get(".input .ds-select-dropdown ul li")
.first() .first()
.trigger('click') .trigger("click");
}) });
Then("I should be on the post's page", () => { Then("I should be on the post's page", () => {
cy.location('pathname').should( cy.location("pathname").should("contain", "/post/");
'contain', cy.location("pathname").should(
'/post/' "eq",
) "/post/p1/101-essays-that-will-change-the-way-you-think"
cy.location('pathname').should( );
'eq', });
'/post/p1/101-essays-that-will-change-the-way-you-think'
)
})
Then( Then(
'I should see posts with the searched-for term in the select dropdown', "I should see posts with the searched-for term in the select dropdown",
() => { () => {
cy.get('.ds-select-dropdown').should( cy.get(".ds-select-dropdown").should(
'contain', "contain",
'101 Essays that will change the way you think' "101 Essays that will change the way you think"
) );
} }
) );
Then( Then(
'I should not see posts without the searched-for term in the select dropdown', "I should not see posts without the searched-for term in the select dropdown",
() => { () => {
cy.get('.ds-select-dropdown').should( cy.get(".ds-select-dropdown").should(
'not.contain', "not.contain",
'No searched for content' "No searched for content"
) );
} }
) );

View File

@ -10,7 +10,7 @@
/> />
</ds-flex-item> </ds-flex-item>
<ds-flex-item> <ds-flex-item>
<div style="width: 250px; position: relative; float: right; padding: 0 18px;"> <div class="sorting-dropdown">
<ds-select <ds-select
v-model="selected" v-model="selected"
:options="sortingOptions" :options="sortingOptions"
@ -208,4 +208,11 @@ export default {
transform: translate(-120%, -120%); transform: translate(-120%, -120%);
box-shadow: $box-shadow-x-large; box-shadow: $box-shadow-x-large;
} }
.sorting-dropdown {
width: 250px;
position: relative;
float: right;
padding: 0 18px;
}
</style> </style>