Highlight

test/fixture/client/highlight/Basic.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="counter-wrapper">
+    <div>{{ msg }}</div>
+    <div>
+      <img src="https://vuejs.org/images/logo.png" width="200" height="200" />
+    </div>
+    <div class="counter">
+      {{ count }}
+    </div>
+    <button @click="$store.commit('INCREMENT')">Increment</button>
+    <button @click="$store.commit('DECREMENT')">Decrement</button>
+    <button @click="$store.dispatch('incrementAsync')">Increment Async</button>
+  </div>
+</template>
+
+<script>
+import * as _ from 'lodash'
+import Item from './Basic.Item.vue'
+
+export default {
+  components: { Item },
+  data () {
+    return {
+      msg: 'Vetur means "Winter" in icelandic.'
+    }
+  },
+  computed: {
+    count () {
+      return this.$store.state.count
+    }
+  },
+  methods: {
+    hello () {
+      console.log(this.msg)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.counter-wrapper > * {
+  margin-bottom: 50px;
+}
+.counter {
+  margin-left: auto;
+  margin-right: auto;
+  border-radius: 3px;
+  width: 200px;
+  height: 200px;
+  text-align: center;
+  line-height: 200px;
+  font-size: 5rem;
+  background-color: #f0f0f0;
+  user-select: none;
+}
+</style>

test/lsp/highlight/basic.test.ts

@@ -0,0 +1,58 @@
+import * as vscode from 'vscode';
+import * as assert from 'assert';
+import { getDocUri, activateLS, sleep, showFile, FILE_LOAD_SLEEP_TIME } from '../../helper';
+import { position, sameLineRange } from '../util';
+
+describe('Should do highlight', () => {
+  const docUri = getDocUri('client/highlight/Basic.vue');
+
+  before('activate', async () => {
+    await activateLS();
+    await showFile(docUri);
+    await sleep(FILE_LOAD_SLEEP_TIME);
+  });
+
+  it('shows highlight for <div> tags', async () => {
+    await testHighlight(docUri, position(2, 5), [
+      { kind: vscode.DocumentHighlightKind.Read, range: sameLineRange(2, 5, 8) },
+      { kind: vscode.DocumentHighlightKind.Read, range: sameLineRange(2, 20, 23) }
+    ]);
+  });
+
+  it('shows highlight for this.msg', async () => {
+    await testHighlight(docUri, position(23, 6), [
+      { kind: vscode.DocumentHighlightKind.Write, range: sameLineRange(23, 6, 9) },
+      { kind: vscode.DocumentHighlightKind.Text, range: sameLineRange(33, 23, 26) }
+    ]);
+  });
+
+  it('shows highlight for Item', async () => {
+    await testHighlight(docUri, position(20, 16), [
+      { kind: vscode.DocumentHighlightKind.Write, range: sameLineRange(17, 7, 11) },
+      { kind: vscode.DocumentHighlightKind.Write, range: sameLineRange(20, 16, 20) }
+    ]);
+  });
+
+});
+
+async function testHighlight(
+  docUri: vscode.Uri,
+  position: vscode.Position,
+  expectedHighlights: vscode.DocumentHighlight[]
+) {
+  await showFile(docUri);
+
+  const result = (await vscode.commands.executeCommand(
+    'vscode.executeDocumentHighlights',
+    docUri,
+    position
+  )) as vscode.DocumentHighlight[];
+
+  expectedHighlights.forEach(eh => {
+    assert.ok(result.some(h => isEqualHighlight(h, eh)));
+  });
+
+  function isEqualHighlight(h1: vscode.DocumentHighlight, h2: vscode.DocumentHighlight) {
+    return h1.kind === h2.kind && h1.range.isEqual(h2.range);
+  }
+}