@lvce-editor/test-syntax-highlighting

Utility package for testing syntax highlighting functions for the lvce-editor.

Install

$ npm install @lvce-editor/test-syntax-highlighting

Usage

Create an extension manifest:

{
  "id": "language-basics-xyz",
  "languages": [
    {
      "id": "xyz",
      "extensions": [".xyz"],
      "tokenize": "src/tokenizeXyz.js"
    }
  ]
}

Then create the tokenize function

// src/tokenizeXyz.js
export const TokenType = {
  Text: 1,
}

export const TokenMap = {
  [TokenType.Text]: 'Text',
}

export const initialLineState = {
  state: 1,
  tokens: [],
}

export const hasArrayReturn = true

export const tokenizeLine = (line) => {
  const tokens = [TokenType.Text, line.length]
  return {
    state: 1,
    tokens,
  }
}

Then add sample code into test/cases/sample-code.xyz

sample xyz code

Then a test script to your package json file

{
  "scripts": {
    "test": "test-syntax-highlighting"
  }
}

Then run npm test which will create test/baselines/sample-code.txt. That file contains the tokens that were generated by the tokenizeLine function for test/cases/sample-code.xyz:

Text

Successful tests

When the tests succeed, you will get output similar to this:

> test-syntax-highlighting

1 test passed in 4ms

Failing tests

When a test fails, you will get output similar to this:

mismatch sample-code
1 test failed, 0 tests passed

When that happens, you need can either

• adjust your tokenize function to output the tokens specified in test/baselines/sample-code.txt or
• delete test/baselines/sample-code.txt and rerun npm test to regenerate the expected tokens in test/baselines/sample-code.txt