Adding SearchBar component (tests passing)

mirandaweston · mirandaweston · commit 6b95a04a40c6 · 2023-04-21T14:58:06.000+01:00
diff --git a/cypress/support/component-index.html b/cypress/support/component-index.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
     <title>Components App</title>
   </head>
   <body>
     <div data-cy-root></div>
   </body>
-</html>
+</html>
diff --git a/cypress/support/component.js b/cypress/support/component.js
@@ -14,14 +14,14 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import "./commands";
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
 
-import { mount } from 'cypress/vue'
+import { mount } from "cypress/vue";
 
-Cypress.Commands.add('mount', mount)
+Cypress.Commands.add("mount", mount);
 
 // Example use:
-// cy.mount(MyComponent)
+// cy.mount(MyComponent)
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
   "devDependencies": {
     "@babel/core": "^7.12.16",
     "@babel/eslint-parser": "^7.12.16",
+    "@cypress/vue": "^5.0.5",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
diff --git a/src/components/HomePage.vue b/src/components/HomePage.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="home-page">
     <h1>Stocks</h1>
+    <search-bar :value="searchQuery" @update="searchQuery = $event" />
     <table>
       <thead>
         <tr>
@@ -11,7 +12,7 @@
         </tr>
       </thead>
       <tbody>
-        <tr v-for="stock in stocks" :key="stock.ticker">
+        <tr v-for="stock in filteredStocks" :key="stock.ticker">
           <td>{{ stock.name }}</td>
           <td>{{ stock.ticker }}</td>
           <td>{{ stock.price }}</td>
@@ -23,9 +24,15 @@
 </template>
 
 <script>
+import SearchBar from "../components/SearchBar.vue";
+
 export default {
+  components: {
+    SearchBar,
+  },
   data() {
     return {
+      searchQuery: "",
       stocks: [
         { name: "Apple Inc.", ticker: "AAPL", price: 135.75, change: -0.25 },
         {
@@ -50,6 +57,17 @@ export default {
       ],
     };
   },
+  computed: {
+    filteredStocks() {
+      return this.stocks.filter((stock) => {
+        const query = this.searchQuery.toLowerCase();
+        return (
+          stock.name.toLowerCase().includes(query) ||
+          stock.ticker.toLowerCase().includes(query)
+        );
+      });
+    },
+  },
 };
 </script>
 
diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="search-bar">
+    <input
+      type="text"
+      :value="searchQuery"
+      @input="$emit('update', $event.target.value)"
+      placeholder="Search"
+    />
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      default: "",
+    },
+    placeholder: {
+      type: String,
+      default: "Search",
+    },
+  },
+  data() {
+    return {
+      searchQuery: this.value,
+    };
+  },
+  watch: {
+    value(newVal) {
+      this.searchQuery = newVal;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.search-bar {
+  margin-bottom: 1rem;
+}
+</style>
+
+<style scoped>
+.search-bar {
+  margin-bottom: 1rem;
+}
+</style>
diff --git a/tests/SearchBar.cy.js b/tests/SearchBar.cy.js
@@ -0,0 +1,16 @@
+import SearchBar from "../src/components/SearchBar";
+
+describe("SearchBar", () => {
+  beforeEach(() => {
+    cy.mount(SearchBar);
+  });
+
+  it("renders a search input bar with given placeholder", () => {
+    cy.get(".search-bar input").should("have.attr", "placeholder", "Search");
+  });
+
+  it("updates input value with user input", () => {
+    const inputText = "test search query";
+    cy.get(".search-bar input").type(inputText).should("have.value", inputText);
+  });
+});
