Microsoft 365 Community Community Demos, 8 Apr 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Community demo - SharePoint Framework unit tests and code coverage quality gates in Azure DevOps

Description

This community call demo is taken from the SharePoint General Development Special Interest Group recording on 4th of April 2019.

In this video Velin Georgiev (Pramerica) shows how to use SharePoint Framework unit tests and code coverage quality gates in Azure DevOps

Presenter - Velin Georgiev (Pramerica) - @VelinGeorgiev

Full details on the community call from https://developer.microsoft.com/en-us/sharepoint/blogs/sharepoint-dev-community-pnp-general-sp-dev-sig-recording-4th-of-april-2019/

More details on the SharePoint dev community calls from http://aka.ms/sppnp.

A

B

Hello, my name is Elena sharpen developer for a very long time. Today we will talk about another topic related to DevOps pipelines, so beer, your DevOps guy again- and this is about putting quality gates on your DevOps pipelines, DevOps automated pipelines. So now I will just talk. What is a quality gate in a minute, but this is a follow up on previous four demos, so you can find out the previous four demos on those URLs and build on top of that.

B

We want additional knowledge, so there might be terms that, if you're not familiar just go back to those URLs and try to catch up with those basics like one interior, like basics, on Azure, DevOps pipelines, so today ease quality gates, why quality gates and what is quality D. So in the divorce pipeline, when you do continuous integration, you usually grab the grab.

B

Your code from the source control, build it package it and move it to a tenant, and this is your deployment why you would care about quality gates, because it's part of the CLI pipeline, like this, is more to prevent unhealthy code to go through production. So you have different quality gates just to keep your solution healthy. Your features healthy and try to prevent as much as you can bet cold going through the pipeline into production. So there are some nice reasons on the HR DevOps side.

B

Here: scenarios for gates incident management, blah blah blah quality validation, but basically for me, is a developer. Can without knowing the code can ruin the cold row can ruin a feature and that feature my sleep through the production and that, like me, I, usually break my teams code and you know, then then we have more critical issues. So going converter is like you can go there. I can share that URL and you can see all the different scenarios for quality gates, but again, basically, is things that will stop their code.

B

Going through production, then to quality gates could be unit tests as one quality gate. If your solution has unit tests and if unit test fails, that means something is wrong and you want pass that quality gate and another is called coverage which is again, if you don't matter as a certain threshold at the build will fail and someone has to fix it like how we can do that with a SharePoint framework.

B

Is I have a build here already so, and I already have definition prepared for you and today I'll be using it just because we already had a few samples done ingest and it's easy to configure and we know how to do it and we can easily embed it as part of our pipeline.

B

I will show you a few URLs here, because I want again it's not the basics and how to set up just like myself and Paulo & ambu :, o le o o, or have good good content on that and I'll just try to paste that into the chat. So you have all these URLs and and can't all up on that. But now here's a part of my build process.

B

I'm building the solution here, but after I built the solution using gulp bundle ship, then I run unit tests and if a unit has spells you can see my test suits here. If unit test fails, I will fail at out step here and it won't. Let me proceed to the next step. Also, you have all these that's a report on coverage and if you have a certain coverage thresholds and if they're not made just, will automatically exit with error and that will fail the build again.

B

So it's very easy, if you using just and put it as part of your pipeline to do coverage and tests at the same time with only one line of of execution here and in general or when we build quality each. We first start with unit tests and and coverage. So that's why I started with. Maybe in the next episode we can talk about the different quality gates, but how this has been done right, so I'll open my Yama file just to show you how it looks then I can try to break it.

B

Just to show you how this might fail here is my code and my solution and usually in the packages and file. You have all your gist configurations, but the important piece for not everywhere from now for us is how we control the coverage threshold. It is a nice piece of Jason here that you can plug in in your package file under the Jason configuration and you can set some threshold in persons and and here you can see that my branches has to be covered by tests and 100%.

B

My line statements functions if it has to be hundred-person. Everything below that will fail the build, and then we have some unit tests here and now, just right to fail. A unit test, I'll see six and I'll run the built.

B

All by purpose.

B

Okay, so our unit test will fail. Let's imagine that the unit has supposed to be correct and my functionality is supposed to be broken. I don't have time to break my function. I, so I felt the test just to show you how this will work in the pipelines, but the build definition again. As from the previous episodes, you have virtual machine where the the build will run that triggers whenever something goes to the master branch and github.

B

Then, on that virtual machine we install node, we do npm install to bring over all our packages for the sharepoint framework solution.

B

Then we took your bundle and after that we do npm tests when we do npm test, because my configuration is set up here like that, we just show you so when I do tests from my solution, that would simply run the Jeff's testing and it will run all the tests, the coverage and after that, if every successful will package the solution, the Omega solution available as artifacts here and then at the end we can just create a nice little report that can be displayed.

B

I will show you how this works, but basically that's using another NPM package. So if you go here, you see that I'm using just j-unit and that will generate this- is a configuration. I will generate an XML file that asier DevOps pipelines can use and generate a nice report. Now, let's go to the build and there should be a build running with a build definition already and we are at the stage of npm install.

B

But while we're waiting like my previous episode, was about parallel tests, so you can run that in a sequence as I as you have that definition here, for you can run that in a parallel, because so this is how we run it in a sequence. I already show you that, but we can run that also in parallel, because just doesn't care if the package is being bundled or not and it runs independently. It compiles the data, the type script, and here you can see that we can run it in multiple jobs in parallel.

B

So we can build the solution in one in one job and we can run the tests separately in a in another job. So this is handy in case you have like 10,000 tests and they run slowly and you don't want to wait. It's like more to save you some time and the build is running. Actually both of my builds are running. It's. The parallel build is running if the other one is actually paused. So we'll just do the parallel to see what's happening so yeah, so that job didn't succeed.

B

It and it didn't succeed, succeeded because I fail the test like if we go through to that job here, you can see that the piece which we just failed and actually what it's saying is your tests failed, so that tests fail, because you expected value of of six but actually novellas more and you can like a developer, can go and quickly fix that, but also what it failed.

B

It fell the threshold because the threshold on coverage, because my coverage is not Android person- you can see that I, don't have specific classes, are not up to hundred person, so here below it says, Crenshaw not match this you're still true on error, even I. Even that test succeeded.

B

It would still fail because of the threshold, and it is how you can control it. That's pretty much it all. The code is available as a sample in the github in the SharePoint repository I, think I've sent that as URLs, and you can try it and see if that works. For you, that's that, for my.

A

Side this awesome awesome. Thank you villain. Thank you very much for that. One really really useful stuff and good to get this stuff also covered and record it as a video guidance and everything will be released, obviously in the SharePoint dev YouTube channel. So you can access this information and videos and recordings in there.