Adding Testing with Vite #1908
Adding Testing with Vite #1908
Conversation
| @@ -1,16 +1,23 @@ | |||
| import './App.css' | |||
| import 'bootstrap/dist/css/bootstrap.min.css'; | |||
| import MyNavBar from './components/Navbar' | |||
| import MyNavBar from './routes/Navbar' | |||
There was a problem hiding this comment.
I personally would leave NavBar in the components folder because that's what NavBar is, a shared component used on multiple pages; a route would be a page/view*.
* At least in the traditional/beginner setup
| <MyNavBar /> | ||
| <ListStudents /> | ||
|
|
||
| <MyNavBar handleMe={handleMe} /> |
There was a problem hiding this comment.
React convention is that prop names that are callbacks start with the word "on" and then a description of what event it is. So since this callback is called whenever the account menu item is clicked, I'd rename this prop to onAccountMenuItemClicked or something along those lines.
And then handleMe can be renamed to handleAccountMenuItemClicked since "handle" is the conventional suffix used for implementations of callback props
| <div id="contact"> | ||
| <div> | ||
| <img | ||
| key={contact.avatar} |
There was a problem hiding this comment.
A key prop is not necessary unless you're in a loop OR are abusing the key prop to explicitly trigger re-renders (which doesn't look to be the case here)
| </> | ||
| ) : ( | ||
| <i>No Name</i> | ||
| )}{" "} |
There was a problem hiding this comment.
| )}{" "} | |
| )} |
| </div> | ||
| </div> | ||
| ) | ||
| } |
There was a problem hiding this comment.
| </div> | |
| </div> | |
| ) | |
| } | |
| </div> | |
| </div> | |
| ) | |
| } |
| /* | ||
| describe('event signup form', () => { | ||
| it('renders a form', () => { | ||
| render(<EventSignUpForm />); | ||
|
|
||
| const signUpForm = screen.getByTestId('event-form'); | ||
| expect(signUpForm).toBeInTheDocument(); | ||
| }); | ||
| }); | ||
|
|
||
|
|
||
| test('test that MyNavBar renders', () => { | ||
| // const navbarElement = render(<MyNavBar/>); | ||
| // const navbarId = navbarElement.getByTestId('navbar'); | ||
| // expect(navbarId).toBeDefined(); | ||
| // }); | ||
|
|
||
|
|
||
|
|
||
| */ |
There was a problem hiding this comment.
| /* | |
| describe('event signup form', () => { | |
| it('renders a form', () => { | |
| render(<EventSignUpForm />); | |
| const signUpForm = screen.getByTestId('event-form'); | |
| expect(signUpForm).toBeInTheDocument(); | |
| }); | |
| }); | |
| test('test that MyNavBar renders', () => { | |
| // const navbarElement = render(<MyNavBar/>); | |
| // const navbarId = navbarElement.getByTestId('navbar'); | |
| // expect(navbarId).toBeDefined(); | |
| // }); | |
| */ |
Looks like unused code?
| // /* | ||
| // const router = createBrowserRouter( | ||
| // createRoutesFromElements( | ||
| // <Route path="/" element={<App />}> | ||
| // <Route path="login" element={<Contact />} /> | ||
| // </Route> | ||
| // ) | ||
| // ); | ||
|
|
||
| // */ |
There was a problem hiding this comment.
Remove unused code to prevent confusion OR write an explanation on what this commented out code does
No description provided.