feat: hidden code from test files plot into html report

Author: marabesi

cli/src/find-smells.ts

@@ -39,10 +39,10 @@ async function execute() {
       const aggregator: SmellsList[] = [];
 
       for (const file of pathWithAllFilesFound) {
-        const fileContents = await fs.readFile(file, { encoding: 'utf8' });
-        const smellDetector = new SmellDetector(fileContents, language);
+        const fileContent = await fs.readFile(file, { encoding: 'utf8' });
+        const smellDetector = new SmellDetector(fileContent, language);
         const smells = smellDetector.findAll().smells;
-        aggregator.push({ fileName: file, smells, language });
+        aggregator.push({ fileName: file, smells, language, fileContent });
       }
 
       const to = path.resolve(reportOutput.replace('--report-output=', ''));

detector/src/reporters/SmellsAgreggator.ts

@@ -16,7 +16,7 @@ export class SmellsAggreagtor implements AgreggatorSmellls {
       await output.writeTo({
         totalSmells,
         data: this.totalTestFiles,
-        averageSmellsPerTestFile: totalSmells / totalFiles
+        averageSmellsPerTestFile: totalSmells / totalFiles,
       }, this.exportOptions);
     } catch (err) {
       console.log(err);

detector/src/reporters/layout/example.html

@@ -5,6 +5,9 @@
   <title>Test smells report</title>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css" />
+
   <script src="https://cdn.tailwindcss.com"></script>
   <script>
     tailwind.config = {
@@ -84,13 +87,21 @@ <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
               {{this.smells.length}}
             </td>
           </tr>
+          <tr class="hidden">
+            <td colspan="3" class="p-4" data-testid="{{@index}}-code">
+              <pre><code>{{this.fileContent}}</code></pre>
+            </td>
+          </tr>
           {{/each}}
         </tbody>
       </table>
     </div>
 
   </div>
 
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+  <script>hljs.highlightAll();</script>
+
   <script>
     var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
     var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');

detector/src/reporters/types.ts

@@ -4,6 +4,7 @@ export interface SmellsList {
   language: SupportedLanguages;
   fileName: string;
   smells: Smell[];
+  fileContent: string;
 }
 
 export interface AgreggatorSmellls {

detector/test/html-report.integration.test.ts

@@ -58,7 +58,8 @@ describe('html report', () => {
         {
           smells: [smell, smell, smell, smell],
           language: SupportedLanguages.javascript,
-          fileName: 'first_test.js'
+          fileName: 'first_test.js',
+          fileContent: 'console.log("Hello world")',
         },
       ];
 
@@ -79,6 +80,14 @@ describe('html report', () => {
       expect(root.querySelector('table tbody tr')?.textContent).toContain('first_test.js');
     });
 
+    test('renders test file code', async () => {
+      const aggregatedData = buildAggregatedData();
+      const generatedHtml = await buildHtmlReportForTestSmellsFor(exportsOptions, filePath, aggregatedData);
+      const root = parse(generatedHtml);
+
+      expect(root.querySelector('[data-testid="0-code"]')?.textContent).toContain('console.log("Hello world")');
+    });
+
     test('renders language', async () => {
       const generatedHtml = await buildHtmlReportForTestSmellsFor(exportsOptions, filePath, buildAggregatedData());
       const root = parse(generatedHtml);

detector/test/smells-aggregator.test.ts

@@ -7,6 +7,29 @@ import { Smell, SmellType, SupportedLanguages } from '../src/types';
 
 vi.mock('../src/reporters/Output');
 
+function buildListWithSingleSmell(smells: Smell[]): SmellsList[] {
+  return [
+    {
+      smells,
+      language: SupportedLanguages.javascript,
+      fileName: 'random',
+      fileContent: 'console.log("Hello world")',
+    },
+  ];
+}
+
+function createSingleSmell(): Smell {
+  return {
+    type: SmellType.consoleStatement,
+    lineStart: 0,
+    lineEnd: 1,
+    startAt: 10,
+    endsAt: 20,
+    description: '',
+    diagnostic: ''
+  };
+}
+
 describe('smells aggregator', () => {
   test('no smells for a single file', async () => {
     const smellsFound: SmellsList[] = [];
@@ -22,24 +45,21 @@ describe('smells aggregator', () => {
     expect(write.mock.calls[0][1]).toEqual(exportsOptions);
   });
 
-  test('match detected smells found to write in the output', async () => {
-    const smell: Smell = {
-      type: SmellType.consoleStatement,
-      lineStart: 0,
-      lineEnd: 1,
-      startAt: 10,
-      endsAt: 20,
-      description: '',
-      diagnostic: ''
-    };
+  test('should send file contents to the output', async () => {
+    const smellsFound: SmellsList[] = buildListWithSingleSmell([createSingleSmell()]);
+    const exportsOptions: ExportOptions = { to: '.' };
 
-    const smellsFound: SmellsList[] = [
-      {
-        smells: [smell],
-        language: SupportedLanguages.javascript,
-        fileName: 'random'
-      },
-    ];
+    const write = vi.mocked(HtmlOutput.prototype.writeTo = vi.fn());
+
+    const reporter = new SmellsAggreagtor(smellsFound, exportsOptions);
+
+    await reporter.build();
+
+    expect(write.mock.calls[0][0].data[0].fileContent).toEqual('console.log("Hello world")');
+  });
+
+  test('match detected smells found to write in the output', async () => {
+    const smellsFound: SmellsList[] = buildListWithSingleSmell([createSingleSmell()]);
     const exportsOptions: ExportOptions = { to: '.' };
 
     const write = vi.mocked(HtmlOutput.prototype.writeTo = vi.fn());
@@ -62,13 +82,7 @@ describe('smells aggregator', () => {
       diagnostic: ''
     };
 
-    const smellsFound: SmellsList[] = [
-      {
-        smells: [smell],
-        language: SupportedLanguages.javascript,
-        fileName: 'random'
-      },
-    ];
+    const smellsFound: SmellsList[] = buildListWithSingleSmell([createSingleSmell()]);
     const exportsOptions: ExportOptions = { to: '.' };
 
     const write = vi.mocked(HtmlOutput.prototype.writeTo = vi.fn());
@@ -86,12 +100,14 @@ describe('smells aggregator', () => {
       {
         smells: [smell, smell, smell, smell, smell],
         language: SupportedLanguages.javascript,
-        fileName: 'first_test.js'
+        fileName: 'first_test.js',
+        fileContent: 'console.log("Hello world")',
       },
       {
         smells: [smell, smell, smell, smell, smell],
         language: SupportedLanguages.javascript,
-        fileName: 'second_test.js'
+        fileName: 'second_test.js',
+        fileContent: 'var content = 0',
       },
     ];
     const exportsOptions: ExportOptions = { to: '.' };
@@ -111,12 +127,14 @@ describe('smells aggregator', () => {
       {
         smells: [smell, smell, smell, smell],
         language: SupportedLanguages.javascript,
-        fileName: 'first_test.js'
+        fileName: 'first_test.js',
+        fileContent: 'console.log("Hello world")',
       },
       {
         smells: [],
         language: SupportedLanguages.javascript,
-        fileName: 'second_test.js'
+        fileName: 'second_test.js',
+        fileContent: 'console.log("Hello world")',
       },
     ];
     const exportsOptions: ExportOptions = { to: '.' };
@@ -129,4 +147,4 @@ describe('smells aggregator', () => {
 
     expect(write.mock.calls[0][0].averageSmellsPerTestFile).toEqual(2);
   });
-});
+});

package.json

@@ -14,6 +14,7 @@
     "@vitest/coverage-v8": "^2.1.6"
   },
   "scripts": {
+    "build": "npm exec --workspaces -- npm run compile",
     "test": "npm exec --workspaces -- npm run test",
     "clean": "npm exec --workspaces -- rimraf node_modules && rimraf node_modules"
   },