First

src/tests/App.test.js

@@ -0,0 +1,7 @@
+import { render } from '@testing-library/react';
+import App from '../App';
+
+// Test render of top-level App compoennt
+test('renders the App', () => {
+     render(<App />);
+});

src/tests/unit/components/Vehicles.test.js

@@ -0,0 +1,22 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event'
+import Vehicles from '../../../components/Vehicles'
+
+// Test renders a child compoennt
+test('Renders the Vehicles Component And Its Elements', () => {
+     const vehicleComponent = render(<Vehicles />)
+     const allHeadings = screen.getAllByRole("heading");
+     expect(allHeadings).toHaveLength(3);
+   
+     const allInputs = screen.getAllByRole("textbox");
+     expect(allInputs).toHaveLength(9);
+   
+     const allButtons = screen.getAllByRole("button");
+     expect(allButtons).toHaveLength(2);
+   
+     const someHeadingText = screen.getByText(/Add New Vehicle/i);
+     expect(someHeadingText).toBeInTheDocument();
+   
+     const somebuttonText = screen.getByText(/Add Vehicle/i);
+     expect(somebuttonText).toBeInTheDocument();
+   });

src/tests/unit/pageElements/button.test.js

@@ -0,0 +1,12 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import Button from '../../../pageElements/Button'
+
+// Tests render of a button and its dynamic behavior
+test('Button renders with label text and clicks', async () => {
+     const handleClick = jest.fn();
+     render(<Button onClick={handleClick} labelText="Add Vehicle"/>)
+     const somebuttonText = screen.getByText(/Add Vehicle/i);
+     await expect(somebuttonText).toBeInTheDocument();
+     fireEvent.click(screen.getByText(/Add Vehicle/i))
+     expect(handleClick).toHaveBeenCalledTimes(1)
+});

src/tests/unit/pageElements/textInput.test.js

@@ -0,0 +1,12 @@
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event'
+import TextInput from '../../../pageElements/textInput';
+
+// Tests render of a text input and its dynamic behavior
+test('TextInoput renders with placeolder text and diplays inputted values', async () => {
+     render(<TextInput placeholder="Model" />)
+     const makeInput = screen.getByPlaceholderText("Model");
+     await userEvent.type(makeInput, "Ford");
+     expect(makeInput.value).toBe("Ford")
+});