React-Redux with i18n, and building the wireframes using Figma.[Part-3]

Hi all, it's a continued part of full-stack development, here we will build the wireframes using Figma and write the test cases using the Jest, Enzyme, and Cypress. We will do the i18n configuration and redux configurations.

And we are going to build a “Blog” application to use all our code setup. Where the user can upload an article, edit, view, and delete the articles.

Usecase:

* User can Sign In/ Sign Up
* User can see the total article counts which he/she posted
* User can edit his profile
* User can add, edit, view, and delete articles
* User can view other articles

Steps to be followed to develop screens/components and to follow rules:

Wireframe design - We can use Figma, Balsamiq, Sketch, Invision, Adobe, etc., to build the mockup screens

Follow the standards while developing components i.e.,

• Web accessibility (a11y)
• PWA (to maintain the performance, cache the assets)
• Unit and E2E Test cases
• MobileFirst approach
• Responsive design

So let’s start with developing the mockup screens

• We are going to use Figma for developing our screens:

https://www.figma.com/community

We are choosing this because it's web-based, open-source, and allows thousands of plugins and illustrative files to build the pages. You can drag and drop any drafts into your project and update it according to your application else follow the below steps:

• Create a project

• Create master components that are used repeatedly in our screens (to follow DRY — “Don’t repeat yourself”). Here you can build the core components like buttons/text boxes/radio etc., in various states like disabled, invalid, etc.,

• Create a Style sheet and typography, so the same colors and fonts we are going to use throughout the application.

• Follow the mobile-first approach by building screens that are compatible with mobile.

• And equivalent responsive design pages for larger dimension screens.

Later, this is how we can inspect the element and take styles into our project.

https://github.com/RaghavendraNK/react-typescript-jest-cypress/blob/main/docs/FullStackDevelopment%20(1).pdf

2. Now depending on the mockup screens divide the components to follow Reacts “Composition” concept — https://reactjs.org/docs/composition-vs-inheritance.html

So we need to divide the design into multiple sub-components, we can re-use them wherever required.

Ex: Dividing the design into multiple components

1. NavBar
2. Profile Details
3. SnackBar
4. Notifier
5. TextBox
6. Button etc.,

3. Storybook: which allows us to easily understand the components in a well-documented manner, and also we can pass different props, to see the real-time visual changes and also makes “development faster and easier by isolating components.”

https://storybook.js.org/docs/react/get-started/introduction

3.1 Create master stylesheets ie., colors and fonts

3.2 Consume the color and fonts in component scss files

ex:

3.3 Develop the component by react functional component, specifying the interface for Props by providing better documentation, and allowing TypeScript to validate that your code is working correctly.

3.4 Create a storybook file: Breadcrumbs.stories.tsx

3.4.1 Create a meta-information by specifying title, component, and argTypes

3.4.2 Create a template

3.4.3 Create multiple sub-stories based on a template by sending different props to the component

Args unlocks Storybook’s superpower of altering and composing arguments dynamically. So it will update the docs where a developer can copy the code, read the description and make live changes to props to view how it behaves and also can test the components in various dimensions.

To run a storybook use the “npm run storybook” command

Note: We are going to use these core components in our blog application, I have created core components and deployed them to the npm repository, you can check here https://www.npmjs.com/package/slick-react-ui-components

Demo: https://slick-react-ui-components.herokuapp.com/?path=/story/breadcrumbs--bread-crumbs-list-one-item

Before starting our main Blog application, we will do a configuration of our project to support i18n and Redux.

i18n: is a powerful internationalization to provide multi language support

Configuration:

1. Run “npm install react-i18next i18next -S” to install the package
2. Create a config.ts in the i18n folder and specify the below config

3. Import in root folder index.ts

4. And move all your messages in JSON

5. Import all messages in components using useTranslation hook.

Below is the example screen where the sign-in page displayed in different languages using “ಕನ್ನಡ” and “English”

Redux: is a predictable state container for JavaScript apps.

Configuration:

1. Run “npm i redux react-redux -S” and “npm i @types/redux @types/react-redux -D” to install dependencies and devDependencies
2. Create a store

3. Import store into index.ts and pass it to Provider.

How does it work?

1. An action is dispatched when a user interacts with the application.
2. The root reducer function is called with the current state and the dispatched action. The root reducer may divide the task among smaller reducer functions, which ultimately returns a new state.
3. The store notifies the view by executing their callback functions.
4. The view can retrieve an updated state and re-render again.

Consuming the Mock Articles from the redux store:

Step 1. Specify the mock articles in initial-state in “store/reducers/articlesReducer.ts”

Step 2. Consume in “components/Article/ViewArticles/index.ts” using useSelector hook.

Step 3. Loop through the mock articles to create a view.

Usually, React & Redux folder architecture will follow the below pattern:

4. Now in the Blog application we will follow test-driven development, i.e., first, make a list of test cases according to the component's behavior.

Ex: Sign-In Page

1. User can click sign in button without entering the email id or password or both, then show validation
2. User can enter invalid credentials, then show an error message
3. User enters a valid credential, then navigates to the dashboard page.

4.1 Create a test file in __tests__ folder AddNewArticle.spec.tsx

4.1.1 Write a skeleton of the test case file by considering its behavior.

4.1.2 Update the test cases with expectations and assertions.

4.1.2.1 Create a wrapper using the enzyme.

4.1.2.2 Match with the snapshot

4.1.2.3 Check the DOM elements exist or not, and the actions

4.1.2.4 Run the test case using “npm run test” command.

4.2 Creating the Component to make tests pass

4.2.1 Create a functional component.

4.2.2 Specify the form schema for validation

4.2.3 Provide initial values

Now run “npm run test”, to see whether all the test cases getting passed after implementation of the component.

4.3 Create a test file.

https://www.cypress.io/

4.3.1 Launch the test runner using “npm run cypress-open”, and create an article.spec.ts file in the cypress/integration folder.

Step 1. Launch the application which needs to be tested, using cy.visit(‘/’) which will internally refer to the baseURL mentioned in the cypress.json

Step 2. Define the expectations by specifying cypress commands like below.

• get is used to get the element to perform some actions like here below to enter the text and click the button.
• # will be used for finding element by Id
• . used to find the element by class

4.4 Check the code coverage and visual tests.

4.4.1 Run "npm run test-coverage” to check the code coverage.

4.4.2 Run “npm run cypress-test” to check the visual tests.

4.5 Check the responsiveness

4.6 Verify coding standards and performance optimizations using lighthouse.

Part-4: Contains Jenkins setup and connecting with nodeJS API with MongoDB to get the articles from the database and performing the CRUD operations.

Part-5: We will publish our app on the Heroku server using ci/cd pipelines.

You can find the entire codebase of these examples and implementation in https://github.com/RaghavendraNK/react-typescript-jest-cypress
and demo https://fullstack-demo-e2e.herokuapp.com/signin