diff --git a/src/components/BasicAlert.jsx b/src/components/BasicAlert.jsx index 53326f5c..62eb7333 100644 --- a/src/components/BasicAlert.jsx +++ b/src/components/BasicAlert.jsx @@ -30,6 +30,7 @@ const BasicAlert = ({ isModal, isVisible, onClose }) => { return isModal ? ( {

{body}

 ) : ( - + {title}

{body}

 diff --git a/src/orders-and-subscriptions/OrdersAndSubscriptionsPage.test.jsx b/src/orders-and-subscriptions/OrdersAndSubscriptionsPage.test.jsx index 7233b21f..232126d1 100644 --- a/src/orders-and-subscriptions/OrdersAndSubscriptionsPage.test.jsx +++ b/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(, 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('', () => { describe('Renders correctly in various states', () => { it('renders with orders and subscriptions', () => { - matchSnapshot(storeMocks); + render(, storeMocks); + testHeadings(); + + // Assert alerts are not rendered + expect(queryByTestId('basic-alert')).toBeNull(); }); it('renders alerts on errors', () => { @@ -30,10 +54,17 @@ describe('', () => { }, }; - matchSnapshot(storeMocksWithErrors); + render(, 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('', () => { }, }; - matchSnapshot(storeMocksWithLoading); + render(, 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(); }); }); }); diff --git a/src/orders-and-subscriptions/__snapshots__/OrdersAndSubscriptionsPage.test.jsx.snap b/src/orders-and-subscriptions/__snapshots__/OrdersAndSubscriptionsPage.test.jsx.snap deleted file mode 100644 index 4ed7cf51..00000000 --- a/src/orders-and-subscriptions/__snapshots__/OrdersAndSubscriptionsPage.test.jsx.snap +++ /dev/null @@ -1,464 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` Renders correctly in various states renders alerts on errors 1`] = ` -
-
- -

- My orders and subscriptions -

- - Manage your program subscriptions and view your order history. - -
-
-

- Subscriptions -

- - You do not have any active or previous subscriptions. - - -
-
-

- Order History -

-
-

- Orders you place with localhost will appear here. -

-
-
-
-`; - -exports[` Renders correctly in various states renders with loadingErrors 1`] = ` -
-
-

- My orders and subscriptions -

- - Manage your program subscriptions and view your order history. - -
-
-
- -
-
-
-`; - -exports[` Renders correctly in various states renders with orders and subscriptions 1`] = ` -
-
-

- My orders and subscriptions -

- - Manage your program subscriptions and view your order history. - -
-
-

- Subscriptions -

-
- - You have 2 active subscriptions. To view your receipts, change your payment method or cancel your subscription, click - - Manage my subscriptions - - . - - -
-
- -
-
-

- Blockchain Fundamentals -

- - Trial - -
-

- University of California, Berkeley -

-
- - -
-
-

- Critical Thinking -

- - Active - -
-

- Simmons University -

-
- - -
-
-

- Blockchain Fundamentals -

- - Inactive - -
-

- University of California, Berkeley -

-
- - -
-
-

- Critical Thinking -

- - Inactive - -
-

- Simmons University -

-
- -
-
-
-

- Order History -

-
- -
-
-
-`;