michal-murawski / graphql-learn Goto Github PK

In order for project to work we need NEXT_PUBLIC_GITHUB_ACCESS_TOKEN and NEXT_PUBLIC_GITHUB_GRAPHQL_API and place them in the .env file. These will be provided via e-mail.

1. Install: npm ci
2. Start dev: npm dev
3. Build: npm run build
4. Integration tests (build first): npm run e2e:headless
5. Lint: npm run lint
6. There was supposed to be the components/unit testing script. Unfortunately, problems with Cypress did not allow me to do so.

Every coding task is an opportunity to try out and learn new things. That is the reason I included NextJS, react-query, theme-ui and cypress. Just to refresh previous technologies or grasp a little on new things. I am aware that company uses testing-library with apollo-client. I acquired this knowledge after setting up the repository, and I did not want to put more time on configuration.

• NextJS - Trending framework, and I always wanted to have a chance to learn it. Doing any kind of recruitment tasks gives me an opportunity to do so
• antd - popular and developer friendly components library
• react-query - layer of abstraction, state of truth for API state. Got inspired by https://blog.logrocket.com/making-graphql-requests-easy-with-react-typescript-and-react-query/
• cypress - I did not use it for some time and wanted to refresh some knowledge and test a new feature
• theme-ui - just a small POC. I wanted to see how hard it is to include this package into NextJS project.

• /pages - forced by NextJS, where only routing pages can be placed. This approach forces us to add a new directory, ex. features/modules where we can separate our code by domain.
• /features - directory where we can place our domain/business related code
• /common - anything that is a shared component, logic, service, helper across the entire app
• /configs - configuration files, scripts, etc.

• husky with lint-staged - in order to run code checks for specific git hooks and include only staged files
• prettier - in order to format code automatically.

I do have IDE configuration for lint and prettier on save. In next.config.js I added type checker on local dev server. Configured husky on commit hook for lint and prettier. It would be natural choice to add npm run lint step in the CI pipeline.

• Docker - I faced some heavy problems with Docker, probably OS related. My dev image was crushing, or starting very long.
• Cypress - I wanted to try out new feature from Cypress, it is components testing (UNIT kind of testing) Approach like in react-testing-library but with real, in browser DOM. Unfortunately, after many, many hours of fighting with Next, Docker and Cypress all together I had to give up. One specific error did not allow me to move forward.
• Autogenerated types - I was not able to pick a specific type for the 'node' object from provided RepositoriesResponse. Still, I think it should be possible to do so, probably not that complex. Reason for Partial Repository type

I was trying many small things at the same time. While having problems with a few configs. For this reason commit history does not reflect actual work. Right now, /generated directory is included into the codebase, which could be changed and generated in the CI. Also injecting ENV variables should happen on the CI level. At the end, I was not able to run my docker images because of unknown to me error.

I did not manage to provide tests as requested. What would be the flow:

• integration for repositories page:
  • render page
  • fetch repos with token from test env
  • get repos list from cypress response
  • assert received json with rendered table
  • click on pagination buttons and verify the same way as before
  • do the search query and verify response with the table rows as before
• unit test table
  • mount table
  • assert columns
  • assert loading state
  • default page size