feat(detector): adds color to files with smells

Author: marabesi

detector/src/reporters/layout/example.html

@@ -83,7 +83,13 @@ <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
           {{#each data}}
           <tr
             onclick="toggleDetails({{@index}})"
-            class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700 cursor-pointer">
+
+            {{#if smells.length}}
+              class="odd:bg-white odd:bg-yellow-400 even:bg-yellow-400 border-b even:dark:bg-yellow-800 odd:dark:bg-yellow-800 cursor-pointer"
+            {{else}}
+              class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700 cursor-pointer"
+            {{/if}}
+          >
             <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
               {{this.fileName}}
             </th>

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

@@ -116,6 +116,22 @@ describe('html report', () => {
       expect(root.querySelector('[data-testid="file-list"] tbody tr')?.textContent).toContain('javascript');
     });
 
+    test('renders yellow line when smells exists', async () => {
+      const generatedHtml = await buildHtmlReportForTestSmellsFor(exportsOptions, filePath, oneFileWithOneConsoleSmells());
+      const root = parse(generatedHtml);
+
+      expect(root.querySelector('[data-testid="file-list"] tbody tr')?.classList.value).toContain('odd:bg-yellow-400');
+      expect(root.querySelector('[data-testid="file-list"] tbody tr')?.classList.value).toContain('even:bg-yellow-400');
+    });
+
+    test('should not render yellow for file without smells', async () => {
+      const generatedHtml = await buildHtmlReportForTestSmellsFor(exportsOptions, filePath, emptySmellsListForSingleFile());
+      const root = parse(generatedHtml);
+
+      expect(root.querySelector('[data-testid="file-list"] tbody tr')?.classList.value).not.toContain('odd:bg-yellow-400');
+      expect(root.querySelector('[data-testid="file-list"] tbody tr')?.classList.value).not.toContain('even:bg-yellow-400');
+    });
+
     describe('smells table with smells', () => {
       test('renders info about no smells', async () => {
         const generatedHtml = await buildHtmlReportForTestSmellsFor(exportsOptions, filePath, emptySmellsListForSingleFile());