Tests: added tests for ChaosCenter web views (#4307)

* feat added tests for accounts details password new user Signed-off-by: freedisch <[email protected]> * added tesst cases for kubernetesChaosInf Signed-off-by: freedisch <[email protected]> * added testWrapper Signed-off-by: freedisch <[email protected]> * updated failing tests to use testWrapper Signed-off-by: freedisch <[email protected]> --------- Signed-off-by: freedisch <[email protected]>
litmuschaos · Nov 22, 2023 · 803b4f5 · 803b4f5
1 parent ad4ecca
commit 803b4f5
Show file tree

Hide file tree

Showing 3 changed files with 194 additions and 0 deletions.
diff --git a/chaoscenter/web/src/views/AccountDetailsChange/__tests__/AccountDetailsChange.test.tsx b/chaoscenter/web/src/views/AccountDetailsChange/__tests__/AccountDetailsChange.test.tsx
@@ -0,0 +1,80 @@
+import React from 'react';
+import { render, fireEvent, waitFor, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { TestWrapper } from 'utils/testUtils';
+import AccountDetailsChangeView from '../AccountDetailsChange';
+
+describe('AccountDetailsChangeView Tests', () => {
+  const mockClose = jest.fn();
+  const mockUpdateDetailsMutation = jest.fn();
+
+  const currentUser = {
+    name: 'John Doe',
+    email: '[email protected]',
+    isRemoved: false,
+    role: 'User',
+    userID: '123',
+    username: 'johndoe'
+  };
+
+  const renderComponent = () =>
+    render(
+      <TestWrapper>
+        <AccountDetailsChangeView
+          handleClose={mockClose}
+          currentUser={currentUser}
+          updateDetailsMutation={mockUpdateDetailsMutation}
+          updateDetailsMutationLoading={false}
+        />
+      </TestWrapper>
+    );
+
+  test('renders all form fields and buttons', () => {
+    renderComponent();
+    expect(screen.getByPlaceholderText('enterYourName')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('enterYourEmail')).toBeInTheDocument();
+    expect(screen.getByText('confirm')).toBeInTheDocument();
+    expect(screen.getByText('cancel')).toBeInTheDocument();
+  });
+
+  test('pre-fills form fields with current user data', () => {
+    renderComponent();
+    const nameInput = screen.getByPlaceholderText('enterYourName') as HTMLInputElement;
+    const emailInput = screen.getByPlaceholderText('enterYourEmail') as HTMLInputElement;
+
+    expect(nameInput.value).toBe(currentUser.name);
+    expect(emailInput.value).toBe(currentUser.email);
+  });
+
+  test('validates form fields before enabling submit button', async () => {
+    renderComponent();
+    const submitButton = screen.getByText('confirm');
+
+    fireEvent.change(screen.getByPlaceholderText('enterYourName'), { target: { value: 'New Name' } });
+    fireEvent.change(screen.getByPlaceholderText('enterYourEmail'), { target: { value: '[email protected]' } });
+
+    await waitFor(() => expect(submitButton).not.toBeDisabled());
+  });
+
+  test('submits form with updated data', async () => {
+    renderComponent();
+    fireEvent.change(screen.getByPlaceholderText('enterYourName'), { target: { value: 'New Name' } });
+    fireEvent.change(screen.getByPlaceholderText('enterYourEmail'), { target: { value: '[email protected]' } });
+    fireEvent.click(screen.getByText('confirm'));
+
+    await waitFor(() => {
+      expect(mockUpdateDetailsMutation).toHaveBeenCalledWith({
+        body: {
+          name: 'New Name',
+          email: '[email protected]'
+        }
+      });
+    });
+  });
+
+  test('closes form on cancel button click', () => {
+    renderComponent();
+    fireEvent.click(screen.getByText('cancel'));
+    expect(mockClose).toHaveBeenCalled();
+  });
+});
diff --git a/chaoscenter/web/src/views/AccountPasswordChange/__tests__/AccountPassword.test.tsx b/chaoscenter/web/src/views/AccountPasswordChange/__tests__/AccountPassword.test.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import { render, fireEvent, waitFor, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { TestWrapper } from 'utils/testUtils';
+import AccountPasswordChangeView from '../AccountPasswordChange';
+
+describe('AccountPasswordChangeView Tests', () => {
+  const mockClose = jest.fn();
+  const mockUpdatePasswordMutation = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const renderComponent = () =>
+    render(
+      <TestWrapper>
+        <AccountPasswordChangeView
+          handleClose={mockClose}
+          username="testuser"
+          updatePasswordMutation={mockUpdatePasswordMutation}
+          updatePasswordMutationLoading={false}
+        />
+      </TestWrapper>
+    );
+
+  test('renders all form fields and buttons', () => {
+    renderComponent();
+    expect(screen.getByPlaceholderText('oldPassword')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('newPassword')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('reEnterNewPassword')).toBeInTheDocument();
+    expect(screen.getByText('confirm')).toBeInTheDocument();
+    expect(screen.getByText('cancel')).toBeInTheDocument();
+  });
+
+  test('validates form fields before enabling submit button', async () => {
+    renderComponent();
+    const submitButton = screen.getByText('confirm');
+
+    fireEvent.change(screen.getByPlaceholderText('oldPassword'), { target: { value: 'oldPass' } });
+    fireEvent.change(screen.getByPlaceholderText('newPassword'), { target: { value: 'newPass' } });
+    fireEvent.change(screen.getByPlaceholderText('reEnterNewPassword'), { target: { value: 'newPass' } });
+
+    await waitFor(() => expect(submitButton).not.toBeDisabled());
+  });
+
+  test('handles submit with correct data', async () => {
+    renderComponent();
+    fireEvent.change(screen.getByPlaceholderText('oldPassword'), { target: { value: 'oldPass' } });
+    fireEvent.change(screen.getByPlaceholderText('newPassword'), { target: { value: 'newPass' } });
+    fireEvent.change(screen.getByPlaceholderText('reEnterNewPassword'), { target: { value: 'newPass' } });
+    fireEvent.click(screen.getByText('confirm'));
+
+    await waitFor(() => {
+      expect(mockUpdatePasswordMutation).toHaveBeenCalledWith(
+        {
+          body: {
+            username: 'testuser',
+            oldPassword: 'oldPass',
+            newPassword: 'newPass'
+          }
+        },
+        expect.anything()
+      );
+    });
+  });
+
+  test('closes form on cancel button click', () => {
+    renderComponent();
+    fireEvent.click(screen.getByText('cancel'));
+    expect(mockClose).toHaveBeenCalled();
+  });
+});
diff --git a/chaoscenter/web/src/views/CreateNewUser/__tests__/CreateNewUser.test.tsx b/chaoscenter/web/src/views/CreateNewUser/__tests__/CreateNewUser.test.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { render, fireEvent, waitFor } from '@testing-library/react';
+import { TestWrapper } from 'utils/testUtils';
+import CreateNewUserView from '../CreateNewUser';
+import '@testing-library/jest-dom';
+
+describe('<CreateNewUserView />', () => {
+  const mockCreateNewUserMutation = jest.fn();
+  const mockHandleClose = jest.fn();
+
+  const setup = () =>
+    render(
+      <TestWrapper>
+        <CreateNewUserView
+          createNewUserMutation={mockCreateNewUserMutation}
+          createNewUserMutationLoading={false}
+          handleClose={mockHandleClose}
+        />
+      </TestWrapper>
+    );
+
+  test('renders without crashing', () => {
+    const { getByText } = setup();
+    expect(getByText('createNewUser')).toBeInTheDocument();
+  });
+
+  test('validates form fields', async () => {
+    const { getByText, getByPlaceholderText } = setup();
+    fireEvent.change(getByPlaceholderText('enterYourName'), { target: { value: '' } });
+    fireEvent.submit(getByText('confirm'));
+    await waitFor(() => {
+      expect(getByText('nameIsARequiredField')).toBeInTheDocument();
+    });
+  });
+
+  test('calls handleClose on cancel', () => {
+    const { getByText } = setup();
+    fireEvent.click(getByText('cancel'));
+    expect(mockHandleClose).toHaveBeenCalled();
+  });
+});