From 802c19c31dc536d01a87a36655efc3a2855f42f8 Mon Sep 17 00:00:00 2001 From: thierry behin Date: Wed, 26 Apr 2023 22:19:12 +0200 Subject: [PATCH] fix(lighthouse): permet de mettre le lien en relatif --- .vscode/launch.json | 18 +++++ .../{example.html => example1.html} | 0 .../{example.json => example1.json} | 0 package.json | 1 + src/lighthouse/aggregatorService.js | 41 +++++++---- src/lighthouse/aggregatorService.spec.js | 21 +++--- .../generatorReports.spec.js.snap | 2 +- src/reporters/generatorReports.js | 68 ++++++++++--------- 8 files changed, 96 insertions(+), 55 deletions(-) create mode 100644 .vscode/launch.json rename example/lighthouse/{example.html => example1.html} (100%) rename example/lighthouse/{example.json => example1.json} (100%) diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..9641b34 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,18 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "node", + "request": "launch", + "name": "Launch Program", + "skipFiles": [ + "/**" + ], + "program": "${workspaceFolder}\\src\\cli.js", + "args": ["--srcLighthouse", "./example/lighthouse", "--srcEcoIndex","./example/ecoindex" ,"--reports","html", "--outputPath" , "./example/report_final"] + } + ] +} \ No newline at end of file diff --git a/example/lighthouse/example.html b/example/lighthouse/example1.html similarity index 100% rename from example/lighthouse/example.html rename to example/lighthouse/example1.html diff --git a/example/lighthouse/example.json b/example/lighthouse/example1.json similarity index 100% rename from example/lighthouse/example.json rename to example/lighthouse/example1.json diff --git a/package.json b/package.json index dc699fe..c0ea420 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ ".eslintrc.js" ], "scripts": { + "start": "node src/cli.js --srcLighthouse=./example/lighthouse --srcEcoIndex=./example/ecoindex --reports=html --outputPath=./example/report_final", "lint": "eslint", "test": "jest --coverage", "prepare": "husky install" diff --git a/src/lighthouse/aggregatorService.js b/src/lighthouse/aggregatorService.js index d225cae..75710f1 100644 --- a/src/lighthouse/aggregatorService.js +++ b/src/lighthouse/aggregatorService.js @@ -1,7 +1,7 @@ const fs = require("fs"); const path = require("path"); -module.exports = async (options) => { +module.exports = async options => { if (!options.srcLighthouse || !fs.existsSync(options.srcLighthouse)) { console.error("lighthouse folder not found!"); process.exit(1); @@ -17,34 +17,46 @@ const readFiles = (options, lighthouseJsonReportsFiles) => { let globalBestPractices = 0; const perPages = []; - lighthouseJsonReportsFiles.forEach((fileName) => { + lighthouseJsonReportsFiles.forEach(fileName => { const pageName = fileName.replace(".json", ""); const pathFile = path.join(options.srcLighthouse, fileName); const data = fs.readFileSync(pathFile); const result = JSON.parse(data); - const performance = result?.categories?.performance?.score ? Math.round(result.categories.performance.score * 100) : 0; - const accessibility = result?.categories?.accessibility?.score ? Math.round(result?.categories.accessibility.score * 100) : 0; - const bestPractices = result?.categories["best-practices"]?.score ? Math.round(result?.categories["best-practices"].score * 100) : 0; + const performance = result?.categories?.performance?.score + ? Math.round(result.categories.performance.score * 100) + : 0; + const accessibility = result?.categories?.accessibility?.score + ? Math.round(result?.categories.accessibility.score * 100) + : 0; + const bestPractices = result?.categories["best-practices"]?.score + ? Math.round(result?.categories["best-practices"].score * 100) + : 0; globalPerformance += performance; globalAccessibility += accessibility; globalBestPractices += bestPractices; perPages.push({ pageName, - lighthouseReport: path.join(options.srcLighthouse, `${pageName}.html`), + lighthouseReport: path.join("lighthouse", `${pageName}.html`), accessibility, bestPractices, performance, }); }); if (globalPerformance !== 0) { - globalPerformance = Math.ceil(globalPerformance / lighthouseJsonReportsFiles.length); + globalPerformance = Math.ceil( + globalPerformance / lighthouseJsonReportsFiles.length + ); } if (globalAccessibility !== 0) { - globalAccessibility = Math.ceil(globalAccessibility / lighthouseJsonReportsFiles.length); + globalAccessibility = Math.ceil( + globalAccessibility / lighthouseJsonReportsFiles.length + ); } if (globalBestPractices !== 0) { - globalBestPractices = Math.ceil(globalBestPractices / lighthouseJsonReportsFiles.length); + globalBestPractices = Math.ceil( + globalBestPractices / lighthouseJsonReportsFiles.length + ); } if (options.verbose) { @@ -52,12 +64,17 @@ const readFiles = (options, lighthouseJsonReportsFiles) => { console.log("global accessibility:", globalAccessibility); console.log("global bestPractices:", globalBestPractices); } - return { performance: globalPerformance, accessibility: globalAccessibility, bestPractices: globalBestPractices, perPages }; + return { + performance: globalPerformance, + accessibility: globalAccessibility, + bestPractices: globalBestPractices, + perPages, + }; }; -const listFiles = (options) => { +const listFiles = options => { const lighthouseJsonReportsFiles = []; const files = fs.readdirSync(options.srcLighthouse); - files.forEach((file) => { + files.forEach(file => { if (path.extname(file) === ".json") { if (options.verbose) { console.log("Add file in list for aggregation: ", file); diff --git a/src/lighthouse/aggregatorService.spec.js b/src/lighthouse/aggregatorService.spec.js index 96d3bd7..75c9ddf 100644 --- a/src/lighthouse/aggregatorService.spec.js +++ b/src/lighthouse/aggregatorService.spec.js @@ -4,43 +4,42 @@ const path = require("path"); jest.mock("fs"); describe("AggregatorService", () => { - const inputValue = { categories: { performance: { - score: 0.76 + score: 0.76, }, accessibility: { - score: 0.60 + score: 0.6, }, "best-practices": { - score: 0.78 - } - } + score: 0.78, + }, + }, }; it("should return the lightouse output", async () => { const options = { srcLighthouse: "test", verbose: true }; - const output = - { + const output = { performance: 76, accessibility: 60, bestPractices: 78, perPages: [ { pageName: "foo", - lighthouseReport: path.join("test", "foo.html"), + lighthouseReport: path.join("lighthouse", "foo.html"), performance: 76, accessibility: 60, bestPractices: 78, }, { pageName: "bar", - lighthouseReport: path.join("test", "bar.html"), + lighthouseReport: path.join("lighthouse", "bar.html"), performance: 76, accessibility: 60, bestPractices: 78, - }] + }, + ], }; jest.spyOn(fs, "readdirSync").mockImplementation(() => { return ["foo.json", "bar.json"]; diff --git a/src/reporters/__snapshots__/generatorReports.spec.js.snap b/src/reporters/__snapshots__/generatorReports.spec.js.snap index 808ab66..cdcef08 100644 --- a/src/reporters/__snapshots__/generatorReports.spec.js.snap +++ b/src/reporters/__snapshots__/generatorReports.spec.js.snap @@ -91,5 +91,5 @@ exports[`generatorReports replace all tag 1`] = ` c4.62,13.34,7.89,27.06,10.91,40.83c3.81,17.36,6.91,34.83,9.16,52.5c2.46,19.34,3.75,38.66,3.99,58.14 c0.12,9.36,0.05,18.75-0.36,28.04c-0.46,10.42-1.97,20.85-3.46,31.25c-2.67,18.63-7.22,36.67-13.31,54.39 c-9.98,29.05-24.79,55.23-44.98,78.52c-19.1,22.03-41.96,38.75-68.02,51.28c-15.15,7.28-31.14,12.29-47.55,15.83 - c-17.55,3.78-35.47,4.18-53.18,2.86c-23.06-1.73-45.29-7.89-65.76-18.91C176.46,396.37,160.37,385,148.09,369.01z"/>
10
Performances
20
Accessibilité
30
Bonnes pratiques
86
EcoIndex
Voici les estimations d'emission de Gaz à effet de serre et de consomation d'eau pour l'ensemble du site audité.
A partir des métriques précédente, une estimation des emissions de gaz à effet de serre ainsi que la consommation d'eau est calculée. Voici le résultat pour cette page:
Métriques
Valeur
Valeur convertie
Svg Vector Icons : http://www.onlinewebfonts.com/icon Gaz à effet de serre (pour 100 visites)
1.56
km
Svg Vector Icons : http://www.onlinewebfonts.com/icon Consommation en eau (pour 100 visites)
2
Douches
Résultats par page
Page
Contrôle 1
test1
Pour voir le rapport complet Lighthouse de cette page, veuillez visiter Ce Rapport
70
Performances
70
Accessibilité
70
Bonnes pratiques
86
EcoIndex
Pour calculer l'ecoindex, nous nous basons sur trois propriétés : le nombre de requetes HTTP, le poid de la page, ainsi que la complexité du DOM. Voici les résultats pour cette page
Métriques
Valeur
Valeur Préconisée Maximale
Nombre de Requetes
9
< 30 requests
Poid de la page
5243
< 1000kb
Complexité du DOM
110
Between 300 and 500 nodes
A partir des métriques précédente, une estimation des emissions de gaz à effet de serre ainsi que la consommation d'eau est calculée. Voici le résultat pour cette page:
Métriques
Valeur
Valeur convertie
Svg Vector Icons : http://www.onlinewebfonts.com/icon Gaz à effet de serre (pour visites)
2500
2500 km
Svg Vector Icons : http://www.onlinewebfonts.com/icon Consommation en eau (pour visites)
2
250 Douches
" + c-17.55,3.78-35.47,4.18-53.18,2.86c-23.06-1.73-45.29-7.89-65.76-18.91C176.46,396.37,160.37,385,148.09,369.01z"/>
10
Performances
20
Accessibilité
30
Bonnes pratiques
86
EcoIndex
Voici les estimations d'emission de Gaz à effet de serre et de consomation d'eau pour l'ensemble du site audité.
A partir des métriques précédente, une estimation des emissions de gaz à effet de serre ainsi que la consommation d'eau est calculée. Voici le résultat pour cette page:
Métriques
Valeur
Valeur convertie
Svg Vector Icons : http://www.onlinewebfonts.com/icon Gaz à effet de serre (pour 100 visites)
1.56
km
Svg Vector Icons : http://www.onlinewebfonts.com/icon Consommation en eau (pour 100 visites)
2
Douches
Résultats par page
Page
Contrôle 1
test1
Pour voir le rapport complet Lighthouse de cette page, veuillez visiter Ce Rapport
70
Performances
70
Accessibilité
70
Bonnes pratiques
86
EcoIndex
Pour calculer l'ecoindex, nous nous basons sur trois propriétés : le nombre de requetes HTTP, le poid de la page, ainsi que la complexité du DOM. Voici les résultats pour cette page
Métriques
Valeur
Valeur Préconisée Maximale
Nombre de Requetes
9
< 30 requests
Poid de la page
5243
< 1000kb
Complexité du DOM
110
Between 300 and 500 nodes
A partir des métriques précédente, une estimation des emissions de gaz à effet de serre ainsi que la consommation d'eau est calculée. Voici le résultat pour cette page:
Métriques
Valeur
Valeur convertie
Svg Vector Icons : http://www.onlinewebfonts.com/icon Gaz à effet de serre (pour visites)
2500
2500 km
Svg Vector Icons : http://www.onlinewebfonts.com/icon Consommation en eau (pour visites)
2
250 Douches
" `; diff --git a/src/reporters/generatorReports.js b/src/reporters/generatorReports.js index 4ac6cfb..3b0115c 100644 --- a/src/reporters/generatorReports.js +++ b/src/reporters/generatorReports.js @@ -40,14 +40,12 @@ const { statusGreen } = require("./utils/statusGreen"); const { statusPerPage } = require("./utils/statusPerPage"); const { basename } = require("path"); - - const generateReportsSonar = async (options, results) => { if (!options.sonarFilePath) { console.error("You should define the sonarFilePath property"); process.exit(1); } - + const issues = []; const addIssues = (value, ruleId, name) => { @@ -80,10 +78,21 @@ const generateReportsSonar = async (options, results) => { addIssues(results.ecoIndex, "eco-index-below-threshold", "ecoindex"); addIssues(results.performance, "performance-below-threshold", "performance"); - addIssues(results.accessibility, "accessibility-below-threshold", "accessibility"); - addIssues(results.bestPractices, "bestPractices-below-threshold", "bestPractices"); + addIssues( + results.accessibility, + "accessibility-below-threshold", + "accessibility" + ); + addIssues( + results.bestPractices, + "bestPractices-below-threshold", + "bestPractices" + ); - fs.writeFileSync(path.join(options.outputPath, "report.json"), JSON.stringify({ issues })); + fs.writeFileSync( + path.join(options.outputPath, "report.json"), + JSON.stringify({ issues }) + ); }; const generateReports = async (options, results) => { @@ -98,34 +107,29 @@ const generateReports = async (options, results) => { if (options?.verbose) { console.log("Generate reports html."); } - if(!options.lang){ + if (!options.lang) { options.lang = "en-GB"; } options.translations = populateTranslation(options); - if(options.srcLighthouse){ - const finalSrcLighthouse = options.outputPath + "/" + basename(options.srcLighthouse); - fse.copySync(options.srcLighthouse, finalSrcLighthouse, { overwrite: true }); + if (options.srcLighthouse) { + const finalSrcLighthouse = + options.outputPath + "/" + basename(options.srcLighthouse); + fse.copySync(options.srcLighthouse, finalSrcLighthouse, { + overwrite: true, + }); options.srcLighthouse = finalSrcLighthouse; } - if(options.srcEcoIndex){ - const finalSrcEcoIndex = options.outputPath + "/" + basename(options.srcEcoIndex); + if (options.srcEcoIndex) { + const finalSrcEcoIndex = + options.outputPath + "/" + basename(options.srcEcoIndex); fse.copySync(options.srcEcoIndex, finalSrcEcoIndex, { overwrite: true }); options.srcEcoIndex = finalSrcEcoIndex; } - results.perPages = results.perPages.map(page => { - return { - ...page, - lighthouseReport: page.lighthouseReport ? `${options.srcLighthouse}/${basename(page.lighthouseReport)}` : "", - }; - }); - + const htmlPerPageResult = await populateTemplatePerPage(options, results); let htmlResult = await populateTemplate(options, results, htmlPerPageResult); - - - const minifyOptions = { includeAutoGeneratedTags: true, removeAttributeQuotes: true, @@ -189,7 +193,7 @@ const populateTemplate = async (options, results, htmlPerPageResult) => { GlobalGreenItMetrics: GlobalGreenItMetricsTemplate, Translations: options.translations, style: readTemplate("./style.css"), - lang: options.lang + lang: options.lang, }); }; @@ -199,10 +203,10 @@ const populateMetrics = (options, metric) => { } const template = readTemplate("templatePageMetrics.html"); const NumberOfRequestMetric = - metric?.find((m) => m.name === "number_requests") ?? {}; - const PageSizeMetric = metric?.find((m) => m.name === "page_size") ?? {}; + metric?.find(m => m.name === "number_requests") ?? {}; + const PageSizeMetric = metric?.find(m => m.name === "page_size") ?? {}; const PageComplexityMetric = - metric?.find((m) => m.name === "Page_complexity") ?? {}; + metric?.find(m => m.name === "Page_complexity") ?? {}; return ejs.render(template, { Translations: options.translations, @@ -252,11 +256,11 @@ const populateGreentItMetrics = ( gasesNumberOfVisits, waterNumberOfVisits, Translations: options.translations, - mySvg:{svgIconCo2:svgIconCo2,svgIconWater:svgIconWater}, + mySvg: { svgIconCo2: svgIconCo2, svgIconWater: svgIconWater }, gasesNumberOfVisits, waterNumberOfVisits, Translations: options.translations, - mySvg:{svgIconCo2:svgIconCo2,svgIconWater:svgIconWater} + mySvg: { svgIconCo2: svgIconCo2, svgIconWater: svgIconWater }, }); }; @@ -264,7 +268,7 @@ const populateTemplatePerPage = async (options, results) => { let htmlPerPage = ""; const defaultTemplatePerPage = readTemplate("templatePerPage.html"); let numberPage = 0; - results.perPages.forEach((page) => { + results.perPages.forEach(page => { numberPage += 1; if (options?.verbose) { console.log("Populate reports page:", numberPage); @@ -296,9 +300,11 @@ const populateTemplatePerPage = async (options, results) => { waterShower: page.waterShower, greenhouseGases: page.greenhouseGases, water: page.water, - gasesNumberOfVisits: page.estimatation_water?.commentDetails?.numberOfVisit, + gasesNumberOfVisits: + page.estimatation_water?.commentDetails?.numberOfVisit, waterNumberOfVisits: page.estimatation_co2?.commentDetails?.numberOfVisit, }); + const templatePerPage = ejs.render(defaultTemplatePerPage, { Translations: options.translations, [performanceBlock]: performanceBlockTemplate, @@ -379,7 +385,7 @@ const populateTemplateEcoIndex = (options, ecoIndex, numberPage) => { ); }; -const populateTranslation = (options) => { +const populateTranslation = options => { const templateFile = `${options.lang}.json`; if (options?.verbose) {