Close #63 added first integration test for the filters page

ayanahye · Nov 16, 2023 · 5cb2d4c · 5cb2d4c
1 parent d4192a0
commit 5cb2d4c
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 5 deletions.
diff --git a/app/components/dropdown.jsx b/app/components/dropdown.jsx
@@ -31,6 +31,7 @@ export default function Dropdown(props) {
                                 name={item}
                                 value={item}
                                 onChange={handleCheckboxChange}
+                                data-testid={`checkbox-${props.id}-${item}`}
                             />
                             <label htmlFor={`checkbox-${props.id}-${item}`}>{item}</label>
                         </div>

diff --git a/app/filtering/Filter.css b/app/filtering/Filter.css
@@ -71,7 +71,6 @@
 
 .filterBlock {
     height: 400px;
-    width:350%;
     background-color: rgb(235, 249, 235);
     display: flex;
     flex-direction: column;
@@ -125,7 +124,6 @@
 .scroll-object1{
     height: 300px;
     background-color:  rgb(235, 249, 235);
-    width:2250px;
     margin-top: 50px;
     margin-bottom: 50px;
     border: 2px solid black;

diff --git a/app/filtering/__tests__/Filter.test.tsx b/app/filtering/__tests__/Filter.test.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import {render, fireEvent, screen, queryByText, within} from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect'; 
+import Filter from '../filter'; 
+
+describe("Options shows in display div", () => {
+    it("When the check is clicked for an option, the key and value pair should be displayed for the user in the div container called information.", () => {
+        const speciesList = {
+            common_name: 'Yellow Flower'
+        }
+
+        const { getByText, getByTestId } = render(<Filter speciesList={speciesList} />);
+
+        const checkBox = getByTestId('checkbox-option1-common_name');
+        fireEvent.click(checkBox);
+
+        const informationContainer = screen.getByTestId('scroll-object1');
+        expect(within(informationContainer).getByText(/common_name:\s*Yellow Flower/i)).toBeInTheDocument();
+    })
+})
+
+// u can run the tests using this command: npm test -- --testPathPattern="filtering/__tests__" 
+
diff --git a/app/filtering/filter.jsx b/app/filtering/filter.jsx
@@ -113,13 +113,15 @@ export default function Filter(props) {
 
     const optionValues = Object.values(selectedOptionNames);
 
+    /*
     const optionsArray = optionValues.map(valueOption => (
         
         <div key={valueOption}>
 
           <p className="p-border"><strong>{valueOption}:</strong> {props.speciesList.valueOption}</p>
         </div>
       ));
+    */
 
     /*
     for (value in values) {
@@ -142,7 +144,7 @@ export default function Filter(props) {
                         <div className="filterBlock">
                             <h2 className="right-align">Filters:</h2>
                             <div className="dropdowns">
-                                <Dropdown data={dataNames} name="Names" onOptionChange={handleOptionChange} id="option1"/>
+                                <Dropdown data={dataNames} name="Names" onOptionChange={handleOptionChange} id="option1" />
                                 <Dropdown data={dataSizes} name="Sizes" onOptionChange={handleOptionChange} id="option2"/>
                                 <Dropdown data={dataEdible} name="Edible" onOptionChange={handleOptionChange} id="option3"/>
                                 <Dropdown data={dataMaintenance} name="Maintenance" onOptionChange={handleOptionChange} id="option4"/>
@@ -153,14 +155,14 @@ export default function Filter(props) {
                     </div>
             </div>
             <div className="information">
-                <div class = "scroll-object1">
+                <div className = "scroll-object1" data-testid='scroll-object1'>
 
 
                 {optionValues.length > 0 ? (
                     optionValues.map((valueOption, index) => (
                         <div key={index}>
 
-                                <strong>{valueOption}:</strong>{" "}
+                                {valueOption}:{" "}
                                 {props.speciesList[valueOption] !== undefined && props.speciesList[valueOption] !== null ? (
                                     typeof props.speciesList[valueOption] === "object"
                                         ? Object.values(props.speciesList[valueOption]).join(", ")