Convert badge-setter and html-generator to JavaScript

src/js/services/badge-setter.test.ts → src/js/services/badge-setter.test.js

@@ -1,17 +1,21 @@
+/**
+ * @typedef {import('../static/types').PullRequestRecord} PullRequestRecord
+ */
+
 import BadgeSetter from './badge-setter.js';
-import { PullRequestRecord } from '../static/types';
-import { pullRequestRecordFactory } from '../../../__test__/mocks/factories';
+import { pullRequestRecordFactory } from '../../../__test__/mocks/factories.js';
 
 global.chrome = {
   action: {
     setBadgeText: jest.fn(),
     setBadgeBackgroundColor: jest.fn(),
   },
-} as any;
+};
 
 describe('BadgeSetter', () => {
   describe('update', () => {
-    let record: PullRequestRecord;
+    /** @type {PullRequestRecord} */
+    let record;
     let counter = {
       'reviewRequested': true,
       'teamReviewRequested': true,

src/js/services/html-generator.js

@@ -0,0 +1,120 @@
+/**
+ * @typedef {import('../static/types').CounterConfig} CounterConfig
+ * @typedef {import('../static/types').PullRequest} PullRequest
+ * @typedef {import('../static/types').PullRequestRecord} PullRequestRecord
+ * @typedef {import('../static/types').PullRequestRecordKey} PullRequestRecordKey
+ */
+
+import { recordKeysTranslations, extensionID } from '../static/constants.js';
+
+const HTMLGenerator = () => {
+  /**
+   * @param {PullRequestRecord} record
+   * @param {CounterConfig} counter
+   * @returns {HTMLDivElement}
+   */
+  const generate = (record, counter) => {
+    const topLevelDiv = document.createElement('div');
+    topLevelDiv.classList.add('pull-requests-loaded');
+
+    for (const key of Object.keys(record)) {
+      if (record[key].length === 0) continue;
+      const lessRelevant = !counter[key];
+
+      const titleP = document.createElement('h5');
+      titleP.textContent = recordKeysTranslations[key];
+      titleP.classList.add('title');
+      if (lessRelevant) titleP.classList.add('less-relevant-group');
+      topLevelDiv.appendChild(titleP);
+
+      topLevelDiv.appendChild(generateLinkStructure(record[key], lessRelevant));
+    }
+
+    if (topLevelDiv.children.length === 0) {
+      const titleP = document.createElement('p');
+      titleP.textContent = 'Nothing to do';
+      titleP.classList.add('title');
+      topLevelDiv.classList.remove('pull-requests-loaded');
+      topLevelDiv.appendChild(titleP);
+      topLevelDiv.appendChild(generateNoContent());
+    }
+
+    return topLevelDiv;
+  };
+
+  /**
+   * @param {PullRequest[]} pullRequests
+   * @param {boolean} lessRelevant
+   * @returns {HTMLDivElement}
+   */
+  const generateLinkStructure = (pullRequests, lessRelevant) => {
+    const groupLevelDiv = document.createElement('div');
+    groupLevelDiv.classList.add('group-container');
+    if (lessRelevant) groupLevelDiv.classList.add('less-relevant-group');
+
+    for (const PullRequest of pullRequests) {
+      const pullRequestDiv = document.createElement('div');
+      const firstRow = document.createElement('div');
+      const secondRow = document.createElement('div');
+      pullRequestDiv.appendChild(firstRow);
+      pullRequestDiv.appendChild(secondRow);
+
+      const repoUrl = document.createElement('a');
+      repoUrl.appendChild(document.createTextNode(PullRequest.ownerAndName));
+      repoUrl.href = PullRequest.repositoryUrl;
+      repoUrl.target = '_blank';
+      firstRow.appendChild(repoUrl);
+
+      firstRow.appendChild(generatePullRequestLink(PullRequest));
+      secondRow.appendChild(generateSubDescription(PullRequest));
+
+      pullRequestDiv.classList.add('link-container');
+      groupLevelDiv.appendChild(pullRequestDiv);
+    }
+
+    return groupLevelDiv;
+  };
+
+  /**
+   * @returns {HTMLDivElement}
+   */
+  const generateNoContent = () => {
+    const noContentDiv = document.createElement('div');
+    noContentDiv.classList.add('group-container');
+    const p1 = document.createElement('p');
+    const p2 = document.createElement('p');
+    p1.textContent = 'Seems like you are a good coworker :)';
+    const link = `<a href="chrome-extension://${extensionID}/options.html" target="_blank" class="link-in-text">options&nbsp;</a>`;
+    p2.innerHTML = `Or you configured the extension wrong. Have a look the ${link}  to verify your configuration.`;
+    noContentDiv.appendChild(p1);
+    noContentDiv.appendChild(p2);
+    return noContentDiv;
+  };
+
+  /**
+   * @param {PullRequest} PullRequest
+   * @returns {HTMLAnchorElement}
+   */
+  const generatePullRequestLink = (PullRequest) => {
+    const link = document.createElement('a');
+    link.appendChild(document.createTextNode(PullRequest.title));
+    link.href = PullRequest.htmlUrl;
+    link.target = '_blank';
+    return link;
+  };
+
+  /**
+   * @param {PullRequest} PullRequest
+   * @returns {HTMLParagraphElement}
+   */
+  const generateSubDescription = (PullRequest) => {
+    const subDescriptionP = document.createElement('p');
+    subDescriptionP.classList.add('subdescription');
+    subDescriptionP.appendChild(document.createTextNode(`#${PullRequest.number} opened ${Math.floor(PullRequest.ageInDays)} days ago by ${PullRequest.author}`));
+    return subDescriptionP;
+  };
+
+  return { generate };
+};
+
+export default HTMLGenerator;

src/js/services/html-generator.test.ts → src/js/services/html-generator.test.js

@@ -1,10 +1,11 @@
 /**
  * @jest-environment jsdom
+ * @typedef {import('../static/types').CounterConfig} CounterConfig
+ * @typedef {import('../static/types').PullRequestRecord} PullRequestRecord
  */
 
-import HTMLGenerator from './html-generator';
-import { CounterConfig, PullRequestRecord } from '../static/types';
-import { pullRequestRecordFactory } from '../../../__test__/mocks/factories';
+import HTMLGenerator from './html-generator.js';
+import { pullRequestRecordFactory } from '../../../__test__/mocks/factories.js';
 
 describe('HTMLGenerator', () => {
   const htmlGenerator = HTMLGenerator();
@@ -18,9 +19,12 @@ describe('HTMLGenerator', () => {
   };
 
   describe('#generate', () => {
-    let record: PullRequestRecord;
-    let counter: CounterConfig;
-    let result: HTMLDivElement;
+    /** @type {PullRequestRecord} */
+    let record;
+    /** @type {CounterConfig} */
+    let counter;
+    /** @type {HTMLDivElement} */
+    let result;
 
     beforeEach(() => {
       result = htmlGenerator.generate(record, counter);
@@ -44,11 +48,11 @@ describe('HTMLGenerator', () => {
       });
 
       it('has the correct <p> as its first child', () => {
-        expect(result.innerHTML).toContain('I must review');
+        expect(result.childNodes[0].innerHTML).toEqual('I must review');
       });
 
       it('has the correct <div> as its second child', () => {
-        expect((result.childNodes[1] as HTMLDivElement).className).toEqual('group-container');
+        expect(result.childNodes[1].className).toEqual('group-container');
       });
 
       describe('second child', () => {
@@ -58,16 +62,19 @@ describe('HTMLGenerator', () => {
 
         describe('<div>', () => {
           it('has the correct link', () => {
-            const a = result.querySelector('.pr-link') as HTMLAnchorElement;
+            const a = result.childNodes[1].childNodes[0].childNodes[0];
 
             expect(a.href).toEqual('https://github.com/renuo/github-pull-request-counter/pull/1');
             expect(a.target).toEqual('_blank');
             expect(a.innerHTML).toEqual('PullRequest-Title');
           });
 
           it('has the correct subdescription', () => {
-            const p = result.querySelector('.repo-link') as HTMLParagraphElement;
-            expect(p.innerHTML).toContain('renuo/github-pull-request-counter');
+            const p = result.childNodes[1].childNodes[0].childNodes[1];
+            const age = Math.floor(record.reviewRequested[0].ageInDays);
+            const id = record.reviewRequested[0].id;
+
+            expect(p.innerHTML).toEqual(`renuo/github-pull-request-counter<b> #${id}</b> (${age} days ago)`);
           });
         });
       });
@@ -86,11 +93,11 @@ describe('HTMLGenerator', () => {
         });
 
         it('the title has an additional class', () => {
-          expect((result.childNodes[0] as HTMLParagraphElement).classList.value).toEqual('title less-relevant-group');
+          expect(result.childNodes[0].classList.value).toEqual('title less-relevant-group');
         });
 
         it('the group container has an additional class', () => {
-          expect((result.childNodes[1] as HTMLDivElement).classList.value).toEqual('group-container less-relevant-group');
+          expect(result.childNodes[1].classList.value).toEqual('group-container less-relevant-group');
         });
       });
     });