Week 1: Mindy and Ethan ("As a user, I want to be able to navigate within the app")

Navigating Within the App

Acceptance Criteria:

• react-router-dom has been added as a project dependency
• Click a link within the app to show a different view in the app
• When a link is clicked, the browser URL updates to represent the current view

Notes

react-router-dom has been added as a project dependency

• run yarn add 'react-router-dom'

Click a link within the app to show a different view in the app

• Different views:
  • home
  • list
  • add item

When a link is clicked, the browser URL updates to represent the current view

Testing

What do we want to test? Thoughts -

1. Home page opens (cy.visit)
2. When we click on a link, it changes the view (cy.contains)
3. When we click on a link, the url changes (cy.url().should('include', 'url info here'))

run yarn add cypress --dev to add it as a project dependency

run yarn run cypress open to open the framework

https://docs.cypress.io/guides/getting-started/writing-your-first-test.html#Add-a-test-file

Accessibility

Run it through the accessibility extension Andrew mentioned?

https://accessibilityinsights.io/en/

Potentially Useful Resources:

• https://reacttraining.com/react-router/web/api/Route
• https://reacttraining.com/react-router/web/guides/quick-start/1st-example-basic-routing
• Even better, I think this is basically what we need to do, in a 5 minute video
• I think this blog post will really help
• https://docs.cypress.io/guides/getting-started/writing-your-first-test.html#Step-4-Make-an-assertion

Notes after first teammate meeting (11/11/19):

• We created a branch, added react-router-dom, and pushed our branch to the remote repo
• We decided that we probably need around 3 different views (an add item screen that originally serves as a home screen, a list screen that becomes the home screen once items have been added, and an individual page for each item)
• We agreed to both study up on how to use react-router-dom to navigate between views, and discuss on Slack/talk again on Thursday

Notes after second teammate meeting (11/14/19):

• We took the approach of writing tests, expecting them to fail, and then adding the element we wanted to pass the test. For instance, we wrote a test to verify that the "list" page worked, and when the test failed we created the list page, and ran the test successfully. (Mindy, what was the name that process called again?)
• We created four tests, in a section of the app_spec.js file reserved for the first week.
• We used BrowserRouter and Routes and Links and Switches to create links to navigate to a home page, a list page, and a page to add new items.
• We used the Chrome extension Accessibility Insights, and passed the WCAG tests, too.
• We took turns coding, pushing the code back and forth, and once we were both pleased we opened a PR.

Questions and Takeaways after our code collaboration:

• Can we delete the App.test.js file in the src folder? Also logo.svg?
• We put the first week's tests in one section. Will that prove to be a good way of organizing all 8 weeks of tests?
• Run yarn install every time the other person installed any new dependencies, because you won't have in your project as they are listed in the .gitignore file. (I think).
• What is a good way to review each other's code? Should we have a good enough handle on both team's material to know if they did it right? Clone their branch and poke around, or just look at files on github's website?

Changes After Review:

• Moved components into their own files, even the small function components.