You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/contributing/frontend.md
+8-8Lines changed: 8 additions & 8 deletions
Original file line number
Diff line number
Diff line change
@@ -12,15 +12,15 @@ All our dependencies are described in `site/package.json` but here are the most
12
12
-[Material V4](https://v4.mui.com/) for UI components
13
13
-[react-router](https://reactrouter.com/en/main) for routing
14
14
-[TanStack Query v4](https://tanstack.com/query/v4/docs/react/overview) for fetching data
15
-
-[XState](https://xstate.js.org/docs/) for handling complex flows
15
+
-[XState](https://xstate.js.org/docs/) for handling complex state flows
16
16
-[axios](https://github.com/axios/axios) as fetching lib
17
17
-[Playwright](https://playwright.dev/) for E2E testing
18
18
-[Jest](https://jestjs.io/) for integration testing
19
19
-[Storybook](https://storybook.js.org/) and [Chromatic](https://www.chromatic.com/) for visual testing
20
20
21
21
## Structure
22
22
23
-
All the code related to the UI is inside the `site`` folder and we defined a few conventions to help people to navigate through it.
23
+
All the code related to the UI is inside the `site` folder and we defined a few conventions to help people to navigate through it.
24
24
25
25
-**e2e** - E2E tests
26
26
-**src** - Source code
@@ -38,19 +38,19 @@ All the code related to the UI is inside the `site`` folder and we defined a few
38
38
39
39
## Routing
40
40
41
-
We use [react-router](https://reactrouter.com/en/main) as our routing engine and adding a new route is very easy. If the new route needs to be authenticated, put it under the `<RequireAuth>` route, if it needs to live inside of the dashboard, put it under the `<DashboardLayout>`.
41
+
We use [react-router](https://reactrouter.com/en/main) as our routing engine and adding a new route is very easy. If the new route needs to be authenticated, put it under the `<RequireAuth>` route and if it needs to live inside of the dashboard, put it under the `<DashboardLayout>` route.
42
42
43
43
The `RequireAuth` component handles all the authentication logic for the routes and the `DashboardLayout` wraps the route adding a navbar and passing down common dashboard data.
44
44
45
45
## Pages
46
46
47
-
Pages are the top-level components of the app. The page component lives under the `src/pages` folder and each page should have its own folder so we can better group the views, tests, utility functions and so on. We use a structure where the page component is responsible to fetch all the data and passing it down to the view. We explain this decision a bit better in the next section.
47
+
Pages are the top-level components of the app. The page component lives under the `src/pages` folder and each page should have its own folder so we can better group the views, tests, utility functions and so on. We use a structure where the page component is responsible for fetching all the data and passing it down to the view. We explain this decision a bit better in the next section.
48
48
49
-
> ℹ️ Code that is only related to the page should live inside of the page folder but if at some point it is used from other pages or components, you should consider to move it to the `src` level in the `utils`, `hooks` or `components` folder.
49
+
> ℹ️ Code that is only related to the page should live inside of the page folder but if at some point it is used in other pages or components, you should consider moving it to the `src` level in the `utils`, `hooks` or `components` folder.
50
50
51
51
### States
52
52
53
-
A page usually has three states at least: **loading**, **ready** or **success**, and **error** so remember to always handle these scenarios while you are coding a page. We also encourage you to add visual testing for these three states using the `*.stories.ts` file.
53
+
A page usually has at least three states: **loading**, **ready** or **success**, and **error** so remember to always handle these scenarios while you are coding a page. We also encourage you to add visual testing for these three states using the `*.stories.ts` file.
54
54
55
55
## Fetching data
56
56
@@ -112,7 +112,7 @@ We use three types of testing in our app: **E2E**, **Integration** and **Visual
112
112
113
113
### E2E (end-to-end)
114
114
115
-
Are useful to test complete flows like "Create a user", "Import template", etc. For this one, we use [Playwright](https://playwright.dev/). If you only need to test if the page is being rendered correctly, you should probably consider using the **Visual** Testing\*\* approach.
115
+
Are useful to test complete flows like "Create a user", "Import template", etc. For this one, we use [Playwright](https://playwright.dev/). If you only need to test if the page is being rendered correctly, you should probably consider using the **Visual Testing** approach.
116
116
117
117
> ℹ️ For scenarios where you need to be authenticated, you can use `test.use({ storageState: getStatePath("authState") })`.
118
118
@@ -126,7 +126,7 @@ Test components without user interaction like testing if a page view is rendered
126
126
127
127
### What should I test?
128
128
129
-
Choosing what to test is not always easier since there are a lot of flows and a lot of things can happen but definitely there are a few indicators that can help you with that.
129
+
Choosing what to test is not always easy since there are a lot of flows and a lot of things can happen but these are a few indicators that can help you with that:
0 commit comments