Accessibility : lighthouse script

.gitignore

@@ -6,6 +6,7 @@ node_modules
 .pnp.js
 
 # testing
+scripts/lighthouse/lhreport.html
 /coverage
 
 # next.js
@@ -43,3 +44,6 @@ storybook-static
 /public/robots.txt.yalc
 yalc.lock
 .yalc/
+
+#vscode extension
+.vscode/snipsnap.code-snippets

package.json

@@ -115,6 +115,7 @@
     "eslint-plugin-react": "^7.18.3",
     "eslint-plugin-react-hooks": "^2.5.0",
     "graphql-voyager": "^1.0.0-rc.31",
+    "lighthouse": "^8.0.0",
     "react-is": "^16.13.1",
     "source-map-support": "^0.5.19",
     "storybook-css-modules-preset": "^1.0.5",

scripts/lighthouse/home-stats.js

@@ -0,0 +1,34 @@
+const fs = require('fs');
+const lighthouse = require('lighthouse');
+const chromeLauncher = require('chrome-launcher');
+
+/**
+ * Script used to access statistics of your page.
+ * Modify the url, run the script and see the result html file 'lhreport.html'.
+ * See https://github.com/GoogleChrome/lighthouse/blob/master/docs/readme.md#using-programmatically
+ */
+(async () => {
+  const chrome = await chromeLauncher.launch({ chromeFlags: ['--headless'] });
+  const options = {
+    // logLevel: 'info', // Detailed logs
+    output: 'html',
+    maxWaitForLoad: 30000, // More time isn't useful for md files. An error will raise even with 5 minutes, without better result.
+    // onlyCategories: ['performance'], // Test only some things beetween performance/accessibility/best-practices/seo
+    port: chrome.port
+  };
+  const runnerResult = await lighthouse('http://localhost:3000', options);
+
+  // `.report` is the HTML report as a string
+  const reportHtml = runnerResult.report;
+  fs.writeFileSync('lhreport.html', reportHtml);
+
+  // `.lhr` is the Lighthouse Result as a JS object
+  console.log('\nReport is done for', runnerResult.lhr.finalUrl);
+  console.log('Performance score was', runnerResult.lhr.categories.performance.score * 100);
+  console.log('Accessibility score was', runnerResult.lhr.categories.accessibility.score * 100);
+  console.log('Best Practices score was', runnerResult.lhr.categories['best-practices'].score * 100);
+  console.log('SEO score was', runnerResult.lhr.categories.seo.score * 100);
+  console.log('See the detailed results by opening the lhreport.html file\n');
+
+  await chrome.kill();
+})();

src/content/docs/features/testing.md

@@ -83,4 +83,9 @@ Note: at the time of writing (2020/06) [there is an open issue when needing this
 
 We use a plugin that will in turn rely on Next.js dotenv loading capabilities.
 Used for instance to load the default admin user credentials in tests.
-As a default, it will use development values from `.env.development`.
+As a default, it will use development values from `.env.development`.
+
+## Lighthouse to test your pages
+
+We use lighthouse to have statistics about our pages. See the main page example in scripts/lighthouse/home-stats.js.
+To run: run the app, open the folder with a terminal an execute 'node home-stats.js', then open the lhreport.html file