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';
+importuserEventfrom'@testing-library/user-event';
+importaxiosfrom'axios';
 import{PaymentSummary}from'./PaymentSummary';
 
+vi.mock('axios');
+
 describe('PaymentSummary component',()=>{
 letpaymentSummary;
 letloadCart;
+letuser;
 
 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()=>{
+functionLocation(){
+constlocation=useLocation();
+return<divdata-testid="url-path">{location.pathname}</div>;
+}
+
+render(
+<MemoryRouter>
+<PaymentSummary
+paymentSummary={paymentSummary}
+loadCart={loadCart}
+/>
+<Location/>
+</MemoryRouter>
+);
+constplaceOrderButton=screen.getByTestId('place-order-button');
+awaituser.click(placeOrderButton);
+
+expect(axios.post).toHaveBeenCalledWith('/api/orders');
+expect(loadCart).toHaveBeenCalled();
+expect(screen.getByTestId('url-path')).toHaveTextContent('/orders');
+});
 });