/web-site-nodejs-04-ado-tests

Primary LanguageJavaScript

A tiny well-tested Azure DevOps build pipeline

Accompanies 2 associated blog post on Katie Kodes:

  1. "Failing Azure DevOps Pipeline builds if unit tests fail"
  2. "Deploying a built webapp onto Azure App Service with ADO Release Pipelines"

Prerequisites

  1. Please work your way through prerequisite exercises 1, 2, and 3.
    • At the very least, read articles 1 and 2, and do exercise 3.
  2. Have an account in Azure DevOps.

No need to install anything onto your computer -- we'll do everything in this article through a web browser.

How the pipeline will behave

The YAML-formatted file "/cicd/my-azure-build-pipeline.yml" (from the sample codebase you just copied) forces any ADO Pipeline running it to walk through all of the same sequential steps as mentioned in the previous article, plus a few additional ones:

  1. (Execute only on edits to "main" branch, same as before.)
  2. (Borrow a computer from Microsoft, same as before.)
  3. (Install Node.js and NPM, same as before.)
  4. (Install specific Node modules, same as before.)
  5. New: Run unit tests. It does this by executing a "npm run test" command on the agent's operating system.
  6. New: Publish results of unit test execution to the ADO project's "Test Plans" -> "Runs" dashboard.
  7. Conditional only if tests PASS:
    • (Build /dist/, same as before.)
    • (Copy /dist/ to an "artifact staging directory," same as before.)
    • (Copy the "artifact staging directory" contents to a longer-lived "Artifact" named "MyBuiltWebsite," same as before.)

Again, after these steps finish executing, it's safe for Azure DevOps to let the agent (the Linux computer we borrowed from Microsoft) self-destruct.

Running a successful build

Follow these steps from the previous article, with a few changes:

  1. "Importing my sample codebase into ADO Repos, but..."
    • Only instead of importing a copy of ...03-ado-build.git...
    • Import a copy of: 
      https://github.com/kkgthb/web-site-nodejs-04-ado-tests.git
  2. "Telling Azure Pipelines to build when code changes" -> "Forcing ADO to use our YAML pipeline code."
  3. "Running the pipeline by editing code."
    • Please only edit README.md for now.
  4. "Validating the pipeline ran correctly."
    • If you look at the job logs, you'll see that there were more steps involved to execute the pipeline.
    • Logs from the pipeline step that runs unit tests will have output that looks somewhat like this "passing test" output from earlier on your own computer.
    • In the job summary's 4th column, under "Tests and coverage," there should also be a clickable link that says "100% passed." If you click it, you'll see a green donut chart showing that 2 of 2 tests passed.

Also follow these steps:

  1. In the left-hand navigation of Azure DevOps, click on "Test Plans."
  2. Beneath that, click "Runs." (Note: this particular pages's dedicated URL will be something like https://dev.azure.com/YOUR-ADO-ORG-NAME/YOUR-ADO-PROJECT-NAME/_testManagement/runs.)
  3. Under "Recent test runs" to the right, you should see a test in "completed" state.
  4. Double-click it to see a lovely dashboard with green donut and bar charts indicating that 2 of 2 tests passed.
  5. Click the "Test results tab to see each of the 2 tests listed separately (they're also double-clickable, though in this case there's not really anything in there that adds useful detail).

Running a failed build

Repeat the steps from the previous article's "Running the pipeline by editing code" section. Only instead of editing a README.md file...

Edit the contents of line 12 of the file at /src/__tests__/my-first-test.js and replace the word "World" with the word "Goodbye" so that instead of looking for "Hello World!" your test is looking for "Hello Goodbye!".

Then repeat the steps from the previous article's "Validating the pipeline ran correctly" section. Only this time:

  1. Under "Related," the summary will say "0 published" and it won't be hyperlinked.
    • This is good -- we wanted to fail the build if our unit tests failed! Who wants to risk building bad code and leaving it lying it around where it might accidentally get deployed into production? Not me.
  2. Logs from the pipeline step that runs unit tests will have output that looks somewhat like this "failing test" output from earlier on your own computer.
  3. In the job summary's 4th column, under "Tests and coverage," there should also be a clickable link that says "0% passed." If you click it, you'll see a red donut chart showing that 0 tests passed and 2 failed.

Also follow these steps:

  1. In the left-hand navigation of Azure DevOps, click on "Test Plans."
  2. Beneath that, click "Runs." (Note: this particular pages's dedicated URL will be something like https://dev.azure.com/YOUR-ADO-ORG-NAME/YOUR-ADO-PROJECT-NAME/_testManagement/runs.)
  3. Under "Recent test runs" to the right, you should see a test in "completed" state.
  4. Double-click it to see a lovely dashboard with red donut and bar charts indicating that 2 of 2 tests failed.
  5. Click the "Test results tab to see each of the 2 tests listed separately (they're also double-clickable, though in this case there's not really anything in there that adds useful detail).

Extra credit -- test-driven development

Repeat the steps from the previous article's "Running the pipeline by editing code" section. Only instead of editing a README.md file...

Edit the contents of line 6 of the file at /src/web/server.js and replace the word "World" with the word "Goodbye" to match the unit test you updated earlier.

Then repeat the steps from the previous article's "Validating the pipeline ran correctly" section. Once the pipeline finishesrunning, congratulate yourself that once again, your source code successfully builds into a webserver runtime "artifact" and that all your ADO Test Runs result dashboards are colored green.

Deploying this codebase to live websites

See "Deploying a built webapp onto Azure App Service with ADO Release Pipelines" for instructions on how to add an Azure DevOps "classic" "release" Pipeline to your copy of this codebase, so that you can see "Hello World" on a real web site hosted in Azure's cloud.

Credits