Add jest testing infrastructure

Adds a test for  resources/ext.relatedArticles.readMore/index.js

Change-Id: Icf8a5afca2489308e2bcaa611c0fe27ed9f46f3a

.eslintignore

@@ -1,3 +1,4 @@
+/coverage/
 /node_modules/
 /resources/ext.relatedArticles.lib/
 /vendor/

.eslintrc.json

@@ -1,5 +1,9 @@
 {
 	"root": true,
+	"env": {
+		"browser": true,
+		"commonjs": true
+	},
 	"extends": [
 		"wikimedia/client-es5",
 		"wikimedia/jquery",

.stylelintignore

@@ -1,2 +1,3 @@
+/coverage/
 /node_modules/
 /vendor/

jest.config.js

@@ -0,0 +1,40 @@
+// For a detailed explanation regarding each configuration property, visit:
+// https://jestjs.io/docs/en/configuration.html
+module.exports = {
+	// Automatically clear mock calls and instances between every test
+	clearMocks: true,
+	// Indicates whether the coverage information should be collected while executing the test
+	collectCoverage: true,
+	// An array of glob patterns indicating a set of files for
+	// which coverage information should be collected
+	collectCoverageFrom: [
+		'resources/ext.relatedArticles.readMore/index.js'
+	],
+	// The directory where Jest should output its coverage files
+	coverageDirectory: 'coverage',
+	// An array of regexp pattern strings used to skip coverage collection
+	coveragePathIgnorePatterns: [
+		'/node_modules/'
+	],
+	// An object that configures minimum threshold enforcement for coverage results
+	coverageThreshold: {
+		global: {
+			branches: 100,
+			functions: 100,
+			lines: 100,
+			statements: 100
+		}
+	},
+	// An array of file extensions your modules use
+	moduleFileExtensions: [
+		'js',
+		'json'
+	],
+	// The paths to modules that run some code to configure or
+	// set up the testing environment before each test
+	setupFiles: [
+		'./jest.setup.js'
+	],
+	testEnvironment: 'jsdom',
+	testRegex: '/tests/jest/.*.test.js$'
+};

jest.setup.js

@@ -0,0 +1,19 @@
+var wikimediaTestingUtils = require( '@wikimedia/mw-node-qunit' );
+var fn = function () {};
+
+global.CSS = {
+	escape: function ( str ) {
+		return str;
+	}
+};
+
+global.OO = {
+	inheritClass: function ( ClassNameObject ) {
+		ClassNameObject.super = fn;
+		ClassNameObject.prototype.on = fn;
+	},
+	initClass: fn,
+	EventEmitter: fn
+};
+
+wikimediaTestingUtils.setUp( /* disable QUnit sandboxing feature */ false );

package.json

@@ -3,7 +3,8 @@
 	"scripts": {
 		"selenium-daily": "npm run selenium-test -- --mochaOpts.grep @daily",
 		"selenium-test": "wdio tests/selenium/wdio.conf.js",
-		"test": "npm -s run lint",
+		"test": "npm -s run lint && npm run test:unit",
+		"test:unit": "jest",
 		"lint": "npm -s run lint:js && npm -s run lint:styles && npm -s run lint:i18n",
 		"lint:fix:js": "npm -s run lint:js -- --fix",
 		"lint:fix:styles": "npm -s run lint:styles -- --fix",
@@ -17,8 +18,10 @@
 		"@wdio/junit-reporter": "7.16.13",
 		"@wdio/local-runner": "7.16.13",
 		"@wdio/mocha-framework": "7.16.13",
+		"@wikimedia/mw-node-qunit": "6.2.1",
 		"eslint-config-wikimedia": "0.20.0",
 		"grunt-banana-checker": "0.9.0",
+		"jest": "27.4.7",
 		"stylelint-config-wikimedia": "0.11.1",
 		"wdio-mediawiki": "2.0.0",
 		"webdriverio": "7.16.13"

tests/jest/.eslintrc.json

@@ -0,0 +1,13 @@
+{
+	"root": true,
+	"parserOptions": {
+		"ecmaVersion": 6
+	},
+	"extends": [
+		"../../.eslintrc.json"
+	],
+	"env": {
+		"es6": true,
+		"jest": true
+	}
+}

tests/jest/__snapshots__/ext.relatedArticles.readMore.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ext.relatedArticles.readMore.bootstrap renders without error 1`] = `"<aside class=\\"ra-read-more noprint\\"><h2>relatedarticles-read-more-heading</h2><ul class=\\"ext-related-articles-card-list\\"><li title=\\"Hello no description\\" class=\\"ext-related-articles-card\\"><div class=\\"ext-related-articles-card-thumb ext-related-articles-card-thumb-placeholder\\"></div><a href=\\"Hello no description\\" aria-hidden=\\"true\\" tabindex=\\"-1\\"></a><div class=\\"ext-related-articles-card-detail\\"><h3><a href=\\"Hello no description\\">Hello no description</a></h3><p class=\\"ext-related-articles-card-extract\\"></p></div></li><li title=\\"Hello\\" class=\\"ext-related-articles-card\\"><div class=\\"ext-related-articles-card-thumb\\" style=\\"background-image: url(hello.gif);\\"></div><a href=\\"Hello\\" aria-hidden=\\"true\\" tabindex=\\"-1\\"></a><div class=\\"ext-related-articles-card-detail\\"><h3><a href=\\"Hello\\">Hello</a></h3><p class=\\"ext-related-articles-card-extract\\">Description</p></div></li><li title=\\"Hello with extract\\" class=\\"ext-related-articles-card\\"><div class=\\"ext-related-articles-card-thumb\\" style=\\"background-image: url(helloEx.gif);\\"></div><a href=\\"Hello with extract\\" aria-hidden=\\"true\\" tabindex=\\"-1\\"></a><div class=\\"ext-related-articles-card-detail\\"><h3><a href=\\"Hello with extract\\">Hello with extract</a></h3><p class=\\"ext-related-articles-card-extract\\">Extract</p></div></li><li title=\\"Hello with pageprops\\" class=\\"ext-related-articles-card\\"><div class=\\"ext-related-articles-card-thumb ext-related-articles-card-thumb-placeholder\\"></div><a href=\\"Hello with pageprops\\" aria-hidden=\\"true\\" tabindex=\\"-1\\"></a><div class=\\"ext-related-articles-card-detail\\"><h3><a href=\\"Hello with pageprops\\">Hello with pageprops</a></h3><p class=\\"ext-related-articles-card-extract\\">Page props desc</p></div></li></ul></aside>"`;

tests/jest/ext.relatedArticles.readMore.test.js

@@ -0,0 +1,38 @@
+const { render } = require( '../../resources/ext.relatedArticles.readMore/index.js' );
+
+describe( 'ext.relatedArticles.readMore.bootstrap', () => {
+	it( 'renders without error', () => {
+		const element = document.createElement( 'div' );
+
+		render( [
+			{
+				title: 'Hello no description'
+			},
+			{
+				title: 'Hello',
+				description: 'Description',
+				thumbnail: {
+					source: 'hello.gif',
+					width: 200,
+					height: 200
+				}
+			},
+			{
+				title: 'Hello with extract',
+				extract: 'Extract',
+				thumbnail: {
+					source: 'helloEx.gif',
+					width: 200,
+					height: 200
+				}
+			},
+			{
+				title: 'Hello with pageprops',
+				pageprops: {
+					description: 'Page props desc'
+				}
+			}
+		], element );
+		expect( element.innerHTML ).toMatchSnapshot();
+	} );
+} );