From f4167e11847fa91c650eacaed60b868e3e80c2fb Mon Sep 17 00:00:00 2001 From: Akasha Rojee Date: Mon, 21 Feb 2022 15:16:49 +0400 Subject: [PATCH] Update README --- README.md | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 62acbb0..b8dd8ee 100644 --- a/README.md +++ b/README.md @@ -14,22 +14,28 @@ It is built with React and Redux, implements the Financial Modeling Prep API, an # Project Highlights -- Built with React's reusability principle in mind +### - Built with React's reusability principle in mind | `Home` component | `Symbol` component | | -- | -- | | https://github.com/AkashaRojee/stock-screener/blob/731015af0b7c56835964da5bba74cc9837709e3c/src/features/home/Home.js#L30-L61 | https://github.com/AkashaRojee/stock-screener/blob/731015af0b7c56835964da5bba74cc9837709e3c/src/features/details/Symbol.js#L27-L58 | -- Uses component composition via a component I custom-built components to manage flexbox structures +### - Uses component composition via a component I custom-built components to manage flexbox structures +| `HightlightCard` component | Reusable `SplitPane` component | +| -- | -- | +| https://github.com/AkashaRojee/stock-screener/blob/aecd51d7b0941342602c2ff0cc066d656e887269/src/common/components/HighlightCard/HighlightCard.js#L8-L32 | https://github.com/AkashaRojee/stock-screener/blob/731015af0b7c56835964da5bba74cc9837709e3c/src/common/components/SplitPane/SplitPane.js#L6-L15 https://github.com/AkashaRojee/stock-screener/blob/aecd51d7b0941342602c2ff0cc066d656e887269/src/common/components/SplitPane/SplitPaneLayout.js#L1-L8 | + +### - Data fetching and loading from API is managed using thunk lifecycle actions via `createAsyncThunk` + +### - Testing API calls is made at the network level with proper mocking using Mock Service Worker + +_I wrote a blog article about it: [Testing React Components with API Calls and Redux Store](https://www.akasharojee.codes/2021/09/04/testing-react-components-with-api-calls-and-redux-store.html)_ + +### - Customised React Testing Library's `render` method so that tests can access real Redux store and logic and use actual app behaviour +_See blog article above._ -- Data fetching and loading from API is managed using thunk lifecycle actions via `createAsyncThunk` -- Testing API calls are made at the network level, to mimic real API calls being made from comps. Used msw -- Customised React's `render` method so that tests can access real Redux store and logic and use actual app behaviour -API calls are mocked at network level by using Mock Service Worker, and store is made globally available by customising React Testing Library's render method -More information about what was done -- ## Built With - Major languages: JS, SCSS