Add admin menu browser persistence (via schema) (#45957)

* Add basic schema

* Remove redundant code.

* Icon only required on parent menu items

client/state/admin-menu/reducer.js

@@ -1,28 +1,32 @@
 /**
  * Internal dependencies
  */
-import { withStorageKey, keyedReducer, combineReducers } from 'state/utils';
+import { withStorageKey, keyedReducer, combineReducers, withSchemaValidation } from 'state/utils';
 import 'state/data-layer/wpcom/sites/admin-menu';
 import { ADMIN_MENU_RECEIVE, ADMIN_MENU_REQUEST } from 'state/action-types';
+import { menusSchema } from './schema';
 
-export const menus = keyedReducer( 'siteId', ( state = [], action ) => {
-	switch ( action.type ) {
-		case ADMIN_MENU_RECEIVE:
-			return action.menu;
-		default:
-			return state;
-	}
-} );
+export const menus = withSchemaValidation(
+	menusSchema,
+	keyedReducer( 'siteId', ( state = [], action ) => {
+		switch ( action.type ) {
+			case ADMIN_MENU_RECEIVE:
+				return action.menu;
+			default:
+				return state;
+		}
+	} )
+);
 
-export function requesting( state = false, action ) {
+export const requesting = ( state = false, action ) => {
 	switch ( action.type ) {
 		case ADMIN_MENU_REQUEST:
 		case ADMIN_MENU_RECEIVE:
 			return action.type === ADMIN_MENU_REQUEST;
 	}
 
 	return state;
-}
+};
 
 const reducer = combineReducers( {
 	menus,

client/state/admin-menu/schema.js

@@ -0,0 +1,37 @@
+const commonItemPropsSchema = {
+	slug: { type: 'string' },
+	title: { type: 'string' },
+	type: { type: 'string' },
+	url: { type: 'string' },
+};
+
+const menuItemsSite = {
+	type: 'array',
+	items: {
+		type: 'object',
+		required: [ 'type' ],
+		properties: {
+			...commonItemPropsSchema,
+			icon: { type: 'string' },
+			children: {
+				type: 'array',
+				items: {
+					type: 'object',
+					required: [ 'type', 'parent' ],
+					properties: {
+						...commonItemPropsSchema,
+						parent: { type: 'string' },
+					},
+				},
+			},
+		},
+	},
+	additionalProperties: false,
+};
+
+export const menusSchema = {
+	type: 'object',
+	patternProperties: {
+		'^\\d+$': menuItemsSite,
+	},
+};

client/state/admin-menu/test/reducer.js

@@ -7,7 +7,7 @@ import deepFreeze from 'deep-freeze';
  * Internal dependencies
  */
 import menuFixture from './fixture/menu-fixture';
-import { ADMIN_MENU_RECEIVE, ADMIN_MENU_REQUEST } from 'state/action-types';
+import { ADMIN_MENU_RECEIVE, ADMIN_MENU_REQUEST, DESERIALIZE, SERIALIZE } from 'state/action-types';
 import { menus as menusReducer, requesting as requestingReducer } from '../reducer';
 
 describe( 'reducer', () => {
@@ -60,6 +60,80 @@ describe( 'reducer', () => {
 				123456: newMenu,
 			} );
 		} );
+
+		describe( 'persistence', () => {
+			test( 'correctly serializes state for persistence', () => {
+				const initialState = deepFreeze( {
+					123456: menuFixture,
+				} );
+
+				const action = { type: SERIALIZE };
+
+				const serializationResult = menusReducer( initialState, action ).root();
+
+				expect( serializationResult ).toEqual( {
+					123456: menuFixture,
+				} );
+			} );
+
+			test( 'correctly loads valid persisted state', () => {
+				const stateToDeserialize = deepFreeze( {
+					123456: menuFixture,
+				} );
+
+				const action = { type: DESERIALIZE };
+
+				expect( menusReducer( stateToDeserialize, action ) ).toEqual( {
+					123456: menuFixture,
+				} );
+			} );
+
+			test.each( [
+				{
+					12345: [
+						{
+							title: 'Menu Item',
+						},
+					],
+				},
+				{
+					12345: [
+						{
+							title: 'Menu Item',
+							type: 'menu-item',
+							children: [
+								{
+									title: 'Child Menu',
+									type: 'sub-menu-item',
+								},
+							],
+						},
+					],
+				},
+				[
+					{
+						title: 'Hello world',
+					},
+				],
+			] )(
+				'loads default state when persisted state fails schema validation',
+				( persistedState ) => {
+					// Disable console here as `isValidStateWithSchema` util emits logs.
+					// see: https://github.com/Automattic/wp-calypso/blob/02c3a452881ff89fce240c09d16874c0c4e4d429/client/state/utils/schema-utils.js#L14
+					jest.spyOn( console, 'warn' ).mockImplementation( () => {} );
+
+					// This is the state that will be returned for the `DESERIALIZE` action
+					// if the persisted state fails schema validation
+					const defaultReducerState = deepFreeze( {} );
+
+					// This is the state to be validated against the schema.
+					const stateToDeserialize = deepFreeze( persistedState );
+
+					const state = menusReducer( stateToDeserialize, { type: DESERIALIZE } );
+					expect( state ).toEqual( defaultReducerState );
+				}
+			);
+		} );
 	} );
 
 	describe( 'requesting reducer', () => {