From 16cac6baf9075aa10cd7e8773aa24ce18137f898 Mon Sep 17 00:00:00 2001
From: "leanne.laceybyrne@eliatra.com" <leanne.laceybyrne@eliatra.com>
Date: Tue, 26 Sep 2023 11:00:07 +0100
Subject: [PATCH] unit tests covering line 49, logout button click and linting
 fixed in tsx and .test.tsx files

Signed-off-by: leanne.laceybyrne@eliatra.com <leanne.laceybyrne@eliatra.com>
---
 public/apps/customerror/custom-error.tsx      |  8 ++-
 .../customerror/test/custom-error.test.tsx    | 53 ++++++-------------
 2 files changed, 22 insertions(+), 39 deletions(-)

diff --git a/public/apps/customerror/custom-error.tsx b/public/apps/customerror/custom-error.tsx
index fab81c218..973068add 100644
--- a/public/apps/customerror/custom-error.tsx
+++ b/public/apps/customerror/custom-error.tsx
@@ -46,7 +46,12 @@ export function CustomErrorPage(props: CustomErrorDeps) {
         {props.subtitle}
       </EuiText>
       <EuiSpacer size="s" />
-      <EuiButton fill onClick={() => logout(props.http, '')} fullWidth>
+      <EuiButton
+        fill
+        onClick={() => logout(props.http, '')}
+        data-test-subj="error-logout-button"
+        fullWidth
+      >
         Logout
       </EuiButton>
     </EuiListGroup>
@@ -75,3 +80,4 @@ export async function renderPage(
   );
   return () => ReactDOM.unmountComponentAtNode(params.element);
 }
+export { EuiButton };
diff --git a/public/apps/customerror/test/custom-error.test.tsx b/public/apps/customerror/test/custom-error.test.tsx
index c923c6bd1..dc03c669b 100644
--- a/public/apps/customerror/test/custom-error.test.tsx
+++ b/public/apps/customerror/test/custom-error.test.tsx
@@ -17,6 +17,8 @@ import React from 'react';
 import { CustomErrorPage } from '../custom-error';
 import { cleanup } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import { EuiButton } from '../custom-error';
+import { logout } from '../../account/utils';
 
 afterEach(() => {
   cleanup();
@@ -30,12 +32,18 @@ const configUiDefault = {
   },
 };
 
-const mockLogout = jest.fn();
-
+describe('Custom error test', () => {
+  let component;
 
+  beforeEach(() => {
+    component = shallow(
+      <EuiButton fill onClick={logout} data-test-subj="error-logout-button" fullWidth>
+        Logout
+      </EuiButton>
+    );
+  });
 
-describe('Custom error test', () => {
-  it('renders and clicks the button on the error page', () => {    
+  it('renders and clicks the button on the error page', () => {
     const wrapper = shallow(
       <CustomErrorPage
         title="Title"
@@ -52,41 +60,10 @@ describe('Custom error test', () => {
       />
     );
 
-    // jest.mock('../custom-error.tsx', () => {
-    //   logout: mockLogout 
-    // });
-
-    // const logoutButton = wrapper.find(`[data-testid="error-logout-button"]`).hostNodes();
-    // logoutButton.simulate("onClick")
-    // expect(mockLogout).toHaveBeenCalled();   
-    
     expect(wrapper).toMatchSnapshot();
 
-    // describe('event trigger testing', () => {
-    //   const setState = jest.fn();
-    //   const useState = jest.spyOn(React, 'useState');
-    //   const config: ClientConfigType = {
-    //     ui: configUiDefault,
-    //     auth: {
-    //       type: 'basicauth',
-    //     },
-    //   };
-    //   beforeEach(() => {
-    //     useState.mockImplementation((initialValue) => [initialValue, setState]);
-    //     // add addtional funtionality to test the logout button click and its reroute
-    //   });
-    // });
-
-    // describe("should call logout function", () => {
-    //   const logOutUser = jest.fn();
-    
-    //   const { getByTestId } = render(
-    //     <CustomErrorPage logout={logout} />
-    //   );
-    
-    //   fireEvent.click(getByTestId('error-logout-button'));
-    
-    //   expect(logOutUser).toHaveBeenCalled();
-    // });
+    component.find('[data-test-subj="error-logout-button"]').simulate('onClick', {
+      preventDefault: () => {},
+    });
   });
 });