diff --git a/projects/js-packages/critical-css-gen/.eslintrc.cjs b/projects/js-packages/critical-css-gen/.eslintrc.cjs
new file mode 100644
index 0000000000000..55f220ababda8
--- /dev/null
+++ b/projects/js-packages/critical-css-gen/.eslintrc.cjs
@@ -0,0 +1,5 @@
+module.exports = {
+ settings: {
+ jest: { version: 29 },
+ },
+};
diff --git a/projects/js-packages/critical-css-gen/jest.config.cjs b/projects/js-packages/critical-css-gen/jest.config.cjs
new file mode 100644
index 0000000000000..1b43920c97941
--- /dev/null
+++ b/projects/js-packages/critical-css-gen/jest.config.cjs
@@ -0,0 +1,5 @@
+const baseConfig = require( 'jetpack-js-tools/jest/config.base.js' );
+
+module.exports = {
+ ...baseConfig,
+};
diff --git a/projects/js-packages/critical-css-gen/package.json b/projects/js-packages/critical-css-gen/package.json
index 11b22b119a092..3a70d014508bb 100644
--- a/projects/js-packages/critical-css-gen/package.json
+++ b/projects/js-packages/critical-css-gen/package.json
@@ -20,6 +20,8 @@
"build:node": "tsc --project tsconfig.node.json",
"build": "npm run clean && npm run build:browser && npm run build:node",
"clean": "rm -rf lib/ && rm -rf dist/",
+ "lint": "prettier --check src/**/* && eslint . && echo '✔ eslint and prettier ran successfully.'",
+ "lint:fix": "prettier --write src/**/*.ts && eslint --fix . && echo '✔ eslint and prettier ran successfully.'",
"test": "NODE_ENV=test NODE_PATH=./node_modules jest --forceExit --config=tests/config/jest.config.js"
},
"main": "./lib/back-end.js",
diff --git a/projects/js-packages/critical-css-gen/tests/unit/browser-interface-iframe.test.js b/projects/js-packages/critical-css-gen/tests/unit/browser-interface-iframe.test.js
index 644a262a4308e..e0f2e95473733 100644
--- a/projects/js-packages/critical-css-gen/tests/unit/browser-interface-iframe.test.js
+++ b/projects/js-packages/critical-css-gen/tests/unit/browser-interface-iframe.test.js
@@ -1,9 +1,8 @@
/* global CriticalCSSGenerator */
-const puppeteer = require( 'puppeteer' );
-
const path = require( 'path' );
-const TestServer = require( '../lib/test-server' );
+const puppeteer = require( 'puppeteer' );
const { dataDirectory } = require( '../lib/data-directory' );
+const TestServer = require( '../lib/test-server' );
let testServer = null;
let browser;
@@ -42,7 +41,7 @@ describe( 'Iframe interface', () => {
urls: [ url ],
viewports: [ { width: 640, height: 480 } ],
browserInterface: new CriticalCSSGenerator.BrowserInterfaceIframe( {
- verifyPage: ( url, innerWindow, innerDocument ) => {
+ verifyPage: ( _url, innerWindow, innerDocument ) => {
return !! innerDocument.querySelector( 'meta[name="testing-page"]' );
},
} ),
@@ -55,6 +54,7 @@ describe( 'Iframe interface', () => {
await page.close();
} );
+ // eslint-disable-next-line jest/expect-expect
it( 'Allows scripts if not explicitly turned off', async () => {
const page = await browser.newPage();
await page.goto( testServer.getUrl() );
@@ -65,7 +65,7 @@ describe( 'Iframe interface', () => {
// 'script-created-content'; a string appended to page-a by a script.
await page.evaluate( async url => {
const iframeInterface = new CriticalCSSGenerator.BrowserInterfaceIframe( {
- verifyPage: ( url, innerWindow, innerDocument ) => {
+ verifyPage: ( _url, innerWindow, innerDocument ) => {
return innerDocument.documentElement.innerHTML.includes( 'script-created-content' );
},
} );
@@ -76,6 +76,7 @@ describe( 'Iframe interface', () => {
await page.close();
} );
+ // eslint-disable-next-line jest/expect-expect
it( 'Blocks scripts if turned off', async () => {
const page = await browser.newPage();
await page.goto( testServer.getUrl() );
@@ -86,7 +87,7 @@ describe( 'Iframe interface', () => {
// 'script-created-content'; a string appended to page-a by a script.
await page.evaluate( async url => {
const iframeInterface = new CriticalCSSGenerator.BrowserInterfaceIframe( {
- verifyPage: ( url, innerWindow, innerDocument ) => {
+ verifyPage: ( _url, innerWindow, innerDocument ) => {
return ! innerDocument.documentElement.innerHTML.includes( 'script-created-content' );
},
allowScripts: false,
@@ -109,7 +110,7 @@ describe( 'Iframe interface', () => {
urls: [ url ],
viewports: [ { width: 640, height: 480 } ],
browserInterface: new CriticalCSSGenerator.BrowserInterfaceIframe( {
- verifyPage: ( url, innerWindow, innerDocument ) => {
+ verifyPage: ( _url, innerWindow, innerDocument ) => {
return !! innerDocument.querySelector( 'meta[name="testing-page"]' );
},
allowScripts: false,
@@ -127,8 +128,6 @@ describe( 'Iframe interface', () => {
const page = await browser.newPage();
await page.goto( testServer.getUrl() );
- const innerUrl = path.join( testServer.getUrl(), 'page-a' );
-
await expect( async () => {
await page.evaluate( () => {
return CriticalCSSGenerator.generateCriticalCSS( {
@@ -156,7 +155,7 @@ describe( 'Iframe interface', () => {
urls: [ 'about:blank', url ],
viewports: [ { width: 640, height: 480 } ],
browserInterface: new CriticalCSSGenerator.BrowserInterfaceIframe( {
- verifyPage: ( url, innerWindow, innerDocument ) => {
+ verifyPage: ( _url, innerWindow, innerDocument ) => {
return !! innerDocument.querySelector( 'meta[name="testing-page"]' );
},
} ),
@@ -178,10 +177,10 @@ describe( 'Iframe interface', () => {
const pageB = path.join( testServer.getUrl(), 'page-b' );
const [ css, warnings, pages ] = await page.evaluate(
- async ( pageA, pageB ) => {
- let pagesVerified = [];
+ async ( pA, pB ) => {
+ const pagesVerified = [];
const result = await CriticalCSSGenerator.generateCriticalCSS( {
- urls: [ 'about:blank', pageA, pageB, 'about:blank' ],
+ urls: [ 'about:blank', pA, pB, 'about:blank' ],
viewports: [ { width: 640, height: 480 } ],
browserInterface: new CriticalCSSGenerator.BrowserInterfaceIframe( {
verifyPage: ( url, innerWindow, innerDocument ) => {
diff --git a/projects/js-packages/critical-css-gen/tests/unit/generate-critical-css.test.js b/projects/js-packages/critical-css-gen/tests/unit/generate-critical-css.test.js
index 57dc86008e7dd..dfec1d7e264f2 100644
--- a/projects/js-packages/critical-css-gen/tests/unit/generate-critical-css.test.js
+++ b/projects/js-packages/critical-css-gen/tests/unit/generate-critical-css.test.js
@@ -1,9 +1,8 @@
+const path = require( 'path' );
const puppeteer = require( 'puppeteer' );
-
const { generateCriticalCSS, BrowserInterfacePuppeteer } = require( '../../lib/back-end.js' );
const { dataUrl } = require( '../lib/data-directory' );
const mockFetch = require( '../lib/mock-fetch' );
-const path = require( 'path' );
const testPageUrls = {
pageA: path.join( dataUrl, 'page-a/index.html' ),
@@ -16,13 +15,13 @@ class MockedFetchInterface extends BrowserInterfacePuppeteer {
}
}
-let testPages = {};
+const testPages = {};
/**
* Run a batch of CSS generation test runs, verify the results contain (and do not contain) specific substrings.
* Verifies no warnings get generated.
*
- * @param {Object[]} testSets Sets of tests to run, and strings the result should / should not contain.
+ * @param {Object[]} testSets - Sets of tests to run, and strings the result should / should not contain.
*/
async function runTestSet( testSets ) {
for ( const { urls, viewports, shouldContain, shouldNotContain, shouldMatch } of testSets ) {
@@ -70,6 +69,7 @@ describe( 'Generate Critical CSS', () => {
} );
describe( 'Inclusions and Exclusions', () => {
+ // eslint-disable-next-line jest/expect-expect
it( 'Excludes elements below the fold', async () => {
await runTestSet( [
{
@@ -86,6 +86,7 @@ describe( 'Generate Critical CSS', () => {
] );
} );
+ // eslint-disable-next-line jest/expect-expect
it( 'Excludes irrelevant media queries', async () => {
await runTestSet( [
{
@@ -95,6 +96,7 @@ describe( 'Generate Critical CSS', () => {
] );
} );
+ // eslint-disable-next-line jest/expect-expect
it( 'Excludes Critical CSS from a tag', async () => {
await runTestSet( [
{
@@ -103,6 +105,7 @@ describe( 'Generate Critical CSS', () => {
] );
} );
+ // eslint-disable-next-line jest/expect-expect
it( 'Includes implicit @media rules inherited from tags', async () => {
await runTestSet( [
{
@@ -111,6 +114,7 @@ describe( 'Generate Critical CSS', () => {
] );
} );
+ // eslint-disable-next-line jest/expect-expect
it( 'Can manage complex implicit @media rules inherited from tags', async () => {
await runTestSet( [
{