Add unit test v2 for login #80

[aykutkantas]

Login unit test cases added. Cases are here:

1. renders Login component: This test checks whether the Login component renders correctly when it's wrapped in a MemoryRouter. It expects that the text 'Welcome' should be present in the rendered component.

2. calls axios.post with correct credentials on form submission: This test simulates a form submission by changing the values of the username and password fields and clicking the 'Login' button. It then asserts that the axios.post method is called with the correct parameters (username, password, and request configuration) when the form is submitted.

3. handles successful login: This test checks the handling of a successful login scenario. It mocks the axios.post method to resolve with a status of 201 (simulating a successful login). The test then clicks the 'Login' button and waits for the asynchronous actions to complete. It expects that the onLoginSuccess callback is called, the text 'Login successful!' is present in the component, and the 'Username' input field is not present in the DOM.

[aykutkantas]

Yes I could run. Results are here for app.test.js and login.test.js (mine):

Test Suites: 2 failed, 2 total Tests: 2 failed, 2 passed, 4 total

For login.test.js others are ok but this case is failed:

FAIL src/pages/landing/Login.test.js ● Login component › handles successful login

expect(element).not.toBeInTheDocument()

expected document not to contain element, found <input aria-invalid="false" class="MuiInputBase-input MuiOutlinedInput-input css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input" id="login-username" type="text" value="" /> instead

[sadikkuzu]

Yes I could run. Results are here for app.test.js and login.test.js (mine):

Test Suites: 2 failed, 2 total Tests: 2 failed, 2 passed, 4 total

For login.test.js others are ok but this case is failed:

FAIL src/pages/landing/Login.test.js ● Login component › handles successful login

expect(element).not.toBeInTheDocument()

expected document not to contain element, found <input aria-invalid="false" class="MuiInputBase-input MuiOutlinedInput-input css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input" id="login-username" type="text" value="" /> instead

@aykutkantas hi, afaik, all tests should be passed.

[aykutkantas]

there is a fail at app.test.js also. I think unit tests are working properly. For passing fail cases I needed to change something in login.js @ckertam. I will check for last fail case at login.test.js but we need to solve fail for app.test.js also.

FAIL src/App.test.js ● Console

console.log
  Rendering Header

  at Header (src/components/header/header.js:33:11)

● renders learn react link

TestingLibraryElementError: Unable to find an element with the text: /learn react/i. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

[aykutkantas]

@aykutkantas hi,

i ran

cd backend/frontend
npm install
npm run test

and i got this:

what should i do to overcome this warning?

if you want, we can look together on dc

[sadikkuzu]

@aykutkantas hi,

i ran

cd backend/frontend
npm install
npm run test

and i got this:

what should i do to overcome this warning?

Well, I could run within frontend container:

Then now, we may focus on all passed tests.

[aykutkantas]

Great! Is it about that we don't give a message "Login successful" when a user logged in? @sadikkuzu

● Login component › handles successful login

Unable to find an element with the text: /Login successful/. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

[aykutkantas]

Login test is ok but app.test failed.

FAIL src/App.test.js ● Console

console.log
  Rendering Header

  at Header (src/components/header/header.js:33:11)

● renders learn react link

TestingLibraryElementError: Unable to find an element with the text: /learn react/i. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

[sadikkuzu]

@aykutkantas hi, As I mentioned above in https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/pull/254#pullrequestreview-1773861301 Could you please update backend/frontend/src/App.test.js file as below:

import { render, screen } from '@testing-library/react';
import App from './App';

test('renders register link', () => {
  render(<App />);
  const linkElement = screen.getByText(/register/i);
  expect(linkElement).toBeInTheDocument();
});

[aykutkantas]

Ok, all passed. :)

[ckertam]

Also resolved the conflicts that is caused by #266 that is done by @oguzsenna

[aykutkantas]

@sadikkuzu @ckertam many thanks for your great support and guidance :)