Migrate to Jest for JS unit testing

.eslintrc.json

@@ -21,8 +21,7 @@
     "lodash": "readonly",
     "googlesitekitCurrentModule": "readonly",
     "gtag": "readonly",
-    "process": "readonly",
-    "wp": "readonly"
+    "process": "readonly"
   },
   "rules": {
     "valid-jsdoc": "warn"

.nvmrc

@@ -0,0 +1 @@
+10

.storybook/config.js

@@ -49,7 +49,7 @@ import { googlesitekit as dashboardData } from '../.storybook/data/wp-admin-admi
 const googlesitekit = dashboardData;
 
 // Setup.
-window.wp = window.wp || {};
+const wp = {};
 wp.element = wp.element || {};
 wp.components = wp.components || {};
 wp.i18n = wp.i18n || {};
@@ -71,10 +71,10 @@ wp.element.Fragment = Fragment;
 wp.element.createElement = createElement;
 wp.element.createPortal = createPortal;
 wp.components.withFilters = withFilters;
-window.lodash = lodash;
 wp.i18n.__ = __ || {};
 wp.i18n.setLocaleData = setLocaleData || {};
 wp.i18n.sprintf = sprintf || {};
+window.wp = window.wp || wp;
 window.React = React;
 window.lodash = lodash;
 window.googlesitekit = window.googlesitekit || googlesitekit;
@@ -83,7 +83,7 @@ window.googlesitekit.admin = window.googlesitekit.admin || googlesitekit.admin;
 window.googlesitekit.modules = window.googlesitekit.modules || googlesitekit.modules;
 window.googlesitekit.admin.assetsRoot = '/assets/';
 window.googlesitekit.isStorybook = true;
-wp.apiFetch = ( vars ) => {
+window.wp.apiFetch = ( vars ) => {
 	const matches = vars.path.match( '/google-site-kit/v1/modules/(.*)/data/(.*[^/])' );
 
 	if ( window.googlesitekit.modules[ matches[ 1 ] ][ matches[ 2 ] ] ) {

.storybook/webpack.config.js

@@ -19,5 +19,9 @@ module.exports = async ( { config } ) => {
 		}
 	);
 
+	config.externals = {
+		'@wordpress/api-fetch': [ 'wp', 'apiFetch' ],
+	};
+
 	return config;
 };

.travis.yml

@@ -38,7 +38,8 @@ branches:
 
 # Before install, failures in this section will result in build status 'errored'
 before_install:
-  - npm install || exit 1
+  - nvm install
+  - npm ci
   - docker run --rm -v "$PWD:/app" composer install
   - |
     if [[ "$PHP" == "1" ]] || [[ "$JS" == "1" ]] || [[ "$SNIFF" == "1" ]]; then
@@ -68,7 +69,7 @@ script:
   - |
     if [[ "$JS" == "1" ]]; then
       npm run build || exit 1 # Build for tests.
-      npx gulp qunit || exit 1 # QUnit tests
+      npm run test:js || exit 1 # JS unit tests
       npm run test || exit 1 # Bundle size test
       travis_retry npm run travis:visualtest || exit 1 # Visual regression tests
     fi

assets/js/components/adminbar/adminbar-modules.js

@@ -16,8 +16,11 @@
  * limitations under the License.
  */
 
-const { withFilters } = wp.components;
-const { Component, Fragment } = wp.element;
+/**
+ * WordPress dependencies
+ */
+import { withFilters } from '@wordpress/components';
+import { Component, Fragment } from '@wordpress/element';
 
 class AdminbarModules extends Component {
 	render() {

assets/js/components/alert.js

@@ -23,8 +23,11 @@ import data from 'GoogleComponents/data';
 import Notification from 'GoogleComponents/notifications/notification';
 import PropTypes from 'prop-types';
 
-const { __ } = wp.i18n;
-const { Component, Fragment } = wp.element;
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Component, Fragment } from '@wordpress/element';
 
 class Alert extends Component {
 	constructor( props ) {

assets/js/components/analytics-inactive-cta.js

@@ -30,8 +30,11 @@ import CTA from 'GoogleComponents/notifications/cta';
 import PropTypes from 'prop-types';
 import GenericError from 'GoogleComponents/notifications/generic-error';
 
-const { Component } = wp.element;
-const { __ } = wp.i18n;
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 class AnalyticsInactiveCTA extends Component {
 	static async setupAnalyticsClick() {

assets/js/components/button.js

@@ -22,7 +22,10 @@
 import { MDCRipple } from 'SiteKitCore/material-components';
 import PropTypes from 'prop-types';
 
-const { Component, createRef } = wp.element;
+/**
+ * WordPress dependencies
+ */
+import { Component, createRef } from '@wordpress/element';
 
 class Button extends Component {
 	constructor( props ) {

assets/js/components/checkbox.js

@@ -22,7 +22,10 @@
 import { MDCFormField, MDCCheckbox } from 'SiteKitCore/material-components';
 import PropTypes from 'prop-types';
 
-const { Component, createRef } = wp.element;
+/**
+ * WordPress dependencies
+ */
+import { Component, createRef } from '@wordpress/element';
 
 class Checkbox extends Component {
 	constructor( props ) {

assets/js/components/dashboard-details/dashboard-details-app.js

@@ -31,8 +31,11 @@ import { decodeHtmlEntity } from 'GoogleUtil';
 import DateRangeSelector from 'GoogleComponents/date-range-selector';
 import HelpLink from 'GoogleComponents/help-link';
 
-const { Component, Fragment } = wp.element;
-const { __ } = wp.i18n;
+/**
+ * WordPress dependencies
+ */
+import { Component, Fragment } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 class DashboardDetailsApp extends Component {
 	constructor( props ) {

assets/js/components/dashboard-details/dashboard-details-module.js

@@ -16,8 +16,11 @@
  * limitations under the License.
  */
 
-const { Component } = wp.element;
-const { withFilters } = wp.components;
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { withFilters } from '@wordpress/components';
 
 /**
  * A single module. Keeps track of its own active state and settings.

assets/js/components/dashboard-details/dashboard-details-modules.js

@@ -20,7 +20,10 @@
  * Internal dependencies
  */
 import DashboardDetailsModule from './dashboard-details-module';
-const { Component } = wp.element;
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
 
 class DashboardDetailsModules extends Component {
 	render() {

assets/js/components/dashboard-splash/dashboard-splash-app.js

@@ -22,6 +22,12 @@
 import DashboardSplashMain from 'GoogleComponents/dashboard-splash/dashboard-splash-main';
 import { Suspense as ReactSuspense, lazy as ReactLazy } from 'react';
 
+/**
+ * WordPress dependencies
+ */
+import { Component, Fragment, Suspense as WPSuspense, lazy as WPlazy } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
@@ -31,13 +37,11 @@ import { sendAnalyticsTrackingEvent } from 'GoogleUtil';
 import 'GoogleComponents/publisher-wins';
 import 'GoogleComponents/notifications';
 
-const { Component, Fragment } = wp.element;
-let { Suspense, lazy } = wp.element;
-const { __ } = wp.i18n;
-
 // Check for `Suspense` and `lazy` in `wp.element`; versions before 2.4.0 did
 // not include either, so we need to fallback to the React versions. See:
 // https://github.com/WordPress/gutenberg/blob/master/packages/element/CHANGELOG.md#240-2019-05-21
+let Suspense = WPSuspense;
+let lazy = WPlazy;
 if ( ! Suspense ) {
 	Suspense = ReactSuspense;
 }

assets/js/components/dashboard-splash/dashboard-splash-intro.js

@@ -23,8 +23,11 @@ import Button from 'GoogleComponents/button';
 import Logo from 'GoogleComponents/logo';
 import PropTypes from 'prop-types';
 
-const { Component } = wp.element;
-const { __ } = wp.i18n;
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 class DashboardSplashIntro extends Component {
 	render() {

assets/js/components/dashboard-splash/dashboard-splash-main.js

@@ -24,8 +24,11 @@ import DashboardSplashService from './dashboard-splash-service';
 import DashboardSplashOutro from './dashboard-splash-outro';
 import DashboardSplashModule from './dashboard-splash-module';
 
-const { Component } = wp.element;
-const { __ } = wp.i18n;
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 class DashboardSplashMain extends Component {
 	constructor( props ) {

assets/js/components/dashboard-splash/dashboard-splash-module.js

@@ -22,7 +22,10 @@
 import PropTypes from 'prop-types';
 import SvgIcon from 'GoogleUtil/svg-icon';
 
-const { Component } = wp.element;
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
 
 class DashboardSplashModule extends Component {
 	render() {

assets/js/components/dashboard-splash/dashboard-splash-notifications.js

@@ -16,8 +16,11 @@
  * limitations under the License.
  */
 
-const { Component } = wp.element;
-const { withFilters } = wp.components;
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { withFilters } from '@wordpress/components';
 
 /**
  * A single module. Keeps track of its own active state and settings.

assets/js/components/dashboard-splash/dashboard-splash-outro.js

@@ -23,8 +23,11 @@ import SvgIcon from 'GoogleUtil/svg-icon';
 import Button from 'GoogleComponents/button';
 import PropTypes from 'prop-types';
 
-const { Component } = wp.element;
-const { __ } = wp.i18n;
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 class DashboardSplashOutro extends Component {
 	render() {

assets/js/components/dashboard-splash/dashboard-splash-service.js

@@ -25,7 +25,10 @@ import PropTypes from 'prop-types';
  */
 import Link from '../link';
 
-const { Component } = wp.element;
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
 
 class DashboardSplashService extends Component {
 	render() {

assets/js/components/dashboard/dashboard-app.js

@@ -25,15 +25,18 @@ import PageHeader from 'GoogleComponents/page-header';
 import 'GoogleComponents/publisher-wins';
 import 'GoogleComponents/notifications';
 
+/**
+ * WordPress dependencies
+ */
+import { Component, Fragment } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
 import DashboardMain from './dashboard-main';
 import DashboardNotifications from './dashboard-notifications';
 
-const { Component, Fragment } = wp.element;
-const { __ } = wp.i18n;
-
 class DashboardApp extends Component {
 	render() {
 		return (

assets/js/components/dashboard/dashboard-main.js

@@ -20,7 +20,10 @@
  * Internal dependencies
  */
 import DashboardModules from './dashboard-modules';
-const { Component, Fragment } = wp.element;
+/**
+ * WordPress dependencies
+ */
+import { Component, Fragment } from '@wordpress/element';
 
 class DashboardMain extends Component {
 	render() {

assets/js/components/dashboard/dashboard-module-header.js

@@ -21,7 +21,10 @@
  */
 import PropTypes from 'prop-types';
 
-const { Component } = wp.element;
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
 
 class DashboardModuleHeader extends Component {
 	render() {

assets/js/components/dashboard/dashboard-module.js

@@ -16,8 +16,11 @@
  * limitations under the License.
  */
 
-const { Component } = wp.element;
-const { withFilters } = wp.components;
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { withFilters } from '@wordpress/components';
 
 /**
  * A single module. Keeps track of its own active state and settings.

assets/js/components/dashboard/dashboard-modules.js

@@ -25,7 +25,10 @@ import DashboardModule from './dashboard-module';
  */
 import HelpLink from 'GoogleComponents/help-link';
 import { Fragment } from 'react';
-const { Component } = wp.element;
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
 
 class DashboardModules extends Component {
 	render() {

assets/js/components/dashboard/dashboard-notifications.js

@@ -16,8 +16,11 @@
  * limitations under the License.
  */
 
-const { Component } = wp.element;
-const { withFilters } = wp.components;
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { withFilters } from '@wordpress/components';
 
 /**
  * A single module. Keeps track of its own active state and settings.

assets/js/components/data-block.js

@@ -23,7 +23,10 @@ import PropTypes from 'prop-types';
 import SourceLink from 'GoogleComponents/source-link';
 import SvgIcon from 'GoogleUtil/svg-icon';
 
-const { Component, Fragment } = wp.element;
+/**
+ * WordPress dependencies
+ */
+import { Component, Fragment } from '@wordpress/element';
 
 class DataBlock extends Component {
 	constructor( props ) {