refactor: moved constants to separated files

e2e/npm.spec.js

@@ -1,5 +1,5 @@
-import { test, Expect } from '../fixtures.js';
-import { PACKAGE_REPORT_SELECTOR } from './e2e-tests-constants.js';
+import { Expect, test } from '../fixtures.js';
+import { packageReportTagName } from '../src/globals.js';
 
 test.describe('npm', () => {
   test('Package Report is visible in npmjs.com', async ({ page }) => {
@@ -12,7 +12,7 @@ test.describe('npm', () => {
     });
 
     // get the package name from overlay popup
-    const overlayPackageInfoComponent = page.locator(PACKAGE_REPORT_SELECTOR);
+    const overlayPackageInfoComponent = page.locator(packageReportTagName);
     await Expect(overlayPackageInfoComponent).toHaveAttribute('package-name', packageName);
   });
 
@@ -25,7 +25,7 @@ test.describe('npm', () => {
     });
 
     // get the package name from overlay popup
-    let overlayPackageInfoComponent = page.locator(PACKAGE_REPORT_SELECTOR);
+    let overlayPackageInfoComponent = page.locator(packageReportTagName);
     await Expect(overlayPackageInfoComponent).toHaveAttribute('package-name', packageName);
 
     // use the search bar to find the @angular/cli package
@@ -38,7 +38,7 @@ test.describe('npm', () => {
     await getSearchResultInDropDown.click();
 
     // check that overlay's title has changed to @angular/cli
-    overlayPackageInfoComponent = page.locator(PACKAGE_REPORT_SELECTOR);
+    overlayPackageInfoComponent = page.locator(packageReportTagName);
     await Expect(overlayPackageInfoComponent).toHaveAttribute('package-name', packageName);
   });
 
@@ -58,8 +58,8 @@ test.describe('npm', () => {
     const getSearchResultInDropDown = page.locator(`li[aria-label="${packageName}"]`);
     await getSearchResultInDropDown.click();
 
-    // check that overlay's title has changed to @angular/cli
-    const overlayPackageInfoComponent = page.locator(PACKAGE_REPORT_SELECTOR);
+    // check that overlay's title is "@ngneat/spectator"
+    const overlayPackageInfoComponent = page.locator(packageReportTagName);
     await Expect(overlayPackageInfoComponent).toHaveAttribute('package-name', packageName);
   });
 });

e2e/pypi.spec.js

@@ -1,13 +1,14 @@
-import { test, Expect } from '../fixtures.js';
-import { PACKAGE_REPORT_SELECTOR, TOOLTIP_SOURCES_SELECTOR } from './e2e-tests-constants.js';
+import { Expect, test } from '../fixtures.js';
+import { packageReportTagName } from '../src/globals.js';
+import { tooltipSourceSelector } from './selectors.js';
 
 test.describe('pypi', () => {
   test('Package Report is visible in PyPI.org', async ({ page }) => {
     await page.goto('https://pypi.org/project/pandas/', {
       waitUntil: 'domcontentloaded',
     });
 
-    const overlayPackageInfoComponent = page.locator(PACKAGE_REPORT_SELECTOR);
+    const overlayPackageInfoComponent = page.locator(packageReportTagName);
     await Expect(overlayPackageInfoComponent).toHaveAttribute('package-name', 'pandas');
   });
 
@@ -16,11 +17,11 @@ test.describe('pypi', () => {
       waitUntil: 'domcontentloaded',
     });
 
-    const overlayPackageInfoComponent = page.locator(PACKAGE_REPORT_SELECTOR);
+    const overlayPackageInfoComponent = page.locator(packageReportTagName);
     await Expect(overlayPackageInfoComponent).toHaveAttribute('package-name', 'pandas');
 
     // check that overlay display 3 advisories in pypi - OpenSSF Scorecard, Snyk, and Debricked (currently Socket.dev not working)
-    const overlayTooltipSources = page.locator(TOOLTIP_SOURCES_SELECTOR);
+    const overlayTooltipSources = page.locator(tooltipSourceSelector);
     await overlayTooltipSources.highlight();
     await Expect(overlayTooltipSources).toHaveCount(3);
   });

e2e/selectors.js

@@ -0,0 +1 @@
+export const tooltipSourceSelector = '.overlay-indicator__tooltip__sources > .overlay-indicator__tooltip__source';

e2e/stackoverflow.spec.js

@@ -1,5 +1,6 @@
-import { test, Expect } from '../fixtures.js';
-import { NUM_OF_ADVISORIES, TOOLTIP_SOURCES_SELECTOR } from './e2e-tests-constants.js';
+import { Expect, test } from '../fixtures.js';
+import { advisoriesNames } from '../src/globals.js';
+import { tooltipSourceSelector } from './selectors.js';
 
 const stackOverflowLink = 'https://stackoverflow.com/questions/9023672/how-do-i-resolve-cannot-find-module-error-using-node-js';
 
@@ -17,15 +18,15 @@ test.describe('stackoverflow', () => {
     await Expect(overlayModuleName).toBeVisible();
 
     // check that all advisories are shown in the tooltip's advisories list
-    const advisories = overlayModuleName.locator(TOOLTIP_SOURCES_SELECTOR);
-    await Expect(advisories).toHaveCount(NUM_OF_ADVISORIES);
+    const advisories = overlayModuleName.locator(tooltipSourceSelector);
+    await Expect(advisories).toHaveCount(advisoriesNames.length);
   });
 
   test('popup page', async ({ page, extensionId }) => {
     // find chrome extension popup
     await page.goto(`chrome-extension://${extensionId}/popup/index.html`);
     const advisoroes = page.locator('main > div');
-    await Expect(advisoroes).toHaveCount(NUM_OF_ADVISORIES);
+    await Expect(advisoroes).toHaveCount(advisoriesNames.length);
 
     // find snyk's checkbox and uncheck it
     const snykCheckbox = advisoroes.getByText('Show snyk').locator('input');
@@ -40,9 +41,9 @@ test.describe('stackoverflow', () => {
     await moduleNameLink.hover();
 
     const overlayModuleName = page.locator('.overlay-tooltip__tooltip .overlay-indicator__tooltip[data-testid="module_name"]');
-    const advisories = overlayModuleName.locator(TOOLTIP_SOURCES_SELECTOR);
+    const advisories = overlayModuleName.locator(tooltipSourceSelector);
 
     // check that snyk is not shown in the advisories list
-    await Expect(advisories).toHaveCount(NUM_OF_ADVISORIES - 1);
+    await Expect(advisories).toHaveCount(advisoriesNames.length - 1);
   });
 });

src/content/content.npmjs.js

@@ -1,17 +1,18 @@
+import { packageReportTagName } from '../globals';
+import waitForElement from '../utils/utils';
 import { mountContentScript, reloadWhenURLChanged } from './content';
 import { fetchPackageInfo } from './content-events';
 import { urlParsers } from './registry/npm';
-import waitForElement from '../utils/utils';
 
 const addPackageReport = async (packageID) => {
   // remove an old package report (if exists)
-  const currPackageReport = document.getElementsByTagName('overlay-package-report');
+  const currPackageReport = document.getElementsByTagName(packageReportTagName);
   if (currPackageReport?.length) {
     currPackageReport.item(0).remove();
   }
 
   const repository = await waitForElement('#repository', document.querySelector('#main'));
-  const packageReport = document.createElement('overlay-package-report');
+  const packageReport = document.createElement(packageReportTagName);
   packageReport.setAttribute('package-type', packageID.type);
   packageReport.setAttribute('package-name', packageID.name);
   repository.parentElement.insertBefore(packageReport, repository);

src/content/content.pypi.js

@@ -1,10 +1,11 @@
 import browser from '../browser';
+import { packageReportTagName } from '../globals';
 import { mountContentScript } from './content';
 import { fetchPackageInfo } from './content-events';
 import { urlParsers } from './registry/python';
 
 const addPackageReport = (packageID) => {
-  const packageReport = document.createElement('overlay-package-report');
+  const packageReport = document.createElement(packageReportTagName);
   packageReport.setAttribute('package-type', packageID.type);
   packageReport.setAttribute('package-name', packageID.name);
   packageReport.setAttribute('stylesheet-url', browser.runtime.getURL('custom-elements.css'));

src/content/stackoverflow/indicator.js

@@ -1,7 +1,9 @@
+import { indicatorTagName } from '../../globals';
+
 export const addIndicator = async (range, packageID) => {
   console.debug('Adding indicator for', packageID);
 
-  const indicator = document.createElement('overlay-indicator');
+  const indicator = document.createElement(indicatorTagName);
   indicator.setAttribute('package-type', packageID.type);
   indicator.setAttribute('package-name', packageID.name);
   indicator.appendChild(range.extractContents());

src/custom-elements/Indicator.vue

@@ -15,14 +15,15 @@
 
 <script>
 import { defineComponent } from 'vue';
-import Tooltip from './Tooltip.vue';
+import { indicatorTagName } from '../globals';
 import PackageReport from './PackageReport.vue';
+import Tooltip from './Tooltip.vue';
 import { usePackageInfo } from './store';
 
 const sum = (arr) => arr.reduce((a, b) => a + b, 0);
 
 export default defineComponent({
-  name: 'overlay-indicator',
+  name: indicatorTagName,
   components: {
     Tooltip,
     PackageReport,

src/custom-elements/PackageReport.vue

@@ -58,7 +58,6 @@
 
 <script>
 import { defineComponent } from 'vue';
-import advisories from '../advisories';
 import DebrickedLogo from '../assets/debricked-logo.svg?component';
 import InlineSeparator from '../assets/inline-separator.svg?component';
 import NpmLogo from '../assets/npm-logo.svg?component';
@@ -67,6 +66,7 @@ import PythonLogo from '../assets/python-logo.svg?component';
 import ScorecardsLogo from '../assets/scorecards-logo.svg?component';
 import SnykLogo from '../assets/snyk-logo.svg?component';
 import SocketLogo from '../assets/socket-logo.svg?component';
+import { advisories, packageReportTagName } from '../globals';
 import { usePackageInfo } from './store';
 
 const registries = {
@@ -82,7 +82,7 @@ const logos = {
 };
 
 export default defineComponent({
-  name: 'package-report',
+  name: packageReportTagName,
   components: {
     OpenExternalLink,
     InlineSeparator,

src/custom-elements/index.js

@@ -1,5 +1,6 @@
 import '@webcomponents/custom-elements';
 import { defineCustomElement } from 'vue';
+import { indicatorTagName, packageReportTagName } from '../globals';
 import Indicator from './Indicator.vue';
 import PackageReport from './PackageReport.vue';
 import { initEventListenersAndStore } from './webapp-events';
@@ -13,9 +14,9 @@ Promise.all(Object.values(modules).map((module) => module())).then((modules) =>
   Indicator.styles = [styles.flat().join('')];
 
   const indicatorCustomElement = defineCustomElement(Indicator);
-  customElements.define('overlay-indicator', indicatorCustomElement);
+  customElements.define(indicatorTagName, indicatorCustomElement);
   const packageReportCustomElement = defineCustomElement(PackageReport);
-  customElements.define('overlay-package-report', packageReportCustomElement);
+  customElements.define(packageReportTagName, packageReportCustomElement);
 
   console.log('Custom element defined');
 });

src/advisories.js → src/globals.js

@@ -1,9 +1,10 @@
-const advisories = {
+export const advisories = {
   snyk: 'Snyk Advisor',
   depsDev: 'OpenSSF Scorecard',
   socket: 'Socket',
   debricked: 'Debricked',
 };
-export default advisories;
-
 export const advisoriesNames = Object.keys(advisories);
+
+export const indicatorTagName = 'overlay-indicator';
+export const packageReportTagName = 'overlay-package-report';

src/storage.js

@@ -1,5 +1,5 @@
-import { advisoriesNames } from './advisories';
 import browser from './browser';
+import { advisoriesNames } from './globals';
 
 const defaultAdvisoriesSettings = advisoriesNames.reduce((acc, name) => ({ ...acc, [name]: true }), {});