> For the complete documentation index, see [llms.txt](https://muratkerem.gitbook.io/cctdd/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://muratkerem.gitbook.io/cctdd/ch04-headerbar.md).
# ch04-HeaderBar
In the Angular version of the app, there is a parent component above `HeaderBarBrand`. Let's create it too.
Create a branch `feat/headerBar`. Create 2 files under `src/components/` folder; `HeaderBar.cy.tsx`, `HeaderBar.tsx`. As usual, start minimal with a component rendering; copy the below to the files and execute the test after opening the runner with `yarn cy:open-ct`.
```typescript
// src/components/HeaderBar.cy.tsx
import HeaderBar from "./HeaderBar";
describe("HeaderBar", () => {
it("should", () => {
cy.mount();
});
});
```
```tsx
// src/components/HeaderBar.tsx
export default function HeaderBar() {
return hello
;
}
```
In `HeaderBar` component, which is the child of `HeaderBar`, we added a top level `data-cy` selector with the value of `header-bar-brand`. Let's add a failing test to check the existence of the child component (Red 1).
```tsx
// src/components/HeaderBar.cy.tsx
import HeaderBar from "./HeaderBar";
describe("HeaderBar", () => {
it("should", () => {
cy.mount();
cy.getByCy("header-bar-brand");
});
});
```
Insert the child component into the parent.
```tsx
// src/components/HeaderBar.tsx
import HeaderBarBrand from "./HeaderBarBrand";
export default function HeaderBar() {
return (
);
}
```
We get the same `react-router` related error that we got with the `HeaderBarBrand` component. If a child component is using `react-router`, when testing the parent component, we also have to wrap the parent in `BrowserRouter` (Green 1).
```tsx
// src/components/HeaderBar.cy.tsx
import HeaderBar from "./HeaderBar";
import { BrowserRouter } from "react-router-dom";
import "../styles.scss";
describe("HeaderBar", () => {
it("should", () => {
cy.mount(
);
cy.getByCy("header-bar-brand");
});
});
```
The child component renders.
The specification shows that the child component is wrapped by a `header` and a `nav` There is also some css that gives it the dark theme. We can copy those off of the browser. We also add a `data-cy` selector to the top tag of the component.
```tsx
// src/components/HeaderBar.tsx
import HeaderBarBrand from "./HeaderBarBrand";
export default function HeaderBar() {
return (
);
}
```
The component is looking great with CSS.
Realize that we did not necessarily go through a traditional RedGreenRefactor cycle; our Red in this case was the component not rendering in its final form and we kept improving that step by step.
What else can be tested at this point? We do not need to repeat the tests for the child component, because we covered all of it at the child. The only valuable additional check would be to check for an attribute of the `nav` tag. We can easily add that with [Cypress testing library](https://testing-library.com/docs/cypress-testing-library/intro/) (Refactor 1).
```tsx
// src/components/HeaderBar.cy.tsx
import HeaderBar from "./HeaderBar";
import { BrowserRouter } from "react-router-dom";
import "../styles.scss";
describe("HeaderBar", () => {
it("should", () => {
cy.mount(
);
cy.getByCy("header-bar-brand");
cy.findByRole("navigation");
});
});
```
## RTL version of the component test
```tsx
// src/components/HeaderBar.test.tsx
import HeaderBar from "./HeaderBar";
import { render, screen } from "@testing-library/react";
import { BrowserRouter } from "react-router-dom";
import "@testing-library/jest-dom";
describe("HeaderBar", () => {
it("should render error", async () => {
render(
);
expect(await screen.findByTestId("header-bar-brand")).toBeVisible();
});
});
```
## Summary & takeaways
The main takeaway in this section is the parent-child relationship between the components, and a demo of how top level `data-cy` selectors make child components easier to reference in higher level tests.
If a child component is using `react-router`, when testing the parent component we also have to wrap the parent in `BrowserRouter`.
In a parent component, we do not need to repeat the tests for the child component, because we covered all of it at the child. The same thought process applies to higher level tests with e2e.
When designing the component, we do not necessarily have to go through a traditional RedGreenRefactor cycle. When our test tool is also the design tool, our RGR can as well be incremental visual enhancements to the component whilst adding classes and css.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://muratkerem.gitbook.io/cctdd/ch04-headerbar.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.