Explore

f24 CSD 4503 Dev Ops Assignment 4 and Project

CSD 4503 DevOps: Assignment 4 & Final Project Instruction Document

⁠

Reference Material:

⁠

https://coda.io/@peter-sigurdson/github-command-line-interface-cli-lab-guide⁠

⁠

https://coda.io/d/_dNOak1VDU0F/f24-CSD-4503-Lab-Drills-on-GitHub-Actions_suWHHEPq⁠

⁠

In class lab we did as a training for this work:

⁠

https://coda.io/@peter-sigurdson/csd-4503-asignment-4⁠

Assignment 4 – GitHub CLI and Jest Testing

Goal: In your GitHub Repository → Set up a GitHub Actions workflow to demonstrate the operation of Git Actions and practice creating YAML Files.

The result will be a GitHub Actions log showing the history of your Commits.

The prerequisite to make this happen is:

You must have a GitHub Repository.

You must have the new GIT CLI client installed.

You must get a PAT token,

You must make a local clone of your Cloud repository.

⁠

Step-by-Step Task Checklist for Assignment 4

⁠

1. Install GitHub CLI (If Not Already Done)

Why? To easily manage GitHub repositories directly from the terminal.

Action: Confirm GitHub CLI is installed:

gh --version

⁠

Expected Result: Version number is displayed. If not, install it from

cli.github.com⁠

⁠

2. Authenticate GitHub CLI

Why? To securely connect the CLI to your GitHub account.

Action: Log in using your Personal Access Token (PAT):

gh auth login

Select HTTPS when prompted.

Paste your PAT when asked for the password. {You created your PAT in class last week}

Expected Result: CLI displays “You are logged in as [username].”

⁠

3. Create a New GitHub Repository {or use a previous one such as your TEAM GitHUB Repository}

Why? To host your project code and track changes.

Action: Create a repository and clone it locally:

gh repo create <repository-name> --public

gh repo clone <username>/<repository-name>

cd <repository-name>

Expected Result: A new folder is created locally, and the GitHub repo is live.

⁠

4. Prepare Your JavaScript Project

Why? To have a functional project with Jest tests to automate.

Action: Add a simple Jest test:

npm init -y

npm install jest --save-dev

mkdir __tests__

touch __tests__/example.test.js

Add this code to __tests__/example.test.js:

javascript

Copy code

test('adds 1 + 2 to equal 3', () => {

expect(1 + 2).toBe(3);

});

Expected Result: Your project runs tests successfully:

npx jest

⁠

5. Commit and Push Code to GitHub

Why? To synchronize your local project with the GitHub repository.

Action:

git add .

git commit -m "Initial project setup"

git push -u origin main

Expected Result: Code appears in your GitHub repository under the main branch.

⁠

6. Set Up GitHub Actions Workflow

Why? To automate Jest tests on every push.

Action:

Create the workflow file:

mkdir -p .github/workflows

touch .github/workflows/ci.yml

Add this content to ci.yml:

yaml

Copy code

name: Jest CI

on:

push:

branches: [main]

jobs:

test:

runs-on: ubuntu-latest

steps:

- uses: actions/checkout@v2

- name: Setup Node.js

uses: actions/setup-node@v2

with:

node-version: '16'

- run: npm install

- run: npm test

Commit and push:

git add .github/workflows/ci.yml

git commit -m "Add CI workflow"

git push

Expected Result: GitHub Actions tab shows the workflow running on each push.

⁠

7. Test the Workflow

Why? To ensure your automation works.

Action: Make a small change in your code and push:

echo "// Test change" >> index.js

git add .

git commit -m "Test workflow"

git push

Expected Result:

Go to the Actions tab on GitHub.

Observe the Jest test results as pass or fail.

Note: In a complete implementation, you could run your JEST tests from here. Challenge yourself to do this as an extenion if you like, but for now, just the console log message is sufficient.

⁠

8. Document Your Work

Why? To make the process reproducible.

Action: Update your README.md with:

Steps to set up GitHub CLI and Actions.

Screenshots of:

Workflow logs.

Console output for test pass and fail.

⁠

Grading Rubric: Assignment 4

Grading Rubric: Assignment 4

Part 2: Final Project – Extend and Publish to npmjs.com

Goal: Enhance the workflow, publish your project to npmjs.com, and write a LinkedIn blog post.

⁠

Step-by-Step Task Checklist for the Final Project

Enhance the Workflow:

Add a new test:

test('subtracts 5 - 2 to equal 3', () => {

expect(5 - 2).toBe(3);

});

Modify the workflow to include a success message:

yaml

- name: Notify on success

if: success()

run: echo "All tests passed!"

Publish the Project (Optional):

Publish to npm:

npm publish

Note the npm URL for submission to the Assignment Box on Moodle in a text file with team members’ details included.

Write a LinkedIn Blog Post: [This will count as the remainder of your Blog Entries: each student do your blog individually and record the url in the submission text file along with your NPM PUBLISH url for the project.]

Structure:

Intro: What you did and why it matters.

Process: How to set up CI/CD with GitHub Actions.

Results: Challenges, solutions, and screenshots.

Call to Action: Link to your GitHub repo.

Submit Your Work:

Upload to the Moodle Assignment Page a text file, named as your Team Name, with:

team members’ names and Student IDs

GitHub repository URL.

LinkedIn blog URL. for each student

npm package URL : from NPM -publish.

⁠

Grading Rubric: Final Project

Grading Rubric: Final Project