Accessibility : lighthouse script

.gitignore

@@ -6,6 +6,7 @@ node_modules
 .pnp.js
 
 # testing
+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

@@ -48,7 +48,8 @@
     "build:storybook": "rm -Rf storybook-static && build-storybook -s ./public # TODO: we shouldn't need to remove, but Storybook 6.1 has a small bug and can't remove existing build automatically",
     "start:storybook-static": "serve storybook-static",
     "auto-changelog": "auto-changelog -u",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook",
+    "audit": "node scripts/lighthouse/home-stats.js && xdg-open lhreport.html"
   },
   "dependencies": {
     "@apollo/client": "^3.2.0",
@@ -115,6 +116,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,39 @@
+#! /usr/bin/node
+
+const fs = require('fs');
+const lighthouse = require('lighthouse');
+const chromeLauncher = require('chrome-launcher');
+
+/**
+ * Script used to access statistics about your page.
+ * Modify the url and use "yarn run audit".
+ * 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,
+    // 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);
+  if (!runnerResult.lhr.categories.performance.score && !runnerResult.lhr.categories.accessibility.score && !runnerResult.lhr.categories['best-practices'].score && !runnerResult.lhr.categories.seo.score) {
+    console.error("It seems that this page isn't reachable.\nIf you intent to audit a localhost page, be sure to run the app first.\n");
+  } else {
+    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 again by opening the lhreport.html root 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 audit 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 and use "yarn run audit"

src/content/docs/release-process.md

@@ -53,6 +53,13 @@ yarn run storybook
 # Test storybook static build
 yarn run build:storybook && yarn run start:storybook-static # test storybook  static export
 
+# Optionnaly audit your page
+# Run the app
+# yarn run build
+# yarn run start
+# While running, run the audit
+# yarn run audit
+
 # Optionnaly test Docker version (takes a lot of time + not very useful as they don't change often)
 # yarn run build:docker
 # yarn run build:test:docker