Add parent class for css selector on cypress/component

cypress/integration/common/search.js

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

webapp/pages/index.vue

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