[chore] add snapshot tests for syntax highlight grammar (#1391)

Author: jasonlyu123

.prettierignore

@@ -6,6 +6,7 @@ packages/svelte2tsx/test/emitDts/samples/*/expected/**
 packages/language-server/test/**/*.svelte
 packages/language-server/test/**/testfiles/**/*.ts
 packages/svelte-vscode/syntaxes/*.yaml
+packages/svelte-vscode/test/*/samples/**/*
 packages/typescript-plugin/src/**/*.js
 packages/typescript-plugin/src/**/*.d.ts
 **/dist

packages/svelte-vscode/package.json

@@ -9,7 +9,7 @@
         "build": "npm run build:ts && npm run build:grammar",
         "vscode:prepublish": "npm run build && npm prune --production",
         "watch": "npm run build:grammar && tsc -w -p ./",
-        "test": "echo 'NOOP'"
+        "test": "npm run build:grammar && node test/grammar/test.js"
     },
     "repository": {
         "type": "git",
@@ -568,7 +568,8 @@
         "@types/node": "^13.9.0",
         "@types/vscode": "*",
         "js-yaml": "^3.14.0",
-        "typescript": "*"
+        "typescript": "*",
+        "vscode-tmgrammar-test": "^0.0.11"
     },
     "dependencies": {
         "lodash": "^4.17.21",

packages/svelte-vscode/syntaxes/README.md

@@ -9,3 +9,19 @@ A good document to read in more detail about TextMate: https://www.apeth.com/non
 ## Developing the grammar
 
 The grammar for pug and markdown is written in JSON. You can edit that directly. The main grammar is written in `yaml` because that's easier to structure than JSON. However, VS Code expects a JSON format. Therefore you need to run the `build:grammar` script afterwards. This will produce a JSON version of the file. Afterwards you need to restart your extension window for the changes to take effect.
+
+### Snapshot test for the grammar
+
+The snapshot test is run by [vscode-textmate-test](https://github.com/PanAeon/vscode-tmgrammar-test). The `test` command called a node script to build the argument and execute the `vscode-textmate-test` command. If you updated the svelte grammar file, Be sure to add the test cases to the `test/sample` directory.
+
+Then run the test to check if the update affect existing cases
+
+```bash
+yarn test
+```
+
+Update existing snapshot to match the changes
+
+```bash
+yarn test --updateSnapshot
+```

packages/svelte-vscode/test/grammar/dummy/coffee.tmLanguage-dummy.json

@@ -0,0 +1,4 @@
+{
+    "comment": "Dummy CoffeeScript TextMate grammar for use in testing",
+    "scopeName": "source.coffee"
+}

packages/svelte-vscode/test/grammar/dummy/css.tmLanguage-dummy.json

@@ -0,0 +1,4 @@
+{
+    "comment": "Dummy CSS TextMate grammar for use in testing",
+    "scopeName": "source.css"
+}

packages/svelte-vscode/test/grammar/dummy/html.tmLanguage-dummy.json

@@ -0,0 +1,4 @@
+{
+    "comment": "Dummy HTML TextMate grammar for use in testing",
+    "scopeName": "text.html"
+}

packages/svelte-vscode/test/grammar/dummy/js.tmLanguage-dummy.json

@@ -0,0 +1,4 @@
+{
+    "comment": "Dummy JS TextMate grammar for use in testing",
+    "scopeName": "source.js"
+}

packages/svelte-vscode/test/grammar/dummy/less.tsLanguage-dummy.json

@@ -0,0 +1,4 @@
+{
+    "comment": "Dummy Less TextMate grammar for use in testing",
+    "scopeName": "source.css.less"
+}

packages/svelte-vscode/test/grammar/dummy/pug.tmLanguage-dummy.json

@@ -0,0 +1,4 @@
+{
+    "comment": "Dummy Pug TextMate grammar for use in testing",
+    "scopeName": "text.pug"
+}

packages/svelte-vscode/test/grammar/dummy/sass.tmLanguage-dummy.json

@@ -0,0 +1,4 @@
+{
+    "comment": "Dummy Sass TextMate grammar for use in testing",
+    "scopeName": "source.sass"
+}