Merge 1594e78 into e2b79c2

CHANGELOG.md

@@ -5,7 +5,8 @@ Bug-fixes within the same version aren't needed
 
 ## Master
 
-
+* refactor editor decorations and load icons from `vscode-codicons` [@Tymek](https://github.com/Tymek)
+* move test status indicator from editor text to gutter [@Tymek](https://github.com/Tymek)
 -->
 
 ### 4.0.0-alpha.0

custom.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}

jest.config.js

@@ -15,4 +15,7 @@ module.exports = {
     'debug',
     '@babel/template',
   ],
+  moduleNameMapper: {
+    '\\.(svg)$': '<rootDir>/tests/fileMock.ts',
+  },
 };

package.json

@@ -280,7 +280,8 @@
     "istanbul-lib-coverage": "^3.0.0",
     "istanbul-lib-source-maps": "^4.0.0",
     "jest-editor-support": "^28.0.0-beta",
-    "jest-snapshot": "^25.5.0"
+    "jest-snapshot": "^25.5.0",
+    "vscode-codicons": "^0.0.4"
   },
   "devDependencies": {
     "@types/istanbul-lib-coverage": "^2.0.2",
@@ -290,6 +291,7 @@
     "@types/vscode": "^1.23.0",
     "@typescript-eslint/eslint-plugin": "^2.32.0",
     "@typescript-eslint/parser": "^2.32.0",
+    "copy-webpack-plugin": "^6.0.2",
     "coveralls": "^3.1.0",
     "danger": "^10.1.1",
     "eslint": "^7.0.0",
@@ -301,6 +303,7 @@
     "eslint-plugin-prettier": "^3.1.3",
     "jest": "^25.5.0",
     "prettier": "^2.0.5",
+    "raw-loader": "^4.0.1",
     "rimraf": "^3.0.2",
     "ts-jest": "^25.4.0",
     "ts-loader": "^7.0.1",

src/Coverage/Formatters/GutterFormatter/index.ts

@@ -3,6 +3,8 @@ import { AbstractFormatter } from '../AbstractFormatter';
 import * as vscode from 'vscode';
 import { FileCoverage } from 'istanbul-lib-coverage';
 import { isValidLocation } from '../helpers';
+import prepareIconFile from '../../../decorations/prepareIconFile';
+import coverageGutterIcon from './coverage.svg';
 
 export interface CoverageLines {
   covered: vscode.Range[];
@@ -23,28 +25,22 @@ export class GutterFormatter extends AbstractFormatter {
       backgroundColor: '',
       overviewRulerColor: 'rgba(121, 31, 10, 0.75)',
       overviewRulerLane: vscode.OverviewRulerLane.Left,
-      gutterIconPath: context.asAbsolutePath(
-        './src/Coverage/Formatters/GutterFormatter/uncovered-gutter-icon.svg'
-      ),
+      gutterIconPath: prepareIconFile(context, 'uncovered', coverageGutterIcon, '#791F0A'),
     });
 
     this.partiallyCoveredLine = vscode.window.createTextEditorDecorationType({
       backgroundColor: 'rgba(121, 86, 10, 0.75)',
       overviewRulerColor: 'rgba(121, 86, 10, 0.75)',
       overviewRulerLane: vscode.OverviewRulerLane.Left,
-      gutterIconPath: context.asAbsolutePath(
-        './src/Coverage/Formatters/GutterFormatter/partially-covered-gutter-icon.svg'
-      ),
+      gutterIconPath: prepareIconFile(context, 'partially-covered', coverageGutterIcon, '#79560A'),
     });
 
     this.coveredLine = vscode.window.createTextEditorDecorationType({
       isWholeLine: true,
       backgroundColor: '',
       overviewRulerColor: '',
       overviewRulerLane: vscode.OverviewRulerLane.Left,
-      gutterIconPath: context.asAbsolutePath(
-        './src/Coverage/Formatters/GutterFormatter/covered-gutter-icon.svg'
-      ),
+      gutterIconPath: prepareIconFile(context, 'covered', coverageGutterIcon, '#2D790A'),
     });
   }
 

src/JestExt.ts

@@ -1,7 +1,8 @@
 import * as vscode from 'vscode';
 import { ProjectWorkspace, JestTotalResults } from 'jest-editor-support';
 
-import * as decorations from './decorations';
+import { TestStatus } from './decorations/TestStatus';
+import inlineErrorStyle from './decorations/inlineError';
 import { PluginResourceSettings } from './Settings';
 import { statusBar, Status, StatusBar, Mode } from './StatusBar';
 import {
@@ -50,17 +51,13 @@ export class JestExt {
 
   private jestWorkspace: ProjectWorkspace;
   private pluginSettings: PluginResourceSettings;
+  private decorations: TestStatus;
   private workspaceFolder: vscode.WorkspaceFolder;
   private instanceSettings: InstanceSettings;
 
   // The ability to show fails in the problems section
   private failDiagnostics: vscode.DiagnosticCollection;
 
-  private passingItStyle: vscode.TextEditorDecorationType;
-  private failingItStyle: vscode.TextEditorDecorationType;
-  private skipItStyle: vscode.TextEditorDecorationType;
-  private unknownItStyle: vscode.TextEditorDecorationType;
-
   private parsingTestFile = false;
 
   // We have to keep track of our inline assert fails to remove later
@@ -113,7 +110,7 @@ export class JestExt {
     this.handleJestEditorSupportEvent = this.handleJestEditorSupportEvent.bind(this);
 
     // The theme stuff
-    this.setupDecorators();
+    this.decorations = new TestStatus(context);
     // The bottom bar thing
     this.setupStatusBar();
     // reset the jest diagnostics
@@ -223,26 +220,26 @@ export class JestExt {
   }
 
   updateDecorators(testResults: SortedTestResults, editor: vscode.TextEditor): void {
-    // Dots
+    // Status indicators (gutter icons)
     const styleMap = [
       {
         data: testResults.success,
-        decorationType: this.passingItStyle,
+        decorationType: this.decorations.passing,
         state: TestReconciliationState.KnownSuccess,
       },
       {
         data: testResults.fail,
-        decorationType: this.failingItStyle,
+        decorationType: this.decorations.failing,
         state: TestReconciliationState.KnownFail,
       },
       {
         data: testResults.skip,
-        decorationType: this.skipItStyle,
+        decorationType: this.decorations.skip,
         state: TestReconciliationState.KnownSkip,
       },
       {
         data: testResults.unknown,
-        decorationType: this.unknownItStyle,
+        decorationType: this.decorations.unknown,
         state: TestReconciliationState.Unknown,
       },
     ];
@@ -427,7 +424,7 @@ export class JestExt {
 
     // We have to make a new style for each unique message, this is
     // why we have to remove off of them beforehand
-    const style = decorations.failingAssertionStyle(errorMessage);
+    const style = inlineErrorStyle(errorMessage);
     this.failingAssertionDecorators[fileName].push(style);
 
     return { style, decorator };
@@ -502,13 +499,6 @@ export class JestExt {
     this.status.update(status, details, modes);
   }
 
-  private setupDecorators(): void {
-    this.passingItStyle = decorations.passingItName();
-    this.failingItStyle = decorations.failingItName();
-    this.skipItStyle = decorations.skipItName();
-    this.unknownItStyle = decorations.notRanItName();
-  }
-
   private shouldIgnoreOutput(text: string): boolean {
     // this fails when snapshots change - to be revised - returning always false for now
     return (

src/decorations/TestStatus.ts

@@ -0,0 +1,71 @@
+import {
+  window,
+  OverviewRulerLane,
+  DecorationRangeBehavior,
+  ExtensionContext,
+  TextEditorDecorationType,
+  DecorationRenderOptions,
+} from 'vscode';
+import passingIcon from 'vscode-codicons/src/icons/check.svg';
+import failingIcon from 'vscode-codicons/src/icons/chrome-close.svg';
+import skipIcon from 'vscode-codicons/src/icons/debug-step-over.svg';
+import unknownIcon from './question.svg';
+import prepareIconFile from './prepareIconFile';
+
+export class TestStatus {
+  public passing: TextEditorDecorationType;
+  public failing: TextEditorDecorationType;
+  public skip: TextEditorDecorationType;
+  public unknown: TextEditorDecorationType;
+
+  constructor(context: ExtensionContext) {
+    this.passing = this.createStateDecoration([
+      prepareIconFile(context, 'passing', passingIcon, '#35A15E'),
+      'green',
+    ]);
+    this.failing = this.createStateDecoration([
+      prepareIconFile(context, 'failing', failingIcon, '#D6443C'),
+      'red',
+    ]);
+    this.skip = this.createStateDecoration([
+      prepareIconFile(context, 'skip', skipIcon, '#fed37f'),
+      'yellow',
+    ]);
+    this.unknown = this.createStateDecoration(
+      [prepareIconFile(context, 'unknown', unknownIcon, '#BBBBBB'), 'darkgrey'],
+      [prepareIconFile(context, 'unknown-light', unknownIcon, '#555555')]
+    );
+  }
+
+  private createStateDecoration(
+    dark: /* default */ [string, string?],
+    light?: /* optional overrides */ [string, string?]
+  ): TextEditorDecorationType {
+    const [icon, overviewRulerColor] = dark;
+    const [iconLite, overviewRulerColorLite] = light ?? [];
+
+    const options: DecorationRenderOptions = {
+      gutterIconPath: icon,
+      gutterIconSize: 'contain',
+      overviewRulerLane: OverviewRulerLane.Left,
+      rangeBehavior: DecorationRangeBehavior.ClosedClosed,
+      dark: {
+        gutterIconPath: icon,
+      },
+      light: {
+        gutterIconPath: iconLite || icon,
+      },
+    };
+
+    if (overviewRulerColor) {
+      options['overviewRulerColor'] = overviewRulerColor;
+      options['dark']['overviewRulerColor'] = overviewRulerColor;
+    }
+
+    if (overviewRulerColorLite) {
+      options['light']['overviewRulerColor'] = overviewRulerColorLite;
+    }
+
+    return window.createTextEditorDecorationType(options);
+  }
+}