Reducing SharePoint Framework Code Smells: 2 – Setting up a sample for unit testing

July 29, 2019July 28, 2019 Marky Roden React, SPFx, SPFx PnP PnP, PSC, SharePoint, SonarQube, SPFx

This is a series on how to set up SonarQube as a Quality Gate in your SharePoint Framework development process. The end goal is to add SonarQube to your build and release process through DevOps. These articles will explain:

How to set up a sample SonarQube server in Azure
Setting up a unit test sample locally
How to run a sonar-scanner review manually
How to integrate the code review into your Azure DevOps build and release process.

It is apparently going to take more blog posts than I expected. But I like to spread these things out – easier to maintain and easier to find what people are looking for.

Introduction

In the previous article we saw how to create a sample SonarQube server in Azure. In this article we will look at how to manually run a SonarQube scan linked to the server we created. The results might be smelly.

In this example we are going to use the SharePoint PnP example for creating unit test with React in SFPx

Setting up the repository locally

Create a new folder for the repo locally and then clone the repository through the terminal with “git clone https://github.com/SharePoint/sp-dev-fx-webparts”. We have to take the whole repo but are not going to use the whole of it – just the react unit testing section.

Then once that is complete navigate the ./samples/react-jest-testing folder

run an npm install and we are ready to go.

Initial npm test

Immediately after the install you can run and npm test and see how the sample code hang up under testing. You will get one intentional fail and some code which is not convered by tests. This is to be expected.

The reason we add unit tests to a project is ultimately to improve the quality of the code. This leads to reduction in maintenance costs, lifts the confidence of the development team and allows for continuous integration builds to identify where breaking code has been introduced into a build process within a team.

This project is a great place to start to learn how to unit test within React and the SharePoint Framework.

What we want to be able to do ultimately is collect all of this information on the SonarQube server. We will get to that 🙂

In the next article we will look at sonar scanner and how we hook that up to the SonarQube server.

Correcting SPFx gulp –ship Uglify Errors: Unexpected token: punc (()

June 12, 2019 Marky Roden O365, Office 365, SharePoint, SharePoint Framework, SPFx PSC, SharePoint, SharePoint Framework, SPFx

We came across the following problem when trying to execute a gulp --ship on out SPFx development

[15:03:34] Starting subtask 'webpack'... [15:03:49] Error - [webpack] 'dist': list-view-demo-webpart-web-part.js from UglifyJs Unexpected token: punc (() [list-view-demo-webpart-web-part.js:962,7]

In researching this issue it turns out that this issue stems from a problem with the webpack uglify plugin (uglify-webpack-plugin) which historically does not work with ES6 code.

From what I read, it seems like the current SPFx 1.8 does use the correct version of webpack and the uglify plugin to avoid this issue but it was still coming up.

We solved the issue by implementing a suggestion to a related issue on github

https://github.com/SharePoint/sp-dev-docs/issues/2782

The key was presented in one of the responses to the issue

https://github.com/SharePoint/sp-dev-docs/issues/2782#issuecomment-475519680

By replacing the uglify plugin with the terser plugin for webpack, the issue was resolved and we were able to Build and deploy.

Speaking at SharePointFest Chicago 2018

November 13, 2018January 11, 2019 Marky Roden SharePoint SharePoint, SharePointFest, SPFx

I am very lucky enough to have been accepted to speak at SharePointFest Chicago for the third year running now. The subject is Automated Build and deploy of SharePoint Framework webparts.

One of the really fascinating things about working in a modern large development team is the outstanding benefits for automated testing, automated build, and automated deployment. Even for something which might not on the surface seem to be a “big deal” such as SPFx webpart development, has many advantages to be gained by using a professional automated development environment.

Since I submitted and was accepted to speak, VSTS has been renamed to Azure DevOps, so this might be difficult to pull off as a topic – but i think we will be ok 😉

SharePointFest is always alot of fun with a good crowd of speakers and attendees. I am excited to attend and excited to speak 🙂

DEV304 – Using VSTS to automate build and deployment tasks for SharePoint Framework webparts

Working on your own and building SharePoint Framework webparts is one thing, but when you have to work in a team on a larger project, the team approach to development has to be more structured and automated.

Modern team web development practices demand the use of unit tests, load testing and automated build and deploy methodologies. Why should developing for the Sharepoint framework be any different?

In this presentation Mark will highlight the advantages to using VSTS to create and manage and continuous build and deploy process for working with the Sharepoint Framework. Come and see how modern team development techniques can be applied to SPFx.

S106A Fri 2:20 PM – 3:30 pm

SharePoint now accessible via the Microsoft Graph beta

October 3, 2016October 3, 2016 Marky Roden Microsoft Graph, Office 365, SharePoint graph, O365, Office 365, PSC, SharePoint

Last week at Ignite it was announced that finally Microsoft was bringing O365 SharePoint access to the Microsoft graph as an API. This is a huge deal for those of us who want to use O365 as a platform and develop engaging applications for customers. In my case for Office Add-ins this is great because it reduced the number of OAuth hoops I have to jump through and manage to get the data I want.

Here is a link to the documentation: Working with SharePoint sites in Microsoft Graph and a quick example.

NOTE: this is beta and will change – this is purely a demonstration of what is possible today (Oct 2016) and not to be used as future reference.

Example

Using the graph explorer demo I am able to bring up content from my default SharePoint site very easily

https://graph.microsoft.io/en-us/graph-explorer#

Here is my copper site within my SharePoint tenant