Add header and items list components #3
Conversation
| import React from 'react'; | ||
|
|
||
| import './Card.styles.css'; | ||
| // import Styled from "./styled"; |
There was a problem hiding this comment.
let me know if you found issues applying the styled-components concept to your code
| function Header() { | ||
| return ( | ||
| <header className="header"> | ||
| <div className="toolbar"> |
There was a problem hiding this comment.
This could be divided into smaller components thus you would have the code separate and isolated for testing and readability, thus the code here would look like:
<header>
<ToolBar>
<Menu />
<Search />
</ToolBar>
</header>I can help with any kind of orientation at specific if you want
| <div className="items-list" data-testid="items-list"> | ||
| {items.map(({ etag, snippet }) => ( | ||
| <Card | ||
| key={etag} |
There was a problem hiding this comment.
This is in general fine, but if you're not sure the "etag" value would be unique, you can always use the array index as key
| import mockedData from '../../youtube-videos-mock.json'; | ||
|
|
||
| describe("items list", () => { | ||
| it("There is an items list displayed", () => { |
There was a problem hiding this comment.
For the description of your test case, you could use test() instead of it() thus it can be read like:
"Test there is an items list displayed"
But it's a matter of one's perspective
| const { items } = mockedData; | ||
| render(<List items={items} />); | ||
| expect(screen.queryByTestId("items-list").tagName).toBe('DIV'); | ||
| expect(screen.queryAllByTestId("items-list").length).toBe(1); |
There was a problem hiding this comment.
Doing the following you assert the existence of exactly one element and the content of it:
| expect(screen.queryAllByTestId("items-list").length).toBe(1); | |
| expect(screen.queryByTestId("items-list").innerHtml).toBe("any content"); |
| it("There are 25 items in the items list", () => { | ||
| const { items } = mockedData; | ||
| render(<List items={items} />); | ||
| expect(screen.queryAllByTestId("item").length).toBe(25); |
There was a problem hiding this comment.
with <List> you're rendering <Card>s and in consequence tags: <h4> and <img> which are reachable by role: heading and image respectively. It would be a more effective test if you assert against them and reserve the usage of test-id props to more complex or embedded not-easy-to-reach HTML elements
| @@ -12,26 +17,25 @@ function HomePage() { | |||
| function deAuthenticate(event) { | |||
| event.preventDefault(); | |||
| logout(); | |||
| history.push('/'); | |||
| history.push('/hola'); | |||
Adds Header component with elements such as Header and Items list to display mocked data for youtube videos.