Update Order card to only show no orders if fully loaded and orders i…

frontend/src/views/DoctorOrders/NewOrders/NewOrders.test.tsx

@@ -1,9 +1,18 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import NewOrders from './NewOrders';
+import axios from 'axios';
 
-test('renders NewOrders', () => {
-  render(<NewOrders />);
-  const linkElement = screen.getByText(/NewOrders/i);
-  expect(linkElement).toBeInTheDocument();
+jest.mock('axios');
+describe('<NewOrders />', () => {
+
+  it('renders the order card with no doctor orders', async () => {
+    axios.get = jest.fn().mockImplementationOnce(() => Promise.resolve({ data: [] }));
+    render(<NewOrders />);
+
+    await waitFor(() => {
+      const linkElement = screen.getByText(/NewOrders/i);
+      expect(linkElement).toBeInTheDocument();
+    });
+  });
 });

frontend/src/views/DoctorOrders/OrderCard/OrderCard.test.tsx

@@ -1,9 +1,62 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import OrderCard from './OrderCard';
+import axios from 'axios';
 
-test.skip('renders Status', () => {
-  render(<OrderCard />);
-  const linkElement = screen.getByText("Total");
-  expect(linkElement).toBeInTheDocument();
+const doctorOrders = [{caseNumber: '1694010494795',
+  dispenseStatus: 'Pending',
+  doctorContact: '716-873-1557',
+  doctorEmail: 'jane.betty@myhospital.com',
+  doctorID: '1122334455',
+  doctorName: 'Dr. Jane Doe',
+  drugNames:'Turalio 200 MG Oral Capsule',
+  drugNdcCode: '65597-402-20',
+  drugPrice: 200,
+  metRequirements: [],
+  patientCity: 'Winterfell',
+  patientCountry: 'US',
+  patientDOB: '1996-06-01',
+  patientFirstName: 'Jon',
+  patientLastName: 'Snow',
+  patientName: 'Jon Snow',
+  patientPostalCode: '00008',
+  patientStateProvince: 'Westeros',
+  pickupDate: 'Tue Dec 13 2022',
+  quanitities: '90',
+  rxDate: '2020-07-11',
+  simpleDrugName: 'Turalio',
+  total: 1800}];
+
+jest.mock('axios');
+
+describe('<OrderCard />', () => {
+  it('renders the order card with no doctor orders', async () => {
+    axios.get = jest.fn().mockImplementationOnce(() => Promise.resolve({ data: [] }));
+    render(<OrderCard tabStatus = {'Pending'}/>);
+
+    await waitFor(() => {
+      expect(screen.getByRole('heading', { name: /no orders yet\./i })).toBeInTheDocument();
+    });
+  });
+
+  it('renders the order card and any doctor orders', async () => {
+    axios.get = jest.fn().mockImplementationOnce(() => Promise.resolve({ data: doctorOrders }));
+    render(<OrderCard tabStatus = {'Pending'}/>);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Jon Snow/i)).toBeInTheDocument();
+      expect(screen.getByText(/1996/i)).toBeInTheDocument();
+      expect(screen.getByText(/Turalio/i)).toBeInTheDocument();
+      expect(screen.getByText(/Pending/i)).toBeInTheDocument();
+      // expect(screen.getByTestId('quantities')).toBeInTheDocument();
+      // expect(screen.getByTestId('drugPrice')).toBeInTheDocument();
+      // expect(screen.getByTestId('total')).toBeInTheDocument();
+      // expect(screen.getByTestId('doctorName')).toBeInTheDocument();
+      // expect(screen.getByTestId('doctorID')).toBeInTheDocument();
+      // expect(screen.getByTestId('doctorContact')).toBeInTheDocument();
+      // expect(screen.getByTestId('doctorEmail')).toBeInTheDocument();
+      // expect(screen.getByTestId('pickupDate')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /remove all/i })).toBeInTheDocument();
+    });
+  });
 });

frontend/src/views/DoctorOrders/OrderCard/OrderCard.tsx

@@ -45,6 +45,7 @@ interface DoctorOrder {
 
 const OrderCard = (props: any) => {
   const [doctorOrder, setDoctorOrders] = useState<DoctorOrder[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
 
   //remove all doctorOrders
   const deleteAll = async () => {
@@ -59,17 +60,21 @@ const OrderCard = (props: any) => {
     getAllDoctorOrders();
   }, []);
 
-  const getAllDoctorOrders = () => {
-    axios
+  const getAllDoctorOrders = async () => {
+   await axios
       .get(url)
       .then(function (response) {
         const allDoctorOrders = response.data;
+        setIsLoading(false);
         setDoctorOrders(allDoctorOrders);
       })
-      .catch(error => console.error(`Error: ${error}`));
+      .catch(error => {
+        setIsLoading(false);
+        console.error(`Error: ${error}`);
+      });
   };
 
-  if (doctorOrder.length < 1) {
+  if (doctorOrder.length < 1 && !isLoading) {
     return (
       <Card style={{padding: '15px' }}>
         <h1>No orders yet.</h1>

frontend/src/views/DoctorOrders/PickedUpOrders/PickedUpOrders.test.tsx

@@ -1,9 +1,18 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import PickedUpOrders from './PickedUpOrders';
+import axios from 'axios';
 
-test('renders PickedUpOrders', () => {
-  render(<PickedUpOrders />);
-  const linkElement = screen.getByText(/PickedUpOrders/i);
-  expect(linkElement).toBeInTheDocument();
+jest.mock('axios');
+describe('<PickedUpOrders />', () => {
+
+  it('renders the order card with no doctor orders', async () => {
+    axios.get = jest.fn().mockImplementationOnce(() => Promise.resolve({ data: [] }));
+    render(<PickedUpOrders />);
+
+    await waitFor(() => {
+      const linkElement = screen.getByText(/PickedUpOrders/i);
+      expect(linkElement).toBeInTheDocument();
+    });
+  });
 });

frontend/src/views/DoctorOrders/VerifiedOrders/VerifiedOrders.test.tsx

@@ -1,9 +1,19 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import VerifiedOrders from './VerifiedOrders';
+import axios from 'axios';
 
-test('renders VerifiedOrders', () => {
-  render(<VerifiedOrders />);
-  const linkElement = screen.getByText(/VerifiedOrders/i);
-  expect(linkElement).toBeInTheDocument();
-});
+
+jest.mock('axios');
+describe('<VerifiedOrders />', () => {
+
+  it('renders the order card with no doctor orders', async () => {
+    axios.get = jest.fn().mockImplementationOnce(() => Promise.resolve({ data: [] }));
+    render(<VerifiedOrders />);
+
+    await waitFor(() => {
+      const linkElement = screen.getByText(/VerifiedOrders/i);
+      expect(linkElement).toBeInTheDocument();
+    });
+  });
+});