Unit tests for public components

models/interfaces.ts

@@ -20,7 +20,7 @@ export interface Rule {
 
 export interface Detector {
   id?: string;
-  type: 'detector';
+  type: string;
   detector_type: string;
   name: string;
   enabled: boolean;

public/components/DeleteModal/DeleteModal.test.tsx

@@ -17,6 +17,7 @@ describe('<DeleteModal /> spec', () => {
         type={'some type'}
       />
     );
+
     expect(tree).toMatchSnapshot();
   });
 });

public/components/FormFieldHeader/FormFieldHeader.test.tsx

@@ -10,6 +10,7 @@ import { FormFieldHeader } from './FormFieldHeader';
 describe('<FormFieldHeader /> spec', () => {
   it('renders the component', () => {
     const tree = render(<FormFieldHeader headerTitle={'some title'} />);
+
     expect(tree).toMatchSnapshot();
   });
 });

public/components/Modal/Modal.test.tsx

@@ -8,13 +8,13 @@ import { EuiButton, EuiOverlayMask, EuiModal } from '@elastic/eui';
 import { render, fireEvent } from '@testing-library/react';
 import ModalRoot from './ModalRoot';
 import { ModalConsumer, ModalProvider } from './Modal';
-import { ServicesConsumer, ServicesContext } from '../../services/Services';
-import { browserServicesMock } from '../../../test/mocks';
+import { ServicesConsumer, ServicesContext } from '../../services';
+import services from '../../../test/mocks/services';
 
 describe('<ModalRoot /> spec', () => {
   it('renders nothing when not used', () => {
     const { container } = render(
-      <ServicesContext.Provider value={browserServicesMock}>
+      <ServicesContext.Provider value={services}>
         <ModalProvider>
           <ServicesConsumer>
             {(services) => services && <ModalRoot services={services} />}
@@ -34,7 +34,7 @@ describe('<ModalRoot /> spec', () => {
     );
     const { queryByText, getByTestId, getByLabelText } = render(
       <div>
-        <ServicesContext.Provider value={browserServicesMock}>
+        <ServicesContext.Provider value={services}>
           <ModalProvider>
             <ServicesConsumer>
               {(services) => services && <ModalRoot services={services} />}

public/pages/Alerts/components/AlertFlyout/AlertFlyout.test.tsx

@@ -0,0 +1,16 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { AlertFlyout } from './AlertFlyout';
+import alertFlyoutMock from '../../../../../test/mocks/Alerts/components/AlertFlyout/AlertFlyout.mock';
+
+describe('<AlertFlyout /> spec', () => {
+  it('renders the component', () => {
+    const { container } = render(<AlertFlyout {...alertFlyoutMock} />);
+    expect(container).toMatchSnapshot();
+  });
+});

public/pages/Alerts/components/AlertFlyout/__snapshots__/AlertFlyout.test.tsx.snap

@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<AlertFlyout /> spec renders the component 1`] = `
+<div
+  aria-hidden="true"
+  data-aria-hidden="true"
+/>
+`;

public/pages/Alerts/containers/Alerts/Alerts.test.tsx

@@ -0,0 +1,28 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import Alerts from './Alerts';
+import contextMock from '../../../../../test/mocks/useContext.mock';
+import { mount } from 'enzyme';
+import alertsMock from '../../../../../test/mocks/Alerts/Alerts.mock';
+import { shallowToJson } from 'enzyme-to-json';
+import { Router } from 'react-router-dom';
+import browserHistoryMock from '../../../../../test/mocks/services/browserHistory.mock';
+
+describe('<Alerts /> spec', () => {
+  it('renders the component', () => {
+    Alerts.WrappedComponent.contextType = contextMock;
+    const wrapper = mount(
+      <Router history={browserHistoryMock}>
+        <Alerts {...alertsMock} />
+      </Router>,
+      {
+        context: contextMock,
+      }
+    );
+    expect(shallowToJson(wrapper.root().children())).toMatchSnapshot();
+  });
+});

public/pages/Alerts/containers/Alerts/Alerts.tsx

@@ -89,7 +89,7 @@ const groupByOptions = [
   { text: 'Alert severity', value: 'severity' },
 ];
 
-class Alerts extends Component<AlertsProps, AlertsState> {
+export class Alerts extends Component<AlertsProps, AlertsState> {
   static contextType = CoreServicesContext;
 
   constructor(props: AlertsProps) {