9j Solution

2-copy-of-code/lesson-09/ecommerce-project/src/pages/checkout/PaymentSummary.jsx

@@ -70,6 +70,7 @@ export function PaymentSummary({ paymentSummary, loadCart }) {
           </div>
 
           <button className="place-order-button button-primary"
+            data-testid="place-order-button"
             onClick={createOrder}>
             Place your order
           </button>

2-copy-of-code/lesson-09/ecommerce-project/src/pages/checkout/PaymentSummary.test.jsx

@@ -1,11 +1,16 @@
 import { it, expect, describe, vi, beforeEach } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
-import { MemoryRouter } from 'react-router';
+import { MemoryRouter, useLocation } from 'react-router';
+import userEvent from '@testing-library/user-event';
+import axios from 'axios';
 import { PaymentSummary } from './PaymentSummary';
 
+vi.mock('axios');
+
 describe('PaymentSummary component', () => {
   let paymentSummary;
   let loadCart;
+  let user;
 
   beforeEach(() => {
     paymentSummary = {
@@ -18,6 +23,7 @@ describe('PaymentSummary component', () => {
     };
 
     loadCart = vi.fn();
+    user = userEvent.setup();
   });
 
   it('displays the correct details', async () => {
@@ -60,4 +66,27 @@ describe('PaymentSummary component', () => {
       screen.getByTestId('payment-summary-total')
     ).toHaveTextContent('$52.51');
   });
+
+  it('places an order', async () => {
+    function Location() {
+      const location = useLocation();
+      return <div data-testid="url-path">{location.pathname}</div>;
+    }
+
+    render(
+      <MemoryRouter>
+        <PaymentSummary
+          paymentSummary={paymentSummary}
+          loadCart={loadCart}
+        />
+        <Location />
+      </MemoryRouter>
+    );
+    const placeOrderButton = screen.getByTestId('place-order-button');
+    await user.click(placeOrderButton);
+
+    expect(axios.post).toHaveBeenCalledWith('/api/orders');
+    expect(loadCart).toHaveBeenCalled();
+    expect(screen.getByTestId('url-path')).toHaveTextContent('/orders');
+  });
 });