test: [M3-8463] - Add unit tests for CheckoutBar component

packages/manager/.changeset/pr-10818-tests-1724394944251.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tests
+---
+
+Add unit test cases for CheckoutBar component ([#10818](https://github.com/linode/manager/pull/10818))

packages/manager/src/components/CheckoutBar/CheckoutBar.test.tsx

@@ -0,0 +1,79 @@
+import { fireEvent } from '@testing-library/react';
+import React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { CheckoutBar } from './CheckoutBar';
+
+import type { CheckoutBarProps } from './CheckoutBar';
+
+const defaultArgs: CheckoutBarProps = {
+  calculatedPrice: 30.0,
+  children: <div>Child items can go here!</div>,
+  heading: 'Checkout',
+  onDeploy: vi.fn(),
+  submitText: 'Submit',
+};
+
+describe('CheckoutBar', () => {
+  it('should render heading, children, and submit button', () => {
+    const { getByTestId, getByText } = renderWithTheme(
+      <CheckoutBar {...defaultArgs} />
+    );
+
+    expect(getByText('Checkout')).toBeVisible();
+    expect(getByTestId('Button')).toBeInTheDocument();
+    expect(getByTestId('Button')).toHaveTextContent('Submit');
+    expect(getByText('Child items can go here!')).toBeInTheDocument();
+  });
+
+  it('should render Agreement item if provided', () => {
+    const { getByText } = renderWithTheme(
+      <CheckoutBar
+        {...defaultArgs}
+        agreement={<div>Agreement item can go here!</div>}
+      />
+    );
+
+    expect(getByText('Agreement item can go here!')).toBeInTheDocument();
+  });
+
+  it('should render Footer item if provided', () => {
+    const { getByText } = renderWithTheme(
+      <CheckoutBar
+        {...defaultArgs}
+        footer={<div>Footer element can go here!</div>}
+      />
+    );
+
+    expect(getByText('Footer element can go here!')).toBeInTheDocument();
+  });
+
+  it('should disable submit button and show loading icon if isMakingRequest is true', () => {
+    const { getByTestId } = renderWithTheme(
+      <CheckoutBar {...defaultArgs} isMakingRequest={true} />
+    );
+
+    expect(getByTestId('Button')).toBeDisabled();
+    expect(getByTestId('loadingIcon')).toBeInTheDocument();
+  });
+
+  it("should disable submit button and show 'Submit' text if disabled prop is set", () => {
+    const { getByTestId } = renderWithTheme(
+      <CheckoutBar {...defaultArgs} disabled />
+    );
+
+    const button = getByTestId('Button');
+    expect(button).toBeDisabled();
+    expect(button).toHaveTextContent('Submit');
+  });
+
+  it('should call onDeploy when the submit button is not disabled', () => {
+    const { getByText } = renderWithTheme(<CheckoutBar {...defaultArgs} />);
+
+    const button = getByText('Submit');
+    expect(button).not.toBeDisabled();
+    fireEvent.click(button);
+    expect(defaultArgs.onDeploy).toHaveBeenCalled();
+  });
+});

packages/manager/src/components/CheckoutBar/CheckoutBar.tsx

@@ -11,7 +11,7 @@ import {
   SxTypography,
 } from './styles';
 
-interface CheckoutBarProps {
+export interface CheckoutBarProps {
   /**
    * JSX element to be displayed as an agreement section.
    */