Merge pull request #86 from material-components/feature/534-settings-page-tests-2

Add tests for settings page

Author: ravichdev

plugin/assets/fonts/icons.json

@@ -30,12 +30,12 @@ import Button from '../../../wizard/components/navigation/button';
 import { setApiKey } from '../../utils';
 import Dialog from '../../../common/components/dialog';
 
-const Api = () => {
-	const { state, dispatch } = useContext( SettingsContext );
+const Api = ( { apiStatus } ) => {
+	const { dispatch } = useContext( SettingsContext );
 	const [ api, setApi ] = useState( null );
 	const [ isLoading, setIsLoading ] = useState( false );
 	const [ confirm, setConfirm ] = useState( false );
-	const isApiOk = 'ok' === state.apiStatus;
+	const isApiOk = 'ok' === apiStatus;
 
 	const dispatchError = error =>
 		dispatch( {

plugin/assets/src/settings/components/integrations/api.js

@@ -80,6 +80,10 @@ const Integrations = () => {
 						type={ UPDATERS[ key ].type }
 						displayUpdatedOn={ UPDATERS[ key ].displayUpdatedOn }
 						versionAvailable={ UPDATERS[ key ].versionAvailable }
+						apiStatus={ state.apiStatus }
+						updateAvailable={
+							state.updaters[ UPDATERS[ key ].type ].updateAvailable
+						}
 					/>
 				) ) }
 			</div>
@@ -104,7 +108,7 @@ const Integrations = () => {
 				} }
 			></p>
 
-			<Api />
+			<Api apiStatus={ state.apiStatus } />
 		</div>
 	);
 };

plugin/assets/src/settings/components/integrations/index.js

@@ -44,17 +44,18 @@ const Updater = ( {
 	type,
 	displayUpdatedOn,
 	versionAvailable,
+	apiStatus,
+	updateAvailable,
 } ) => {
 	const [ id ] = useState( _uniqueId( 'updater-' ) );
-	const { state, dispatch } = useContext( SettingsContext );
-	const isDisabled = needsKey && 'ok' !== state.apiStatus;
+	const { dispatch } = useContext( SettingsContext );
+	const isDisabled = needsKey && 'ok' !== apiStatus;
 	const updatedDate = lastUpdated
 		? dateI18n( 'M j, Y, h:i A', lastUpdated )
 		: __( 'never', 'material-design' );
 	const [ isUpdating, setIsUpdating ] = useState( false );
-	const shouldUpdate = ! isDisabled && state.updaters[ type ].updateAvailable;
-	const shouldNotUpdate =
-		! isDisabled && ! state.updaters[ type ].updateAvailable;
+	const shouldUpdate = ! isDisabled && updateAvailable;
+	const shouldNotUpdate = ! isDisabled && ! updateAvailable;
 
 	const handleUpdate = response => {
 		setIsUpdating( true );

plugin/assets/src/settings/components/integrations/updater.js

@@ -0,0 +1,18 @@
+/**
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './update';
+export * from './promises';

plugin/assets/src/settings/utils/index.js

@@ -22,34 +22,13 @@ import apiFetch from '@wordpress/api-fetch';
 /**
  * Internal dependencies
  */
-import { UPDATERS } from './constants';
-import getConfig from '../admin/get-config';
-
-/**
- * Handles each kind of update
- *
- * @param {*} type Item to update
- */
-export const update = type => {
-	if ( type === UPDATERS.FONTS.type ) {
-		return updateFonts();
-	}
-
-	if ( type === UPDATERS.ICONS.type ) {
-		return updateIcons();
-	}
-
-	if ( isCoreUpdate( type ) ) {
-		return new Promise( () => {
-			window.location.href = getConfig( 'coreUpdateUrl' );
-		} );
-	}
-};
+import { UPDATERS } from '../constants';
+import getConfig from '../../admin/get-config';
 
 /**
  * Update fonts.
  */
-const updateFonts = () => {
+export const updateFonts = () => {
 	return new Promise( ( resolve, reject ) => {
 		apiFetch( {
 			path: getConfig( 'assetsRestPath' ) + 'retrieve-fonts/force',
@@ -66,7 +45,7 @@ const updateFonts = () => {
 /**
  * Update icons.
  */
-const updateIcons = () => {
+export const updateIcons = () => {
 	return new Promise( ( resolve, reject ) => {
 		apiFetch( {
 			path: getConfig( 'assetsRestPath' ) + 'retrieve-icons/force',
@@ -80,7 +59,7 @@ const updateIcons = () => {
 	} );
 };
 
-const isCoreUpdate = type =>
+export const isCoreUpdate = type =>
 	[ UPDATERS.PLUGIN.type, UPDATERS.THEME.type ].includes( type );
 
 /**

plugin/assets/src/settings/utils.js …in/assets/src/settings/utils/promises.jsplugin/assets/src/settings/utils.js renamed to plugin/assets/src/settings/utils/promises.js plugin/assets/src/settings/utils.js renamed to plugin/assets/src/settings/utils/promises.js

@@ -0,0 +1,27 @@
+/**
+ * Internal dependencies
+ */
+import { UPDATERS } from '../constants';
+import getConfig from '../../admin/get-config';
+import { updateFonts, updateIcons, isCoreUpdate } from './promises';
+
+/**
+ * Handles each kind of update
+ *
+ * @param {*} type Item to update
+ */
+export const update = type => {
+	if ( type === UPDATERS.FONTS.type ) {
+		return updateFonts();
+	}
+
+	if ( type === UPDATERS.ICONS.type ) {
+		return updateIcons();
+	}
+
+	if ( isCoreUpdate( type ) ) {
+		return new Promise( () => {
+			window.location.href = getConfig( 'coreUpdateUrl' );
+		} );
+	}
+};

plugin/assets/src/settings/utils/update.js

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Settings: Errors matches snapshot 1`] = `<div />`;

plugin/tests/js/settings/components/__snapshots__/errors.test.js.snap

@@ -0,0 +1,42 @@
+/**
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import '@testing-library/jest-dom/extend-expect';
+import { render } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import Errors from '../../../../assets/src/settings/components/errors';
+import { SettingsProvider } from '../../../../assets/src/settings/context';
+
+const setup = () => {
+	return render(
+		<SettingsProvider>
+			<Errors />
+		</SettingsProvider>
+	);
+};
+
+describe( 'Settings: Errors', () => {
+	it( 'matches snapshot', () => {
+		const { container } = setup();
+		expect( container ).toMatchSnapshot();
+	} );
+} );