test: add test for search

.eslintrc

@@ -73,6 +73,7 @@
     "@typescript-eslint/no-var-requires": "off",
     "@typescript-eslint/ban-ts-comment": "off",
     "no-console": "error",
+    "react/no-unescaped-entities": "off",
     "react/jsx-filename-extension": [1, { "extensions": [".ts", ".tsx"] }],
     "react/function-component-definition": [
       "error",

cypress/e2e/app.cy.ts

@@ -1,5 +1,20 @@
-describe('template spec', () => {
-  it('passes', () => {
+class CategorySearch {
+  elements = {
+    peopleCategory: () => cy.get('[data-cy="category-people"]'),
+    searchInput: () => cy.get('[data-cy="search-input"]')
+  }
+}
+
+describe('Category Search', () => {
+  it('Should search for people category', () => {
     cy.visit('/')
+    const categorySearch = new CategorySearch()
+    const { peopleCategory, searchInput } = categorySearch.elements
+
+    peopleCategory().click()
+    searchInput().type('Luke Skywalker').type('{enter}')
+
+    const expectedResult = cy.contains('Luke Skywalker')
+    expectedResult.should('be.visible')
   })
 })

src/app/home/page.tsx

@@ -13,6 +13,7 @@ const Categories = () => {
           title={title}
           alt={`${title}'s image`}
           href={`/categories/${title}`}
+          dataCy={`category-${title.toLowerCase()}`}
         />
       ))}
     </div>

src/components/molecules/Card/index.tsx

@@ -9,9 +9,10 @@ export const Card = ({
   title,
   imgHeight,
   imgWidth,
-  href
+  href,
+  dataCy
 }: CardProps) => (
-  <Link href={href} className={S.container}>
+  <Link href={href} className={S.container} data-cy={dataCy}>
     <div className={S.card}>
       <Image
         src={src}

src/components/molecules/Card/types.ts

@@ -5,4 +5,5 @@ export type CardProps = {
   href: string
   imgWidth?: number
   imgHeight?: number
+  dataCy?: string
 }

src/components/molecules/SearchBar/index.tsx

@@ -22,8 +22,14 @@ export const SearchBar = ({
           className={S.input}
           type="search"
           placeholder={placeholder}
+          data-cy="search-input"
         />
-        <Button type="submit" attachPos="left" icon={<LightsaberIcon />}>
+        <Button
+          type="submit"
+          attachPos="left"
+          icon={<LightsaberIcon />}
+          data-cy="search-button"
+        >
           Search
         </Button>
       </div>