Horondi project

HORONDI project is an e-commerce online shop that provides hand-made backpacks, bags, purses and other accessories.

---

• Installation
  • Required to install
  • Environment
  • Clone
  • Setup
  • How to run local
  • How to run Docker
• Usage
  • How to run tests
• Documentation)
  • Rules and guidelines
  • Testing
  • Generator
  • Chat
• Contributing
  • git flow
  • issue flow
• FAQ
• Support
• License

---

Installation

• All the code required to get started
• Images of what it should look like

Required to install

• NodeJS (14.4.0)

Clone

• Clone this repo to your local machine using https://github.com/ita-social-projects/horondi_client_fe.git

Setup

install npm packages

$ npm install

How to run local

1. Open terminal.
2. Run npm run start to start application.
3. Open http://localhost:3000 to view it in the browser.

How to run Docker

Usage

How to run tests

To run unit test open terminal and run npm run test in it. To run E2E tests you need open terminal and run npm run start in it to start server. Then open one more terminal and run npm run cypress.

---

Documentation

Rules and guidelines

• Redux
  • For each entity we should have separate folder
  • In each folder we should have different files for actions, reducer {modelName}.actions.js or {modelName}.reducer.js
• Configuration
  • Configuration is done via .env file where environment variables are located
  • Also we have .env.example that contains examples of environment variables
• Styles
  • For styling function makeStyles from @material-ui should be used and all styles should be located inside separate component.
• Components
  • Components that are connected to redux should be located inside containers folder. Components without connection to redux should be located inside components folder.
  • Each individual page that is accessed via react-router should be located inside pages folder. All components that are used inside particular page should be located inside folder for the specific page.
  • Each component should have at least three files:
    • index.js where we export anything from the whole folder
    • {component-name}.js - file where component is located
    • {component-name}.styles.js where all styles are located

Testing

Components

Order of testing components:

1. simple stateless components that are used in multiple places
2. components that depends on other components but not connected to redux and don’t have any state
3. components that have internal state but are not connected to redux
4. components that connected to redux

Don’t test:

• third-party libraries
• constants
• static css styles
• related components (test only one specific component at the specific moment of time)
• How to test:
• testing using snapshots (actual ui)
• testing logic of component (dynamic)

Snapshots allow us to compare actual UI with saved one and throw an error if it has accidentally changed. We can use flag “updateSnapshot” to update save snapshots of a component. It is appropriate for presentational components but doesn’t cover any logic

What to test in components:

• Properties
• default properties
• custom properties
• Data types (use library “jest-extended”)
• Conditions (what if)
• State
• default state
• state after some event has happened
• Events
• with parameters or custom props
• without arguments

Sagas

Flow:

• Set up the conditions of our test
• Mock the actual HTTP requests
• Instruct the saga to run through everything and finish its business
• Check that the expected side effects have happened (actions are dispatched, selectors are called, etc)

Link to the full article about proper saga testing: https://dev.to/phil/the-best-way-to-test-redux-sagas-4hib#:~:text=To%20test%20that%20the%20saga,selector%20into%20the%20following%20gen.

Actions creators

We test action creators as simple pure functions that just take an arguments and output proper arguments

Reducers

We test reducers as simple pure functions that just take an arguments and output proper arguments Checks:

• valid default state
• changes of state when action is dispatched for different values of state

Cypress

1. Use data-cy as selector

---

Generator

Command npm run generate is used to run graphql code generator

1. before using codegen you must run backend server horondi backend

2. open terminal

3. run npm run generate

4. you should run npm run generate every time new unions or interfaces are created

---

Contributing

You're encouraged to contribute to our project if you've found any issues or missing functionality that you would want to see. Here you can see the list of issues and here you can create a new issue.

Before sending any pull request, please discuss requirements/changes to be implemented using an existing issue or by creating a new one. All pull requests should be done into development branch.

There are three GitHub projects: horondi_client_fe for frontend part, horondi_client_be for backend part and horondi_admin. Every project has it's own issues.

Every pull request should be linked to an issue. So if you make changes on frontend, backend or admin parts you should create an issue with a link to corresponding requirement (story, task or epic).

All Pull Requests should start from prefix #xxx-yyy where xxx - task number and and yyy - short description e.g. #020-createAdminPanel

---

Git flow

We have master , development and feature branches.
All feature branches must be merged into development branch!!! Only the release should merge into the main branch!!!

Step 1

• Option 1

  • 👯 Clone this repo to your local machine using https://github.com/ita-social-projects/horondi_client_fe.git

• Option 2

  • create new branch from development branch

Step 2

• add some commits to your new branch

Step 3

• 🔃 Create a new pull request using github.com/ita-social-projects/horondi_client_fe.

---

Issue flow

Step 1

-go to !issues and click New issue button

Step 2

when creating !issue you should add name of the issue, description, choose assignee, label, project. If issue is a User Story you should link it with corresponding tasks, and corresponding tasks should be linked to issue.

Step 3

if issue is in work it should be placed in proper column on dashboard according to its status.

---

Chat.

For run Facebook chat on your site you need two variables - FACEBOOK_PAGE_ID and FACEBOOK_APP_ID and write them in 'src -> containers -> chat -> chat.js' file.

1. FACEBOOK_PAGE_ID. You can find your page ID in menu under your avatar, button 'about' or 'more -> about'. Then scroll to the down and find your Page ID.

2. FACEBOOK_APP_ID Go to https://developers.facebook.com/apps/ and choose 'Add a New App -> Manage Business Integration'. Fills the forms and press 'Create App ID'. You can find your App ID at the top of page.

3. After that you may go to left bar, and find 'Messenger -> Settings' and add your Facebook Business page ID in section 'Access Tokens'.

4. Now go to your Facebook Business page -> Settings(Left bar) -> Advanced Messaging and find section 'Whitelisted Domains'. Here you must add your domain to white list and save.

More details you can find on official site https://developers.facebook.com/docs/messenger-platform/discovery/facebook-chat-plugin/

---

Teams

Development team

Quality control team

ISTQB team

Database team

DevOps team

---

FAQ

• How do I do specifically so and so?
  • No problem! Just do this.

---

Support

---

License

• MIT license
• Copyright 2020 © SoftServe IT Academy.

MIT