Merge branch 'master' into implement-one-stop-config-file

.gitignore

@@ -19,6 +19,8 @@ node_modules
 /frontend/public/
 !/frontend/public/favicon.ico
 !/frontend/public/index.html
+/frontend/.eslintcache
+/frontend/.stylelintcache
 
 reposense-report/
 docs/_site/

docs/dg/learningBasics.md

@@ -263,7 +263,7 @@ It is necessary for you to learn the basics of Vue.js, Pug, and SCSS before work
 <box type="info" seamless>
 
 Vue.js uses JavaScript as its programming language. Before learning **Vue.js**, you may need to first get yourself familiar with JavaScript syntax first.
-You can refer to the [Javascript documentation](https://devdocs.io/javascript/) to learn the basic syntax. There are plenty of other resources available and please feel free to find the resource most suitable for you.
+You can refer to the [Javascript documentation](https://devdocs.io/javascript/) to learn the basic syntax. There are plenty of other resources available and please feel free to find the resource most suitable for you. Do note that RepoSense uses ES6 over CommonJS.
 </box>
 
 RepoSense uses **Vue.js** (Vue3) in its front-end implementation. In particular, major user interface components, such as [summary view](report.html#summary-view-v-summary-js), [authorship view](report.html#authorship-view-v-authorship-js), and [zoom view](report.html#zoom-view-v-zoom-js), are implemented as Vue components. The corresponding source files are in `frontend/src`.

docs/ug/troubleshooting.md

@@ -40,3 +40,9 @@ Possibly, you may have some file names with [special characters](https://docs.mi
 ### Some file types are not shown in the file type filter even if I have included them in the file formats when generating the report
 
 The files of these types may be [binary files](https://en.wikipedia.org/wiki/Binary_file). *RepoSense* will group binary files under one single file type `binary`. Common binary files include images (`.jpg`, `.png`), applications (`.exe`), zip files (`.zip`, `.rar`) and certain document types (`.docx`, `.pptx`).
+
+<!-- ------------------------------------------------------------------------------------------------------ -->
+
+### RepoSense doesn't work on the browser
+
+RepoSense uses ES6, a version of JavaScript widely supported by [most browsers](https://caniuse.com/?search=es6). Please use RepoSense with a browser that supports ES6.

frontend/.eslintrc.json

@@ -1,6 +1,8 @@
 {
   "env": {
-    "browser": true
+    "browser": true,
+    "node": true,
+    "es2022": true
   },
   "extends": [
     "airbnb-base",

frontend/cypress/config/author-config.csv

@@ -0,0 +1,2 @@
+Repository's Location,Branch,Author's Git Host ID,Author's Emails,Author's Display Name,Author's Git Author Name,Ignore Glob List
+https://github.com/reposense/publish-RepoSense.git,master,yong24s,,,Yong Hao TENG;yong24s,

frontend/cypress/cypress.config.js

@@ -8,6 +8,7 @@ module.exports = defineConfig({
   e2e: {
     setupNodeEvents(on, config) {},
     baseUrl: 'http://localhost:9000',
+    chromeWebSecurity: false,
     specPattern: 'tests/**/*.cy.{js,jsx,ts,tsx}',
     supportFile: 'support.js',
   },

frontend/cypress/tests/chartView/chartView_mergeGroup.cy.js

@@ -17,9 +17,9 @@ describe('merge group', () => {
       .uncheck()
       .should('not.be.checked');
 
-    // after un-checking merge group, all 14 summary charts will show
+    // after un-checking merge group, all 9 summary charts will show
     cy.get('#summary-charts').find('.summary-chart')
-      .should('have.length', 14);
+      .should('have.length', 9);
   });
 
   it('check and uncheck merge group when group by authors', () => {
@@ -31,19 +31,19 @@ describe('merge group', () => {
       .check()
       .should('be.checked');
 
-    // after checking merge group, 14 merged author groups will show
+    // after checking merge group, 8 merged author groups will show
     cy.get('#summary-charts').find('.summary-chart')
-      .should('have.length', 14);
+      .should('have.length', 8);
 
     cy.get('#summary label.merge-group > input:visible')
       .first()
       .should('be.visible')
       .uncheck()
       .should('not.be.checked');
 
-    // after un-checking merge group, all 14 summary charts will show
+    // after un-checking merge group, all 9 summary charts will show
     cy.get('#summary-charts').find('.summary-chart')
-      .should('have.length', 14);
+      .should('have.length', 9);
   });
 
   it('merge group option should be disabled when group by none', () => {
@@ -62,15 +62,15 @@ describe('merge group', () => {
       .should('be.checked');
 
     // get the chart bars and assert they have the correct initial widths
-    const expectedWidths = [100, 100, 100, 15, 100, 100, 90, 30, 15];
+    const expectedWidths = [100, 100, 20, 100, 100, 3, 20, 5];
     cy.get('.stacked-bar__contrib--bar')
       .should('have.length', expectedWidths.length)
       .then(($bars) => {
         // calculate the percentage of the width relative to the parent container
         const parentWidth = $bars.eq(0).parent().width();
         expectedWidths.forEach((expectedWidth, index) => {
           const width = (parseFloat(window.getComputedStyle($bars[index]).width) / parentWidth) * 100;
-          expect(width).to.be.closeTo(expectedWidth, 1);
+          expect(width).to.be.closeTo(expectedWidth, 2);
         });
       });
   });

frontend/cypress/tests/chartView/chartView_scrollToActiveRepo.cy.js

@@ -49,7 +49,7 @@ describe('scroll to active repo', () => {
       });
 
     cy.url()
-      .should('contain', 'tabAuthor=Yong%20Hao%20TENG')
+      .should('contain', 'tabAuthor=yong24s')
       .should('contain', 'tabRepo=reposense%2Fpublish-RepoSense%5Bmaster%5D');
 
     cy.reload();

frontend/cypress/tests/chartView/chartView_showTags.cy.js

@@ -64,4 +64,91 @@ describe('show tags', () => {
         .should('equal', 'https://github.com/reposense/RepoSense/releases/tag/v1.0');
     });
   });
+
+  it('group by authors works with show tags', () => {
+    cy.get('div.mui-select.grouping > select:visible')
+      .select('groupByAuthors');
+
+    cy.get('div.mui-select.sort-within-group > select:visible')
+      .select('title dsc');
+
+    cy.get('#summary label.show-tags > input:visible')
+      .should('be.visible')
+      .check()
+      .should('be.checked');
+
+    cy.get('.summary-chart')
+      .first()
+      .find('.summary-chart__title--tags')
+      .find('a')
+      .should('have.length', 0);
+
+    cy.get('.summary-chart')
+      .eq(1)
+      .find('.summary-chart__title--tags')
+      .find('a')
+      .should('have.length.gt', 0);
+
+    cy.get('.icon-button.fa-list-ul')
+      .should('exist')
+      .eq(1)
+      .click();
+
+    const correctTags = [];
+
+    cy.get('.zoom__title--tags')
+      .find('.tag')
+      .each(($tag) => correctTags.push($tag.text().trim()))
+      .then(() => {
+        cy.get('.summary-chart')
+          .eq(1)
+          .find('.summary-chart__title--tags')
+          .find('.tag')
+          .each(($tag) => {
+            expect(correctTags).to.include($tag.text().trim());
+          });
+
+        cy.get('.summary-chart')
+          .eq(1)
+          .find('.summary-chart__title--tags')
+          .find('.tag')
+          .should('have.length', correctTags.length);
+      });
+  });
+
+  it('group by none works with show tags', () => {
+    cy.get('div.mui-select.grouping > select:visible')
+      .select('groupByNone');
+
+    cy.get('#summary label.show-tags > input:visible')
+      .should('be.visible')
+      .check()
+      .should('be.checked');
+
+    cy.get('.icon-button.fa-list-ul')
+      .should('exist')
+      .first()
+      .click();
+
+    const correctTags = [];
+
+    cy.get('.zoom__title--tags')
+      .find('.tag')
+      .each(($tag) => correctTags.push($tag.text().trim()))
+      .then(() => {
+        cy.get('.summary-chart')
+          .first()
+          .find('.summary-chart__title--tags')
+          .find('.tag')
+          .each(($tag) => {
+            expect(correctTags).to.include($tag.text().trim());
+          });
+
+        cy.get('.summary-chart')
+          .first()
+          .find('.summary-chart__title--tags')
+          .find('.tag')
+          .should('have.length', correctTags.length);
+      });
+  });
 });

frontend/public/index.html → frontend/index.html

@@ -4,12 +4,13 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <link rel="icon" href="/favicon.ico">
+    <title>RepoSense Report</title>
+    <script type="module" src="/src/main.ts"></script>
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong>We're sorry but RepoSense Report doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->