test(e2e): add vue file e2e test

fixtures/e2e/completion/AppButton.vue

@@ -0,0 +1,31 @@
+<template>
+	<p class="foo"></p>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+$color: blue;
+$fonts: -apple-system;
+
+.foo {
+  color: $;
+}
+
+@import '~foo/bar.scss';
+
+.foo {
+  color: $;
+}
+
+@import './partial';
+
+.foo {
+  color: $;
+}
+
+</style>

fixtures/e2e/definition/AppButton.vue

@@ -0,0 +1,18 @@
+<template>
+	<p class="foo"></p>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+.test {
+  content: $variable + function();
+
+  @include mixin();
+}
+
+</style>

fixtures/e2e/hover/AppButton.vue

@@ -0,0 +1,18 @@
+<template>
+	<p class="foo"></p>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+.test {
+  content: $variable + function();
+
+  @include mixin();
+}
+
+</style>

fixtures/e2e/signature/AppButton.vue

@@ -0,0 +1,19 @@
+<template>
+	<p class="foo"></p>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+.test {
+  @include square();
+  @include square(1,);
+
+  content: pow() + pow(1,);
+}
+
+</style>

src/test/e2e/runTest.ts

@@ -1,6 +1,7 @@
 import * as path from 'path';
+import * as cp from 'child_process';
 
-import { runTests } from 'vscode-test';
+import { runTests, downloadAndUnzipVSCode, resolveCliPathFromVSCodeExecutablePath } from 'vscode-test';
 
 async function main() {
 	try {
@@ -15,11 +16,20 @@ async function main() {
 		const workspaceDir = path.resolve(__dirname, '../../../fixtures/e2e');
 
 		// Download VS Code, unzip it and run the integration test
+		const vscodeExecutablePath = await downloadAndUnzipVSCode('1.40.0');
+
+		const cliPath = resolveCliPathFromVSCodeExecutablePath(vscodeExecutablePath);
+		cp.spawnSync(cliPath, ['--install-extension', 'octref.vetur'], {
+			encoding: 'utf-8',
+			stdio: 'inherit'
+		});
+
 		await runTests({
+			vscodeExecutablePath,
 			version: '1.40.0',
 			extensionDevelopmentPath,
 			extensionTestsPath,
-			launchArgs: [workspaceDir, '--disable-extensions']
+			launchArgs: [workspaceDir]
 		});
 	} catch (err) {
 		console.error('Failed to run tests');

src/test/e2e/suite/completion/completion.test.ts

@@ -3,9 +3,11 @@ import { testCompletion } from './helper';
 
 describe('SCSS Completion Test', () => {
 	const docUri = getDocUri('completion/main.scss');
+	const vueDocUri = getDocUri('completion/AppButton.vue');
 
 	before(async () => {
 		await showFile(docUri);
+		await showFile(vueDocUri);
 		await sleep(2000);
 	});
 
@@ -20,4 +22,21 @@ describe('SCSS Completion Test', () => {
 	it('Offers completions from partial file', async () => {
 		await testCompletion(docUri, position(17, 11), [{ label: '$partial', detail: 'partial.scss' }]);
 	});
+
+	it('no completions on vue file outside scss regions', async () => {
+		await testCompletion(vueDocUri, position(2, 9), []);
+		await testCompletion(vueDocUri, position(6, 8), []);
+	});
+
+	it('Offers variable completions on vue file', async () => {
+		await testCompletion(vueDocUri, position(16, 11), ['$color', '$fonts']);
+	});
+
+	it('Offers completions from tilde imports on vue file', async () => {
+		await testCompletion(vueDocUri, position(22, 11), [{ label: '$tilde', detail: 'node_modules/foo/bar.scss' }]);
+	});
+
+	it('Offers completions from partial file on vue file', async () => {
+		await testCompletion(vueDocUri, position(28, 11), [{ label: '$partial', detail: 'partial.scss' }]);
+	});
 });

src/test/e2e/suite/definition/definitions.test.ts

@@ -3,9 +3,11 @@ import { testDefinition } from './helper';
 
 describe('SCSS Definition Test', () => {
 	const docUri = getDocUri('definition/main.scss');
+	const vueDocUri = getDocUri('definition/AppButton.vue');
 
 	before(async () => {
 		await showFile(docUri);
+		await showFile(vueDocUri);
 		await sleep(2000);
 	});
 
@@ -29,4 +31,25 @@ describe('SCSS Definition Test', () => {
 
 		await testDefinition(docUri, position(4, 12), expectedLocation);
 	});
+
+	it('should find definition for variables on vue file', async () => {
+		const expectedDocumentUri = getDocUri('_variables.scss');
+		const expectedLocation = sameLineLocation(expectedDocumentUri, 1, 1, 10);
+
+		await testDefinition(vueDocUri, position(13, 13), expectedLocation);
+	});
+
+	it('should find definition for functions on vue file', async () => {
+		const expectedDocumentUri = getDocUri('_functions.scss');
+		const expectedLocation = sameLineLocation(expectedDocumentUri, 1, 1, 9);
+
+		await testDefinition(vueDocUri, position(13, 24), expectedLocation);
+	});
+
+	it('should find definition for mixins on vue file', async () => {
+		const expectedDocumentUri = getDocUri('_mixins.scss');
+		const expectedLocation = sameLineLocation(expectedDocumentUri, 1, 1, 6);
+
+		await testDefinition(vueDocUri, position(15, 12), expectedLocation);
+	});
 });

src/test/e2e/suite/hover/hover.test.ts

@@ -3,9 +3,11 @@ import { testHover } from './helper';
 
 describe('SCSS Hover Test', () => {
 	const docUri = getDocUri('hover/main.scss');
+	const vueDocUri = getDocUri('hover/AppButton.vue');
 
 	before(async () => {
 		await showFile(docUri);
+		await showFile(vueDocUri);
 		await sleep(2000);
 	});
 
@@ -26,4 +28,28 @@ describe('SCSS Hover Test', () => {
 			contents: ['\n```scss\n@mixin mixin() {…}\n@import "../_mixins.scss" (implicitly)\n```\n']
 		});
 	});
+
+	it('shows hover for variables on vue file', async () => {
+		await testHover(vueDocUri, position(13, 13), {
+			contents: [
+				'Determines which page\\-based occurrence of a given element is applied to a counter or string value\\.',
+				'\n```scss\n$variable: \'value\';\n@import "../_variables.scss" (implicitly)\n```\n'
+			]
+		});
+	});
+
+	it('shows hover for functions on vue file', async () => {
+		await testHover(vueDocUri, position(13, 24), {
+			contents: [
+				'Determines which page\\-based occurrence of a given element is applied to a counter or string value\\.',
+				'\n```scss\n@function function() {…}\n@import "../_functions.scss" (implicitly)\n```\n'
+			]
+		});
+	});
+
+	it('shows hover for mixins on vue file', async () => {
+		await testHover(vueDocUri, position(15, 12), {
+			contents: ['\n```scss\n@mixin mixin() {…}\n@import "../_mixins.scss" (implicitly)\n```\n']
+		});
+	});
 });

src/test/e2e/suite/signature/signature.test.ts

@@ -3,9 +3,11 @@ import { testSignature } from './helper';
 
 describe('SCSS Signature Help Test', () => {
 	const docUri = getDocUri('signature/main.scss');
+	const vueDocUri = getDocUri('signature/AppButton.vue');
 
 	before(async () => {
 		await showFile(docUri);
+		await showFile(vueDocUri);
 		await sleep(2000);
 	});
 
@@ -35,6 +37,32 @@ describe('SCSS Signature Help Test', () => {
 				]
 			});
 		});
+
+		it('should suggest all parameters of mixin on vue file', async () => {
+			await testSignature(vueDocUri, position(13, 19), {
+				activeParameter: 0,
+				activeSignature: 0,
+				signatures: [
+					{
+						label: 'square ($size: null, $radius: 0)',
+						parameters: [{ label: '$size' }, { label: '$radius' }]
+					}
+				]
+			});
+		});
+
+		it('should suggest the second parameter of mixin on vue file', async () => {
+			await testSignature(vueDocUri, position(14, 21), {
+				activeParameter: 1,
+				activeSignature: 0,
+				signatures: [
+					{
+						label: 'square ($size: null, $radius: 0)',
+						parameters: [{ label: '$size' }, { label: '$radius' }]
+					}
+				]
+			});
+		});
 	});
 
 	describe('Function', () => {
@@ -63,5 +91,31 @@ describe('SCSS Signature Help Test', () => {
 				]
 			});
 		});
+
+		it('should suggest all parameters of function on vue file', async () => {
+			await testSignature(vueDocUri, position(16, 16), {
+				activeParameter: 0,
+				activeSignature: 0,
+				signatures: [
+					{
+						label: 'pow ($base: null, $exponent: null)',
+						parameters: [{ label: '$base' }, { label: '$exponent' }]
+					}
+				]
+			});
+		});
+
+		it('should suggest the second parameter of function on vue file', async () => {
+			await testSignature(vueDocUri, position(16, 26), {
+				activeParameter: 1,
+				activeSignature: 0,
+				signatures: [
+					{
+						label: 'pow ($base: null, $exponent: null)',
+						parameters: [{ label: '$base' }, { label: '$exponent' }]
+					}
+				]
+			});
+		});
 	});
 });