A Complete Tutorial to VS Code Extension Tests

by:

Softwares

Most VS Code extensions in the marketplace have minimal testing, if any at all. The formal VS Code documentation endorses making use of packages like @vscode/examination-electron and @vscode/take a look at-net which provide constrained screening capabilities and a full absence of guidance for testing webviews. Whilst webviews may well not be the encouraged strategy to setting up extension UI, it’s an integral element of the UX surface place in several extensions and has some very compelling use scenarios. With VS Code extensions setting up by themselves as crucial making blocks in the developer encounter, it is critical that extension authors make sure continued good quality and continuity in this sophisticated and at any time modifying ecosystem.

We suggest common screening concepts as stated in The Useful Test Pyramid, wherever the minimal hanging fruit and greater part of exams are unit tests. Unit tests have the advantage of examining code in isolation, which avoids dependencies particular to VS Code and enables the checks to simply operate across environments. The future stage in the pyramid is integration testing, which introduces complexity by requiring assessments to interact with the VS Code API or the application by itself.

At this stage you may well check with oneself: “Why really should I be testing VS Code? Isn’t that the job of Microsoft”.

The solution is both of those, sure and no! A prevalent false impression is that if extension developers use the VS Code API appropriately, the extension will “just work”™. However, the truth is that bugs will nevertheless transpire (even if you use TypeScript) and could not even be caused by your extension – but however want to be uncovered and dealt with. As your extension grows in complexity (and level of popularity!), the time expected for handbook validation rapidly turns into unrealistic. Basic variations like a missing contribution home in offer.json or a silently damaged event listener can are unsuccessful a well-liked workflow, producing confusion, stress and eventually diminish belief and adoption.

We propose that you make a tiny investment and generate some finish-to-conclusion (e2e) tests! They can detect and notify you of configuration or API improvements that may possibly crack your extension. Using WebdriverIO (and its new VS Code integration) you can automate VS Code like any other Electron or website software (not to mention the detailed features outlined down below).

The WebdriverIO VS Code services assists:

  • 🏗️ Putting in VS Code (either steady, insiders or a specified edition)
  • ⬇️ Downloading Chromedriver unique to provided VS Code version
  • 🚀 Enabling accessibility to the VS Code API from your tests
  • 🖥️ Commencing VS Code with custom user settings (which includes assist for VS Code on Ubuntu, MacOS and Windows)
  • 🌐 Serving VS Code from a server to be accessed by any browser for screening website extensions
  • 📔 Bootstrapping web site objects with locators matching your VS Code model

Make lifestyle easier and run equally unit and integration assessments, obtain the VS Code API’s and automate complex person flows or webviews making use of one particular exam framework.

To start out screening your extension task working with WebdriverIO, set up your challenge by managing:

npm make wdio ./
Enter fullscreen mode

Exit fullscreen manner

An set up wizard will information you via the process. Be certain you find TypeScript as compiler and decrease the webpage objects (batteries previously incorporated). Then make certain to pick vscode inside of the record of solutions:

demo.gif

Immediately after the wizard has mounted all essential NPM offers, you ought to see a wdio.conf.ts in the root directory of your project. Open the file and update the abilities property to this:
import path from ‘path’

// take a look at/wdio.conf.ts
export const config = 
    // ...
    capabilities: [
        browserName: 'vscode',
        browserVersion: 'stable',
        'wdio:vscodeOptions': 
            // point to the root directory of your project
            extensionPath: path.join(__dirname, '..'),
        
    ],
    // ...

Enter fullscreen mode

Exit fullscreen manner

This will instruct WebdriverIO to down load and set up VS Code stable for you. You can also pick any arbitrary variation VS Code has at any time launched or insiders for that make a difference. Last of all, let us create a demo take a look at to showcase how to print the application title, e.g.:

// take a look at/specs/demo.check.ts
describe('My VS Code Extension', () => 
    it('should be capable to load VS Code', async () => 
        const workbench = await browser.getWorkbench()
        count on(await workbench.getTitleBar().getTitle())
            .toBe('[Extension Development Host] Visual Studio Code')
    )
)
Enter fullscreen manner

Exit fullscreen mode

Now you can run your checks by contacting:

npx wdio run ./check/wdio.conf.ts
Enter fullscreen manner

Exit fullscreen mode

Brilliant 🎉 Your initially demo take a look at just productively passed. We have well prepared a detailed tutorial on testing a concrete extension from the VS Code Market in our guide on tests extensions. Some extremely prosperous extensions like the VS Code Reside Server are previously making use of this established-up productively.

If you have any issues or issues finding begun composing checks for your extension, sign up for our Discord and we can assist you out!

Leave a Reply

Your email address will not be published.