Explore

CSD 4503 Assignment 3

Lab Workbook : Connecting Local Git Repositories to GitHub with CI/CD for Jest Testing triggered by GIT Actions linked to Commits into the Branch by programming team members.

This lab workbook provides a comprehensive guide for students to connect their local Git repositories to GitHub, facilitating the use of GitHub Actions for continuous integration and deployment.

Students will learn how to create a local Git repository, generate a Personal Access Token (PAT) for secure authentication, and set up a GitHub Actions workflow that automatically runs Jest tests upon code commits.

The workflow will notify users of test results and can be extended to deploy code to a production server upon successful tests.

This hands-on experience will reinforce essential DevOps practices while preparing students for real-world software development scenarios. These skills will give you the employment edge in introductory IT roles especially related to software build / Dev Ops Engineering roles which are in high growth demand as we move to an AI Centric World.

Citations:

[1]

https://ppl-ai-file-upload.s3.amazonaws.com/web/direct-files/6136/fe51837c-ed05-40d6-b12c-31e8fbe5f845/csd4503-Assignment-2-Building-and-Running-JEST-Tests.pdf⁠

⁠

https://docs.google.com/document/d/1YHNvZwhcRfUcHJSuBVk0De4rVAsC2ttG2rjfK62bewc/edit?usp=sharing⁠

⁠

Precursor Lab:

Here is a concise introductory lab to teach students how to set up GitHub Actions.

The lab is divided into two parts:

Creating a new GitHub repository

In that new Repository, you will practice coding GitHub Actions to run Jest tests.

⁠

Lab: Setting Up GitHub Actions for Jest Testing

Objective

Learn to create a GitHub repository.

Set up a simple GitHub Action to automatically run Jest tests upon committing code.

⁠

Part 1: Setting Up a GitHub Repository

Create a GitHub Account (Skip if you already have one).

Visit

GitHub⁠

and sign up.

Create a New Repository

Click the + icon (top-right) > New repository.

Fill in the details:

Repository Name: jest-github-actions-demo

Description: "Demo repository for GitHub Actions and Jest testing."

Public/Private: Choose based on preference.

Check Add a README file.

⁠

Click Create repository.

You need a local git client:

⁠

Clone the Repository Locally (on your hard drive : you write the code in local file system directory: git push to the GITHUB Server)

Start by setting up your GIT CLI Terminal:

⁠

https://coda.io/d/_dSb-bI2heDF/GitHub-Command-Line-Interface-CLI-Lab-Guide_suOv608Z⁠

⁠

Open your terminal or Git Bash.

You must make a local directory to be the house that your code lives in:

Make a local directory called c:\cicdpipeline

⁠

Follow this proceed to get the github repo cloning url:

⁠

In my case, it is:

⁠

https://github.com/ProfessorBrownBear/Demo-repository-for-GitHub-Actions-and-Jest-testing.git⁠

⁠

Use the following commands to clone the repository:⁠

⁠

git clone https://github.com/<your-username>/jest-github-actions-demo.git

cd jest-github-actions-demo

So in my case: This is what you run at the command line (put your details in!)

git clone https://github.com/ProfessorBrownBear/Demo-repository-for-GitHub-Actions-and-Jest-testing.git

⁠

Initialize the Repository for Jest

Set up a basic Node.js project:

npm init -y

npm install jest --save-dev

Add a sample Jest test: Create a test folder with a file sum.test.js:

// test/sum.test.js

const sum = (a, b) => a + b;

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

expect(sum(1, 2)).toBe(3);

});

Add a test script in package.json:

"scripts": {

"test": "jest"

}

Commit and Push Changes

git add .

git commit -m "Initial commit with Jest setup"

git push origin main

⁠

Part 1: More complete details:

Let’s expand the explanation to ensure clarity regarding the complete directory structure and necessary configurations.

⁠

Full Directory Structure

When working on this lab, your project should look like this after setting up the repository and Jest:

cicdpipeline/ NOTE: This is the project ROOT: this is where I did the git clone cmd

├── .github/

│ └── workflows/

│ └── jest-tests.yml # GitHub Actions workflow file

├── node_modules/ # Installed npm packages (created after running npm install)

├── test/

│ └── sum.test.js # Jest test file

├── package.json # Project configuration: where this file is the project ROOT

├── package-lock.json # Automatically generated by npm

└── README.md # Initial README added when creating the repository

⁠

The project root is the top-level directory of your repository where the package.json file is located.

This directory is where you execute commands like npm init or git add. All other files and folders (e.g., test/ and .github/) are organized relative to this root directory.

For your setup:

Project Root Directory: Based on your example, it should be the Demo-repository-for-GitHub-Actions-and-Jest-testing folder.

Directory Structure: Inside the project root directory, organize your files as follows:

Demo-repository-for-GitHub-Actions-and-Jest-testing/

├── .git/ # (already present; contains Git version control metadata)

├── .github/ # Contains workflows for GitHub Actions

│ └── workflows/

│ └── jest-tests.yml

├── node_modules/ # Automatically created after running npm install

├── test/ # This is where your test files go

│ └── sum.test.js

├── package.json # Generated by npm init -y

├── package-lock.json # Generated automatically by npm install

└── README.md # Initial README file

Key Placement:

The test/ directory should be a direct subdirectory of the project root (Demo-repository-for-GitHub-Actions-and-Jest-testing).

The .github/workflows/ folder should also be in the project root, with jest-tests.yml inside it.

This structure ensures that Jest can locate the test files (test/sum.test.js) when you run npm test, and that GitHub Actions will detect the workflow configuration (.github/workflows/jest-tests.yml) to execute automated tests on the repository.

Detailed Steps to Ensure Everything Works

1. Initialize the Project

Run the following commands to create and prepare the project:

npm init -y

This will generate a package.json file. This file is required for managing project dependencies and scripts.

2. Install Jest

Install Jest as a development dependency:

npm install jest --save-dev

After this step, your package.json should automatically include the dependency under "devDependencies":

"devDependencies": {

"jest": "^29.x.x" // Version may vary

}

⁠

Set Up the Test Script

Open the package.json file and add the following line to the "scripts" section:

"scripts": {

"test": "jest"

}

This script allows you to run tests using the npm test command.

4. Create the test Directory

In the project root (where package.json is), create a folder named test.

Inside it, add a file named sum.test.js with the following code:

// test/sum.test.js

const sum = (a, b) => a + b;

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

expect(sum(1, 2)).toBe(3);

});

⁠

Verifying the Local Test Setup

Run the tests locally to confirm everything works before committing:

npm test

You should see output similar to:

PASS test/sum.test.js

✓ adds 1 + 2 to equal 3 (Xms)

If Jest is not recognized, ensure it is installed and that the node_modules folder exists.

⁠

Setting Up GitHub Actions

Once you’ve confirmed that tests run locally, proceed with creating the GitHub Actions workflow.

1. Directory Structure for GitHub Actions

Navigate to .github/workflows/ (you’ll need to create these folders manually if they don’t exist).

Inside workflows/, create a file named jest-tests.yml.

yml = Yet Another Markup Language: an xml format language to configure git actions

The .github folder should be placed in the root directory of your project. This directory is the same location where your package.json file resides, and it serves as the central place for GitHub-related configurations like workflows.

Correct Placement of .github

Your project structure should look like this:

Demo-repository-for-GitHub-Actions-and-Jest-testing/

├── .github/ # GitHub-specific configurations go here

│ └── workflows/ # Contains workflow YAML files

│ └── jest-tests.yml # Workflow to automate Jest tests

├── node_modules/ # Installed npm packages (created by npm install)

├── test/ # Contains Jest test files

│ └── sum.test.js # Sample Jest test

├── package.json # Project configuration file

├── package-lock.json # Auto-generated file by npm

└── README.md # Project README file

Steps to Create the .github Directory

⁠

Navigate to your project root:

cd path/to/Demo-repository-for-GitHub-Actions-and-Jest-testing

Create the .github and workflows directories:

mkdir -p .github/workflows

Add your workflow file (jest-tests.yml) inside .github/workflows/:

Use a text editor or IDE to create the file:

nano .github/workflows/jest-tests.yml

⁠

Paste the workflow YAML content.

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.