✨ App implementation and instructions

Author: mlande

README.md

@@ -1,68 +1,49 @@
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+# QA Automation Coding Challenge
 
-## Available Scripts
+Thank you for taking the time to complete this challenge!
 
-In the project directory, you can run:
+This repo consists of a basic working app for which you are requested to setup a simple testing infrastructure, extract the main user flows, and implement tests.
 
-### `yarn start`
+Please read below for the context and instructions.
 
-Runs the app in the development mode.<br />
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+## Requirements
 
-The page will reload if you make edits.<br />
-You will also see any lint errors in the console.
+### Why
 
-### `yarn test`
+Adam runs his own web development school, in which he teaches the fundamentals of the web to his students, over the course of several months.
 
-Launches the test runner in the interactive watch mode.<br />
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+Adam wishes to maintain an easy overview of the progress of his students. He wants to be able to quickly get a simple list of repos owned by a given student, and see the most basic details of each repo. He also wants to be able to easily navigate to a specific repo, in case he needs to dive deeper.
 
-### `yarn build`
+Adam likes Github, but the UI is not built for a minimalistic, non-paginated overview of repos. For this he decides to build his own simple app, leveraging the Github API. He defines the following specifications:
 
-Builds the app for production to the `build` folder.<br />
-It correctly bundles React in production mode and optimizes the build for the best performance.
+### Acceptance Criteria
 
-The build is minified and the filenames include the hashes.<br />
-Your app is ready to be deployed!
+1. The UI consists of a header, a search form and a search result section
+2. The header displays the title of the app
+3. The search form accepts a text input as a search term. Search is activated by clicking the "Go" button, or by pressing the "Enter" key
+4. For each repo found, the search result section displays a row with basic info about that repo: name and description. Clicking on the repo name takes the user to the repo's URL. In case of a missing value, `–` is displayed
+5. The user sees feedback about the result of the search action. Either a success or error message are shown above the search field at the completion of a search action, for a short amount of time. If the error is due to a user not found on Github, a specific error message is displayed. Otherwise, a generic error message is displayed
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+## Here is where you come in...
 
-### `yarn eject`
+Adam has finished a first version of the app. It meets the requirements and serves him nicely, but is still very basic.
 
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+He would like to enhance the app over time in iterations, adding more features. To do that well, he decides he needs confidence to continuously enhance the app without breaking it or losing one of the fundamental requirements.
 
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+### Instructions
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+Help Adam gain confidence in further development by automatically testing the most critical features of the app, by doing the following:
 
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+1. Fork the repository, setup and run the app (see [setup](./setup.md) file for instructions)
+2. Using the product description, acceptance criteria and the app itself, compile a list of several testable user flows, cases or scenarios. This doesn't have to cover every possible real-life case, please focus on what you think is most fundamental
+3. Based on your assessment of importance and effort, prioritise this list. Imagine this list would be later converted to tickets to be tackled in the next few work iterations of a product development team. Please explain your reasoning briefly. Add this list and your reasoning to the empty [`testable-flows.md`](./testable-flows.md) file
+4. Out of these flows, choose two and implement tests for them
+5. Add to this `README.md` file (or in a separate file) instructions on how to run these tests
 
-## Learn More
+### Things to note
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+- Use any testing technology you'd like – Cypress, Selenium or any other you think would work well
+- Feel free to modify or add whatever you need including addition of other packages, your own libraries, etc
+- Please submit a link to your finished repository when you are ready
 
-To learn React, check out the [React documentation](https://reactjs.org/).
-
-### Code Splitting
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
-
-### Analyzing the Bundle Size
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
-
-### Making a Progressive Web App
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
-
-### Advanced Configuration
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
-
-### Deployment
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
-
-### `yarn build` fails to minify
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
+## Good luck and happy coding! :)

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "spa-automation",
+  "name": "qa-automation-coding-challenge",
   "version": "0.1.0",
   "private": true,
   "dependencies": {

public/favicon.ico

@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Get Github Repos</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

public/index.html

@@ -1,21 +1,11 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Get Github Repos",
+  "name": "Get Repos",
   "icons": [
     {
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
   ],
   "start_url": ".",

public/logo192.png

@@ -0,0 +1,7 @@
+# App Setup
+
+1. Fork and clone the repository.
+2. At the root directory of the repo, install dependencies by running `yarn` (if needed, [install yarn first](https://yarnpkg.com/getting-started))
+3. Run the app by running `yarn start`
+
+You can add more scripts (or change existing ones) in the [`package.json`](./package.json) file.

public/logo512.png

@@ -1,38 +1,103 @@
-.App {
-  text-align: center;
+.app {
+  height: 100%;
+  padding: 2rem 4rem;
+  overflow: scroll;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+.app header {
+  text-align: center;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+.app main {
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  margin-top: 2rem;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+.field-username {
+  width: 15rem;
   display: flex;
-  flex-direction: column;
+  flex-flow: column nowrap;
+}
+
+.submit {
+  width: 15rem;
+  margin-top: 1rem;
+}
+
+.input-area,
+.output-area {
+  font-size: 1.8rem;
+  line-height: 4rem;
+}
+
+.output-area {
+  width: 100%;
+  margin-top: 4rem;
+  flex: 1;
+  justify-content: center;
   align-items: center;
+  display: flex;
+}
+
+.message-area {
+  display: flex;
+  flex-flow: column nowrap;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+  font-size: 1.5rem;
+  line-height: 3rem;
+  height: 6rem;
+}
+
+.message-failure {
+  color: red;
+}
+
+.message-success {
+  color: green;
+}
+
+.repo-row {
+  display: flex;
+  justify-content: center;
+}
+
+.repo-row > * {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 35rem;
+  margin-left: 10rem;
+}
+
+.repo-row > *:first-child {
+  margin-left: 0;
+}
+
+.repo-list-container {
+  width: 100%;
+}
+
+.output-status-text,
+.repo-amount {
+  text-align: center;
 }
 
-.App-link {
-  color: #61dafb;
+.circle {
+  height: 8rem;
+  width: 8rem;
+  border-radius: 50%;
+  border-top: 5px solid rgb(66, 168, 236);
+  animation: animate 1s linear infinite;
+  filter: blur(1px);
 }
 
-@keyframes App-logo-spin {
-  from {
+@keyframes animate {
+  0% {
     transform: rotate(0deg);
   }
-  to {
+  100% {
     transform: rotate(360deg);
   }
 }