Get better truncation for testname typeahead by truncating the start …

…and not the end (#28)

* Add pretterrc

* Add some tests

* Better truncation

* Simplify the implementation

* Better implementatin

* Remove prettier rules config from eslintrc

* Update changelog

.eslintrc.json

@@ -12,13 +12,7 @@
     "strict": 0,
     "no-underscore-dangle": 0,
     "arrow-body-style": 0,
-    "prettier/prettier": [
-      "error",
-      {
-        "singleQuote": true,
-        "trailingComma": "all"
-      }
-    ]
+    "prettier/prettier": 2
   },
   "env": {
     "jest/globals": true

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all"
+}

CHANGELOG.md

@@ -3,6 +3,7 @@
 ### Chore & Maintenance
 
 - Bump dated dependencies ([#25](https://github.com/jest-community/jest-watch-typeahead/pull/25))
+- Get better truncation for testname typeahead by truncating the start and not the end ([#28](https://github.com/jest-community/jest-watch-typeahead/pull/28))
 
 ### Fixes
 

src/lib/__tests__/__snapshots__/utils.test.js.snap

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`formatTestNameByPattern formats when testname="the test name", pattern="name", and width="5" 1`] = `"</>...me</>"`;
+
+exports[`formatTestNameByPattern formats when testname="the test name", pattern="name", and width="10" 1`] = `"<dim>...st </></>name</>"`;
+
+exports[`formatTestNameByPattern formats when testname="the test name", pattern="name", and width="15" 1`] = `"<dim>the test </></>name</>"`;
+
+exports[`formatTestNameByPattern formats when testname="the test name", pattern="name", and width="20" 1`] = `"<dim>the test </></>name</>"`;
+
+exports[`formatTestNameByPattern formats when testname="the test name", pattern="name", and width="25" 1`] = `"<dim>the test </></>name</>"`;
+
+exports[`formatTestNameByPattern formats when testname="the test name", pattern="name", and width="30" 1`] = `"<dim>the test </></>name</>"`;
+
+exports[`formatTestNameByPattern formats when testname="the test name", pattern="test", and width="5" 1`] = `"</>...</><dim>me</>"`;
+
+exports[`formatTestNameByPattern formats when testname="the test name", pattern="test", and width="10" 1`] = `"</>...st</><dim> name</>"`;
+
+exports[`formatTestNameByPattern formats when testname="the test name", pattern="test", and width="15" 1`] = `"<dim>the </></>test</><dim> name</>"`;
+
+exports[`formatTestNameByPattern formats when testname="the test name", pattern="test", and width="20" 1`] = `"<dim>the </></>test</><dim> name</>"`;
+
+exports[`formatTestNameByPattern formats when testname="the test name", pattern="test", and width="25" 1`] = `"<dim>the </></>test</><dim> name</>"`;
+
+exports[`formatTestNameByPattern formats when testname="the test name", pattern="test", and width="30" 1`] = `"<dim>the </></>test</><dim> name</>"`;
+
+exports[`formatTestNameByPattern formats when testname="the test name", pattern="the", and width="5" 1`] = `"</>...</><dim>me</>"`;
+
+exports[`formatTestNameByPattern formats when testname="the test name", pattern="the", and width="10" 1`] = `"</>...</><dim>st name</>"`;
+
+exports[`formatTestNameByPattern formats when testname="the test name", pattern="the", and width="15" 1`] = `"</>the</><dim> test name</>"`;
+
+exports[`formatTestNameByPattern formats when testname="the test name", pattern="the", and width="20" 1`] = `"</>the</><dim> test name</>"`;
+
+exports[`formatTestNameByPattern formats when testname="the test name", pattern="the", and width="25" 1`] = `"</>the</><dim> test name</>"`;
+
+exports[`formatTestNameByPattern formats when testname="the test name", pattern="the", and width="30" 1`] = `"</>the</><dim> test name</>"`;

src/lib/__tests__/utils.test.js

@@ -1,5 +1,5 @@
 import stripAnsi from 'strip-ansi';
-import { trimAndFormatPath } from '../utils';
+import { trimAndFormatPath, formatTestNameByPattern } from '../utils';
 
 test('trimAndFormatPath', () => {
   expect(
@@ -8,3 +8,34 @@ test('trimAndFormatPath', () => {
     ),
   ).toEqual('to/you');
 });
+
+describe('formatTestNameByPattern', () => {
+  test.each`
+    testName           | pattern   | width
+    ${'the test name'} | ${'the'}  | ${30}
+    ${'the test name'} | ${'the'}  | ${25}
+    ${'the test name'} | ${'the'}  | ${20}
+    ${'the test name'} | ${'the'}  | ${15}
+    ${'the test name'} | ${'the'}  | ${10}
+    ${'the test name'} | ${'the'}  | ${5}
+    ${'the test name'} | ${'test'} | ${30}
+    ${'the test name'} | ${'test'} | ${25}
+    ${'the test name'} | ${'test'} | ${20}
+    ${'the test name'} | ${'test'} | ${15}
+    ${'the test name'} | ${'test'} | ${10}
+    ${'the test name'} | ${'test'} | ${5}
+    ${'the test name'} | ${'name'} | ${30}
+    ${'the test name'} | ${'name'} | ${25}
+    ${'the test name'} | ${'name'} | ${20}
+    ${'the test name'} | ${'name'} | ${15}
+    ${'the test name'} | ${'name'} | ${10}
+    ${'the test name'} | ${'name'} | ${5}
+  `(
+    'formats when testname="$testName", pattern="$pattern", and width="$width"',
+    ({ testName, pattern, width }) => {
+      expect(
+        formatTestNameByPattern(testName, pattern, width),
+      ).toMatchSnapshot();
+    },
+  );
+});

src/lib/utils.js

@@ -134,26 +134,24 @@ export const formatTestNameByPattern = (
   const startPatternIndex = Math.max(match.index, 0);
   const endPatternIndex = startPatternIndex + match[0].length;
 
-  if (inlineTestName.length <= width) {
+  const testNameFitsInTerminal = inlineTestName.length <= width;
+  if (testNameFitsInTerminal) {
     return colorize(inlineTestName, startPatternIndex, endPatternIndex);
   }
 
-  const slicedTestName = inlineTestName.slice(0, width - DOTS.length);
-
-  if (startPatternIndex < slicedTestName.length) {
-    if (endPatternIndex > slicedTestName.length) {
-      return colorize(
-        slicedTestName + DOTS,
-        startPatternIndex,
-        slicedTestName.length + DOTS.length,
-      );
-    }
-    return colorize(
-      slicedTestName + DOTS,
-      Math.min(startPatternIndex, slicedTestName.length),
-      endPatternIndex,
-    );
+  const numberOfTruncatedChars = DOTS.length + inlineTestName.length - width;
+  const end = Math.max(endPatternIndex - numberOfTruncatedChars, 0);
+  const truncatedTestName = inlineTestName.slice(numberOfTruncatedChars);
+
+  const shouldHighlightDots = startPatternIndex <= numberOfTruncatedChars;
+  if (shouldHighlightDots) {
+    return colorize(DOTS + truncatedTestName, 0, end + DOTS.length);
   }
 
-  return `${chalk.dim(slicedTestName)}${chalk.reset(DOTS)}`;
+  const start = startPatternIndex - numberOfTruncatedChars;
+  return colorize(
+    DOTS + truncatedTestName,
+    start + DOTS.length,
+    end + DOTS.length,
+  );
 };