✅ ✨ Testing for UI

.github/workflows/main.yml

@@ -64,7 +64,7 @@ jobs:
         run: |
           nx affected --target=test --coverage
           nx affected --target=lint
-          nx affected --target=build
+          nx affected --target=build --coverage
           nx affected --target=e2e --coverage
 
       - name: Upload coverage to Codecov

libs/client/ui/src/lib/change-email/change-email.spec.js

@@ -1,12 +1,12 @@
-import React from 'react';
-import { render } from '@testing-library/react-native';
+import { render, screen, fireEvent } from '@testing-library/react-native';
 import ChangeEmail from './change-email';
 import { configureStore } from '@reduxjs/toolkit';
 // eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
 import reducer from '../../../../../../apps/client/src/app/slices/user.slice';
 import { Provider } from 'react-redux';
+// yarn nx run change-email:test
 
-describe('ChangeEmail', () => {
+describe('check if ChangeEmail renders correctly', () => {
   const store = configureStore({
     reducer: {
       user:reducer
@@ -18,8 +18,50 @@ describe('ChangeEmail', () => {
     </Provider>
   );
   it('should render successfully', () => {
-    // const { container } = render(<TestComponent />);
-    // expect(container).toBeTruthy();
-    expect(true).toEqual(true);
+    const { container } = render(TestComponent);
+    expect(container).toBeTruthy();
   });
 });
+
+test('check changing of email works', () => {
+  const store = configureStore({
+    reducer: {
+      user:reducer
+    },
+  });
+  const TestComponent = () => (
+    <Provider store={store}>
+      <ChangeEmail />
+    </Provider>
+  );
+
+  render(TestComponent);
+
+  //new email
+  const newEmailInput = screen.getByPlaceholderText("[email protected]");
+  expect(newEmailInput).toBeTruthy();
+
+  const textToEnterNewEmail = '[email protected]';
+  fireEvent.changeText(newEmailInput, textToEnterNewEmail);
+
+  // setCheckEmail
+  const checkEmailInput = screen.getByPlaceholderText("[email protected]");
+  expect(checkEmailInput).toBeTruthy();
+
+  const textToEnterCheckEmail = '[email protected]';
+  fireEvent.changeText(newEmailInput, textToEnterCheckEmail);
+
+  // setPassword
+  const passwordInput = screen.getByPlaceholderText("*********");
+  expect(passwordInput).toBeTruthy();
+
+  const textToEnterPassword = '123qwe123#';
+  fireEvent.changeText(passwordInput, textToEnterPassword);
+
+  // Submit
+  fireEvent.press(screen.ByLabelText('Change email'));
+
+  const emailState = store.getState().email;
+
+  expect(emailState).toEqual('[email protected]');
+});

libs/client/ui/src/lib/change-password/change-password.spec.js

@@ -1,12 +1,12 @@
-import React from 'react';
-import { render } from '@testing-library/react-native';
+import { render, screen, fireEvent } from '@testing-library/react-native';
 import ChangePassword from './change-password';
 import { configureStore } from '@reduxjs/toolkit';
 // eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
 import reducer from '../../../../../../apps/client/src/app/slices/user.slice';
 import { Provider } from 'react-redux';
+// yarn nx run change-password:test
 
-describe('ChangePassword', () => {
+describe('check that ChangePassword is rendered correctly', () => {
   const store = configureStore({
     reducer: {
       user:reducer
@@ -18,8 +18,50 @@ describe('ChangePassword', () => {
     </Provider>
 )
   it('should render successfully', () => {
-    // const { container } = render(<TestComponent />);
-    // expect(container).toBeTruthy();
-    expect(true).toEqual(true)
+    const { container } = render(TestComponent);
+    expect(container).toBeTruthy();
   });
 });
+
+test('check that password is changed', () => {
+  const store = configureStore({
+    reducer: {
+      user:reducer
+    },
+  });
+  const TestComponent = () => (
+    <Provider store={store}>
+      <ChangePassword />
+    </Provider>
+  );
+
+  render(TestComponent);
+
+  //password
+  const passwordInput = screen.getByPlaceholderText("*****************");
+  expect(passwordInput).toBeTruthy();
+
+  const textToEnterPassword = '123qwe123#';
+  fireEvent.changeText(passwordInput, textToEnterPassword);
+
+  // setCheckPassword
+  const checkPasswordInput = screen.getByPlaceholderText("*****************");
+  expect(checkPasswordInput).toBeTruthy();
+
+  const textToEnterCheckPassword = '123qwe123#';
+  fireEvent.changeText(checkPasswordInput, textToEnterCheckPassword);
+
+  //password
+  const oldPasswordInput = screen.getByPlaceholderText("*****************");
+  expect(oldPasswordInput).toBeTruthy();
+
+  const textToEnterOldPassword = '123qwe123#';
+  fireEvent.changeText(oldPasswordInput, textToEnterOldPassword);
+
+  // Submit
+  fireEvent.press(screen.ByLabelText("Change password"));
+
+  const passwordState = store.getState().password;
+
+  expect(passwordState).toEqual('123qwe123#');
+});

libs/client/ui/src/lib/colour-page/colour-page.spec.js

@@ -1,5 +1,4 @@
-import React from 'react';
-import { render } from '@testing-library/react-native';
+import { render, screen, fireEvent } from '@testing-library/react-native';
 import ColourPage from './colour-page';
 import { Provider } from 'react-redux';
 // eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
@@ -10,16 +9,19 @@ describe('ColourPage', () => {
   const store = configureStore({
     reducer: {
       user:reducer
-    }
-  })
+    },
+  });
   const TestComponent = () => (
-    <Provider store = { store }>
-        <ColourPage />
+    <Provider store={store}>
+      <ColourPage />
     </Provider>
-)
+  );
   it('should render successfully', () => {
-    // const { container } = render(<TestComponent />);
-    // expect(container).toBeTruthy();
-    expect(true).toEqual(true);
+    const { container } = render(TestComponent);
+    expect(container).toBeTruthy();
   });
 });
+
+  // Submit
+  //fireEvent.press(screen.ByLabelText("Register"));
+  // TODO: figure out how to do this

libs/client/ui/src/lib/forgot-password/forgot-password.spec.js

@@ -1,25 +1,53 @@
-import React from 'react';
-import { render } from '@testing-library/react-native';
+import { render, screen, fireEvent } from '@testing-library/react-native';
 import ForgotPassword from './forgot-password';
 import { configureStore } from '@reduxjs/toolkit';
 // eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
 import reducer from '../../../../../../apps/client/src/app/slices/user.slice';
 import { Provider } from 'react-redux';
 
+// describe('ForgotPassword', () => {
+//   const store = configureStore({
+//     reducer: {
+//       user:reducer
+//     }
+//   })
+//   const TestComponent = () => (
+//     <Provider store = { store }>
+//         <ForgotPassword />
+//     </Provider>
+// )
+//   it('should render successfully', () => {
+//     // const { container } = render(<TestComponent />);
+//     // expect(container).toBeTruthy();
+//     expect(true).toEqual(true);
+//   });
+// });
+
 describe('ForgotPassword', () => {
   const store = configureStore({
     reducer: {
       user:reducer
-    }
-  })
+    },
+  });
   const TestComponent = () => (
-    <Provider store = { store }>
-        <ForgotPassword />
+    <Provider store={store}>
+      <ForgotPassword />
     </Provider>
-)
-  it('should render successfully', () => {
-    // const { container } = render(<TestComponent />);
-    // expect(container).toBeTruthy();
-    expect(true).toEqual(true);
-  });
-});
+  );
+
+  render(TestComponent);
+
+  //new email
+  const newEmailInput = screen.getByPlaceholderText("[email protected]");
+  expect(newEmailInput).toBeTruthy();
+
+  const textToEnterNewEmail = '[email protected]';
+  fireEvent.changeText(newEmailInput, textToEnterNewEmail);
+
+  // Submit
+  fireEvent.press(screen.ByLabelText("Send reset email"));
+
+  const emailState = store.getState().email;
+
+  expect(emailState).toEqual('[email protected]');
+});