Done with CI

Author: abegel

docs/assignments/hw4-25.md

@@ -30,7 +30,9 @@ Let's fix one configuration error in the calculator code; this is necessary beca
 
 Edit calculator-frontend/package.json. Change the line starting with "test" inside of the "scripts" object to read:
 
-```"test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(axios)/)' --detectOpenHandles",~~~
+```
+"test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(axios)/)' --detectOpenHandles",
+```
 
 #### Turn in instructions
 
@@ -43,8 +45,10 @@ In calculator-backend/tests, there's a file called calculate.test.js. The code c
 
 Run the test by executing:
 
-```cd calculator-backend
-   npm test~~~
+```
+cd calculator-backend
+npm test
+```
 
 It should execute the test and show that it passed. 
 
@@ -70,12 +74,14 @@ You'll need to install more npm modules to test the front end.
 
 Execute these three commands:
 
-```npm install @testing-library/react
-   npm install @testing-library/jest-dom~~~
+```
+npm install @testing-library/react
+npm install @testing-library/jest-dom
+```
 
 There's already an App.test.js in the src/ directory. It has the test code for App.js. 
 
-Let's run that using ```npm test~~~. 
+Let's run that using ```npm test```. 
 
 This looks like a bad test. If you open up App.test.js it creates the Calculator app React element and then looks for a box on the screen labeled 'learn react'. 
 
@@ -95,11 +101,14 @@ First, we need to add an HTML attribute to the appropriate div so we can refer t
 
 In Calculator.js, add the attribute 'data-testid="total"' to the div with the className 'expression'. It should look like this:
 
-```<div className="expression" data-testid ="total">{expression || "0"}</div>~~~
+```
+<div className="expression" data-testid ="total">{expression || "0"}</div>
+```
 
 Second, in the calculator-frontend/src directory, add a new file called Calculate.tests.js. Put this code in your file:
 
-```import { render, fireEvent, screen } from '@testing-library/react'
+```
+import { render, fireEvent, screen } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import Calculator from './Calculator'
 
@@ -122,9 +131,8 @@ it('Appends the number when pressed', async () => {
 
    // get the expression DOM node and check that it is 12
    expect(element).toHaveTextContent('12');
-
-
-});~~~
+});
+```
 
 It checks that if you press a '1', you see a 1 in the top of the calculator. If you then press a '2', you should see a 12 at the top of the calculator.
 
@@ -159,7 +167,7 @@ Create a PR to commit your test code to the team's repository. Use your PR messa
 
 Please provide us a link to your PR.
 
-### 9. Review at least two PRs
+### 7. Review at least two PRs
 
 Following the best practices we discussed in class, leave two reviews on your teammates' PRs. If there issues, continue to discuss in the comments until you're satisfied with the changes and able to approve the pull requests.
 
@@ -174,3 +182,50 @@ Finally, once your PR has been approved, [merge it](https://docs.github.com/en/p
 #### Turn in instructions
 
 Please provide a link to your merged commit. 
+
+### 8. Create a continuous integration pipeline to run your test cases
+
+To ensure the quality of our codebase, we want to make sure that your code passes all its test cases after every checkin. If the tests fail, we should reject the checkin.
+
+To setup our CI workflow, first, create a workflows subdirectory in .github. Then create a new file called ci.yml in workflows/.
+
+Open ci.yml in a text editor, paste in the following code snippet, and commit this to your repository. Use hygienic code practices and commit to a branch first, then issue a pull request, do a code review, and merge it into main.
+
+```
+name: ci
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches: [main]
+
+permissions:
+  contents: write
+
+jobs:
+  jest:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Run Frontend Tests
+        working-directory: ./calculator-frontend
+        run: |
+          npm install
+          npm test
+      - name: Run Backend Tests
+        working-directory: ./calculator-backend
+        run: |
+          npm install
+          npm test
+```
+
+Once this is installed, every time we push to main or do a pull request to main, this will execute the frontend and backend test code. We have Require status checks to pass before merging turned on in our repository settings. If any tests fail, the push or pull request will fail as well. 
+
+You can find out what happened in the tests by clicking on the Actions tab at the top of your GitHub repository page and choose the 'ci' workflow. If the tests worked, you'll see all green dots. If it's running right now, the dot will be yellow and show a spinning circle. If there was a failure, the dot will be red. Click on a dot to see a terminal window that shows the commands as they executed as well as their results. 
+
+#### Turn in instructions
+
+Turn in the URL to your workflow run of ci.yml that resulted in a successful test case run. If you had to run the ci workflow several times before it passed, turn in the URL of the latest workflow run that succeeded. 
+
+