Changing your SharePoint online root site to a communication site

In this article we will look at how to change the root site of your SharePoint online tenant.

Introduction

By default your SharePoint Online default site is unlikely to be the site you want users to go to.

Invoke-SPOSiteSwap

Using the Invoke-SPOSiteSwap command inside of the SharePoint Online Management Shell we are able ot change the root site.

Download and install the management shell

And then use your version of the following script to change your tenant root site. You will have to have admin access to the tenant to be able to do this

$targetSite = “https://yourTenant.sharepoint.com”
$soureSite = “https://yourTenant.sharepoint.com/sites/yourSite”
$archiveSite = “https://yourTenant.sharepoint.com/sites/archivedRoot”
Connect-SPOService -Url https://yourTenant-admin.sharepoint.com
Invoke-SPOSiteSwap -SourceUrl $soureSite -TargetUrl $targetSite -ArchiveUrl $archiveSite

Basic Introduction: Automatic Testing of SharePoint online using Cypress.io

In this article we will look at the Automated Testing tool Cypress.io and look at the basic requirements for being able to set it up to test against a SharePoint online list. There are some interesting nuances to look at but the basic pronciples hold true.

Introduction

Cypress.io is a front end automated testing tool which has been around for a couple of years but has received significant interest from the open source community. It is an electron based testing tool with significant advantages over using the long term front end testing defacto tool Selenium. There are some disadvantages as well (being Chrome only right now) but as modern web browers get closer and closer to parity, that is less of an issue than say 5 years ago. After talking to my react development friends at the Northwest JavaScript meetup I resolved to try and make it work.

There are other recommendations for automated testing including a great article from Elio Struyf which uses a combination of puppeteer and jest – but again I wanted to try Cypress.io. It was challenging !

Update: Sheer coincidence, Elio also published an article on Cypress today!

Authentication and SharePoint online

The Cypress.io engine is based on electron – which means it runs in node. This is very advantageous, in that it has the ability to use open source npm libraries as part of its run time. In this case it allowed me to use the node-sp-auth to be able to generate the necessary headers to access a SharePoint Online site as an authenticated user. For the sake of this example I had the username and password in the config – you probably want to look at encrypting that or soemthing 😉

Cypress tasks

Cypress.io has the ability to create custom tasks which will execute some node code. So I created a custom login capability using the node-sp-auth library. This code should be added to the index.js file in the root of the cypress code.

const spauth = require("node-sp-auth");

let getLogin = async () => {
  const username = "me@mydomain.org";
  const password = "********";
  const pageUrl = "https://mydomain.sharepoint.com/sites/HelloWorld";

  // Connect to SharePoint
  const data = await spauth.getAuth(pageUrl, {
    username: username,
    password: password
  });
  return data;
};

module.exports = (on, config) => {
  // `on` is used to hook into various events Cypress emits
  // `config` is the resolved Cypress config
  on("task", {
    // deconstruct the individual properties
    getLogin() {
      return getLogin();
    }
  });
};

 

Running the test

This code can then be referenced in the Cypress.io code to create the login headers necessary for authentication, before each of the tests are run. The waits are in here because I have to make sure the DOM is ready. It is a little clunky and I need to figure out how to do it better………

describe("Sample SharePoint List test", function() {
  beforeEach(() => {
    cy.task("getLogin").then(token => {
      cy.visit({
        method: "GET",
        url: "https://mydomain.sharepoint.com/sites/HelloWorld/Lists/CyList",
        headers: token.headers
      });
    });

    cy.wait(2000)
      .get(".od-TopBar-item")
      .wait(1000)
      .find('[name="New"]')
      .wait(1000)
      .click();
  });

  it("Should have a title of Hello World", function() {
    cy.title().should("contain", "Hello World");
  });

  it("Should have a validated Title value", function() {
    cy.get('[aria-label="New item form panel"]')
      .find(".od-TopBar-item")
      .wait(1000)
      .find('[name = "Save"]')
      .wait(1000)
      .click();
    cy.get('[data-automation-id="error-message"]').should(
      "contain",
      "You can't leave this blank."
    );
    cy.get('[aria-label="New item form panel"]')
      .find(".od-TopBar-item")
      .find('[name = "Cancel"]')
      .click();
  });

  it("Should submit the form with a minimum Title field", function() {
    cy.viewport(550, 750);
    cy.get(".ReactFieldEditor")
      .eq(0)
      .type("sample text");
    cy.get('[aria-label="New item form panel"]')
      .find(".od-TopBar-item")
      .find('[name = "Save"]')
      .click();
  });
});

Here’s how it looks

Running the test – we can see that cypress runs through each of the tests, waiting for the DOM to be ready…..(see below) and ultimately automated a Funcational test of the list. One of the REALLY cool things about Cypress is the ability to move back through the test and see what was executed at the time of the test. This allows the web developer to see the DOM state and everything, should their test fail!!

 

What I found about SharePoint

The modern SharePoint Framework, and more specifically the React JavaScript library on which it is based, uses Web Components to render the DOM. What this means is that the webpage itself renders aynchronously and at times under no control of my own, will re-renter itself as the page decides. This means that during the automated test, I came across multiple instances of where Cypress failed because the DOM elements were no longer attached. This is going to need some work on my part to figure this out……

Conclusion

You can use Cypress.io to functional test SharePoint online and SPFx – but there is clearly a lot more to learn 🙂

 

FIXED: SPFx HelloWorld build Errors preventing gulp build –ship: Browserslist: caniuse-lite is outdated

I recently came across the following erring during a HelloWorld build process – this was preventing my build from being able to ship.

 

PS C:\REpo\SPFest2019-1> gulp bundle –ship
Build target: SHIP
[17:27:17] Using gulpfile C:\REpo\SPFest2019-1\gulpfile.js
[17:27:17] Starting gulp
[17:27:17] Starting ‘bundle’…
[17:27:17] Starting subtask ‘configure-sp-build-rig’…
[17:27:17] Finished subtask ‘configure-sp-build-rig’ after 80 ms
[17:27:17] Starting subtask ‘pre-copy’…
[17:27:18] Finished subtask ‘pre-copy’ after 98 ms
[17:27:18] Starting subtask ‘copy-static-assets’…
[17:27:18] Starting subtask ‘sass’…
[17:27:18] Finished subtask ‘copy-static-assets’ after 203 ms
Browserslist: caniuse-lite is outdated. Please run next command `npm update`
[17:27:18] Finished subtask ‘sass’ after 416 ms
[17:27:18] Starting subtask ‘tslint’…
[17:27:19] [tslint] tslint version: 5.12.1
[17:27:19] Starting subtask ‘tsc’…
[17:27:19] [tsc] typescript version: 2.9.2
[17:27:24] Finished subtask ‘tsc’ after 4.54 s
[17:27:24] Finished subtask ‘tslint’ after 6.5 s
[17:27:24] Starting subtask ‘post-copy’…
[17:27:24] Finished subtask ‘post-copy’ after 318 μs
[17:27:24] Starting subtask ‘collectLocalizedResources’…
[17:27:24] Finished subtask ‘collectLocalizedResources’ after 5.15 ms
[17:27:25] Starting subtask ‘configure-webpack’…
[17:27:26] Finished subtask ‘configure-webpack’ after 1.43 s
[17:27:30] Finished subtask ‘webpack’ after 3.78 s
[17:27:30] Starting subtask ‘configure-webpack-external-bundling’…
[17:27:30] Finished subtask ‘configure-webpack-external-bundling’ after 998 μs
[17:27:30] Finished subtask ‘copy-assets’ after 50 ms
[17:27:30] Starting subtask ‘write-manifests’…
[17:27:31] Finished subtask ‘write-manifests’ after 1.51 s
[17:27:31] Finished ‘bundle’ after 14 s
[17:27:32] ==================[ Finished ]==================
[17:27:32] Project sp-fest-2019-1 version:0.0.1
[17:27:32] Build tools version:3.9.26
[17:27:32] Node version:v8.11.4
[17:27:32] Total duration:19 s
The build failed because a task wrote output to stderr.

Solution

The solution is not immediately obvious – because the use of the caniuse-lite browserslist is not part of my package.json. It is buried somewhere deep inside of the SPFx code provided by Yeoman.

The solution sof npm update did not work.

After a little googleing the following solved the issue – and taught me about npm update 🙂

npm update –depth 10 caniuse-lite browserslist

PS C:\REpo\SPFest2019-1> npm update –depth 10 caniuse-lite browserslist
npm WARN @uifabric/utilities@6.45.1 requires a peer of @types/react-dom@>=16.3.0 <17.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN ajv-keywords@3.4.0 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”win32″,”arch”:”x64″})

+ browserslist@4.8.2
+ caniuse-lite@1.0.30001015
added 2 packages and updated 3 packages in 29.744s

and that solved the issue.

 

PSC and Nintex Webinar Series – Mapping Business Processes with Promapp

Join us for a webinar on Nov 14, 2019 at 10:30 AM CST.

Does your organization struggle in knowing how your business processes work? Would you benefit from having a library of mapped business processes in order to train employees and find places where automation can make you more efficient? Come see how Promapp can help!

PSC Group’s Jeff Crowell joins Nintex Technical Evangelist Jesse McHargue to provide a quick 30-minute overview and demo of Promapp.

For more information and to Register for the event, click here:
(https://www.psclistens.com/about-psc/news-and-events/webinar-nov-14-mapping-business-processes-with-promapp/)

After registering, you will receive a confirmation email containing information about joining the webinar.

Certified: Advanced UIPath Developer

I am happy to announce that I am now a certified advanced UIPath developer.

For some time now PSC has been working with our clients on software robots and specifically UIPath. Software robots are the hot new technology which is enabling many companies to reduce their costs and increase the accuracy of their repeatable, manual processes.

I am really excited about the possibilities for delivering UIPath to clients and being certified demonstrates our expertise and commitment to the platform.

 

 

 

SharePoint Framework workbench port (5432), is the same as default PostgreSQL db listener (5432)

As we discovered by mistake, if you are one of those people lucky enough to work in multiple technologies, sometimes you can end up hurting yourself and spending far too long trying to figure out why.

It turns out that the default PostgreSQL database port is 5432 – the same as the SPFx workbench.

Installing PostgreSQL causes it to run automatically on computer start. So there is already something listening on port 5432 and your workbench appears to not work as you wanted it to 😦

Anyway you have a few choices to get your workbench to work:

 

 

Office 365 CLI change affecting SharePoint online Build and Deploy

We saw this week that our build and deploy process for SharePoint Framework was breaking. We tracked it down to a change in the Office 365 CLI which was released recently.

Our previous step of logging into O365 so that we can deploy out package looked like this

#o365 spo login https://blahblah.sharepoint.com

The breaking change to the CLI was that they simplified the login process (makes sense)

https://github.com/pnp/office365-cli/issues/889

And now the command works without the spo precursor

#o365 login https://blahblah.sharepoint.com

 

 

Reducing SharePoint Framework Code Smells: 5 – Connecting Azure DevOps to SonarQube

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:

  1. How to set up a sample SonarQube server in Azure
  2. Setting up a unit test sample locally
  3. How to set up sonar-scanner and connect it to SonarQube
  4. Configuring Sonar Scanner to test only our code

Introduction

In the previous article we saw how to set up a sonar scanner to only scan the code we actually wanted to be tested. In this final article in  the series we will look at adding Sonarqube to Azure DevOps and then how to hook it into our Build process.

Adding SonarQube to Azure DevOps

The documentation for SonarQube and Azure DevOps can be found here

https://docs.sonarqube.org/latest/analysis/scan/sonarscanner-for-azure-devops/

Adding SonarQube to Azure DevOps can be done through the marketplace.

Once added by an administrator you can then add a “Service Connection” for Sonar Qube through the administrative section

Once added then Sonar Scanner and Sonarqube call can be added to your build process.

Adding Sonar Scanner to your build process

When adding a new step to the build process, searching for sonar brings up all the new capabilities and options.

We need to add Prep, run and publish to the build process.

When adding the prep analysis stage we are basically running sonar scanner. In the advanced box you would add all the configurations we talked about in the previous article (from the CLI)

  • sonar-scanner.bat
    -D”sonar.projectKey=IceCreamShop”
    -D”sonar.host.url=http://xominosonarqube.azurewebsites.net”
    -D”sonar.login=dba68d82c931efe82e8692c9a25bc7c31736b286″
    -D”sonar.sources=src/webparts/iceCreamShop”
    -D”sonar.tests=src/webparts/iceCreamShop”
    -D”sonar.typescript.lcov.reportPaths=jest/lcov.info”
    -D”sonar.exclusions=src/webparts/iceCreamShop/test”
    -D”sonar.test.inclusions=**test.ts,**test.tsx”

although in this case we are not passing them into the CLI the -D is unnecessary.

The run code analysis step actually runs the sonar-scanner, and the publish quality gate review step allows the response from SonarQube to be understood and processed as part o fhte build process.

For more information on the plugin you can find it here

https://docs.sonarqube.org/latest/analysis/scan/sonarscanner-for-azure-devops/

  • Prepare Analysis Configuration task, to configure all the required settings before executing the build.
    • This task is mandatory.
    • In case of .NET solutions or Java projects, it helps to integrate seamlessly with MSBuild, Maven and Gradle tasks.
  • Run Code Analysis task, to actually execute the analysis of the source code.
    • This task is not required for Maven or Gradle projects, because scanner will be run as part of the Maven/Gradle build.
  • Publish Quality Gate Result task, to display the Quality Gate status in the build summary and give you a sense of whether the application is ready for production “quality-wise”.
    • This tasks is optional.
    • It can significantly increase the overall build time because it will poll SonarQube until the analysis is complete. Omitting this task will not affect the analysis results on SonarQube – it simply means the Azure DevOps Build Summary page will not show the status of the analysis or a link to the project dashboard on SonarQube.

Conclusion

As we have seen in these series of articles, adding sonarqube to your build process can help inrease the quality of your code by providing insights through analysis which woudl not otherwise haev been apparent.

It’s free to use, so why not have a play. 🙂

 

Cannot find .scss module error – Enabling SASS integration with your SharePoint Framework code

When creating SharePoint framework webparts in Visual Studio code, out of the box integration with SASS files (.scss) does not work. You get errors which look like this (when you’re using ts-lint that is).

This also causes pain and angst when it comes to running CI / CD in Azure DevOps and the build breaks because npm test wont run – the enzyme rendering of the component wont work because it cannot find the scss file.

Natively, typescript does not understand scss as an import and you need to let it know that it’s ok to include.

You solve this problem in two steps:

  1. Create a declarations.d.ts file in the root of the project
  2. Add a reference into the tsconfig file to use the declarations file

declarations.d.ts

// We need to tell TypeScript that when we write "import styles from './styles.scss' we mean to load a module (to look for a './styles.scss.d.ts').
   declare module "*.scss" {
   const content: { [className: string]: string };
   export = content;
}

tsconfig.json

//add the following
"include": [
    "src/**/*.ts", 
    "declarations.d.ts"
  ],

and that’s all 🙂