adding test

src/components/FlightTimeSelector/FlightTimeSelector.definitions.ts

@@ -0,0 +1,11 @@
+export type Value = Date | null | [Date, Date];
+
+export interface FormTypes {
+  departDate: Value;
+  arrivalDate: Value;
+  oneWay: boolean;
+  departureAirportPrimary: string;
+  departureAirportAlternate: string;
+  arrivalAirportPrimary: string;
+  arrivalAirportAlternate: string;
+}

src/components/FlightTimeSelector/FlightTimeSelector.tsx

@@ -4,10 +4,9 @@ import "react-calendar/dist/Calendar.css";
 import Icon from "../Icon";
 import DatePicker from "react-calendar";
 import { useState } from "react";
+import type { Value, FormTypes } from "./FlightTimeSelector.definitions.ts";
 
 const FlightTimeSelector = () => {
-  type Value = Date | null | [Date, Date];
-
   const [departDate, setDepartDate] = useState<Value>(new Date());
   const [arrivalDate, setArrivalDate] = useState<Value>(new Date());
   const [oneWay, setOneWay] = useState<boolean>(false);
@@ -20,16 +19,6 @@ const FlightTimeSelector = () => {
   const [arrivalAirportAlternate, setArrivalAirportAlternate] =
     useState<string>("");
 
-  interface FormTypes {
-    departDate: Value;
-    arrivalDate: Value;
-    oneWay: boolean;
-    departureAirportPrimary: string;
-    departureAirportAlternate: string;
-    arrivalAirportPrimary: string;
-    arrivalAirportAlternate: string;
-  }
-
   const handleSubmit = (e: any) => {
     e.preventDefault();
     const form: FormTypes = {

src/components/FlightTimeSelector/__tests__/FlightTimeSelector.test.tsx

@@ -0,0 +1,103 @@
+import FlightTimeSelector from "../FlightTimeSelector";
+import { render, fireEvent, waitFor } from "@testing-library/react";
+
+describe("FlightTimeSelector Tests", () => {
+  it("renders FlightTimeSelector component correctly", () => {
+    const { getByText, getByPlaceholderText } = render(<FlightTimeSelector />);
+
+    expect(getByText("Flight Selector")).toBeTruthy();
+    expect(getByText("Select your flight")).toBeTruthy();
+    expect(getByPlaceholderText("Primary Selection")).toBeTruthy();
+    expect(getByPlaceholderText("Alternate Selection")).toBeTruthy();
+  });
+
+  it("updates departure airports on input change", () => {
+    const { getByPlaceholderText } = render(<FlightTimeSelector />);
+    const primaryInput = getByPlaceholderText(
+      "Primary Selection",
+    ) as HTMLInputElement;
+    const alternateInput = getByPlaceholderText(
+      "Alternate Selection",
+    ) as HTMLInputElement;
+
+    fireEvent.change(primaryInput, { target: { value: "JFK" } });
+    fireEvent.change(alternateInput, { target: { value: "LGA" } });
+
+    expect(primaryInput.value).toBe("JFK");
+    expect(alternateInput.value).toBe("LGA");
+  });
+
+  it("toggles oneWay checkbox", () => {
+    const { getByLabelText } = render(<FlightTimeSelector />);
+    const oneWayCheckbox = getByLabelText("One way:") as HTMLInputElement;
+
+    fireEvent.click(oneWayCheckbox);
+
+    expect(oneWayCheckbox.checked).toBe(true);
+  });
+
+  it("disables submit button when required fields are empty", () => {
+    const { getByText, getByPlaceholderText } = render(<FlightTimeSelector />);
+    const submitButton = getByText("Submit") as HTMLButtonElement;
+
+    fireEvent.click(submitButton);
+
+    // Ensure that the submit button is initially disabled
+    expect(submitButton.disabled).toBe(true);
+
+    // Fill in some fields
+    fireEvent.change(
+      getByPlaceholderText("Primary Selection") as HTMLInputElement,
+      { target: { value: "JFK" } },
+    );
+    fireEvent.change(
+      getByPlaceholderText("Alternate Selection") as HTMLInputElement,
+      { target: { value: "LGA" } },
+    );
+    fireEvent.change(
+      getByPlaceholderText("Primary Selection") as HTMLInputElement,
+      { target: { value: "ORD" } },
+    );
+    fireEvent.change(
+      getByPlaceholderText("Alternate Selection") as HTMLInputElement,
+      { target: { value: "DFW" } },
+    );
+    // fireEvent.click(getByLabelText('One way:'));
+
+    // Ensure that the submit button is enabled after filling in required fields
+    expect(submitButton.disabled).toBe(false);
+  });
+
+  it("submits the form when submit button is clicked", async () => {
+    const { getByText, getByPlaceholderText } = render(<FlightTimeSelector />);
+    const submitButton = getByText("Submit") as HTMLButtonElement;
+
+    fireEvent.change(
+      getByPlaceholderText("Primary Selection") as HTMLInputElement,
+      { target: { value: "JFK" } },
+    );
+    fireEvent.change(
+      getByPlaceholderText("Alternate Selection") as HTMLInputElement,
+      { target: { value: "LGA" } },
+    );
+    fireEvent.change(
+      getByPlaceholderText("Primary Selection") as HTMLInputElement,
+      { target: { value: "ORD" } },
+    );
+    fireEvent.change(
+      getByPlaceholderText("Alternate Selection") as HTMLInputElement,
+      { target: { value: "DFW" } },
+    );
+    // fireEvent.click(getByLabelText('One way:'), { target: { checked: true } });
+
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(getByText("JFK")).toBeTruthy();
+      expect(getByText("LGA")).toBeTruthy();
+      expect(getByText("ORD")).toBeTruthy();
+      expect(getByText("DFW")).toBeTruthy();
+      // expect(getByText('One way:')).toBeTruthy();
+    });
+  });
+});

src/pages/Dashboard/Dashboard.tsx

@@ -1,11 +1,5 @@
-import FlightTimeSelector from "../../components/FlightTimeSelector/FlightTimeSelector";
-
 const Dashboard = () => {
-  return (
-    <div>
-      <FlightTimeSelector />
-    </div>
-  );
+  return <div>hello</div>;
 };
 
 export default Dashboard;

src/pages/RequestFlight/RequestFlight.tsx

@@ -1,8 +1,14 @@
+import FlightTimeSelector from "../../components/FlightTimeSelector/FlightTimeSelector";
+
 const RequestFlight = () => {
   // Request flight tab
   console.log("RequestFlight");
 
-  return <div>RequestFlight</div>;
+  return (
+    <div>
+      <FlightTimeSelector />
+    </div>
+  );
 };
 
 export default RequestFlight;

src/styles/globals.css

@@ -14,13 +14,9 @@
 }
 
 :root {
-  --text-on-light: var(--miracle-color-dark);
-  --text-on-dark: var(--miracle-color-light);
   --transition-duration: 0.15s;
-  --border-radius: 64px;
+  --border-radius: 12px;
   --box-shadow: 0 0 48px rgba(34, 40, 49, 0.1);
-  --line-height: 24px;
-  --container-padding: 32px;
 
   --miracle-shadow-ambient: rgba(34, 40, 49, 0.05) 1px 7px 15px 0px;
 }
@@ -42,7 +38,7 @@ body {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
-  color: var(--text-on-light);
+  color: var(--miracle-color-dark);
   font-weight: 100;
 }
 
@@ -52,7 +48,7 @@ p {
 
 /* Utility for Text and Background Colors */
 .text-color {
-  color: var(--text-on-light);
+  color: var(--miracle-color-dark);
 }
 
 .background-color {