Enterprise UI Development: Testing & Code Quality

Generating Artifacts Using GitHub Actions

Steve Kinney

Steve Kinney

Temporal
Enterprise UI Development: Testing & Code Quality

Check out a free preview of the full Enterprise UI Development: Testing & Code Quality course

The "Generating Artifacts Using GitHub Actions" Lesson is part of the full, Enterprise UI Development: Testing & Code Quality course featured in this preview video. Here's what you'd learn in this lesson:

Steve adds a step to the GitHub action to run a code coverage report.

Preview
Close

Transcript from the "Generating Artifacts Using GitHub Actions" Lesson

[00:00:00]
>> Let's talk about if we wanted to generate as this as part of our build process, and then view this file as the thing to do. And to be clear, you're like, I don't care about code coverage. That's we're just using this as a vehicle. For instance, you might care about the video recordings that Cypress takes, and if a test fails because there's nothing worse.

[00:00:24]
It's not a Cypress thing, this is just what's recently happened to me with Cypress, where you run the test on your machine and everything is great, and your build keeps failing right? So, getting access to the videos or something like that, that a lot of these tools take is super useful.

[00:00:39]
And exactly what we show here works the same way when it comes down to whatever we're doing. The other thing I'll point out and this is slightly different for every different testing tool whether it's NYC or Istanbul or whatever, they're just like ES lint where you can ignore a line, so for instance like our famous line 15.

[00:01:03]
If I had a threshold and you needed to ignore something very specifically, like if there's one only in Safari, which you should not be writing user agent-based code. But I've done bad things in my life, you might choose, because it will never get hit in your CICD process on Ubuntu, right?

[00:01:22]
Cool so, luckily, there are various reasons why you might do what you also like building your static assets, stuff like that. There's all sorts of things you might choose to do here, luckily, the strategy is exactly the same, no matter what you aspire to do, and so there's lots of ways that I could choose to do this.

[00:01:43]
But, We are a little bit ahead of the game here, Basically, I'll show you how to do this and then, yeah, we want it only on the test one in this case. I could have a separate job. This depends again on how you wanna live your life. I could put my dash dash coverage in here with that auto threshold right as I switch branches with example code as I talk who knows how that will go.

[00:02:15]
But let's go with the spiritual just here. --coverage now like do I want the build to fail? Do I want basically, did my test fail? Or did I not have enough coverage? That's a reason why you might break that out into its own job, right? Which is I want the visual representation when I see that red X to immediately know.

[00:02:38]
I think that I have sold myself the argument that this should be a second job even though it's also running the test suite. So, there's the thing that I learned about myself today, Which is weird I don't think that's true in my current code days. And this is a catastrophe from when I was practicing earlier.

[00:03:02]
So, we've got the steps, and so we run npm test, and we're gonna do that with Dash, dash, coverage this time.
>> Double --
>> Double dash,
>> Thank you. That's why you live code with your friends, cool. And that will run it. And then we need the important part.

[00:03:22]
And a lot of these are like you owe it to yourself. I should not do this together with you all because it's not a good use of a generalized time. You owe it to yourself to Google GitHub actions recipes. And just like peruse, do a very cursory overview of the random blog posts because I work on an open source code base, so triaging git issues with labels and having it hit a slack webhook is important to me.

[00:03:54]
And if you work on a private code base, completely worthless to you. So we will not be doing that one together. But you owe it to yourself to at least look at it. Because a lot of these things, the process is like, awareness that you can do it is like half the battle.

[00:04:08]
Cuz you're gonna watch how many characters I type here to get this in place. So there's an action called upload-artifact, and my main goal here is that you just understand that artifacts are a thing. We want to use this one, coding and typing at the same time. We'll call it archive coverage report.

[00:04:34]
Right, if you needed the built asset, then download from the archive API and then push to your internal. I used to have literal Linux boxes in Chicago that I had to push the production access to, and we would take two of them out of the load balancer. Cuz it was a way too late for that to still be the thing, but it's important.

[00:04:59]
So you give it some kinda name in this case. Coverage report. And we say, what path? Again, if this was your build output, it would be the build directory or dist or whatever scientific experiment you're doing. In this case, I know that the folder is coverage. What I'm going to do just to save us a little bit of pain is, since I switched branches and I discarded files.

[00:05:33]
I wanna make sure these tests pass before I push up and get the feedback loop of the build system You know, as it ran twice, does anyone know why? The auto update threshold changed the number which triggered a rebuild cuz the vite config change. Cool, but my tests do pass, so that's important.

[00:06:00]
And then what we'll do real quick is we'll say add a build job for code coverage. And we will go ahead and we will push that up. What I'm going to have you do in the meantime, just cuz it's gonna take a little bit, is, why don't you try it out either if you had, one that you were working on previously or just do it the build step.

[00:06:29]
Do like an npm run build which should be again, and you already have the action there, right? Just add the archive thing there as well, give it a different key and then you'll be able to see that as well. And then you could get the compiled assets and do something with them, right?

[00:06:44]
If you're going to something like Vercel or Netlify, you don't need to do that. But if you needed to do something like okay, and then we will have something else where we push into production, however your system works cool. But try it out with the actual building of the assets with your dist directory and verify that works as well, just to get your hands dirty.

[00:07:01]
And that will be a thing that we do together while I just wait for the build process to run. And then we'll check in on it together in three minutes.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now