Added tests for search filters

Author: SundeepChand

cypress.json

@@ -1,3 +1,15 @@
 {
-  "baseUrl": "http://localhost:3000"
+  "baseUrl": "http://localhost:3000",
+  "env": {
+    "testUsername": "user1",
+    "testUserEmail": "[email protected]",
+    "testUserPassword": "password",
+    "testStoryTitle": "This is a test story",
+    "testStoryProduct": "EOS Icons",
+    "testCategory": "Documentation"
+  },
+  "testFiles": [
+    "user_story.spec.js",
+    "test_filters.spec.js"
+  ]
 }

cypress/integration/test_filters.spec.js

@@ -0,0 +1,85 @@
+/// <reference types="cypress" />
+
+describe('Test the filters and search for stories', () => {
+  const testStory = {
+    title: Cypress.env('testStoryTitle'),
+    product: Cypress.env('testStoryProduct'),
+    category: Cypress.env('testCategory')
+  }
+
+  const setDropdown = (dropdown, value) => {
+    cy
+      .get('[data-cy=search-input-div]')
+      .get(`[data-cy=${dropdown}-dropdown]`)
+      .click()
+    cy.contains(value).click({ force: true })
+  }
+
+  const searchByTitle = (value) => {
+    cy.get('[data-cy=search-input]').type(value)
+    cy.get('[data-cy=btn-search]').click()
+  }
+
+  const typeOnSearch = (value) => {
+    cy.get('[data-cy=search-input]').type(value)
+  }
+
+  const clearSearchInput = () => {
+    cy.get('[data-cy=btn-clear]').click({ force: true })
+  }
+
+  before(() => {
+    cy.visit('/')
+  })
+
+  it('Filters stories based on product', () => {
+    setDropdown('product', 'EOS User Story')
+
+    cy.contains('No stories')
+
+    setDropdown('product', testStory.product)
+
+    cy.contains(testStory.title)
+  })
+
+  it('Filters stories based on category', () => {
+    setDropdown('category', 'Bug')
+
+    cy.contains('No stories')
+
+    setDropdown('category', testStory.category)
+
+    cy.contains(testStory.title)
+  })
+
+  it('Searches stories based on title', () => {
+    searchByTitle('random')
+    
+    cy.contains('No stories')
+
+    clearSearchInput()
+
+    searchByTitle('test')
+
+    cy.contains(testStory.title)
+
+    clearSearchInput()
+  })
+
+  it('Searches stories based on author', () => {
+    setDropdown('toggle-title', 'Author')
+
+    typeOnSearch('un')
+    cy.get('[data-cy=search-input-div]').contains('No users found')
+
+    clearSearchInput()
+
+    typeOnSearch('us')
+    cy
+      .get('[data-cy=search-input-div]')
+      .contains('user1')
+      .click({ force: true })
+
+    cy.contains(testStory.title)
+  })
+})

cypress/integration/user_story.spec.js

@@ -2,15 +2,15 @@
 
 describe('Test new User Registration Workflow', () => {
   const testUser = {
-    username: 'user5',
-    email: '[email protected]',
-    password: 'password',
+    username: Cypress.env('testUsername'),
+    email: Cypress.env('testUserEmail'),
+    password: Cypress.env('testUserPassword'),
   }
 
   const testStory = {
-    title: 'This is a test story',
-    product: 'EOS Icons',
-    category: 'Documentation',
+    title: Cypress.env('testStoryTitle'),
+    product: Cypress.env('testStoryProduct'),
+    category: Cypress.env('testCategory'),
     priority: 'High',
     description: '{enter}Testing User Story',
   }

src/components/Dropdown.js

@@ -3,7 +3,7 @@ import React, { useState, useEffect } from 'react'
 import Button from './Button'
 
 const Dropdown = (props) => {
-  const { title, reference, curr, setCurr, itemList } = props
+  const { title, reference, curr, setCurr, itemList, ...rest } = props
 
   const [dropdownState, setDropdownState] = useState(false)
 
@@ -32,7 +32,7 @@ const Dropdown = (props) => {
   return (
     <>
       <div className='filter-title'>{title}</div>
-      <div className='dropdown-container' ref={reference}>
+      <div className='dropdown-container' ref={reference} {...rest}>
         <Button
           type='button'
           className='btn btn-transparent'

src/pages/Home.js

@@ -299,7 +299,10 @@ const Home = () => {
 
           <div className='flex flex-row search-bar'>
             <div className='flex flex-row search-controls'>
-              <div className='flex flex-row search-input'>
+              <div
+                className='flex flex-row search-input'
+                data-cy='search-input-div'
+              >
                 <span>
                   <i className='eos-icons'>search</i>
                 </span>
@@ -317,6 +320,7 @@ const Home = () => {
                   name='search'
                   placeholder='Search'
                   autoComplete='off'
+                  data-cy='search-input'
                   value={fieldToSearch === 'Title' ? searchTerm : userTerm}
                   onChange={(event) => {
                     if (fieldToSearch === 'Title') {
@@ -340,6 +344,7 @@ const Home = () => {
                 <div className='close-btn-div'>
                   <span
                     className='close-btn'
+                    data-cy='btn-clear'
                     onClick={() => {
                       if (fieldToSearch === 'Title' && searchTerm.length > 0) {
                         setSearchTerm('')
@@ -360,11 +365,13 @@ const Home = () => {
                   curr={fieldToSearch}
                   setCurr={setFieldToSearch}
                   itemList={['Title', 'Author']}
+                  data-cy='toggle-title-dropdown'
                 />
               </div>
               <Button
                 type='submit'
                 className='btn btn-default'
+                data-cy='btn-search'
                 onClick={handleSearchSubmit}
               >
                 Search
@@ -377,13 +384,15 @@ const Home = () => {
                 curr={product}
                 setCurr={setProduct}
                 itemList={products}
+                data-cy='product-dropdown'
               />
               <Dropdown
                 title='Categories'
                 reference={categoryDropdownContainer}
                 curr={category}
                 setCurr={setCategory}
                 itemList={categories}
+                data-cy='category-dropdown'
               />
               <Dropdown
                 title='Sort By'