chore(detector): html generation test cases

Author: marabesi

detector/package.json

@@ -30,6 +30,7 @@
     "@typescript-eslint/eslint-plugin": "^5.53.0",
     "@typescript-eslint/parser": "^5.53.0",
     "eslint": "^8.34.0",
+    "node-html-parser": "^6.1.13",
     "nodemon": "^3.1.4",
     "ts-loader": "*",
     "ts-node": "^10.9.2"

detector/src/reporters/layout/example.html

@@ -25,7 +25,7 @@
   <div class="container mx-auto p-5">
 
     <div class="flex justify-between items-center py-5">
-      <h1 class="text-3xl text-gray-700 dark:text-gray-400">Test smells report</h1>
+      <h1 class="text-3xl text-gray-700 dark:text-gray-400" data-testid="report-title">Test smells report</h1>
 
       <button id="theme-toggle" type="button"
         class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5">
@@ -45,14 +45,14 @@ <h1 class="text-3xl text-gray-700 dark:text-gray-400">Test smells report</h1>
       <div
         class="mb-5 max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700">
 
-        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">{{ totalSmells }}</h5>
-        <p class="font-normal text-gray-700 dark:text-gray-400">Test smells</p>
+        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white" data-testid="total-smells-found">{{ totalSmells }}</h5>
+        <p class="font-normal text-gray-700 dark:text-gray-400" data-testid="title-smells-found">Test smells</p>
       </div>
       <div
         class="mb-5 max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700">
 
-        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">{{ data.length }}</h5>
-        <p class="font-normal text-gray-700 dark:text-gray-400">Test cases</p>
+        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white" data-testid="total-test-files">{{ data.length }}</h5>
+        <p class="font-normal text-gray-700 dark:text-gray-400" data-testid="title-test-files">Test files</p>
       </div>
     </div>
     <div class="relative overflow-x-auto shadow-md sm:rounded-lg">

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

@@ -0,0 +1,64 @@
+import { test, describe, expect, afterEach, beforeEach } from 'vitest';
+import { exec } from "child_process";
+import { promisify } from "util";
+import { parse } from 'node-html-parser';
+import { SmellsBuilder } from '../src/smells-builder';
+import { SmellsAggreagtor } from '../src/reporters/SmellsAgreggator';
+import { AggregatedData, ExportOptions, SmellsList } from '../src/reporters/types';
+import { Smell, SmellType, SupportedLanguages } from '../src/types';
+import { HtmlOutput } from '../src/reporters/Output';
+import { readFileSync, rmSync } from 'fs';
+
+describe('html report', () => {
+  const exportsOptions: ExportOptions = { to: '.' };
+  const filePath = `${exportsOptions.to}/smelly-report.html`;
+
+  beforeEach(() => {
+    rmSync(filePath, { force: true });
+  });
+
+  afterEach(() => {
+    rmSync(filePath, { force: true });
+  });
+
+  test('renders empty table when no tests are found', async () => {
+    const generatedHtml = await buildHtmlReportForTestSmells(exportsOptions, filePath);
+    const root = parse(generatedHtml);
+
+    expect(root.querySelectorAll('table tbody tr').length).toEqual(0);
+  });
+
+  test('renders report title', async () => {
+    const generatedHtml = await buildHtmlReportForTestSmells(exportsOptions, filePath);
+    const root = parse(generatedHtml);
+
+    expect(root.querySelector('[data-testid="report-title"]')?.textContent).toEqual('Test smells report');
+  });
+
+  test('renders total number of smells found', async () => {
+    const generatedHtml = await buildHtmlReportForTestSmells(exportsOptions, filePath);
+    const root = parse(generatedHtml);
+
+    expect(root.querySelector('[data-testid="total-smells-found"]')?.textContent).toEqual('0');
+    expect(root.querySelector('[data-testid="title-smells-found"]')?.textContent).toEqual('Test smells');
+  });
+
+  test('renders the number of test files', async () => {
+    const generatedHtml = await buildHtmlReportForTestSmells(exportsOptions, filePath);
+    const root = parse(generatedHtml);
+
+    expect(root.querySelector('[data-testid="total-test-files"]')?.textContent).toEqual('0');
+    expect(root.querySelector('[data-testid="title-test-files"]')?.textContent).toEqual('Test files');
+  });
+});
+
+async function buildHtmlReportForTestSmells(exportsOptions: ExportOptions, filePath: string) {
+  const smellsFound: SmellsList[] = [];
+  const aggregatedData: AggregatedData = { data: smellsFound, totalSmells: 0, averageSmellsPerTestFile: 0 };
+
+  const reporter = new HtmlOutput();
+  await reporter.writeTo(aggregatedData, exportsOptions);
+
+  const generatedHtml = readFileSync(filePath, { encoding: 'utf8', flag: 'r' });
+  return generatedHtml;
+}