Add local regression test and fix eslint issues

.github/workflows/linux.yml

@@ -1,4 +1,4 @@
-name: Run Lighthouse plugin on Linux
+name: Run plugin on Linux
 on:
   push:
     branches:
@@ -15,35 +15,27 @@ jobs:
       uses: actions/setup-node@v4
       with:
         node-version: '20.x'
+    - name: Install latest Chrome
+      run: |
+        wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add - 
+        sudo sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
+        sudo apt-get update
+        sudo apt-get --only-upgrade install google-chrome-stable
+        google-chrome --version
+    - name: Browser versions
+      run: |
+        google-chrome --version
     - name: Install sitespeed.io
       run: |
         npm install sitespeed.io -g
-        npm install @sitespeed.io/plugin-lighthouse -g
-        cd ../webperf-sitespeedio-plugin
+        cd ../plugin-css
         npm install
+    - name: Start local HTTP server
+      run: (npm run start-server&)
     - name: Lint
       run: npm run lint
     - name: Show sitespeed.io version
       run: sitespeed.io --version
-    - name: Run tests using Lighthouse plugin
-      run: sitespeed.io --plugins.add ./lib/index.js --plugins.remove browsertime https://www.sitespeed.io/
-    - name: Run tests using Lighthouse plugin as mobile
-      run: sitespeed.io --plugins.add ./lib/index.js --plugins.remove browsertime https://www.sitespeed.io/ --mobile
-    - name: Run tests to illustrate maxLoadTime
-      run: sitespeed.io --maxLoadTime 30000 -b firefox --firefox.includeResponseBodies all --firefox.preference privacy.trackingprotection.enabled:false --firefox.preference privacy.donottrackheader.enabled:false --firefox.preference browser.safebrowsing.malware.enabled:false --firefox.preference browser.safebrowsing.phishing.enabled:false --firefox.preference security.tls.version.min:1 --firefox.preference security.tls.version.max:1 --pageCompleteCheckNetworkIdle true --browsertime.screenshot false --screenshot false --screenshotLCP false --browsertime.screenshotLCP false --videoParams.createFilmstrip false --visualMetrics false --visualMetricsPerceptual false --visualMetricsContentful false --browsertime.headless true --silent true --utc true -n 1 https://webperf.se
-
-
-    # - name: Run tests using Lighthouse plugin as mobile
-    #   run: sitespeed.io --plugins.remove assets --plugins.remove budget --plugins.remove coach --plugins.remove pagexray --plugins.remove thirdparty --plugins.remove domains --maxLoadTime 30000 --shm-size=1g -b firefox --firefox.includeResponseBodies all --firefox.preference privacy.trackingprotection.enabled:false --firefox.preference privacy.donottrackheader.enabled:false --firefox.preference browser.safebrowsing.malware.enabled:false --firefox.preference browser.safebrowsing.phishing.enabled:false --firefox.preference security.tls.version.min:1 --firefox.preference security.tls.version.max:1 --pageCompleteCheckNetworkIdle true --plugins.remove screenshot --plugins.remove html --plugins.remove metrics --browsertime.screenshot false --screenshot false --screenshotLCP false --browsertime.screenshotLCP false --videoParams.createFilmstrip false --visualMetrics false --visualMetricsPerceptual false --visualMetricsContentful false --browsertime.headless true --silent true --utc true -n 1
-
-
-
-
-    # - name: Run tests with configuration file
-    #   run: sitespeed.io --plugins.add ./index.js --plugins.remove browsertime https://www.sitespeed.io/ --lighthouse.config ./test/config.js
-    # - name: Run tests with flag file
-    #   run: sitespeed.io --plugins.add ./index.js --plugins.remove browsertime https://www.sitespeed.io/ --lighthouse.flags ./test/flags.json
-    # - name: Test global install
-    #   run: |
-    #     npm install -g
-    #     sitespeed.io --plugins.add @sitespeed.io/plugin-lighthouse --plugins.remove browsertime https://www.sitespeed.io/
+    - name: Run tests using plugin
+      run: sitespeed.io --plugins.add ./lib/index.js --xvfb -n 1 http://127.0.0.1:3000/
+

eslint.config.js

@@ -5,7 +5,8 @@ export default [
     languageOptions: {
       globals: {
         node: true,
-        es6: true
+        es6: true,
+        URL: "readonly"
       },
       parserOptions: {
         ecmaVersion: 'latest',
@@ -20,7 +21,10 @@ export default [
       'unicorn/prevent-abbreviations': 0,
       'unicorn/no-array-reduce': 0,
       'unicorn/prefer-spread': 0
-    }
+    },
+  },
+  {
+    ignores: ["test/*"]
   },
   js.configs.recommended
 ];

lib/harAnalyzer.js

@@ -15,7 +15,7 @@ export class HarAnalyzer {
         this.config = JSON.parse(readFileSync(configPath, 'utf8'));
     }
 
-    transform2SimplifiedData(harData, url, group) {
+    transform2SimplifiedData(harData, url) {
         const data = {
             'url': url,
             'rules': this.config.rules,
@@ -61,7 +61,7 @@ export class HarAnalyzer {
         for (const htmlObj of data.htmls) {
             const dom = new JSDOM(htmlObj.content);
             const styleElements = dom.window.document.querySelectorAll('style');
-            styleElements.forEach((styleElement, index) => {
+            styleElements.forEach((styleElement) => {
                 const styleElementObj = {
                     'url': htmlObj.url,
                     'content': styleElement.textContent,
@@ -73,7 +73,7 @@ export class HarAnalyzer {
 
             // Extract style="" attributes from HTML content
             const elementsWithStyleAttr = dom.window.document.querySelectorAll('[style]');
-            elementsWithStyleAttr.forEach((element, index) => {
+            elementsWithStyleAttr.forEach((element) => {
                 const styleAttrContent = element.getAttribute('style');
                 const styleAttrObj = {
                     'url': htmlObj.url,
@@ -105,38 +105,35 @@ export class HarAnalyzer {
             return knowledgeData;
         }
 
-        try {
-            // Ensure the correct context for `this` using arrow function
-            const lintPromises = analyzedData['all-styles'].map(entry => {
-                return stylelint.lint({
-                    code: entry.content,
-                    config: this.config
-                }).then(result => {
-                    // Attach warnings along with the entry.url
-                    return result.results.flatMap(res =>
-                        res.warnings.map(warning => ({
-                            url: entry.url,
-                            rule: warning.rule,
-                            category: 'standard',
-                            severity: warning.severity,
-                            text: warning.text,
-                            line: warning.line,
-                            column: warning.column
-                        }))
-                    );
-                });
+        // Ensure the correct context for `this` using arrow function
+        const lintPromises = analyzedData['all-styles'].map(entry => {
+            return stylelint.lint({
+                code: entry.content,
+                config: this.config
+            }).then(result => {
+                // Attach warnings along with the entry.url
+                return result.results.flatMap(res =>
+                    res.warnings.map(warning => ({
+                        url: entry.url,
+                        rule: warning.rule,
+                        category: 'standard',
+                        severity: warning.severity,
+                        text: warning.text,
+                        line: warning.line,
+                        column: warning.column
+                    }))
+                );
             });
+        });
 
-            // Wait for all linting promises to resolve and flatten the results
-            const lintResults = await Promise.all(lintPromises);
-            knowledgeData.issues = lintResults.flat();
+        // Wait for all linting promises to resolve and flatten the results
+        const lintResults = await Promise.all(lintPromises);
+        knowledgeData.issues = lintResults.flat();
 
-            // Populate "resolved-rules" with rules not mentioned in "issues"
-            const allRules = Object.keys(this.config.rules);
-            const mentionedRules = new Set(knowledgeData.issues.map(issue => issue.rule));
-            knowledgeData['resolved-rules'] = allRules.filter(rule => !mentionedRules.has(rule));
-        } catch (err) {
-        }
+        // Populate "resolved-rules" with rules not mentioned in "issues"
+        const allRules = Object.keys(this.config.rules);
+        const mentionedRules = new Set(knowledgeData.issues.map(issue => issue.rule));
+        knowledgeData['resolved-rules'] = allRules.filter(rule => !mentionedRules.has(rule));
 
         return knowledgeData;
     }
@@ -146,7 +143,7 @@ export class HarAnalyzer {
             this.groups[group] = {};
         }
 
-        const analyzedData = this.transform2SimplifiedData(harData, url, group);
+        const analyzedData = this.transform2SimplifiedData(harData, url);
         if (!('analyzedData' in this.groups[group])) {
             this.groups[group]['analyzedData'] = []
         }

lib/index.js

@@ -6,7 +6,9 @@ import fs from 'node:fs';
 const fsp = fs.promises;
 
 // https://www.sitespeed.io/documentation/sitespeed.io/plugins/#create-your-own-plugin
-// node bin\sitespeed.js -n 1 --plugins.add analysisstorer --plugins.add ../../../plugin-css/lib/index.js --browsertime.chrome.includeResponseBodies all https://webperf.se
+// node bin\sitespeed.js -b edge -n 1 --plugins.add analysisstorer --plugins.add ../../../plugin-css/lib/index.js --browsertime.chrome.includeResponseBodies all https://webperf.se
+// node bin\sitespeed.js -b edge -n 1 --plugins.add analysisstorer --plugins.add ../../../plugin-webperf-core/lib/index.js --plugins.add ../../../plugin-css/lib/index.js --plugins.add ../../../plugin-javascript/lib/index.js --browsertime.chrome.includeResponseBodies all https://webperf.se
+// node bin\sitespeed.js -b edge -n 1 --plugins.add ../../../plugin-webperf-core/lib/index.js --plugins.add ../../../plugin-css/lib/index.js --plugins.add ../../../plugin-javascript/lib/index.js --browsertime.chrome.includeResponseBodies all https://webperf.se
 
 const pluginname = 'webperf-plugin-css'
 
@@ -20,6 +22,7 @@ export default class CssPlugin extends SitespeedioPlugin {
     this.harAnalyzer = new HarAnalyzer();
     const libFolder = fileURLToPath(new URL('..', import.meta.url));
     this.pluginFolder = path.resolve(libFolder);
+    this.options = options;
 
     this.pug = await fsp.readFile(
       path.resolve(this.pluginFolder, 'pug', 'index.pug'),
@@ -80,7 +83,7 @@ export default class CssPlugin extends SitespeedioPlugin {
       }
     }
   }
-  close(options, errors) {
-    // Cleanup if necessary
-  }
+  // close(options, errors) {
+  //   // Cleanup if necessary
+  // }
 }

package.json

@@ -44,7 +44,10 @@
     "eslint-config-prettier": "10.1.1",
     "eslint-plugin-prettier": "5.2.5",
     "eslint-plugin-unicorn": "58.0.0",
-    "prettier": "3.5.3"
+    "prettier": "3.5.3",
+    "serve": "14.2.4",
+    "serve-handler": "6.1.6",
+    "typescript": "5.7.2"
   },
   "dependencies": {
     "jsdom": "26.0.0",
@@ -54,6 +57,8 @@
   },
   "scripts": {
     "test": "ava",
+    "start-server": "serve test/data/",
+    "stop-server": "sudo pkill serve",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "eslint-check": "eslint --print-config .eslintrc.js | eslint-config-prettier-check"