TypeScript uses our "fourslash" test framework to enable validation of editor features like member listing, tooltips, and navigation. Because Visual Studio hosts the TypeScriptServices.js file to implement these features, we test directly against this .js file instead of trying to automate a heavyweight external process like Visual Studio.

Basics

To explain how to use and write these tests, let’s jump in with an example.

This test verifies that the member list for a variable of an enum type doesn't list the enum members:
fourslash.png

The first section, highlighted here in orange, is the code section. Lines prefixed by four forward slashes are fed into a source file for the language service. Interspersed in this example is a marker, indicated by /**/. Markers will be automatically stripped from the source code, but their positions will be available to reference later.

The second section, in blue, is the imperative section. Here, you can write any regular TypeScript code. What’s going on in this test? This test only requires two commands:
goTo.marker();

This line moves the caret to the marker (immediately after n).
verify.not.memberListContains('C');

Now we verify that ‘C’ does not appear in the member list (Ctrl-J in VS). If 'C' did appear in the member list, the test would fail at this point.

Adding a new test

Make a new .ts file in public\tests\ls\fourslash
At the top of the file, add: /// <reference path='fourslash.ts' />

Write your code section, with each line prefaced by ////.

Write your imperative section. All the relevant APIs are additionally exposed under the fs object if you need help locating a particular method.

Code Syntax

The following options are available in the code section of the file:
* /**/ defines the anonymous marker (there can be only one). You can go to it with goTo.marker();
* /*name*/ defines a marker called name. Valid marker names are any sequence of alphanumeric characters. You’ll go to it with goTo.marker(‘name’);
* // @Filename: filename.ts defines the filename of the following block of code. You can go to the file with goTo.file(‘filename.ts’);. You can also omit the filename and simply navigate to the files by their (0-based) index: goTo.file(1);
We’ll be adding other metadata options (e.g. module compilation target) on an as-needed basis.

Useful Tips

  • Use debug.printCurrentFileState(); to show the current file state
  • Use verify.not. for verifying things which shouldn't appear
  • You can run a single fourslash test with jake runtests tests=path\to\the\fourslashTest.ts
  • There are over 600 existing tests; refer to them if you're unsure how to do something

Various Notes

Code is loaded as-is (minus marker removal), but is formatted during typing operations using the same formatting APIs as in Visual Studio. Marker positions will be maintained during edit operations unless they’re invalidated (e.g. a formatting operation deletes the surrounding characters). For convenience, a ////’d comment block with a leading space in every line (not counting blank lines) will have exactly one leading space removed from each line.

Last edited Mar 24, 2014 at 9:21 PM by RyanCavanaugh, version 2

Comments

basarat Jun 27, 2014 at 6:40 AM 
The path to `fourslash` needs fixing ^
doc mentions : *Make a new .ts file in public\tests\ls\fourslash*
src seems to be at : `tests\cases\fourslash`