chore: add extension tests

.travis.yml

@@ -9,8 +9,12 @@ branches:
   only:
   - master
 
+before_script:
+  - export DISPLAY=:99.0
+  - sh -e /etc/init.d/xvfb start
+
 install:
-  - npm install
+  - npm ci
 
 script:
   - npm run test

.vscode/launch.json

@@ -13,6 +13,22 @@
         "${workspaceFolder}/out/**/*.js"
       ],
       "preLaunchTask": "npm: watch"
+    },
+    {
+      "name": "Extension Tests",
+      "type": "extensionHost",
+      "request": "launch",
+      "runtimeExecutable": "${execPath}",
+      "args": [
+        "${workspaceFolder}/src/test/",
+        "--disable-extensions",
+        "--extensionDevelopmentPath=${workspaceFolder}",
+        "--extensionTestsPath=${workspaceFolder}/out/test"
+      ],
+      "outFiles": [
+        "${workspaceFolder}/out/test/**/*.js"
+      ],
+      "preLaunchTask": "npm: watch"
     }
   ]
 }

package.json

@@ -18,8 +18,7 @@
     "Formatters"
   ],
   "activationEvents": [
-    "onLanguage:css",
-    "onLanguage:scss"
+    "*"
   ],
   "main": "./out/extension",
   "contributes": {
@@ -51,14 +50,16 @@
     "compile": "tsc -p ./",
     "lint": "tslint -p ./",
     "postinstall": "node ./node_modules/vscode/bin/install",
-    "test": "npm run lint",
+    "pretest": "npm run lint",
+    "test": "npm run compile && CODE_TESTS_WORKSPACE=src/test node ./node_modules/vscode/bin/test",
     "vscode:prepublish": "npm run compile",
     "watch": "tsc -watch -p ./"
   },
   "dependencies": {
     "prettier": "^1.15.2"
   },
   "devDependencies": {
+    "@types/mocha": "^5.2.5",
     "@types/node": "^10.12.9",
     "husky": "^1.1.4",
     "tslint": "^5.11.0",

src/test/extension.test.ts

@@ -0,0 +1,54 @@
+/* tslint:disable: no-console */
+import * as assert from 'assert';
+import * as path from 'path';
+import { commands, Uri, window, workspace } from 'vscode';
+
+const prettier = require('prettier');
+
+/**
+ * loads and format a file.
+ * @param file path relative to base URI (a workspaceFolder's URI)
+ * @param base base URI
+ * @returns source code and resulting code
+ */
+async function format(
+  file: string,
+  base: Uri = workspace.workspaceFolders![0].uri
+): Promise<{
+  result: string;
+  source: string;
+} | undefined> {
+  const absPath = path.join(base.fsPath, file);
+  const doc = await workspace.openTextDocument(absPath);
+  const text = doc.getText();
+  try {
+    await window.showTextDocument(doc);
+    console.time(file);
+    await commands.executeCommand('editor.action.formatDocument');
+    console.timeEnd(file);
+    return { result: doc.getText(), source: text };
+  } catch (e) {
+    console.error(e);
+    return;
+  }
+}
+
+/**
+ * Compare prettier's output (default settings)
+ * with the output from extension.
+ * @param file path relative to workspace root
+ */
+async function formatSameAsPrettier(file: string) {
+  const result = await format(file);
+  if (result) {
+    const prettierFormatted = prettier.format(result.source, {
+      filepath: file,
+    });
+    assert.equal(result.result, prettierFormatted);
+  }
+}
+
+suite('SCSS Formatter Extension Tests', () => {
+  test('it should fromat CSS', () => formatSameAsPrettier('fixtures/ugly.css'));
+  test('it should format SCSS', () => formatSameAsPrettier('fixtures/ugly.scss'));
+});

src/test/fixtures/ugly.css

@@ -0,0 +1,40 @@
+:root {
+  font-size: 12px;
+  font-family: monospace;
+  --color: #FF555B;
+  --bg: #FDFDF2;
+}
+
+* { margin: 0;
+  padding: 0;
+  box-sizing: border-box; user-select: none; -webkit-tap-highlight-color: transparent;
+}
+
+html, body {
+  overflow: hidden;
+}
+
+body {
+  width: 100vw;
+  height: 100vh;
+  color: var(--color); background-color: var(--bg);
+}
+
+a {
+  color: inherit;
+} svg {
+  display: block;
+  fill: currentColor;
+} .credits {
+  position: fixed;
+  bottom: 1rem; right: 1rem;
+  font-size: 0.75rem;
+}
+
+.credits > span {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.hide { opacity: 0; }

src/test/fixtures/ugly.scss

@@ -0,0 +1,187 @@
+html { box-sizing: box-model; }
+*, *:before, *:after { box-sizing: inherit; outline:0; }
+header,main,nav,article,section,figure,figcaption,code{ display:block;position: relative; }
+
+
+@mixin aspect-ratio($arglist... /*$width/$ratio, $height*/){
+    $map : keywords($arglist);
+    $height: map-get($map, height) or nth-or-null($arglist, 2);
+    $width:  map-get($map, width)  or nth-or-null($arglist, 1);
+    $ratio:  map-get($map, ratio)  or if($width and $height, $width/$height, nth-or-null($arglist, 1)) or 1;
+    $padding: 1/$ratio * 100%;
+    &:before { content: ''; float:left; padding-bottom: $padding; }
+    &:after  { content: ''; display:table; clear: both; }
+}
+// Helper function
+// Return null rather than throwing an error if index is outside list range.
+@function nth-or-null($list, $index) {
+  @return if(length($list) >= $index, nth($list, $index), null);
+}
+
+//
+//  Function to create an optimized svg url
+//
+@function svg-url($svg){
+    //
+    //  Add missing namespace
+    //
+    @if not str-index($svg,xmlns) {
+        $svg: str-replace($svg, '<svg','<svg xmlns="http://www.w3.org/2000/svg"');
+    }
+    //
+    //  Chunk up string in order to avoid
+    //  "stack level too deep" error
+    //
+    $encoded:'';
+    $slice: 2000;
+    $index: 0;
+    $loops: ceil(str-length($svg)/$slice);
+    @for $i from 1 through $loops {
+        $chunk: str-slice($svg, $index, $index + $slice - 1);
+        //
+        //   Encode
+        //
+        $chunk: str-replace($chunk,'"', '\'');
+        $chunk: str-replace($chunk,'%', '%25');
+        $chunk: str-replace($chunk,'&', '%26');
+        $chunk: str-replace($chunk,'#', '%23');       
+        $chunk: str-replace($chunk,'{', '%7B');
+        $chunk: str-replace($chunk,'}', '%7D');         
+        $chunk: str-replace($chunk,'<', '%3C');
+        $chunk: str-replace($chunk,'>', '%3E');
+
+
+        $encoded: #{$encoded}#{$chunk};
+        $index: $index + $slice;
+    }
+    @return url("data:image/svg+xml,#{$encoded}");
+}
+
+
+
+//  Background svg mixin    
+@mixin background-svg($svg){
+    background-image: svg-url($svg);
+}
+
+//  Helper function to replace characters in a string
+@function str-replace($string, $search, $replace: '') {
+    $index: str-index($string, $search);
+    @return if($index,
+        str-slice($string, 1, $index - 1) + $replace +
+        str-replace(str-slice($string, $index +
+        str-length($search)), $search, $replace),
+        $string);
+}
+
+
+
+$svg-cartman:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><path fill="#804D35" d="M35 254.6l9.7 28.8 211 1.7 12-34L35 255"/><path fill="#2F2B33" d="M40 288c1.3 1.2 221 0 221 0s5.3-6.4-50.2-10c-34.4.8-55.7 6-55.7 6s-25-6-47-6c-91 4-69 8.8-68 10z"/><path fill="#EE304E" d="M15.2 187.8s20.3-30 36.2-35.4c3.6 1.2 189 1.5 198.3 1.2 26.8 5.8 23.5 24 31.6 26.4 1.8-.3 11 79.6-19.8 77.6-1.3 2.5-50.6 4-55.7 4.5s-21.4 10-43 13c-4.6 1-78.7 0-78.7 0s-34-4-55-26c-1-2 0-9-13-60z"/><ellipse cx="151.3" cy="128.9" fill="#FFEDC3" rx="109.8" ry="76.8"/><path fill="#00B8C3" d="M43 114.6c0-49 58-81 107-82 82.7-2 106.5 68.2 105.3 67.6C133.3 44.7 43 114.6 43 114.6z"/><path fill="#FCEE21" d="M44.3 117.7c43.7-26 94-35.7 144.5-30.4 16 1.7 32 5 47.6 9.8 4.5 2 9 3 13.4 5l3.5 2c-1 0 .3 0 .6 1 4 2 8-4.2 3-6.2-22-10-46-14.6-69-17-51-6.5-103 4.5-148 31-4 2.3-1 9 4 6.3zm72.4-84.4s9-4.8 10.4-3.8 2-2.3 2-2.3l9-2h11l1-2.3s12-1 13 2c0 4 15.7 4 15 10-2.5 8-12 2-13 4-11.4 6-17 0-17 0l-13 4-1-7s-3 5-8 5.3c-17.3 4-9-8.5-9-8.5zm-100.5 155C6 189.3-7 221 24 227.3c10.4-2.6 40 2 36-13s-33.8-24.2-44-26zm267.4-7s5-1 8 4 4.7 22.2 4 27.6-.6 10-13.8 11-18.8-9-19.8-8-14.2 1-14.2 1-7.4-7 1.3-12c4-3 4-8 4-8s5-12 9-14 22-2 22-2z"/><path fill="none" stroke="#000" stroke-miterlimit="10" d="M68 167.3c11 12 91 71 170.3-5.6m-73 45.6c2 36.4-1.3 65.6-1.3 65.6"/><ellipse cx="157.1" cy="213.4" rx="1" ry="3"/><ellipse cx="159.7" cy="238.7" rx="1.2" ry="3.3"/><ellipse cx="157.2" cy="262.7" rx="2" ry="3.4"/><path fill="none" stroke="#000" stroke-miterlimit="10" d="M139 188.5c15.7 5.5 38 0 38 0"/><ellipse cx="182.5" cy="119.1" fill="#FFF" transform="matrix(.81 -.587 .587 .81 -35.153 129.678)" rx="26.7" ry="30.5"/><ellipse cx="126.5" cy="119.1" fill="#FFF" transform="matrix(.884 .467 -.467 .884 70.21 -45.287)" rx="26.7" ry="30.5"/><circle cx="138.6" cy="117.9" r="3.3"/><circle cx="170.6" cy="117.9" r="3.3"/><path d="M134.7 172.4c3.4-3.5 7.7-3.2 7.7-3.2s24.2-.2 25.5.3 2 3 2 4.2c-1 1.4-5 10.7-7 13.3-2 1.8-9 0-9 0s-4-1-5-1.8c-.7-.3-3.4 0-4-.2s-11.5-10.6-12-12.3"/><path fill="#FFF" d="M149 172.3c-.2-1-1-1.7-1.8-1.5l-3 .5c-.8 0-1.3 1-1.2 2 .2 1 1 1.7 1.8 1.5l3-.5c1 0 1.4-1 1.2-2zm9 1.5c.2-.8-.3-1.6-1-1.8l-4.2-.8c-.7 0-1.5.4-1.6 1.2v.3c-.3.8.2 1.6 1 1.8l4 .8c.8 0 1.6-.4 1.7-1.2zm9-.4c0-1-.8-1.7-1.6-1.6l-5 .4c-.8 0-1.4 1-1.3 1.8 1 1 1 1.7 2 1.6l5-.4c1 0 2-1 2-1.8z"/></svg>';
+
+.cartman {
+    @include aspect-ratio();
+    width: 40%;
+    margin: 40px 0;
+    padding: 0;
+    position: relative;
+    @include background-svg($svg-cartman); // <= here :-)
+    background-size: cover;
+    background-repeat:no-repeat;
+    background-position:50% 50%;
+}
+
+figcaption {
+    position:absolute;
+    display:block;
+    left: 100%;
+    &:before,&:after {    
+        content:'';
+        position:absolute;
+        display:block;
+    }
+    &:before {
+        font:15px 'Comic Sans MS';
+        content:'SVG in CSS freaking sucks ...Wait What!';
+        text-transform:uppercase;
+        width:230px;
+        text-align:center;
+        border:1px solid #f1f1f1;
+        background:white;
+        border-radius:5px;
+        padding:20px;
+    }
+    &:after{
+        top:75px;
+        left: 10px;
+        transform:rotate(30deg);
+        border-top:30px solid white;
+        border-left:10px solid transparent;
+        border-right:10px solid transparent;
+    }
+}
+
+$logo-color : #00b8c4;
+$body-color : whitesmoke;
+$h1-color   : #00b8c4;
+$h2-color   : #00b8c4;
+$h3-color   : #00b8c4;
+$text-color : #282828;
+$link-color : #00b8c4;
+
+
+html { box-sizing: box-model; }
+*, *:before, *:after { box-sizing: inherit; }
+header,main,nav,article,section,figure,figcaption,code{ display:block;position: relative; }
+
+
+@include google-font{
+    @include google-font(Lato, 300 400 700);
+    @include google-font(Lato, 300 400 700, italic);
+    @include google-font('Playfair Display', $text: '“”‘’"\'');
+    @include google-font('Lateef');
+}
+
+p,label { font: 400 16px/1.3 'Lato', sans-serif; color: $text-color; }
+h1      { font: 300 36px/1.3 'Lato', sans-serif; color: $h1-color; }
+h2      { font: 300 24px/1.3 'Lato', sans-serif; color: $h2-color; }
+[class*="example"] {font: 400 14px/1.3 'Lato', sans-serif; color: white; }
+a {color: $link-color; text-decoration: none; &:hover,&:focus {
+    text-decoration: underline;
+}}
+
+strong { font: inherit; font-weight: 700; }
+em     { font: inherit; font-style: italic; }
+p     { max-width: 700px; }
+blockquote {
+    padding:0; margin:20px 0;
+    &:before { content: '“'; font-family: 'Playfair Display'; font-size:16px; }
+    &:after  { content: '”'; font-family: 'Playfair Display'; font-size:16px; }
+}
+[data-related-pens] { background: $logo-color; }
+
+
+body { 
+  background: $body-color;
+}
+article {
+    margin:-20px auto 40px; 
+    max-width: 900px;
+    border-radius: 7px;
+    padding: 20px 40px 0;
+    // background: white;
+    // box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
+}
+section { margin: 40px 0; }
+
+textarea {
+    outline: 0;
+    margin-top: 8px; 
+    width:100%;
+    height:200px;
+    background:whitesmoke;
+    border:1px solid #dddd;
+}
+input { margin-top: 8px; outline: 0; background:whitesmoke; font-size:20px; padding:10px;  border:1px solid #dddd; display:block;
+width:calc(100% - 20px); }
+[for="pastezone"],
+[for="peninclude"]{font-weight: 700; }

src/test/index.ts

@@ -0,0 +1,22 @@
+//
+// PLEASE DO NOT MODIFY / DELETE UNLESS YOU KNOW WHAT YOU ARE DOING
+//
+// This file is providing the test runner to use when running extension tests.
+// By default the test runner in use is Mocha based.
+//
+// You can provide your own test runner if you want to override it by exporting
+// a function run(testRoot: string, clb: (error:Error) => void) that the extension
+// host can call to run the tests. The test runner is expected to use console.log
+// to report the results back to the caller. When the tests are finished, return
+// a possible error to the callback or null if none.
+
+import * as testRunner from 'vscode/lib/testrunner';
+
+// You can directly control Mocha options by uncommenting the following lines
+// See https://github.com/mochajs/mocha/wiki/Using-mocha-programmatically#set-options for more info
+testRunner.configure({
+  ui: 'tdd', // the TDD UI is being used in extension.test.ts (suite, test, etc.)
+  useColors: true // colored output from test results
+});
+
+module.exports = testRunner;