removed class name from several common cmponents

Blockchain-Country · Dec 25, 2024 · fcc5938 · fcc5938
1 parent d8c5509
commit fcc5938
Show file tree

Hide file tree

Showing 15 changed files with 85 additions and 54 deletions.
diff --git a/src/App.js b/src/App.js
@@ -6,7 +6,7 @@ import FilterSection from './components/filterSection/FilterSection'
 import ManualAddBookSection from './components/manualAddBookSection/ManualAddBookSection'
 import SearchBookSection from './components/searchBookSection/SearchBookSection'
 import RandomBookSection from './components/randomBookSection/RandomBookSection'
-import BookListSection from './components/BookListSection/BookListSection'
+import BookListSection from './components/bookListSection/BookListSection'
 import Header from './components/header/Header'
 import Login from './components/user/login/Login'
 import Signup from './components/user/signup/Signup'

diff --git a/src/App.test.js b/src/App.test.js
@@ -74,14 +74,26 @@ describe('App functional Tests', () => {
     })
 
     // ManualAddBookSection form elements:
-    titleInput = screen.getByTestId('manualAddBook_input_title')
-    authorsInput = screen.getByTestId('manualAddBook_input_author')
-    submitBookBtn = screen.getByTestId('manualAddBook_submit_btn')
+    titleInput = screen.getByTestId((id) =>
+      id.includes('manualAddBook_input_title')
+    )
+    authorsInput = screen.getByTestId((id) =>
+      id.includes('manualAddBook_input_author')
+    )
+    submitBookBtn = screen.getByTestId((id) =>
+      id.includes('manualAddBook_submit_btn')
+    )
     bookListSection_component = screen.getByTestId('bookList_section')
     // FilterSection elements:
-    filterByTitleInput = screen.getByTestId('filter_title_input')
-    filterbyAuthorsInput = screen.getByTestId('filter_author_input')
-    clearAllFiltersBtn = screen.getByTestId('filter_clear_btn')
+    filterByTitleInput = screen.getByTestId((id) =>
+      id.includes('filter_title_input')
+    )
+    filterbyAuthorsInput = screen.getByTestId((id) =>
+      id.includes('filter_author_input')
+    )
+    clearAllFiltersBtn = screen.getByTestId((id) =>
+      id.includes('filter_clear_btn')
+    )
   })
 
   afterEach(() => {

diff --git a/src/components/BookListSection/BookListSection.test.js b/src/components/BookListSection/BookListSection.test.js
@@ -64,7 +64,9 @@ describe('BookList Component Tests', () => {
     const bookItems = within(container).getByTestId(
       `bookList_item id=${bookId}`
     )
-    const deleteBookBtn = within(bookItems).getByTestId('delete_book_btn')
+    const deleteBookBtn = within(bookItems).getByTestId((id) =>
+      id.includes('delete_book_btn')
+    )
     expect(deleteBookBtn).toBeInTheDocument()
 
     fireEvent.click(deleteBookBtn)
@@ -87,25 +89,35 @@ describe('BookList Component Tests', () => {
     const { container } = setup(BookListSection, mockedStore)
 
     const bookItem = within(container).getByTestId(`bookList_item id=${bookId}`)
-    const favoriteToggle = within(bookItem).getByTestId(
-      'book_favorite_toggle_false'
+    const favoriteToggle = within(bookItem).getByTestId((id) =>
+      id.includes('book_favorite_toggle_false')
     )
 
     // Toggle favorite on
     fireEvent.click(favoriteToggle)
     expect(
-      within(bookItem).getByTestId('book_favorite_toggle_true')
+      within(bookItem).getByTestId((id) =>
+        id.includes('book_favorite_toggle_true')
+      )
     ).toBeInTheDocument()
 
     // Try deleting the book
-    const deleteBookBtn = within(bookItem).getByTestId('delete_book_btn')
+    const deleteBookBtn = within(bookItem).getByTestId((id) =>
+      id.includes('delete_book_btn')
+    )
     fireEvent.click(deleteBookBtn)
     expect(bookItem).toBeInTheDocument()
 
     // Untoggle favorite
-    fireEvent.click(within(bookItem).getByTestId('book_favorite_toggle_true'))
+    fireEvent.click(
+      within(bookItem).getByTestId((id) =>
+        id.includes('book_favorite_toggle_true')
+      )
+    )
     expect(
-      within(bookItem).getByTestId('book_favorite_toggle_false')
+      within(bookItem).getByTestId((id) =>
+        id.includes('book_favorite_toggle_false')
+      )
     ).toBeInTheDocument()
 
     // Delete book

diff --git a/src/components/BookListSection/book/Book.css b/src/components/BookListSection/book/Book.css
@@ -82,7 +82,7 @@ div[data-testid='book_actions'] {
   gap: 0.5rem;
 }
 
-button[data-testid^='book_favorite_toggle_'] {
+button[data-testid*='book_favorite_toggle_'] {
   min-width: 0;
   height: 3.5rem;
   width: 3.5rem;
@@ -93,8 +93,8 @@ button[data-testid^='book_favorite_toggle_'] {
   transition: background-color 0.3s ease;
 }
 
-button[data-testid='book_favorite_toggle_false']:hover,
-button[data-testid='book_favorite_toggle_true']:hover {
+button[data-testid*='book_favorite_toggle_false']:hover,
+button[data-testid*='book_favorite_toggle_true']:hover {
   background-color: #f6dbabfd;
 }
 
@@ -114,14 +114,14 @@ button[data-testid='book_favorite_toggle_true']:hover {
 }
 
 /* Delete Button */
-button[data-testid='delete_book_btn'] {
+button[data-testid*='delete_book_btn'] {
   margin: 0;
   margin-right: 0.5rem;
   background-color: #fff;
   color: red;
   border: 1px solid red;
 }
 
-button[data-testid='delete_book_btn']:hover {
+button[data-testid*='delete_book_btn']:hover {
   background-color: rgb(255, 204, 204);
 }
diff --git a/src/components/BookListSection/bookListModal/BookListModal.css b/src/components/BookListSection/bookListModal/BookListModal.css
@@ -60,19 +60,18 @@ div[data-testid='bookListModal_actions_wrapper'] {
 }
 
 /* Favorite Toggle Button */
-button[data-testid^='bookListModal_favorite_toggle_'] {
+button[data-testid*='bookListModal_favorite_toggle_'] {
   min-width: 0;
   height: 3.5rem;
   width: 3.5rem;
   padding: 0;
   margin: 0;
   border: 1px solid #fca510;
   background-color: #fff;
-  /* transition: background-color 0.2s, transform 0.3s ease; */
 }
 
-button[data-testid^='bookListModal_favorite_toggle_false']:hover,
-button[data-testid^='bookListModal_favorite_toggle_true']:hover {
+button[data-testid*='bookListModal_favorite_toggle_false']:hover,
+button[data-testid*='bookListModal_favorite_toggle_true']:hover {
   background-color: #f6dbab;
 }
 
@@ -92,18 +91,18 @@ button[data-testid^='bookListModal_favorite_toggle_true']:hover {
   color: #e69303;
 }
 
-button[data-testid='bookListModal_delete_btn'] {
+button[data-testid*='bookListModal_delete_btn'] {
   margin: 0;
   background-color: #fff;
   color: red;
   border: 1px solid red;
 }
 
-button[data-testid='bookListModal_delete_btn']:hover {
+button[data-testid*='bookListModal_delete_btn']:hover {
   background-color: rgb(255, 204, 204);
 }
 
-button[data-testid='bookListModal_delete_btn']:disabled {
+button[data-testid*='bookListModal_delete_btn']:disabled {
   border: 1px solid darkgray;
   color: fff;
   background-color: darkgray;

diff --git a/src/components/common/button/Button.css b/src/components/common/button/Button.css
@@ -1,4 +1,4 @@
-.componentButton {
+button[data-testid^='componentButton'] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -15,32 +15,32 @@
     box-shadow 0.1s ease;
 }
 
-.componentButton:hover {
+button[data-testid^='componentButton']:hover {
   transform: scale(1.03);
   background-color: #0056b3;
 }
 
-span[data-testid='button_text'] {
-  transition: transform 0.2s ease;
-}
-
-span[data-testid='button_text']:hover {
-  transform: scale(1.05);
-}
-
-.componentButton:active {
+button[data-testid^='componentButton']:active {
   background-color: #016adb;
   transform: scale(0.95);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
-.componentButton:disabled {
+button[data-testid^='componentButton']:disabled {
   background-color: darkgray;
   border: 1px solid darkgray;
   color: #fff;
   cursor: not-allowed;
 }
 
+span[data-testid='button_text'] {
+  transition: transform 0.2s ease;
+}
+
+span[data-testid='button_text']:hover {
+  transform: scale(1.05);
+}
+
 [data-testid='search_spinner'] {
   font-size: 1.5rem;
   animation: spinner 1s infinite linear;

diff --git a/src/components/common/button/Button.jsx b/src/components/common/button/Button.jsx
@@ -9,14 +9,12 @@ const Button = ({
   isLoading = false,
   children,
   'data-testid': testId,
-  className = '',
 }) => {
   return (
     <button
       type={type}
       onClick={onClick}
-      className="componentButton"
-      data-testid={testId}
+      data-testid={`componentButton ${testId}`}
       disabled={disabled}
       aria-busy={isLoading}
     >

diff --git a/src/components/common/input/Input.css b/src/components/common/input/Input.css
@@ -1,4 +1,4 @@
-.component_input {
+input[data-testid^='component_input'] {
   width: 90%;
   padding: 0.5rem 1rem;
   border: 1px solid #ccc;

diff --git a/src/components/common/input/Input.jsx b/src/components/common/input/Input.jsx
@@ -18,8 +18,7 @@ const Input = ({
         value={value}
         onChange={onChange}
         disabled={disabled}
-        className="component_input"
-        data-testid={testId}
+        data-testid={`component_input ${testId}`}
       ></input>
     </>
   )

diff --git a/src/components/common/modal/Modal.css b/src/components/common/modal/Modal.css
@@ -18,7 +18,6 @@ div[data-testid='modal_component'] {
   display: flex;
   flex-direction: column;
   width: 80%;
-  /* min-height: 60%; */
   max-height: 90%;
   background-color: #f2f2f2;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

diff --git a/src/components/filterSection/FilterSection.test.js b/src/components/filterSection/FilterSection.test.js
@@ -15,9 +15,15 @@ describe('FilterSection Component Tests', () => {
     })
 
     // FilterSection elements:
-    filterByTitleInput = screen.getByTestId('filter_title_input')
-    filterbyAuthorsInput = screen.getByTestId('filter_author_input')
-    clearAllFiltersBtn = screen.getByTestId('filter_clear_btn')
+    filterByTitleInput = screen.getByTestId((id) =>
+      id.includes('filter_title_input')
+    )
+    filterbyAuthorsInput = screen.getByTestId((id) =>
+      id.includes('filter_author_input')
+    )
+    clearAllFiltersBtn = screen.getByTestId((id) =>
+      id.includes('filter_clear_btn')
+    )
   })
 
   afterEach(() => {

diff --git a/src/components/manualAddBookSection/ManualAddBookSection.css b/src/components/manualAddBookSection/ManualAddBookSection.css
@@ -7,7 +7,7 @@ form[data-testid='manualAddBook_form'] {
   padding: 1rem;
 }
 
-div[data-testid='manualAddBook_inputs_wrapper'] {
+div[data-testid*='manualAddBook_inputs_wrapper'] {
   display: flex;
   flex-direction: column;
   align-items: center;

diff --git a/src/components/manualAddBookSection/ManualAddBookSection.test.js b/src/components/manualAddBookSection/ManualAddBookSection.test.js
@@ -15,9 +15,15 @@ describe('ManualAddBookSection Component Tests', () => {
     })
 
     // ManualAddBookSection elements:
-    titleInput = screen.getByTestId('manualAddBook_input_title')
-    authorsInput = screen.getByTestId('manualAddBook_input_author')
-    submitBookBtn = screen.getByTestId('manualAddBook_submit_btn')
+    titleInput = screen.getByTestId((id) =>
+      id.includes('manualAddBook_input_title')
+    )
+    authorsInput = screen.getByTestId((id) =>
+      id.includes('manualAddBook_input_author')
+    )
+    submitBookBtn = screen.getByTestId((id) =>
+      id.includes('manualAddBook_submit_btn')
+    )
     bookListComponent = screen.getByTestId('bookList_section')
   })
 

diff --git a/src/components/searchBookSection/SearchBookSection.css b/src/components/searchBookSection/SearchBookSection.css
@@ -7,7 +7,7 @@ form[data-testid='search_form'] {
   padding: 1rem;
 }
 
-div[data-testid='search_input_wrapper'] {
+div[data-testid*='search_input_wrapper'] {
   display: flex;
   flex-direction: column;
   align-items: center;

diff --git a/src/components/searchBookSection/searchBookModal/SearchBookModal.css b/src/components/searchBookSection/searchBookModal/SearchBookModal.css
@@ -51,6 +51,6 @@ div[data-testid='modal_add_book_wrapper'] {
   justify-content: flex-start;
 }
 
-button[data-testid='modal_add_book_btn'] {
+button[data-testid*='modal_add_book_btn'] {
   margin: 0;
 }