feat: update tests for OrdersandSubscriptions

src/components/BasicAlert.jsx

@@ -30,6 +30,7 @@ const BasicAlert = ({ isModal, isVisible, onClose }) => {
 
   return isModal ? (
     <AlertModal
+      data-testid="basic-alert"
       variant="danger"
       title={title}
       icon={Info}
@@ -46,7 +47,12 @@ const BasicAlert = ({ isModal, isVisible, onClose }) => {
       <p>{body}</p>
     </AlertModal>
   ) : (
-    <Alert variant="danger" icon={Info} show={isVisible}>
+    <Alert
+      data-testid="basic-alert"
+      variant="danger"
+      icon={Info}
+      show={isVisible}
+    >
       <Alert.Heading>{title}</Alert.Heading>
       <p>{body}</p>
     </Alert>

src/orders-and-subscriptions/OrdersAndSubscriptionsPage.test.jsx

@@ -1,21 +1,45 @@
 /* eslint-disable global-require */
 import React from 'react';
-import { render } from '../testing';
+import { render, screen } from '../testing';
 
 import OrdersAndSubscriptionsPage from './OrdersAndSubscriptionsPage';
 
 const storeMocks = require('../store/__mocks__/mockStore');
 const emptyStoreMocks = require('../store/__mocks__/mockEmptyStore');
 
-const matchSnapshot = (store) => {
-  const { container } = render(<OrdersAndSubscriptionsPage />, store);
-  expect(container.querySelector('div')).toMatchSnapshot();
+const {
+  getByText,
+  getByTestId,
+  queryByText,
+  queryByTestId,
+} = screen;
+
+const testHeadings = (hasSections = true) => {
+  // Assert the main heading
+  expect(getByText('My orders and subscriptions')).toBeInTheDocument();
+  expect(
+    getByText('Manage your program subscriptions and view your order history.'),
+  ).toBeInTheDocument();
+
+  if (hasSections) {
+    // Assert Subscription and Order History sections are rendered
+    expect(getByText('Subscriptions')).toBeInTheDocument();
+    expect(getByText('Order History')).toBeInTheDocument();
+  } else {
+    // Assert Subscription and Order History sections are not rendered
+    expect(queryByText('Subscriptions')).toBeNull();
+    expect(queryByText('Order History')).toBeNull();
+  }
 };
 
 describe('<OrdersAndSubscriptions />', () => {
   describe('Renders correctly in various states', () => {
     it('renders with orders and subscriptions', () => {
-      matchSnapshot(storeMocks);
+      render(<OrdersAndSubscriptionsPage />, storeMocks);
+      testHeadings();
+
+      // Assert alerts are not rendered
+      expect(queryByTestId('basic-alert')).toBeNull();
     });
 
     it('renders alerts on errors', () => {
@@ -30,10 +54,17 @@ describe('<OrdersAndSubscriptions />', () => {
         },
       };
 
-      matchSnapshot(storeMocksWithErrors);
+      render(<OrdersAndSubscriptionsPage />, storeMocksWithErrors);
+      testHeadings();
+
+      expect(getByTestId('basic-alert')).toBeInTheDocument();
+
+      // Assert Subscription section renders empty state
+      expect(queryByTestId('section-subscription-cards')).toBeNull();
+      expect(getByTestId('section-subscription-upsell')).toBeInTheDocument();
     });
 
-    it('renders with loadingErrors', () => {
+    it('renders with loading', () => {
       const storeMocksWithLoading = {
         orderHistory: {
           ...emptyStoreMocks.orderHistory,
@@ -45,7 +76,15 @@ describe('<OrdersAndSubscriptions />', () => {
         },
       };
 
-      matchSnapshot(storeMocksWithLoading);
+      render(<OrdersAndSubscriptionsPage />, storeMocksWithLoading);
+      testHeadings(false);
+
+      // Assert loading message is rendered
+      expect(getByText('Loading orders and subscriptions...'))
+        .toBeInTheDocument();
+
+      // Assert alerts are not rendered
+      expect(queryByTestId('basic-alert')).toBeNull();
     });
   });
 });