custom reporter

Author: siddharthkp

classname.test.ts

@@ -137,8 +137,30 @@ describe('classname', () => {
     );
   });
 
+  test.todo('composite class', () => {
+    assert.deepEqual(
+      { className: 'sr-only' },
+      classname({
+        responsiveModifier: null,
+        pseudoModifier: null,
+        property: 'composite',
+        value: null,
+        relatedProperties: {
+          position: 'static',
+          width: 'auto',
+          height: 'auto',
+          padding: '0',
+          margin: '0',
+          overflow: 'visible',
+          clip: 'auto',
+          whiteSpace: 'normal'
+        }
+      })
+    );
+  });
+
   // todo: unhandled opacity
-  test.todo('bg-red-200/50', () => {
+  test.skip('bg-red-200/50', () => {
     assert.deepEqual(
       { className: 'bg-red-200/50' },
       classname({

generated.test.ts

@@ -25,7 +25,7 @@ const isResponsive = (selector) => {
 };
 
 const compositeClassNames = [
-  'container',
+  'container', // no clue what to do with this
   'sr-only',
   'not-sr-only',
   'transform',
@@ -60,7 +60,7 @@ const classNames = selectors
 
 describe('generated suite', () => {
   // test.only('debug', async () => {
-  //   const originalClassName = 'accent-rose-800';
+  //   const originalClassName = 'sr-only';
   //   const definition = parse(originalClassName);
   //   console.log(definition);
   //   const { className: generatedClassName, error } = classname(definition);

package.json

@@ -11,7 +11,7 @@
     "utils"
   ],
   "scripts": {
-    "test": "vitest",
+    "test": "vitest --run --reporter='./reporter'",
     "test:generated": "vitest  generated --no-isolate",
     "build:fixtures": "npx tailwindcss -i node_modules/tailwindcss/tailwind.css -o ./dist/output.css"
   },

parse.test.ts

@@ -95,7 +95,7 @@ describe('parse', () => {
 
   test('drop-shadow-md', () => {
     assert.deepEqual(parse('drop-shadow-md'), {
-      className: 'drop-shadow-md',
+      className: 'drop-shadow-m',
       responsiveModifier: null,
       pseudoModifier: null,
       property: 'dropShadow',

properties.ts

@@ -2,126 +2,8 @@
 // TODO: add negative value support as well
 // TODO: keep color values, flatten them in theme
 // TODO: standardise camelcase
-
-/*
-this is probably a bad idea?
-
-what properties are missing here that might be in the theme:
-  "screens",
-  "colors",
-  "columns",
-  "spacing",
-  "animation",
-  "aspectRatio",
-  "backdropBlur",
-  "backdropBrightness",
-  "backdropContrast",
-  "backdropGrayscale",
-  "backdropHueRotate",
-  "backdropInvert",
-  "backdropOpacity",
-  "backdropSaturate",
-  "backdropSepia",
-  "backgroundColor",
-  "backgroundImage",
-  "backgroundOpacity",
-  "backgroundPosition",
-  "backgroundSize",
-  "blur",
-  "brightness",
-  "borderColor",
-  "borderOpacity",
-  "borderRadius",
-  "borderSpacing",
-  "borderWidth",
-  "boxShadow",
-  "boxShadowColor",
-  "caretColor",
-  "accentColor",
-  "contrast",
-  "container",
-  "content",
-  "cursor",
-  "divideColor",
-  "divideOpacity",
-  "divideWidth",
-  "dropShadow",
-  "fill",
-  "grayscale",
-  "hueRotate",
-  "invert",
-  "flex",
-  "flexBasis",
-  "flexGrow",
-  "flexShrink",
-  "fontFamily",
-  "fontSize",
-  "fontWeight",
-  "gap",
-  "gradientColorStops",
-  "gridAutoColumns",
-  "gridAutoRows",
-  "gridColumn",
-  "gridColumnEnd",
-  "gridColumnStart",
-  "gridRow",
-  "gridRowStart",
-  "gridRowEnd",
-  "gridTemplateColumns",
-  "gridTemplateRows",
-  "height",
-  "inset",
-  "keyframes",
-  "letterSpacing",
-  "lineHeight",
-  "listStyleType",
-  "margin",
-  "maxHeight",
-  "maxWidth",
-  "minHeight",
-  "minWidth",
-  "objectPosition",
-  "opacity",
-  "order",
-  "padding",
-  "placeholderColor",
-  "placeholderOpacity",
-  "outlineColor",
-  "outlineOffset",
-  "outlineWidth",
-  "ringColor",
-  "ringOffsetColor",
-  "ringOffsetWidth",
-  "ringOpacity",
-  "ringWidth",
-  "rotate",
-  "saturate",
-  "scale",
-  "scrollMargin",
-  "scrollPadding",
-  "sepia",
-  "skew",
-  "space",
-  "stroke",
-  "strokeWidth",
-  "textColor",
-  "textDecorationColor",
-  "textDecorationThickness",
-  "textUnderlineOffset",
-  "textIndent",
-  "textOpacity",
-  "transformOrigin",
-  "transitionDelay",
-  "transitionDuration",
-  "transitionProperty",
-  "transitionTimingFunction",
-  "translate",
-  "width",
-  "willChange",
-  "zIndex"
-]
-
-*/
+// TODO: some of these values are not single properties like paddingX
+// TODO: some of these values are not simple classname selectors like divideX
 
 type Properties = {
   [key: string]: {

reporter.ts

@@ -0,0 +1,109 @@
+import chalk from 'chalk';
+import type { Reporter, TaskState, File } from 'vitest';
+
+const StateMap: { [key in TaskState]: string } = {
+  pass: chalk.green('▎'),
+  fail: chalk.red('▎'),
+  skip: chalk.yellow('▎'),
+  todo: chalk.gray('▎'),
+  run: '', // not in final result
+  only: '' // probably never see this
+};
+
+const printResults = (results) => {
+  const name = results.name;
+
+  const printableResult = results.testResults.map((state: TaskState) => {
+    return StateMap[state];
+  });
+
+  const perLine = process.stdout.columns - 32 || 100;
+  let resultLines: string[] = [];
+
+  if (results.testResults.length < perLine) {
+    resultLines.push(`│ ${name} │ ${printableResult.join('')}│`);
+  } else {
+    const totalRows = Math.ceil(printableResult.length / perLine);
+
+    // first line with name
+    resultLines.push(`│ ${name} │ ${printableResult.slice(0, perLine).join('')}│`);
+
+    // not the first and last row
+    for (let i = 1; i < totalRows - 1; i++) {
+      // blank line
+      resultLines.push(`│ ${Array(name.length).fill(' ').join('')} │ ${Array(perLine).fill(' ').join('')}│`);
+
+      resultLines.push(
+        `│ ${Array(name.length).fill(' ').join('')} │ ${printableResult
+          .slice(i * perLine, i * perLine + perLine)
+          .join('')}│`
+      );
+    }
+
+    // last line
+    // blank line
+    resultLines.push(`│ ${Array(name.length).fill(' ').join('')} │ ${Array(perLine).fill(' ').join('')}│`);
+
+    // fill last line with spaces with extra spaces to make box
+    resultLines.push(
+      `│ ${Array(name.length).fill(' ').join('')} │ ${printableResult
+        .slice((totalRows - 1) * perLine, printableResult.length)
+        .join('')} ${Array(perLine - 1 - (printableResult.length % perLine))
+        .fill(' ')
+        .join('')}│`
+    );
+  }
+
+  const header = `┌${Array(name.length + 2)
+    .fill('─')
+    .join('')}┬${Array(Math.min(printableResult.length, perLine) + 1)
+    .fill('─')
+    .join('')}┐`;
+
+  const footer = `└${Array(name.length + 2)
+    .fill('─')
+    .join('')}┴${Array(Math.min(printableResult.length, perLine) + 1)
+    .fill('─')
+    .join('')}┘`;
+
+  console.log(
+    `
+${header}
+${resultLines.join('\n')}
+${footer}
+  `.trim()
+  );
+};
+
+class reporter implements Reporter {
+  // looks like collected is fired once per file
+  async onCollected(files?: File[]) {
+    // console.log('collected', files);
+  }
+
+  async onFinished(files: File[] = [], errors?: unknown[]) {
+    files.forEach((file) => {
+      const results = {
+        name: file.name,
+        state: 'run',
+        duration: 0,
+        testResults: []
+      };
+
+      results.state = file.result!.state; // 'pass' | 'fail' | 'run' | 'skip' | 'only' | 'todo'
+      results.duration = file.result!.duration;
+
+      // each describe is it's own suite
+      const suites = file.tasks;
+      suites.forEach((suite) => {
+        suite.tasks.forEach((task) => {
+          if (task.mode !== 'run') results.testResults.push(task.mode);
+          else results.testResults.push(task.result.state);
+        });
+      });
+      printResults(results);
+    });
+  }
+}
+
+export default reporter;