Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CI for Node #2

Merged
merged 6 commits into from
May 7, 2020
Merged

CI for Node #2

merged 6 commits into from
May 7, 2020

Conversation

toddocon
Copy link
Owner

@toddocon toddocon commented May 7, 2020

No description provided.

@github-learning-lab
Copy link
Contributor

Templated workflow success!

Great job adding the templated workflow. Adding that file to this branch is enough for GitHub Actions to begin running CI on your repository. This takes a couple of minutes, so let's take this opportunity to learn about some of the components of the workflow file you just added. We'll dive deeper into some of the key elements of this file in future steps of the course.

Step 2: Run a templated workflow

I'll respond when GitHub Actions finishes running the workflow. You can follow along in the Actions tab, or by clicking Details on the pending status below.


Actions workflow not running? Click here

When a GitHub Actions workflow is running, you should see some checks in progress, like the screenshot below.

checks in progress in a merge box

If the checks don't appear or if the checks are stuck in progress, there's a few things you can do to try and trigger them:

  • Refresh the page, it's possible the workflow ran and the page just hasn't been updated with that change
  • Try making a commit on this branch. Our workflow is triggered with a push event, and committing to this branch will result in a new push
  • Edit the workflow file on GitHub and ensure there are no red lines indicating a syntax problem

@@ -0,0 +1,29 @@
# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

'on:'

The on: field is what tells GitHub Actions when to run. In this case, we're running the workflow anytime there's a push.

To learn more about the fields discussed here, see:


on:
push:
branches: [ master ]
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Jobs

The jobs: block defines the core component of an Actions workflow. Workflows are made of jobs, and our template workflow defines a single job with the identifier build.

Every job also needs a specific host machine on which to run, the runs-on: field is how we specify it. The template workflow is running the build job in the latest version of Ubuntu, a Linux-based operating system.

To learn more about the fields discussed here, see:


runs-on: ubuntu-latest

strategy:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Vocabulary

Workflows, steps, actions, and jobs

Let's dig into the vocabulary of GitHub Actions.

  • Workflow: A workflow is a unit of automation from start to finish, including the definition of what triggers the automation, what environment or other aspects should be taken account during the automation, and what should happen as a result of the trigger.
  • Step: A step represents one effect of the automation. A step could be defined as a GitHub Action, or another unit, like printing something to the console.
  • Action: A GitHub Action is a piece of automation written in a way that is compatible with workflows. Actions can be written by GitHub, by the open source community, or you can write them yourself!
  • Job: A job is a section of the workflow, and is made up of one or more steps. In this section of our workflow, the template defines the steps that make up the build job.

What is checkout?

The power of GitHub Actions lies in access to actions written by the ✨ GitHub community. Here, we'll use two Actions officially written and supported by GitHub:

  • actions/checkout@v1 is used to ensure our virtual machine has a copy of our codebase. The checked out code will be used to run tests against.
  • actions/setup-node@v1 is used to set up proper versions of Node.js since we'll be performing testing against multiple versions.

To learn more about the fields discussed here, see:

steps:
- uses: actions/checkout@v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

'run:'

In addition to running pre-built actions, the workflow can also execute commands, just as you would if you had direct access to the virtual machine. In this portion of the template workflow, we run some common commands relevant to Node.js projects, like npm install to install dependencies and npm test to run the chosen testing framework.

To learn more about the fields discussed here, see:


If you don't see an explanation of your CI logs below when the workflow has executed, refresh this page.

@github-learning-lab
Copy link
Contributor

Running - and failing - workflow

The workflow ran! But it failed 😭. But, that's OK. Every time CI fails, it's an opportunity to learn from what's causing it. By running CI with GitHub Actions, we have access to the logs for the attempted build. These are found:

  • In the Actions tab
  • In the merge box for this pull request, by clicking on "Details".

If you navigate over to the build logs, you may notice that the error is "No tests found".

screenshot of build log showing a missing __test__ directory

Learning how to read build logs and isolate the cause of the problem is an art on its own. We'll try and cover some of the basics here. In our case, the source of the error is the npm test command. The npm test command looks for a testing framework. We want to use Jest, as we mentioned earlier. Jest requires unit tests in a directory named __test__. A __test__ directory doesn't exist on this branch.

Step 3: Add your first test

Not to worry, I've got you covered! Navigate to the open pull request titled Add Jest tests and merge it into this branch. That'll get us the test files we need. I'll respond when you merge the Add Jest tests pull request into this branch.

⌨️ Activity: Add your first test script for CI to pick up

  1. Navigate to the open pull request titled Add Jest tests
  2. Merge the pull request

@github-learning-lab
Copy link
Contributor

Waiting on tests

Great! Now that the testing framework is properly configured, we should get a response from it soon. This time, you'll practice reading the logs on your own. Just like before, you can follow along as GitHub Actions runs your job by going to the Actions tab or by clicking on "Details" in the merge box below.

When the tests finish, you'll see a red X ❌ or a green check mark ✔️ in the merge box. At that point, you'll have access to logs for the build job and its associated steps.

Step 4: Read an Actions log

By looking at the logs, can you identify which tests failed? To find it, go to one of the failed builds and scrolling through the log. Look for a section that lists all the unit tests. We're looking for the name of the test with an "x".

screenshot of a sample build log with the names of the tests blurred out

⌨️ Activity: Tell the bot which test is failing so we can fix it

  1. Navigate to the log output
  2. Identify a name of a failing test
  3. Comment the name of the failing test here

I'll respond when you enter the name of at least one failing test. You can either copy and paste that portion of the log directly, or type the name of the test as a comment.

@github-learning-lab github-learning-lab bot mentioned this pull request May 7, 2020
@toddocon
Copy link
Owner Author

toddocon commented May 7, 2020

Initializes with two players

@github-learning-lab
Copy link
Contributor

Reading failed logs

One of the failing tests is: Initializes with two players. If you dig deeper into the logs, you may notice these results in particular:

  ● Game › Game › Initializes with two players

    expect(received).toBe(expected) // Object.is equality

    Expected: "Nate"
    Received: "Bananas"

      12 |     it('Initializes with two players', async () => {
      13 |       expect(game.p1).toBe('Salem')
    > 14 |       expect(game.p2).toBe('Nate')
         |                       ^
      15 |     })
      16 | 
      17 |     it('Initializes with an empty board', async () => {

      at Object.toBe (__test__/game.test.js:14:23)

This tells us that a unit test has been written that names the two players Salem and Nate, and then checks if that name sticks. However, we get 🍌 Bananas instead of Nate! How did this happen?

To find out, it may help to know it's common practice to name test files the same as the code file they are testing, but with a .test.js extension. Therefore, we can assume that the test result from game.test.js is caused by a problem in game.js. I'll point it out below.

Make the changes suggested below. I'll respond when the workflow runs.


Actions workflow not running? Click here

When a GitHub Actions workflow is running, you should see some checks in progress, like the screenshot below.

checks in progress in a merge box

If the checks don't appear or if the checks are stuck in progress, there's a few things you can do to try and trigger them:

  • Refresh the page, it's possible the workflow ran and the page just hasn't been updated with that change
  • Try making a commit on this branch. Our workflow is triggered with a push event, and committing to this branch will result in a new push
  • Edit the workflow file on GitHub and ensure there are no red lines indicating a syntax problem

src/game.js Outdated Show resolved Hide resolved
Co-authored-by: github-learning-lab[bot] <37936606+github-learning-lab[bot]@users.noreply.github.com>
Copy link
Contributor

@github-learning-lab github-learning-lab bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great job! Go ahead and merge this pull request so your changes are automatically shared with anyone that contributes to this project.

I'll respond when you merge this pull request.

@toddocon toddocon merged commit ba7185d into master May 7, 2020
@github-learning-lab
Copy link
Contributor

Let's go to the next step.

@toddocon toddocon deleted the toddocon-patch-1 branch May 7, 2020 14:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants