From 7fa7881952b463e25854c10605af02b7ed021842 Mon Sep 17 00:00:00 2001 From: Niral Patel Date: Tue, 9 Aug 2022 02:35:17 +0000 Subject: [PATCH 01/31] Clean branch off main with changes; WIP validating param --- packages/api-explorer/src/ApiExplorer.tsx | 13 +++++- .../src/components/SideNav/SideNav.tsx | 6 +-- .../src/components/SideNav/SideNavMethods.tsx | 35 ++++++++------- .../src/components/SideNav/SideNavTypes.tsx | 35 ++++++++------- .../MethodTagScene/MethodTagScene.spec.tsx | 39 +++++++++++------ .../scenes/MethodTagScene/MethodTagScene.tsx | 36 ++++++++++++---- .../scenes/TypeTagScene/TypeTagScene.spec.tsx | 32 +++++++++----- .../src/scenes/TypeTagScene/TypeTagScene.tsx | 43 ++++++++++++++----- .../src/state/settings/selectors.spec.ts | 6 ++- .../src/state/settings/selectors.ts | 3 ++ .../api-explorer/src/state/settings/slice.ts | 6 +++ packages/api-explorer/src/utils/hooks.spec.ts | 13 ++---- packages/api-explorer/src/utils/hooks.ts | 24 ++++++++--- 13 files changed, 194 insertions(+), 97 deletions(-) diff --git a/packages/api-explorer/src/ApiExplorer.tsx b/packages/api-explorer/src/ApiExplorer.tsx index 05740eb17..344b6d9e0 100644 --- a/packages/api-explorer/src/ApiExplorer.tsx +++ b/packages/api-explorer/src/ApiExplorer.tsx @@ -91,7 +91,8 @@ export const ApiExplorer: FC = ({ const specs = useSelector(selectSpecs) const spec = useSelector(selectCurrentSpec) const { initLodesAction } = useLodeActions() - const { initSettingsAction, setSearchPatternAction } = useSettingActions() + const { initSettingsAction, setSearchPatternAction, setTagFilterAction } = + useSettingActions() const { initSpecsAction, setCurrentSpecAction } = useSpecActions() const location = useLocation() @@ -126,7 +127,15 @@ export const ApiExplorer: FC = ({ useEffect(() => { const searchParams = new URLSearchParams(location.search) const searchPattern = searchParams.get('s') || '' - setSearchPatternAction({ searchPattern: searchPattern! }) + const verbParam = searchParams.get('v') || 'ALL' + // TODO: need to validate verbParam, checking against all available + // httpMethod and metaType options, default to ALL if not valid + setSearchPatternAction({ + searchPattern: searchPattern!, + }) + setTagFilterAction({ + tagFilter: verbParam.toUpperCase(), + }) }, [location.search]) useEffect(() => { diff --git a/packages/api-explorer/src/components/SideNav/SideNav.tsx b/packages/api-explorer/src/components/SideNav/SideNav.tsx index 68782648b..8dcb0a439 100644 --- a/packages/api-explorer/src/components/SideNav/SideNav.tsx +++ b/packages/api-explorer/src/components/SideNav/SideNav.tsx @@ -89,7 +89,7 @@ export const SideNav: FC = ({ headless = false, spec }) => { } else { if (parts[2] !== tabNames[index]) { parts[2] = tabNames[index] - navigate(parts.join('/')) + navigate(parts.join('/'), { v: null }) } } } @@ -115,10 +115,10 @@ export const SideNav: FC = ({ headless = false, spec }) => { const searchParams = new URLSearchParams(location.search) if (debouncedPattern && debouncedPattern !== searchParams.get('s')) { searchParams.set('s', debouncedPattern) - navigate(location.pathname, { search: searchParams.toString() }) + navigate(location.pathname, { s: searchParams.get('s') }) } else if (!debouncedPattern && searchParams.get('s')) { searchParams.delete('s') - navigate(location.pathname, { search: searchParams.toString() }) + navigate(location.pathname, { s: null }) } }, [location.search, debouncedPattern]) diff --git a/packages/api-explorer/src/components/SideNav/SideNavMethods.tsx b/packages/api-explorer/src/components/SideNav/SideNavMethods.tsx index 14f39cfba..a832d6431 100644 --- a/packages/api-explorer/src/components/SideNav/SideNavMethods.tsx +++ b/packages/api-explorer/src/components/SideNav/SideNavMethods.tsx @@ -32,7 +32,7 @@ import { useSelector } from 'react-redux' import { useLocation, useRouteMatch } from 'react-router-dom' import { useNavigation, highlightHTML, buildMethodPath } from '../../utils' import { Link } from '../Link' -import { selectSearchPattern } from '../../state' +import { selectSearchPattern, selectTagFilter } from '../../state' interface MethodsProps { methods: MethodList @@ -48,6 +48,7 @@ export const SideNavMethods = styled( const navigate = useNavigation() const searchParams = new URLSearchParams(location.search) const searchPattern = useSelector(selectSearchPattern) + const selectedTagFilter = useSelector(selectTagFilter) const match = useRouteMatch<{ methodTag: string }>( `/:specKey/methods/:methodTag/:methodName?` ) @@ -82,20 +83,24 @@ export const SideNavMethods = styled( } >
    - {Object.values(methods).map((method) => ( -
  • - - {highlightHTML(searchPattern, method.summary)} - -
    • - ))} + {Object.values(methods).map( + (method) => + (selectedTagFilter === 'ALL' || + selectedTagFilter === method.httpMethod) && ( +
  • + + {highlightHTML(searchPattern, method.summary)} + +
    • + ) + )}
) diff --git a/packages/api-explorer/src/components/SideNav/SideNavTypes.tsx b/packages/api-explorer/src/components/SideNav/SideNavTypes.tsx index e7e91740d..88c38f784 100644 --- a/packages/api-explorer/src/components/SideNav/SideNavTypes.tsx +++ b/packages/api-explorer/src/components/SideNav/SideNavTypes.tsx @@ -32,7 +32,7 @@ import { useLocation, useRouteMatch } from 'react-router-dom' import { useSelector } from 'react-redux' import { Link } from '../Link' import { highlightHTML, useNavigation, buildTypePath } from '../../utils' -import { selectSearchPattern } from '../../state' +import { selectSearchPattern, selectTagFilter } from '../../state' interface TypesProps { types: TypeList @@ -48,6 +48,7 @@ export const SideNavTypes = styled( const navigate = useNavigation() const searchParams = new URLSearchParams(location.search) const searchPattern = useSelector(selectSearchPattern) + const selectedTagFilter = useSelector(selectTagFilter) const match = useRouteMatch<{ typeTag: string }>( `/:specKey/types/:typeTag/:typeName?` ) @@ -82,20 +83,24 @@ export const SideNavTypes = styled( } >
    - {Object.values(types).map((type) => ( -
  • - - {highlightHTML(searchPattern, type.name)} - -
    • - ))} + {Object.values(types).map( + (type) => + (selectedTagFilter === 'ALL' || + selectedTagFilter === type.metaType.toUpperCase()) && ( +
  • + + {highlightHTML(searchPattern, type.name)} + +
    • + ) + )}
) diff --git a/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.spec.tsx b/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.spec.tsx index d9c5c30cd..dcc6efe8e 100644 --- a/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.spec.tsx +++ b/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.spec.tsx @@ -29,16 +29,28 @@ import { screen, waitFor } from '@testing-library/react' import userEvent from '@testing-library/user-event' import { api } from '../../test-data' -import { renderWithRouter } from '../../test-utils' +import { renderWithRouterAndReduxProvider } from '../../test-utils' import { MethodTagScene } from './MethodTagScene' const opBtnNames = /ALL|GET|POST|PUT|PATCH|DELETE/ +const mockHistoryPush = jest.fn() +jest.mock('react-router-dom', () => { + const ReactRouterDOM = jest.requireActual('react-router-dom') + return { + ...ReactRouterDOM, + useHistory: () => ({ + push: mockHistoryPush, + location, + }), + } +}) + describe('MethodTagScene', () => { Element.prototype.scrollTo = jest.fn() test('it renders operation buttons and all methods for a given method tag', () => { - renderWithRouter( + renderWithRouterAndReduxProvider( , @@ -62,7 +74,7 @@ describe('MethodTagScene', () => { test('it only renders operation buttons for operations that exist under that tag', () => { /** ApiAuth contains two POST methods and a DELETE method */ - renderWithRouter( + renderWithRouterAndReduxProvider( , @@ -75,30 +87,29 @@ describe('MethodTagScene', () => { ).toHaveLength(3) }) - test('it filters methods by operation type', async () => { - renderWithRouter( + test('it pushes filter to URL on toggle', async () => { + renderWithRouterAndReduxProvider( , ['/3.1/methods/Look'] ) - const allLookMethods = /^\/look.*/ - expect(screen.getAllByText(allLookMethods)).toHaveLength(7) /** Filter by GET operation */ userEvent.click(screen.getByRole('button', { name: 'GET' })) await waitFor(() => { - expect(screen.getAllByText(allLookMethods)).toHaveLength(4) + expect(mockHistoryPush).toHaveBeenCalledWith({ + pathname: location.pathname, + search: 'v=get', + }) }) /** Filter by DELETE operation */ userEvent.click(screen.getByRole('button', { name: 'DELETE' })) await waitFor(() => { // eslint-disable-next-line jest-dom/prefer-in-document - expect(screen.getAllByText(allLookMethods)).toHaveLength(1) - }) - /** Restore original state */ - userEvent.click(screen.getByRole('button', { name: 'ALL' })) - await waitFor(() => { - expect(screen.getAllByText(allLookMethods)).toHaveLength(7) + expect(mockHistoryPush).toHaveBeenCalledWith({ + pathname: location.pathname, + search: 'v=delete', + }) }) }) }) diff --git a/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.tsx b/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.tsx index 85905053a..3472fb678 100644 --- a/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.tsx +++ b/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.tsx @@ -28,8 +28,10 @@ import React, { useEffect, useState } from 'react' import { useHistory, useParams } from 'react-router-dom' import { Grid, ButtonToggle, ButtonItem } from '@looker/components' import type { ApiModel } from '@looker/sdk-codegen' +import { useSelector } from 'react-redux' import { ApixSection, DocTitle, DocMethodSummary, Link } from '../../components' import { buildMethodPath, useNavigation } from '../../utils' +import { selectTagFilter } from '../../state' import { getOperations } from './utils' interface MethodTagSceneProps { @@ -44,15 +46,22 @@ interface MethodTagSceneParams { export const MethodTagScene: FC = ({ api }) => { const { specKey, methodTag } = useParams() const history = useHistory() + const methods = api.tags[methodTag] const navigate = useNavigation() - const [value, setValue] = useState('ALL') + const selectedTagFilter = useSelector(selectTagFilter) + const [tagFilter, setTagFilter] = useState(selectedTagFilter) + const searchParams = new URLSearchParams(location.search) + + const setValue = (filter: string) => { + navigate(location.pathname, { + v: filter === 'ALL' ? null : filter.toLowerCase(), + }) + } useEffect(() => { - /** Reset ButtonToggle value on route change */ - setValue('ALL') - }, [methodTag]) + setTagFilter(selectedTagFilter) + }, [selectedTagFilter]) - const methods = api.tags[methodTag] useEffect(() => { if (!methods) { navigate(`/${specKey}/methods`) @@ -69,7 +78,12 @@ export const MethodTagScene: FC = ({ api }) => { return ( {`${tag.name}: ${tag.description}`} - + ALL @@ -81,10 +95,16 @@ export const MethodTagScene: FC = ({ api }) => { {Object.values(methods).map( (method, index) => - (value === 'ALL' || value === method.httpMethod) && ( + (selectedTagFilter === 'ALL' || + selectedTagFilter === method.httpMethod) && ( diff --git a/packages/api-explorer/src/scenes/TypeTagScene/TypeTagScene.spec.tsx b/packages/api-explorer/src/scenes/TypeTagScene/TypeTagScene.spec.tsx index 4ded50254..881fa5fb4 100644 --- a/packages/api-explorer/src/scenes/TypeTagScene/TypeTagScene.spec.tsx +++ b/packages/api-explorer/src/scenes/TypeTagScene/TypeTagScene.spec.tsx @@ -36,6 +36,18 @@ const opBtnNames = /ALL|SPECIFICATION|WRITE|REQUEST|ENUMERATED/ const path = '/:specKey/types/:typeTag' +const mockHistoryPush = jest.fn() +jest.mock('react-router-dom', () => { + const ReactRouterDOM = jest.requireActual('react-router-dom') + return { + ...ReactRouterDOM, + useHistory: () => ({ + push: mockHistoryPush, + location, + }), + } +}) + describe('TypeTagScene', () => { Element.prototype.scrollTo = jest.fn() @@ -74,30 +86,28 @@ describe('TypeTagScene', () => { ).toHaveLength(2) }) - test('it filters methods by operation type', async () => { + test('it pushes filter to URL on toggle', async () => { renderWithRouterAndReduxProvider( , ['/3.1/types/Look'] ) - expect(screen.getAllByRole('heading', { level: 3 })).toHaveLength( - Object.keys(api.typeTags.Look).length - ) - - expect(screen.getAllByRole('heading', { level: 3 })).toHaveLength( - Object.keys(api.typeTags.Look).length - ) - /** Filter by SPECIFICATION */ userEvent.click(screen.getByRole('button', { name: 'SPECIFICATION' })) await waitFor(() => { - expect(screen.getAllByRole('heading', { level: 3 })).toHaveLength(5) + expect(mockHistoryPush).toHaveBeenCalledWith({ + pathname: location.pathname, + search: 'v=specification', + }) }) /** Filter by REQUEST */ userEvent.click(screen.getByRole('button', { name: 'REQUEST' })) await waitFor(() => { - expect(screen.getAllByRole('heading', { level: 3 })).toHaveLength(2) + expect(mockHistoryPush).toHaveBeenCalledWith({ + pathname: location.pathname, + search: 'v=request', + }) }) }) }) diff --git a/packages/api-explorer/src/scenes/TypeTagScene/TypeTagScene.tsx b/packages/api-explorer/src/scenes/TypeTagScene/TypeTagScene.tsx index 1cb13cf5a..b34103043 100644 --- a/packages/api-explorer/src/scenes/TypeTagScene/TypeTagScene.tsx +++ b/packages/api-explorer/src/scenes/TypeTagScene/TypeTagScene.tsx @@ -24,12 +24,14 @@ */ import type { FC } from 'react' -import React, { useEffect, useState } from 'react' +import React, { useEffect } from 'react' import { Grid, ButtonToggle, ButtonItem } from '@looker/components' import type { ApiModel } from '@looker/sdk-codegen' import { useParams } from 'react-router-dom' +import { useSelector } from 'react-redux' import { ApixSection, DocTitle, DocTypeSummary, Link } from '../../components' import { buildTypePath, useNavigation } from '../../utils' +import { selectTagFilter } from '../../state' import { getMetaTypes } from './utils' interface TypeTagSceneProps { @@ -44,12 +46,8 @@ interface TypeTagSceneParams { export const TypeTagScene: FC = ({ api }) => { const { specKey, typeTag } = useParams() const navigate = useNavigation() - const [value, setValue] = useState('ALL') - - useEffect(() => { - /** Reset ButtonToggle value on route change */ - setValue('ALL') - }, [typeTag]) + const searchParams = new URLSearchParams(location.search) + const selectedTagFilter = useSelector(selectTagFilter) const types = api.typeTags[typeTag] useEffect(() => { @@ -58,16 +56,31 @@ export const TypeTagScene: FC = ({ api }) => { } }, [types]) + useEffect(() => { + setValue(selectedTagFilter) + }, [selectedTagFilter]) + if (!types) { return <> } + const setValue = (filter: string) => { + navigate(location.pathname, { + v: filter === 'ALL' ? null : filter.toLowerCase(), + }) + } + const tag = Object.values(api.spec.tags!).find((tag) => tag.name === typeTag)! const metaTypes = getMetaTypes(types) return ( {`${tag.name}: ${tag.description}`} - + ALL @@ -79,9 +92,17 @@ export const TypeTagScene: FC = ({ api }) => { {Object.values(types).map( (type, index) => - (value === 'ALL' || - value === type.metaType.toString().toUpperCase()) && ( - + (selectedTagFilter === 'ALL' || + selectedTagFilter === type.metaType.toString().toUpperCase()) && ( + diff --git a/packages/api-explorer/src/state/settings/selectors.spec.ts b/packages/api-explorer/src/state/settings/selectors.spec.ts index 38c81a636..762ddce04 100644 --- a/packages/api-explorer/src/state/settings/selectors.spec.ts +++ b/packages/api-explorer/src/state/settings/selectors.spec.ts @@ -24,7 +24,7 @@ */ import { createTestStore, preloadedState } from '../../test-utils' -import { selectSdkLanguage, isInitialized } from './selectors' +import { selectSdkLanguage, isInitialized, selectTagFilter } from './selectors' const testStore = createTestStore() @@ -37,6 +37,10 @@ describe('Settings selectors', () => { ) }) + test('selectTagFilter selects', () => { + expect(selectTagFilter(state)).toEqual(preloadedState.settings.tagFilter) + }) + test('isInitialized selects', () => { expect(isInitialized(state)).toEqual(preloadedState.settings.initialized) }) diff --git a/packages/api-explorer/src/state/settings/selectors.ts b/packages/api-explorer/src/state/settings/selectors.ts index 7ba09d3d7..fdc62d786 100644 --- a/packages/api-explorer/src/state/settings/selectors.ts +++ b/packages/api-explorer/src/state/settings/selectors.ts @@ -36,5 +36,8 @@ export const selectSearchPattern = (state: RootState) => export const selectSearchCriteria = (state: RootState) => selectSettingsState(state).searchCriteria +export const selectTagFilter = (state: RootState) => + selectSettingsState(state).tagFilter + export const isInitialized = (state: RootState) => selectSettingsState(state).initialized diff --git a/packages/api-explorer/src/state/settings/slice.ts b/packages/api-explorer/src/state/settings/slice.ts index c6373d9d0..a5799e4c0 100644 --- a/packages/api-explorer/src/state/settings/slice.ts +++ b/packages/api-explorer/src/state/settings/slice.ts @@ -38,6 +38,7 @@ export interface UserDefinedSettings { export interface SettingState extends UserDefinedSettings { searchPattern: string searchCriteria: SearchCriterionTerm[] + tagFilter: string initialized: boolean error?: Error } @@ -46,6 +47,7 @@ export const defaultSettings = { sdkLanguage: 'Python', searchPattern: '', searchCriteria: setToCriteria(SearchAll) as SearchCriterionTerm[], + tagFilter: 'ALL', } export const defaultSettingsState: SettingState = { @@ -55,6 +57,7 @@ export const defaultSettingsState: SettingState = { type SetSearchPatternAction = Pick type SetSdkLanguageAction = Pick +type SetTagFilterAction = Pick export type InitSuccessPayload = UserDefinedSettings @@ -84,6 +87,9 @@ export const settingsSlice = createSlice({ ) { state.searchPattern = action.payload.searchPattern }, + setTagFilterAction(state, action: PayloadAction) { + state.tagFilter = action.payload.tagFilter + }, }, }) diff --git a/packages/api-explorer/src/utils/hooks.spec.ts b/packages/api-explorer/src/utils/hooks.spec.ts index c962ef190..d526e4dd3 100644 --- a/packages/api-explorer/src/utils/hooks.spec.ts +++ b/packages/api-explorer/src/utils/hooks.spec.ts @@ -60,19 +60,12 @@ describe('Navigate', () => { }) }) - test('clears existing params when given params are an empty object', () => { - navigate(route, {}) - expect(mockHistoryPush).lastCalledWith({ - pathname: route, - }) - }) - test('sets query parameters when given a populated query params object', () => { - const newParams = 's=embedsso' - navigate(route, { search: newParams }) + const searchParam = 'embedsso' + navigate(route, { s: searchParam }) expect(mockHistoryPush).lastCalledWith({ pathname: route, - search: newParams, + search: `s=${searchParam}`, }) }) }) diff --git a/packages/api-explorer/src/utils/hooks.ts b/packages/api-explorer/src/utils/hooks.ts index b3b4d1095..1d293da02 100644 --- a/packages/api-explorer/src/utils/hooks.ts +++ b/packages/api-explorer/src/utils/hooks.ts @@ -35,17 +35,27 @@ import { useHistory } from 'react-router-dom' export const useNavigation = () => { const history = useHistory() - const navigate = (path: string, queryParams?: { search?: string } | null) => { + const navigate = ( + path: string, + queryParams?: { s?: string | null; v?: string | null } | null + ) => { + const urlParams = new URLSearchParams(history.location.search) if (queryParams === undefined) { // if params passed in is undefined, maintain existing parameters in the URL - const curParams = new URLSearchParams(history.location.search) - history.push({ pathname: path, search: curParams.toString() }) - } else if (queryParams === null || Object.keys(queryParams).length === 0) { - // if params passed in is null or empty, remove all parameters from the URL + history.push({ pathname: path, search: urlParams.toString() }) + } else if (queryParams === null) { + // if params passed in is null, remove all parameters from the URL history.push({ pathname: path }) } else { - // if we have new parameters passed in, push them to the URL - history.push({ pathname: path, search: queryParams.search }) + // push each key as new param to URL, excluding entries with value null + Object.keys(queryParams).forEach((key) => { + if (queryParams[key] === null || queryParams[key] === '') { + urlParams.delete(key) + } else { + urlParams.set(key, queryParams[key]) + } + }) + history.push({ pathname: path, search: urlParams.toString() }) } } From 1fe3e4a20efb3f6c7df22850dd111f641f6f6b05 Mon Sep 17 00:00:00 2001 From: Niral Patel Date: Tue, 9 Aug 2022 17:59:57 +0000 Subject: [PATCH 02/31] Added utils in path for verifying filter --- packages/api-explorer/src/ApiExplorer.tsx | 6 ++- .../MethodTagScene/MethodTagScene.spec.tsx | 1 + packages/api-explorer/src/utils/path.ts | 37 +++++++++++++++++++ 3 files changed, 42 insertions(+), 2 deletions(-) diff --git a/packages/api-explorer/src/ApiExplorer.tsx b/packages/api-explorer/src/ApiExplorer.tsx index 344b6d9e0..fa26c2495 100644 --- a/packages/api-explorer/src/ApiExplorer.tsx +++ b/packages/api-explorer/src/ApiExplorer.tsx @@ -68,7 +68,7 @@ import { selectSpecs, selectCurrentSpec, } from './state' -import { getSpecKey, diffPath } from './utils' +import { getSpecKey, diffPath, isValidFilter } from './utils' export interface ApiExplorerProps { adaptor: IApixAdaptor @@ -134,7 +134,9 @@ export const ApiExplorer: FC = ({ searchPattern: searchPattern!, }) setTagFilterAction({ - tagFilter: verbParam.toUpperCase(), + tagFilter: isValidFilter(location, verbParam) + ? verbParam.toUpperCase() + : 'ALL', }) }, [location.search]) diff --git a/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.spec.tsx b/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.spec.tsx index dcc6efe8e..a9de09b29 100644 --- a/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.spec.tsx +++ b/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.spec.tsx @@ -32,6 +32,7 @@ import { api } from '../../test-data' import { renderWithRouterAndReduxProvider } from '../../test-utils' import { MethodTagScene } from './MethodTagScene' +// TODO: use constant from path.ts const opBtnNames = /ALL|GET|POST|PUT|PATCH|DELETE/ const mockHistoryPush = jest.fn() diff --git a/packages/api-explorer/src/utils/path.ts b/packages/api-explorer/src/utils/path.ts index 4088867f6..a7ead8224 100644 --- a/packages/api-explorer/src/utils/path.ts +++ b/packages/api-explorer/src/utils/path.ts @@ -27,6 +27,43 @@ import type { ApiModel, IMethod, IType } from '@looker/sdk-codegen' import { firstMethodRef } from '@looker/sdk-codegen' import type { Location as HLocation } from 'history' +import { matchPath } from 'react-router' + +// TODO: documenting, testing the below +export const methodFilterOptions = /ALL|GET|POST|PUT|PATCH|DELETE/i +export const typeFilterOptions = /ALL|SPECIFICATION|WRITE|REQUEST|ENUMERATED/i + +/** + * Gets the scene type of the current page + * + * @param location browser location + * @returns string representing the scene type + */ +export const getSceneType = (location: HLocation | Location) => { + const match = matchPath<{ tabType: string }>(location.pathname, { + path: '/:specKey/:tabType', + }) + return match ? match!.params.tabType : '' +} + +/** + * Confirms if filter parameter is valid for the page scene type + * + * @param location browser location + * @param filter filter tag for page + */ +export const isValidFilter = ( + location: HLocation | Location, + filter: string +) => { + const sceneType = getSceneType(location) + if (!sceneType) return false + else if (sceneType === 'methods') { + return methodFilterOptions.test(filter) + } else { + return typeFilterOptions.test(filter) + } +} /** * Builds a path matching the route used by MethodScene From 853531a95ab28ed518fac37fc0bd6035f6d8d552 Mon Sep 17 00:00:00 2001 From: Niral Patel Date: Tue, 9 Aug 2022 19:26:02 +0000 Subject: [PATCH 03/31] Refactoring and unit testing implemented --- packages/api-explorer/src/ApiExplorer.tsx | 15 +++- .../SelectorContainer/SelectorContainer.tsx | 3 + .../src/components/SideNav/SideNav.tsx | 2 +- .../src/components/SideNav/SideNavMethods.tsx | 38 +++++----- .../src/components/SideNav/SideNavTypes.tsx | 38 +++++----- .../MethodTagScene/MethodTagScene.spec.tsx | 1 - .../scenes/MethodTagScene/MethodTagScene.tsx | 15 ++-- .../src/scenes/TypeTagScene/TypeTagScene.tsx | 15 ++-- packages/api-explorer/src/test-data/index.ts | 1 + .../api-explorer/src/test-data/tagFilters.ts | 28 ++++++++ packages/api-explorer/src/utils/path.spec.ts | 53 +++++++++++++- packages/api-explorer/src/utils/path.ts | 69 +++++++++---------- 12 files changed, 185 insertions(+), 93 deletions(-) create mode 100644 packages/api-explorer/src/test-data/tagFilters.ts diff --git a/packages/api-explorer/src/ApiExplorer.tsx b/packages/api-explorer/src/ApiExplorer.tsx index 5cfebae5e..5861f3614 100644 --- a/packages/api-explorer/src/ApiExplorer.tsx +++ b/packages/api-explorer/src/ApiExplorer.tsx @@ -68,6 +68,7 @@ import { selectSpecs, selectCurrentSpec, selectSdkLanguage, + selectTagFilter, } from './state' import { getSpecKey, @@ -99,6 +100,7 @@ export const ApiExplorer: FC = ({ const specs = useSelector(selectSpecs) const spec = useSelector(selectCurrentSpec) const selectedSdkLanguage = useSelector(selectSdkLanguage) + const selectedTagFilter = useSelector(selectTagFilter) const { initLodesAction } = useLodeActions() const { initSettingsAction, @@ -136,10 +138,13 @@ export const ApiExplorer: FC = ({ // reconcile local storage state with URL or vice versa if (initialized) { const sdkParam = searchParams.get('sdk') || '' + const verbParam = searchParams.get('v') || '' const sdk = findSdk(sdkParam) const validSdkParam = !sdkParam.localeCompare(sdk.alias, 'en', { sensitivity: 'base' }) || !sdkParam.localeCompare(sdk.language, 'en', { sensitivity: 'base' }) + const validVerbParam = isValidFilter(location, verbParam) + if (validSdkParam) { // sync store with URL setSdkLanguageAction({ @@ -152,6 +157,14 @@ export const ApiExplorer: FC = ({ sdk: alias === allAlias ? null : alias, }) } + + if (validVerbParam) { + setTagFilterAction({ tagFilter: verbParam.toUpperCase() }) + } else { + navigate(location.pathname, { + v: selectedTagFilter === 'ALL' ? null : selectedTagFilter, + }) + } } }, [initialized]) @@ -171,8 +184,6 @@ export const ApiExplorer: FC = ({ const { language: sdkLanguage } = findSdk(sdkParam) setSearchPatternAction({ searchPattern }) setSdkLanguageAction({ sdkLanguage }) - // TODO: need to validate verbParam, checking against all available - // httpMethod and metaType options, default to ALL if not valid setTagFilterAction({ tagFilter: isValidFilter(location, verbParam) ? verbParam.toUpperCase() diff --git a/packages/api-explorer/src/components/SelectorContainer/SelectorContainer.tsx b/packages/api-explorer/src/components/SelectorContainer/SelectorContainer.tsx index 28a621dda..a3fb92cba 100644 --- a/packages/api-explorer/src/components/SelectorContainer/SelectorContainer.tsx +++ b/packages/api-explorer/src/components/SelectorContainer/SelectorContainer.tsx @@ -51,6 +51,9 @@ export const SelectorContainer: FC = ({ ...spaceProps }) => { const searchParams = new URLSearchParams(location.search) + // TODO: noticing that there are certain pages where we must delete extra params + // before pushing its link, what's a way we can handle this? + searchParams.delete('v') return ( diff --git a/packages/api-explorer/src/components/SideNav/SideNav.tsx b/packages/api-explorer/src/components/SideNav/SideNav.tsx index 12bc78940..b2311be40 100644 --- a/packages/api-explorer/src/components/SideNav/SideNav.tsx +++ b/packages/api-explorer/src/components/SideNav/SideNav.tsx @@ -84,7 +84,7 @@ export const SideNav: FC = ({ headless = false, spec }) => { if (parts[1] === 'diff') { if (parts[3] !== tabNames[index]) { parts[3] = tabNames[index] - navigate(parts.join('/')) + navigate(parts.join('/'), { v: null }) } } else { if (parts[2] !== tabNames[index]) { diff --git a/packages/api-explorer/src/components/SideNav/SideNavMethods.tsx b/packages/api-explorer/src/components/SideNav/SideNavMethods.tsx index a832d6431..e117a1e3b 100644 --- a/packages/api-explorer/src/components/SideNav/SideNavMethods.tsx +++ b/packages/api-explorer/src/components/SideNav/SideNavMethods.tsx @@ -32,7 +32,7 @@ import { useSelector } from 'react-redux' import { useLocation, useRouteMatch } from 'react-router-dom' import { useNavigation, highlightHTML, buildMethodPath } from '../../utils' import { Link } from '../Link' -import { selectSearchPattern, selectTagFilter } from '../../state' +import { selectSearchPattern } from '../../state' interface MethodsProps { methods: MethodList @@ -48,7 +48,6 @@ export const SideNavMethods = styled( const navigate = useNavigation() const searchParams = new URLSearchParams(location.search) const searchPattern = useSelector(selectSearchPattern) - const selectedTagFilter = useSelector(selectTagFilter) const match = useRouteMatch<{ methodTag: string }>( `/:specKey/methods/:methodTag/:methodName?` ) @@ -83,24 +82,23 @@ export const SideNavMethods = styled( } >
    - {Object.values(methods).map( - (method) => - (selectedTagFilter === 'ALL' || - selectedTagFilter === method.httpMethod) && ( -
  • - - {highlightHTML(searchPattern, method.summary)} - -
    • - ) - )} + {Object.values(methods).map((method) => ( +
  • + { + searchParams.delete('v') + return buildMethodPath( + specKey, + tag, + method.name, + searchParams.toString() + ) + }} + > + {highlightHTML(searchPattern, method.summary)} + +
    • + ))}
) diff --git a/packages/api-explorer/src/components/SideNav/SideNavTypes.tsx b/packages/api-explorer/src/components/SideNav/SideNavTypes.tsx index 88c38f784..79e588a8e 100644 --- a/packages/api-explorer/src/components/SideNav/SideNavTypes.tsx +++ b/packages/api-explorer/src/components/SideNav/SideNavTypes.tsx @@ -32,7 +32,7 @@ import { useLocation, useRouteMatch } from 'react-router-dom' import { useSelector } from 'react-redux' import { Link } from '../Link' import { highlightHTML, useNavigation, buildTypePath } from '../../utils' -import { selectSearchPattern, selectTagFilter } from '../../state' +import { selectSearchPattern } from '../../state' interface TypesProps { types: TypeList @@ -48,7 +48,6 @@ export const SideNavTypes = styled( const navigate = useNavigation() const searchParams = new URLSearchParams(location.search) const searchPattern = useSelector(selectSearchPattern) - const selectedTagFilter = useSelector(selectTagFilter) const match = useRouteMatch<{ typeTag: string }>( `/:specKey/types/:typeTag/:typeName?` ) @@ -83,24 +82,23 @@ export const SideNavTypes = styled( } >
    - {Object.values(types).map( - (type) => - (selectedTagFilter === 'ALL' || - selectedTagFilter === type.metaType.toUpperCase()) && ( -
  • - - {highlightHTML(searchPattern, type.name)} - -
    • - ) - )} + {Object.values(types).map((type) => ( +
  • + { + searchParams.delete('v') + return buildTypePath( + specKey, + tag, + type.name, + searchParams.toString() + ) + }} + > + {highlightHTML(searchPattern, type.name)} + +
    • + ))}
) diff --git a/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.spec.tsx b/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.spec.tsx index a9de09b29..dcc6efe8e 100644 --- a/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.spec.tsx +++ b/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.spec.tsx @@ -32,7 +32,6 @@ import { api } from '../../test-data' import { renderWithRouterAndReduxProvider } from '../../test-utils' import { MethodTagScene } from './MethodTagScene' -// TODO: use constant from path.ts const opBtnNames = /ALL|GET|POST|PUT|PATCH|DELETE/ const mockHistoryPush = jest.fn() diff --git a/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.tsx b/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.tsx index 3472fb678..c2b9757a8 100644 --- a/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.tsx +++ b/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.tsx @@ -99,12 +99,15 @@ export const MethodTagScene: FC = ({ api }) => { selectedTagFilter === method.httpMethod) && ( { + searchParams.delete('v') + return buildMethodPath( + specKey, + tag.name, + method.name, + searchParams.toString() + ) + }} > diff --git a/packages/api-explorer/src/scenes/TypeTagScene/TypeTagScene.tsx b/packages/api-explorer/src/scenes/TypeTagScene/TypeTagScene.tsx index b34103043..8ea351790 100644 --- a/packages/api-explorer/src/scenes/TypeTagScene/TypeTagScene.tsx +++ b/packages/api-explorer/src/scenes/TypeTagScene/TypeTagScene.tsx @@ -96,12 +96,15 @@ export const TypeTagScene: FC = ({ api }) => { selectedTagFilter === type.metaType.toString().toUpperCase()) && ( { + searchParams.delete('v') + return buildTypePath( + specKey, + tag.name, + type.name, + searchParams.toString() + ) + }} > diff --git a/packages/api-explorer/src/test-data/index.ts b/packages/api-explorer/src/test-data/index.ts index c59ce5236..cadafdec8 100644 --- a/packages/api-explorer/src/test-data/index.ts +++ b/packages/api-explorer/src/test-data/index.ts @@ -27,3 +27,4 @@ export * from './specs' export { examples } from './examples' export * from './declarations' export * from './sdkLanguages' +export * from './tagFilters' diff --git a/packages/api-explorer/src/test-data/tagFilters.ts b/packages/api-explorer/src/test-data/tagFilters.ts new file mode 100644 index 000000000..8525fec1b --- /dev/null +++ b/packages/api-explorer/src/test-data/tagFilters.ts @@ -0,0 +1,28 @@ +/* + + MIT License + + Copyright (c) 2022 Looker Data Sciences, Inc. + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. + + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. + + */ + +export const methodFilters = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'] +export const typeFilters = ['SPECIFICATION', 'WRITE', 'REQUEST', 'ENUMERATED'] diff --git a/packages/api-explorer/src/utils/path.spec.ts b/packages/api-explorer/src/utils/path.spec.ts index f36f0e1e1..5c88ef0a3 100644 --- a/packages/api-explorer/src/utils/path.spec.ts +++ b/packages/api-explorer/src/utils/path.spec.ts @@ -24,8 +24,14 @@ */ -import { api } from '../test-data' -import { buildMethodPath, buildPath, buildTypePath } from './path' +import { api, methodFilters, typeFilters } from '../test-data' +import { + buildMethodPath, + buildPath, + buildTypePath, + getSceneType, + isValidFilter, +} from './path' describe('path utils', () => { const testParam = 's=test' @@ -74,4 +80,47 @@ describe('path utils', () => { expect(path).toEqual('/3.1/types/Dashboard/Dashboard') }) }) + + describe('getSceneType', () => { + test('returns correct scene type given location with pathname', () => { + const methodLocation = { + pathname: '/3.1/methods/RandomMethod', + } as Location + const typeLocation = { pathname: '/3.1/types/RandomType' } as Location + expect(getSceneType(methodLocation)).toEqual('methods') + expect(getSceneType(typeLocation)).toEqual('types') + }) + test('returns empty string if there is no scene type', () => { + const noSceneTypePath = { pathname: '/' } as Location + expect(getSceneType(noSceneTypePath)).toEqual('') + }) + }) + + describe('isValidFilter', () => { + const methodLocation = { + pathname: '/3.1/methods/RandomMethod', + } as Location + const typeLocation = { pathname: '/3.1/types/RandomType' } as Location + + test("validates 'all' as a valid filter for methods and types", () => { + expect(isValidFilter(methodLocation, 'ALL')).toBe(true) + expect(isValidFilter(typeLocation, 'ALL')).toBe(true) + }) + + test.each(methodFilters)( + 'validates %s as a valid method filter', + (filter) => { + expect(isValidFilter(methodLocation, filter)).toBe(true) + } + ) + + test('invalidates wrong parameter for methods and types', () => { + expect(isValidFilter(methodLocation, 'INVALID')).toBe(false) + expect(isValidFilter(typeLocation, 'INVALID')).toBe(false) + }) + + test.each(typeFilters)('validates %s as a valid type filter', (filter) => { + expect(isValidFilter(typeLocation, filter)).toBe(true) + }) + }) }) diff --git a/packages/api-explorer/src/utils/path.ts b/packages/api-explorer/src/utils/path.ts index a7ead8224..1665bb82d 100644 --- a/packages/api-explorer/src/utils/path.ts +++ b/packages/api-explorer/src/utils/path.ts @@ -29,41 +29,8 @@ import { firstMethodRef } from '@looker/sdk-codegen' import type { Location as HLocation } from 'history' import { matchPath } from 'react-router' -// TODO: documenting, testing the below -export const methodFilterOptions = /ALL|GET|POST|PUT|PATCH|DELETE/i -export const typeFilterOptions = /ALL|SPECIFICATION|WRITE|REQUEST|ENUMERATED/i - -/** - * Gets the scene type of the current page - * - * @param location browser location - * @returns string representing the scene type - */ -export const getSceneType = (location: HLocation | Location) => { - const match = matchPath<{ tabType: string }>(location.pathname, { - path: '/:specKey/:tabType', - }) - return match ? match!.params.tabType : '' -} - -/** - * Confirms if filter parameter is valid for the page scene type - * - * @param location browser location - * @param filter filter tag for page - */ -export const isValidFilter = ( - location: HLocation | Location, - filter: string -) => { - const sceneType = getSceneType(location) - if (!sceneType) return false - else if (sceneType === 'methods') { - return methodFilterOptions.test(filter) - } else { - return typeFilterOptions.test(filter) - } -} +export const methodFilterOptions = /GET|POST|PUT|PATCH|DELETE/i +export const typeFilterOptions = /SPECIFICATION|WRITE|REQUEST|ENUMERATED/i /** * Builds a path matching the route used by MethodScene @@ -165,3 +132,35 @@ export const getSpecKey = (location: HLocation | Location): string | null => { } return match?.groups?.specKey || null } + +/** + * Gets the scene type of the current page + * @param location browser location + * @returns string representing the scene type + */ +export const getSceneType = (location: HLocation | Location) => { + const match = matchPath<{ tabType: string }>(location.pathname, { + path: '/:specKey/:tabType', + }) + return match ? match!.params.tabType : '' +} + +/** + * Confirms if filter is valid for the page scene type + * @param location browser location + * @param filter filter tag for page + */ +export const isValidFilter = ( + location: HLocation | Location, + filter: string +) => { + const sceneType = getSceneType(location) + if (!sceneType) return false + else if (!filter.localeCompare('all', 'en', { sensitivity: 'base' })) + return true + else if (sceneType === 'methods') { + return methodFilterOptions.test(filter) + } else { + return typeFilterOptions.test(filter) + } +} From 2d28c7ff94849908c3429ccfb2e9df72e20a4438 Mon Sep 17 00:00:00 2001 From: Niral Patel Date: Tue, 9 Aug 2022 21:04:26 +0000 Subject: [PATCH 04/31] Fixed bug on state of TypeTagScene --- .../api-explorer/src/scenes/TypeTagScene/TypeTagScene.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/api-explorer/src/scenes/TypeTagScene/TypeTagScene.tsx b/packages/api-explorer/src/scenes/TypeTagScene/TypeTagScene.tsx index 8ea351790..b8c1119e1 100644 --- a/packages/api-explorer/src/scenes/TypeTagScene/TypeTagScene.tsx +++ b/packages/api-explorer/src/scenes/TypeTagScene/TypeTagScene.tsx @@ -24,7 +24,7 @@ */ import type { FC } from 'react' -import React, { useEffect } from 'react' +import React, { useEffect, useState } from 'react' import { Grid, ButtonToggle, ButtonItem } from '@looker/components' import type { ApiModel } from '@looker/sdk-codegen' import { useParams } from 'react-router-dom' @@ -48,6 +48,7 @@ export const TypeTagScene: FC = ({ api }) => { const navigate = useNavigation() const searchParams = new URLSearchParams(location.search) const selectedTagFilter = useSelector(selectTagFilter) + const [tagFilter, setTagFilter] = useState(selectedTagFilter) const types = api.typeTags[typeTag] useEffect(() => { @@ -57,7 +58,7 @@ export const TypeTagScene: FC = ({ api }) => { }, [types]) useEffect(() => { - setValue(selectedTagFilter) + setTagFilter(selectedTagFilter) }, [selectedTagFilter]) if (!types) { @@ -78,7 +79,7 @@ export const TypeTagScene: FC = ({ api }) => { From 7c04e611c262eb55b2f159517cff6b1419c357f1 Mon Sep 17 00:00:00 2001 From: Niral Patel Date: Wed, 10 Aug 2022 22:34:45 +0000 Subject: [PATCH 05/31] WIP creating custom reconciliation and navigation hooks --- packages/api-explorer/src/ApiExplorer.tsx | 70 ++--------- .../src/components/SideNav/SideNavMethods.tsx | 3 +- .../src/components/SideNav/SideNavTypes.tsx | 1 + .../scenes/MethodTagScene/MethodTagScene.tsx | 24 +++- .../src/scenes/TypeTagScene/TypeTagScene.tsx | 1 + packages/api-explorer/src/test-data/index.ts | 1 - .../api-explorer/src/test-data/tagFilters.ts | 28 ----- .../{hooks.spec.ts => hooks/navHooks.spec.ts} | 2 +- .../src/utils/{hooks.ts => hooks/navHooks.ts} | 28 +++-- .../api-explorer/src/utils/hooks/syncHooks.ts | 114 ++++++++++++++++++ packages/api-explorer/src/utils/index.ts | 2 +- packages/api-explorer/src/utils/path.spec.ts | 35 ++++-- packages/api-explorer/src/utils/path.ts | 16 +-- 13 files changed, 201 insertions(+), 124 deletions(-) delete mode 100644 packages/api-explorer/src/test-data/tagFilters.ts rename packages/api-explorer/src/utils/{hooks.spec.ts => hooks/navHooks.spec.ts} (98%) rename packages/api-explorer/src/utils/{hooks.ts => hooks/navHooks.ts} (78%) create mode 100644 packages/api-explorer/src/utils/hooks/syncHooks.ts diff --git a/packages/api-explorer/src/ApiExplorer.tsx b/packages/api-explorer/src/ApiExplorer.tsx index 5861f3614..2f67b5b95 100644 --- a/packages/api-explorer/src/ApiExplorer.tsx +++ b/packages/api-explorer/src/ApiExplorer.tsx @@ -60,24 +60,15 @@ import { AppRouter } from './routes' import { apixFilesHost } from './utils/lodeUtils' import { useSettingActions, - useSettingStoreState, useLodeActions, useLodesStoreState, useSpecActions, useSpecStoreState, selectSpecs, selectCurrentSpec, - selectSdkLanguage, - selectTagFilter, } from './state' -import { - getSpecKey, - diffPath, - useNavigation, - findSdk, - allAlias, - isValidFilter, -} from './utils' +import { getSpecKey, diffPath, findSdk } from './utils' +import { useGlobalSync } from './utils/hooks/syncHooks' export interface ApiExplorerProps { adaptor: IApixAdaptor @@ -94,28 +85,20 @@ export const ApiExplorer: FC = ({ declarationsLodeUrl = `${apixFilesHost}/declarationsIndex.json`, headless = false, }) => { - const { initialized } = useSettingStoreState() useLodesStoreState() const { working, description } = useSpecStoreState() const specs = useSelector(selectSpecs) const spec = useSelector(selectCurrentSpec) - const selectedSdkLanguage = useSelector(selectSdkLanguage) - const selectedTagFilter = useSelector(selectTagFilter) const { initLodesAction } = useLodeActions() - const { - initSettingsAction, - setSearchPatternAction, - setSdkLanguageAction, - setTagFilterAction, - } = useSettingActions() + const { initSettingsAction, setSearchPatternAction, setSdkLanguageAction } = + useSettingActions() const { initSpecsAction, setCurrentSpecAction } = useSpecActions() const location = useLocation() - const navigate = useNavigation() + const isSynced = useGlobalSync() const [hasNavigation, setHasNavigation] = useState(true) const toggleNavigation = (target?: boolean) => setHasNavigation(target || !hasNavigation) - const searchParams = new URLSearchParams(location.search) const hasNavigationToggle = useCallback((e: MessageEvent) => { if (e.origin === window.origin && e.data.action === 'toggle_sidebar') { @@ -134,40 +117,6 @@ export const ApiExplorer: FC = ({ return () => unregisterEnvAdaptor() }, []) - useEffect(() => { - // reconcile local storage state with URL or vice versa - if (initialized) { - const sdkParam = searchParams.get('sdk') || '' - const verbParam = searchParams.get('v') || '' - const sdk = findSdk(sdkParam) - const validSdkParam = - !sdkParam.localeCompare(sdk.alias, 'en', { sensitivity: 'base' }) || - !sdkParam.localeCompare(sdk.language, 'en', { sensitivity: 'base' }) - const validVerbParam = isValidFilter(location, verbParam) - - if (validSdkParam) { - // sync store with URL - setSdkLanguageAction({ - sdkLanguage: sdk.language, - }) - } else { - // sync URL with store - const { alias } = findSdk(selectedSdkLanguage) - navigate(location.pathname, { - sdk: alias === allAlias ? null : alias, - }) - } - - if (validVerbParam) { - setTagFilterAction({ tagFilter: verbParam.toUpperCase() }) - } else { - navigate(location.pathname, { - v: selectedTagFilter === 'ALL' ? null : selectedTagFilter, - }) - } - } - }, [initialized]) - useEffect(() => { const maybeSpec = location.pathname?.split('/')[1] if (spec && maybeSpec && maybeSpec !== diffPath && maybeSpec !== spec.key) { @@ -176,19 +125,14 @@ export const ApiExplorer: FC = ({ }, [location.pathname, spec]) useEffect(() => { - if (!initialized) return + if (!isSynced) return const searchParams = new URLSearchParams(location.search) const searchPattern = searchParams.get('s') || '' const sdkParam = searchParams.get('sdk') || 'all' - const verbParam = searchParams.get('v') || 'ALL' + const { language: sdkLanguage } = findSdk(sdkParam) setSearchPatternAction({ searchPattern }) setSdkLanguageAction({ sdkLanguage }) - setTagFilterAction({ - tagFilter: isValidFilter(location, verbParam) - ? verbParam.toUpperCase() - : 'ALL', - }) }, [location.search]) useEffect(() => { diff --git a/packages/api-explorer/src/components/SideNav/SideNavMethods.tsx b/packages/api-explorer/src/components/SideNav/SideNavMethods.tsx index e117a1e3b..9eb348c5c 100644 --- a/packages/api-explorer/src/components/SideNav/SideNavMethods.tsx +++ b/packages/api-explorer/src/components/SideNav/SideNavMethods.tsx @@ -26,7 +26,7 @@ import React, { useEffect, useState } from 'react' import styled from 'styled-components' -import { Accordion2, Heading } from '@looker/components' +import { Accordion2, Heading, Span } from '@looker/components' import type { MethodList } from '@looker/sdk-codegen' import { useSelector } from 'react-redux' import { useLocation, useRouteMatch } from 'react-router-dom' @@ -86,6 +86,7 @@ export const SideNavMethods = styled(
  • { + // TODO: span behaving like link with custom navigate? searchParams.delete('v') return buildMethodPath( specKey, diff --git a/packages/api-explorer/src/components/SideNav/SideNavTypes.tsx b/packages/api-explorer/src/components/SideNav/SideNavTypes.tsx index 79e588a8e..4de7acf86 100644 --- a/packages/api-explorer/src/components/SideNav/SideNavTypes.tsx +++ b/packages/api-explorer/src/components/SideNav/SideNavTypes.tsx @@ -86,6 +86,7 @@ export const SideNavTypes = styled(
  • { + // TODO: span behaving like link with custom navigate? searchParams.delete('v') return buildTypePath( specKey, diff --git a/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.tsx b/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.tsx index c2b9757a8..9f8af93f5 100644 --- a/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.tsx +++ b/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.tsx @@ -30,8 +30,9 @@ import { Grid, ButtonToggle, ButtonItem } from '@looker/components' import type { ApiModel } from '@looker/sdk-codegen' import { useSelector } from 'react-redux' import { ApixSection, DocTitle, DocMethodSummary, Link } from '../../components' -import { buildMethodPath, useNavigation } from '../../utils' -import { selectTagFilter } from '../../state' +import { buildMethodPath, isValidFilter, useNavigation } from '../../utils' +import { selectTagFilter, useSettingActions } from '../../state' +import { useTagSceneSync } from '../../utils/hooks/syncHooks' import { getOperations } from './utils' interface MethodTagSceneProps { @@ -49,15 +50,28 @@ export const MethodTagScene: FC = ({ api }) => { const methods = api.tags[methodTag] const navigate = useNavigation() const selectedTagFilter = useSelector(selectTagFilter) + const { setTagFilterAction } = useSettingActions() const [tagFilter, setTagFilter] = useState(selectedTagFilter) - const searchParams = new URLSearchParams(location.search) + const isSynced = useTagSceneSync() + let searchParams = new URLSearchParams(location.search) - const setValue = (filter: string) => { + const handleChange = (filter: string) => { navigate(location.pathname, { v: filter === 'ALL' ? null : filter.toLowerCase(), }) } + useEffect(() => { + if (!isSynced) return + searchParams = new URLSearchParams(location.search) + const verbParam = searchParams.get('v') || 'ALL' + setTagFilterAction({ + tagFilter: isValidFilter(location, verbParam) + ? verbParam.toUpperCase() + : 'ALL', + }) + }, [location.search]) + useEffect(() => { setTagFilter(selectedTagFilter) }, [selectedTagFilter]) @@ -82,7 +96,7 @@ export const MethodTagScene: FC = ({ api }) => { mb="small" mt="xlarge" value={tagFilter} - onChange={setValue} + onChange={handleChange} > ALL diff --git a/packages/api-explorer/src/scenes/TypeTagScene/TypeTagScene.tsx b/packages/api-explorer/src/scenes/TypeTagScene/TypeTagScene.tsx index b8c1119e1..20a87eb17 100644 --- a/packages/api-explorer/src/scenes/TypeTagScene/TypeTagScene.tsx +++ b/packages/api-explorer/src/scenes/TypeTagScene/TypeTagScene.tsx @@ -98,6 +98,7 @@ export const TypeTagScene: FC = ({ api }) => { { + // TODO: span behaving like link with custom navigate? searchParams.delete('v') return buildTypePath( specKey, diff --git a/packages/api-explorer/src/test-data/index.ts b/packages/api-explorer/src/test-data/index.ts index cadafdec8..c59ce5236 100644 --- a/packages/api-explorer/src/test-data/index.ts +++ b/packages/api-explorer/src/test-data/index.ts @@ -27,4 +27,3 @@ export * from './specs' export { examples } from './examples' export * from './declarations' export * from './sdkLanguages' -export * from './tagFilters' diff --git a/packages/api-explorer/src/test-data/tagFilters.ts b/packages/api-explorer/src/test-data/tagFilters.ts deleted file mode 100644 index 8525fec1b..000000000 --- a/packages/api-explorer/src/test-data/tagFilters.ts +++ /dev/null @@ -1,28 +0,0 @@ -/* - - MIT License - - Copyright (c) 2022 Looker Data Sciences, Inc. - - Permission is hereby granted, free of charge, to any person obtaining a copy - of this software and associated documentation files (the "Software"), to deal - in the Software without restriction, including without limitation the rights - to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - copies of the Software, and to permit persons to whom the Software is - furnished to do so, subject to the following conditions: - - The above copyright notice and this permission notice shall be included in all - copies or substantial portions of the Software. - - THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - SOFTWARE. - - */ - -export const methodFilters = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'] -export const typeFilters = ['SPECIFICATION', 'WRITE', 'REQUEST', 'ENUMERATED'] diff --git a/packages/api-explorer/src/utils/hooks.spec.ts b/packages/api-explorer/src/utils/hooks/navHooks.spec.ts similarity index 98% rename from packages/api-explorer/src/utils/hooks.spec.ts rename to packages/api-explorer/src/utils/hooks/navHooks.spec.ts index 1982672d5..77f58e4eb 100644 --- a/packages/api-explorer/src/utils/hooks.spec.ts +++ b/packages/api-explorer/src/utils/hooks/navHooks.spec.ts @@ -24,7 +24,7 @@ */ import { useHistory } from 'react-router-dom' -import { useNavigation } from './hooks' +import { useNavigation } from './navHooks' const mockHistoryPush = jest.fn() jest.mock('react-router-dom', () => { diff --git a/packages/api-explorer/src/utils/hooks.ts b/packages/api-explorer/src/utils/hooks/navHooks.ts similarity index 78% rename from packages/api-explorer/src/utils/hooks.ts rename to packages/api-explorer/src/utils/hooks/navHooks.ts index ad44045eb..64478af2d 100644 --- a/packages/api-explorer/src/utils/hooks.ts +++ b/packages/api-explorer/src/utils/hooks/navHooks.ts @@ -24,6 +24,16 @@ */ import { useHistory } from 'react-router-dom' +import { matchPath } from 'react-router' + +interface QueryParamProps { + /** Search Query **/ + s?: string | null + /** Chosen SDK Language **/ + sdk?: string | null + /** Tag Scene Filter **/ + v?: string | null +} /** * Hook for navigating to given route with specified query params @@ -35,15 +45,17 @@ import { useHistory } from 'react-router-dom' export const useNavigation = () => { const history = useHistory() - const navigate = ( - path: string, - queryParams?: { - s?: string | null - sdk?: string | null - v?: string | null - } | null - ) => { + const navigate = (path: string, queryParams?: QueryParamProps | null) => { const urlParams = new URLSearchParams(history.location.search) + // TODO: making this hook smarter, delete verb when not on scene page + // const match = matchPath<{ specKey: string; tagType: string }>(path, { + // path: `/:specKey/:tagType?`, + // }) + // if (match && match.params.specKey === 'diff') { + // urlParams.delete('v') + // } + // console.log(match) + if (queryParams === undefined) { // if params passed in is undefined, maintain existing parameters in the URL history.push({ pathname: path, search: urlParams.toString() }) diff --git a/packages/api-explorer/src/utils/hooks/syncHooks.ts b/packages/api-explorer/src/utils/hooks/syncHooks.ts new file mode 100644 index 000000000..29aedbf66 --- /dev/null +++ b/packages/api-explorer/src/utils/hooks/syncHooks.ts @@ -0,0 +1,114 @@ +/* + + MIT License + + Copyright (c) 2022 Looker Data Sciences, Inc. + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. + + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. + + */ +import { useLocation } from 'react-router-dom' +import { useEffect, useState } from 'react' +import { useSelector } from 'react-redux' +import { allAlias, findSdk, isValidFilter, useNavigation } from '../index' +import { + selectSdkLanguage, + selectTagFilter, + useSettingActions, + useSettingStoreState, +} from '../../state' + +/** + * Hook for syncing URL params with the Redux store + */ + +export const useGlobalSync = () => { + const location = useLocation() + const navigate = useNavigation() + const { setSdkLanguageAction } = useSettingActions() + const { initialized } = useSettingStoreState() + const selectedSdkLanguage = useSelector(selectSdkLanguage) + const [synced, setSynced] = useState(false) + + useEffect(() => { + if (initialized) { + const searchParams = new URLSearchParams(location.search) + const sdkParam = searchParams.get('sdk') || '' + const sdk = findSdk(sdkParam) + const validSdkParam = + !sdkParam.localeCompare(sdk.alias, 'en', { sensitivity: 'base' }) || + !sdkParam.localeCompare(sdk.language, 'en', { sensitivity: 'base' }) + + if (validSdkParam) { + // sync store with URL + setSdkLanguageAction({ + sdkLanguage: sdk.language, + }) + } else { + // sync URL with store + const { alias } = findSdk(selectedSdkLanguage) + navigate(location.pathname, { + sdk: alias === allAlias ? null : alias, + }) + } + + setSynced(true) + } + }, [initialized]) + + return synced +} + +/** + * Hook for syncing URL params with the Redux store + */ +export const useTagSceneSync = () => { + console.log('started executing hook') + const location = useLocation() + const navigate = useNavigation() + const { setTagFilterAction } = useSettingActions() + const { initialized } = useSettingStoreState() + const selectedTagFilter = useSelector(selectTagFilter) + const [synced, setSynced] = useState(false) + + useEffect(() => { + if (initialized) { + console.log('running initialization sync') + const searchParams = new URLSearchParams(location.search) + const verbParam = searchParams.get('v') || 'ALL' + const validVerbParam = isValidFilter(location, verbParam) + + if (validVerbParam) { + setTagFilterAction({ tagFilter: verbParam.toUpperCase() }) + } else { + navigate(location.pathname, { + v: + selectedTagFilter === 'ALL' + ? null + : selectedTagFilter.toLowerCase(), + }) + } + setSynced(true) + } + }, [initialized]) + + console.log('synced will return: ', synced) + + return synced +} diff --git a/packages/api-explorer/src/utils/index.ts b/packages/api-explorer/src/utils/index.ts index 3c1449836..e56d13519 100644 --- a/packages/api-explorer/src/utils/index.ts +++ b/packages/api-explorer/src/utils/index.ts @@ -30,4 +30,4 @@ export { getLoded } from './lodeUtils' export { useWindowSize } from './useWindowSize' export * from './apixAdaptor' export * from './adaptorUtils' -export { useNavigation } from './hooks' +export { useNavigation } from './hooks/navHooks' diff --git a/packages/api-explorer/src/utils/path.spec.ts b/packages/api-explorer/src/utils/path.spec.ts index 5c88ef0a3..70e4678e7 100644 --- a/packages/api-explorer/src/utils/path.spec.ts +++ b/packages/api-explorer/src/utils/path.spec.ts @@ -24,7 +24,7 @@ */ -import { api, methodFilters, typeFilters } from '../test-data' +import { api } from '../test-data' import { buildMethodPath, buildPath, @@ -83,15 +83,13 @@ describe('path utils', () => { describe('getSceneType', () => { test('returns correct scene type given location with pathname', () => { - const methodLocation = { - pathname: '/3.1/methods/RandomMethod', - } as Location - const typeLocation = { pathname: '/3.1/types/RandomType' } as Location - expect(getSceneType(methodLocation)).toEqual('methods') - expect(getSceneType(typeLocation)).toEqual('types') + const methodPath = '/3.1/methods/RandomMethod' + const typePath = '/3.1/types/RandomType' + expect(getSceneType(methodPath)).toEqual('methods') + expect(getSceneType(typePath)).toEqual('types') }) test('returns empty string if there is no scene type', () => { - const noSceneTypePath = { pathname: '/' } as Location + const noSceneTypePath = '/' expect(getSceneType(noSceneTypePath)).toEqual('') }) }) @@ -107,6 +105,9 @@ describe('path utils', () => { expect(isValidFilter(typeLocation, 'ALL')).toBe(true) }) + const methodFilters = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'] + const typeFilters = ['SPECIFICATION', 'WRITE', 'REQUEST', 'ENUMERATED'] + test.each(methodFilters)( 'validates %s as a valid method filter', (filter) => { @@ -114,6 +115,24 @@ describe('path utils', () => { } ) + test.each(methodFilters)( + 'invalidates %s when containing extra characters', + (filter) => { + expect(isValidFilter(methodLocation, filter + 'x')).toBe(false) + } + ) + + test.each(typeFilters)('validates %s as a valid type filter', (filter) => { + expect(isValidFilter(typeLocation, filter)).toBe(true) + }) + + test.each(typeFilters)( + 'invalidates %s when containing extra characters', + (filter) => { + expect(isValidFilter(typeLocation, filter + 'x')).toBe(false) + } + ) + test('invalidates wrong parameter for methods and types', () => { expect(isValidFilter(methodLocation, 'INVALID')).toBe(false) expect(isValidFilter(typeLocation, 'INVALID')).toBe(false) diff --git a/packages/api-explorer/src/utils/path.ts b/packages/api-explorer/src/utils/path.ts index 1665bb82d..215dba965 100644 --- a/packages/api-explorer/src/utils/path.ts +++ b/packages/api-explorer/src/utils/path.ts @@ -29,8 +29,8 @@ import { firstMethodRef } from '@looker/sdk-codegen' import type { Location as HLocation } from 'history' import { matchPath } from 'react-router' -export const methodFilterOptions = /GET|POST|PUT|PATCH|DELETE/i -export const typeFilterOptions = /SPECIFICATION|WRITE|REQUEST|ENUMERATED/i +export const methodFilterOptions = /GET$|POST$|PUT$|PATCH$|DELETE$/i +export const typeFilterOptions = /SPECIFICATION$|WRITE$|REQUEST$|ENUMERATED$/i /** * Builds a path matching the route used by MethodScene @@ -135,14 +135,14 @@ export const getSpecKey = (location: HLocation | Location): string | null => { /** * Gets the scene type of the current page - * @param location browser location + * @param path path of browser location * @returns string representing the scene type */ -export const getSceneType = (location: HLocation | Location) => { - const match = matchPath<{ tabType: string }>(location.pathname, { - path: '/:specKey/:tabType', +export const getSceneType = (path: string) => { + const match = matchPath<{ tagType: string }>(path, { + path: '/:specKey/:tagType', }) - return match ? match!.params.tabType : '' + return match ? match!.params.tagType : '' } /** @@ -154,7 +154,7 @@ export const isValidFilter = ( location: HLocation | Location, filter: string ) => { - const sceneType = getSceneType(location) + const sceneType = getSceneType(location.pathname) if (!sceneType) return false else if (!filter.localeCompare('all', 'en', { sensitivity: 'base' })) return true From 863bf4766d81c1f6973c60f8a410c096e60c8227 Mon Sep 17 00:00:00 2001 From: Niral Patel Date: Wed, 10 Aug 2022 23:42:08 +0000 Subject: [PATCH 06/31] Fix to not using isSynced --- packages/api-explorer/src/ApiExplorer.tsx | 3 +-- .../api-explorer/src/scenes/MethodTagScene/MethodTagScene.tsx | 3 +-- packages/api-explorer/src/utils/hooks/navHooks.ts | 1 - 3 files changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/api-explorer/src/ApiExplorer.tsx b/packages/api-explorer/src/ApiExplorer.tsx index 2f67b5b95..34e736eee 100644 --- a/packages/api-explorer/src/ApiExplorer.tsx +++ b/packages/api-explorer/src/ApiExplorer.tsx @@ -95,7 +95,7 @@ export const ApiExplorer: FC = ({ const { initSpecsAction, setCurrentSpecAction } = useSpecActions() const location = useLocation() - const isSynced = useGlobalSync() + useGlobalSync() const [hasNavigation, setHasNavigation] = useState(true) const toggleNavigation = (target?: boolean) => setHasNavigation(target || !hasNavigation) @@ -125,7 +125,6 @@ export const ApiExplorer: FC = ({ }, [location.pathname, spec]) useEffect(() => { - if (!isSynced) return const searchParams = new URLSearchParams(location.search) const searchPattern = searchParams.get('s') || '' const sdkParam = searchParams.get('sdk') || 'all' diff --git a/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.tsx b/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.tsx index 9f8af93f5..af789dc5e 100644 --- a/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.tsx +++ b/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.tsx @@ -52,7 +52,7 @@ export const MethodTagScene: FC = ({ api }) => { const selectedTagFilter = useSelector(selectTagFilter) const { setTagFilterAction } = useSettingActions() const [tagFilter, setTagFilter] = useState(selectedTagFilter) - const isSynced = useTagSceneSync() + useTagSceneSync() let searchParams = new URLSearchParams(location.search) const handleChange = (filter: string) => { @@ -62,7 +62,6 @@ export const MethodTagScene: FC = ({ api }) => { } useEffect(() => { - if (!isSynced) return searchParams = new URLSearchParams(location.search) const verbParam = searchParams.get('v') || 'ALL' setTagFilterAction({ diff --git a/packages/api-explorer/src/utils/hooks/navHooks.ts b/packages/api-explorer/src/utils/hooks/navHooks.ts index 64478af2d..0cc4d579f 100644 --- a/packages/api-explorer/src/utils/hooks/navHooks.ts +++ b/packages/api-explorer/src/utils/hooks/navHooks.ts @@ -24,7 +24,6 @@ */ import { useHistory } from 'react-router-dom' -import { matchPath } from 'react-router' interface QueryParamProps { /** Search Query **/ From 6e3f9ea6900f0fd0de1fd713723d53d7963d6091 Mon Sep 17 00:00:00 2001 From: Niral Patel Date: Thu, 11 Aug 2022 17:35:10 +0000 Subject: [PATCH 07/31] Refactor using isSync variable determining render --- packages/api-explorer/src/ApiExplorer.tsx | 9 ++++-- .../scenes/MethodTagScene/MethodTagScene.tsx | 6 ++-- .../api-explorer/src/utils/hooks/syncHooks.ts | 30 ++++++++++++++----- 3 files changed, 32 insertions(+), 13 deletions(-) diff --git a/packages/api-explorer/src/ApiExplorer.tsx b/packages/api-explorer/src/ApiExplorer.tsx index 34e736eee..bd169cbf2 100644 --- a/packages/api-explorer/src/ApiExplorer.tsx +++ b/packages/api-explorer/src/ApiExplorer.tsx @@ -66,6 +66,7 @@ import { useSpecStoreState, selectSpecs, selectCurrentSpec, + useSettingStoreState, } from './state' import { getSpecKey, diffPath, findSdk } from './utils' import { useGlobalSync } from './utils/hooks/syncHooks' @@ -90,12 +91,13 @@ export const ApiExplorer: FC = ({ const specs = useSelector(selectSpecs) const spec = useSelector(selectCurrentSpec) const { initLodesAction } = useLodeActions() + const { initialized } = useSettingStoreState() const { initSettingsAction, setSearchPatternAction, setSdkLanguageAction } = useSettingActions() const { initSpecsAction, setCurrentSpecAction } = useSpecActions() const location = useLocation() - useGlobalSync() + const isSynced = useGlobalSync() const [hasNavigation, setHasNavigation] = useState(true) const toggleNavigation = (target?: boolean) => setHasNavigation(target || !hasNavigation) @@ -125,6 +127,7 @@ export const ApiExplorer: FC = ({ }, [location.pathname, spec]) useEffect(() => { + if (!initialized) return const searchParams = new URLSearchParams(location.search) const searchPattern = searchParams.get('s') || '' const sdkParam = searchParams.get('sdk') || 'all' @@ -152,7 +155,7 @@ export const ApiExplorer: FC = ({ neededSpec = spec?.key } - return ( + return isSynced ? ( <> = ({ {!headless && } - ) + ) : null } const AsideBorder = styled(Aside)<{ diff --git a/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.tsx b/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.tsx index af789dc5e..c5cd6059b 100644 --- a/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.tsx +++ b/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.tsx @@ -52,7 +52,7 @@ export const MethodTagScene: FC = ({ api }) => { const selectedTagFilter = useSelector(selectTagFilter) const { setTagFilterAction } = useSettingActions() const [tagFilter, setTagFilter] = useState(selectedTagFilter) - useTagSceneSync() + const isSynced = useTagSceneSync() let searchParams = new URLSearchParams(location.search) const handleChange = (filter: string) => { @@ -88,7 +88,7 @@ export const MethodTagScene: FC = ({ api }) => { )! const operations = getOperations(methods) - return ( + return isSynced ? ( {`${tag.name}: ${tag.description}`} = ({ api }) => { ) )} - ) + ) : null } diff --git a/packages/api-explorer/src/utils/hooks/syncHooks.ts b/packages/api-explorer/src/utils/hooks/syncHooks.ts index 29aedbf66..865fb5ccc 100644 --- a/packages/api-explorer/src/utils/hooks/syncHooks.ts +++ b/packages/api-explorer/src/utils/hooks/syncHooks.ts @@ -29,25 +29,28 @@ import { useSelector } from 'react-redux' import { allAlias, findSdk, isValidFilter, useNavigation } from '../index' import { selectSdkLanguage, + selectSearchPattern, selectTagFilter, useSettingActions, useSettingStoreState, } from '../../state' /** - * Hook for syncing URL params with the Redux store + * Hook for syncing global URL params with the Redux store */ export const useGlobalSync = () => { const location = useLocation() const navigate = useNavigation() - const { setSdkLanguageAction } = useSettingActions() + const { setSdkLanguageAction, setSearchPatternAction } = useSettingActions() const { initialized } = useSettingStoreState() const selectedSdkLanguage = useSelector(selectSdkLanguage) + const selectedSearchPattern = useSelector(selectSearchPattern) const [synced, setSynced] = useState(false) useEffect(() => { if (initialized) { + console.log('inside global sync initialization') const searchParams = new URLSearchParams(location.search) const sdkParam = searchParams.get('sdk') || '' const sdk = findSdk(sdkParam) @@ -68,18 +71,32 @@ export const useGlobalSync = () => { }) } + // TODO: syncing the search (and additional) parameter without bloating code? + const searchQueryParam = searchParams.get('s') + if (searchQueryParam) { + // sync store with URL + setSearchPatternAction({ + searchPattern: searchQueryParam, + }) + } else { + // sync URL with store + navigate(location.pathname, { + s: selectedSearchPattern || null, + }) + } + setSynced(true) } }, [initialized]) + console.log('global sync is now gonna return ', synced) return synced } /** - * Hook for syncing URL params with the Redux store + * Hook for syncing tag scene URL params with the Redux store */ export const useTagSceneSync = () => { - console.log('started executing hook') const location = useLocation() const navigate = useNavigation() const { setTagFilterAction } = useSettingActions() @@ -89,7 +106,7 @@ export const useTagSceneSync = () => { useEffect(() => { if (initialized) { - console.log('running initialization sync') + console.log('running initialization sync in tag scene hook') const searchParams = new URLSearchParams(location.search) const verbParam = searchParams.get('v') || 'ALL' const validVerbParam = isValidFilter(location, verbParam) @@ -106,9 +123,8 @@ export const useTagSceneSync = () => { } setSynced(true) } + console.log('tag scene sync is now going to return ', synced) }, [initialized]) - console.log('synced will return: ', synced) - return synced } From 6339b114bb8d68177de410aea7a71b46c750096d Mon Sep 17 00:00:00 2001 From: Niral Patel Date: Thu, 11 Aug 2022 23:23:02 +0000 Subject: [PATCH 08/31] Custom sync hooks, new navigate functions in hook for params --- packages/api-explorer/src/ApiExplorer.tsx | 9 +- .../components/DocMarkdown/DocMarkdown.tsx | 2 +- .../SelectorContainer/ApiSpecSelector.tsx | 2 +- .../SelectorContainer/SdkLanguageSelector.tsx | 2 +- .../SelectorContainer/SelectorContainer.tsx | 7 +- .../src/components/SideNav/SideNav.tsx | 2 +- .../src/components/SideNav/SideNavMethods.tsx | 21 +--- .../src/components/SideNav/SideNavTypes.tsx | 17 +-- .../src/scenes/DiffScene/DiffScene.tsx | 11 +- .../src/scenes/DiffScene/DocDiff/DiffItem.tsx | 2 +- .../src/scenes/MethodScene/MethodScene.tsx | 2 +- .../scenes/MethodTagScene/MethodTagScene.tsx | 27 ++--- .../src/scenes/TypeScene/TypeScene.tsx | 2 +- .../src/scenes/TypeTagScene/TypeTagScene.tsx | 49 ++++---- .../scenes/utils/hooks/tagStoreSync.spec.ts | 27 +++++ .../src/scenes/utils/hooks/tagStoreSync.ts | 67 +++++++++++ .../src/utils/hooks/globalStoreSync.spec.ts | 27 +++++ .../{syncHooks.ts => globalStoreSync.ts} | 88 ++++---------- .../src/utils/hooks/navHooks.spec.ts | 91 -------------- .../src/utils/hooks/navigation.spec.ts | 111 ++++++++++++++++++ .../hooks/{navHooks.ts => navigation.ts} | 82 +++++++++++-- packages/api-explorer/src/utils/index.ts | 3 +- 22 files changed, 393 insertions(+), 258 deletions(-) create mode 100644 packages/api-explorer/src/scenes/utils/hooks/tagStoreSync.spec.ts create mode 100644 packages/api-explorer/src/scenes/utils/hooks/tagStoreSync.ts create mode 100644 packages/api-explorer/src/utils/hooks/globalStoreSync.spec.ts rename packages/api-explorer/src/utils/hooks/{syncHooks.ts => globalStoreSync.ts} (55%) delete mode 100644 packages/api-explorer/src/utils/hooks/navHooks.spec.ts create mode 100644 packages/api-explorer/src/utils/hooks/navigation.spec.ts rename packages/api-explorer/src/utils/hooks/{navHooks.ts => navigation.ts} (50%) diff --git a/packages/api-explorer/src/ApiExplorer.tsx b/packages/api-explorer/src/ApiExplorer.tsx index bd169cbf2..631074178 100644 --- a/packages/api-explorer/src/ApiExplorer.tsx +++ b/packages/api-explorer/src/ApiExplorer.tsx @@ -68,8 +68,7 @@ import { selectCurrentSpec, useSettingStoreState, } from './state' -import { getSpecKey, diffPath, findSdk } from './utils' -import { useGlobalSync } from './utils/hooks/syncHooks' +import { getSpecKey, diffPath, findSdk, useGlobalStoreSync } from './utils' export interface ApiExplorerProps { adaptor: IApixAdaptor @@ -97,7 +96,7 @@ export const ApiExplorer: FC = ({ const { initSpecsAction, setCurrentSpecAction } = useSpecActions() const location = useLocation() - const isSynced = useGlobalSync() + useGlobalStoreSync() const [hasNavigation, setHasNavigation] = useState(true) const toggleNavigation = (target?: boolean) => setHasNavigation(target || !hasNavigation) @@ -155,7 +154,7 @@ export const ApiExplorer: FC = ({ neededSpec = spec?.key } - return isSynced ? ( + return ( <> = ({ {!headless && } - ) : null + ) } const AsideBorder = styled(Aside)<{ diff --git a/packages/api-explorer/src/components/DocMarkdown/DocMarkdown.tsx b/packages/api-explorer/src/components/DocMarkdown/DocMarkdown.tsx index 98ebecc08..6d842fb1c 100644 --- a/packages/api-explorer/src/components/DocMarkdown/DocMarkdown.tsx +++ b/packages/api-explorer/src/components/DocMarkdown/DocMarkdown.tsx @@ -40,7 +40,7 @@ interface DocMarkdownProps { export const DocMarkdown: FC = ({ source, specKey }) => { const searchPattern = useSelector(selectSearchPattern) - const navigate = useNavigation() + const { navigate } = useNavigation() const linkClickHandler = (pathname: string, url: string) => { if (pathname.startsWith(`/${specKey}`)) { diff --git a/packages/api-explorer/src/components/SelectorContainer/ApiSpecSelector.tsx b/packages/api-explorer/src/components/SelectorContainer/ApiSpecSelector.tsx index 9f4800025..988c376cc 100644 --- a/packages/api-explorer/src/components/SelectorContainer/ApiSpecSelector.tsx +++ b/packages/api-explorer/src/components/SelectorContainer/ApiSpecSelector.tsx @@ -40,7 +40,7 @@ interface ApiSpecSelectorProps { export const ApiSpecSelector: FC = ({ spec }) => { const location = useLocation() - const navigate = useNavigation() + const { navigate } = useNavigation() const specs = useSelector(selectSpecs) const options = Object.entries(specs).map(([key, spec]) => ({ value: key, diff --git a/packages/api-explorer/src/components/SelectorContainer/SdkLanguageSelector.tsx b/packages/api-explorer/src/components/SelectorContainer/SdkLanguageSelector.tsx index 8e1a98dd4..c94a72883 100644 --- a/packages/api-explorer/src/components/SelectorContainer/SdkLanguageSelector.tsx +++ b/packages/api-explorer/src/components/SelectorContainer/SdkLanguageSelector.tsx @@ -35,7 +35,7 @@ import { allSdkLanguageOptions } from './utils' * Allows the user to select their preferred SDK language */ export const SdkLanguageSelector: FC = () => { - const navigate = useNavigation() + const { navigate } = useNavigation() const selectedSdkLanguage = useSelector(selectSdkLanguage) const [language, setLanguage] = useState(selectedSdkLanguage) const options = allSdkLanguageOptions() diff --git a/packages/api-explorer/src/components/SelectorContainer/SelectorContainer.tsx b/packages/api-explorer/src/components/SelectorContainer/SelectorContainer.tsx index a3fb92cba..c94a2a7e7 100644 --- a/packages/api-explorer/src/components/SelectorContainer/SelectorContainer.tsx +++ b/packages/api-explorer/src/components/SelectorContainer/SelectorContainer.tsx @@ -32,7 +32,7 @@ import { ChangeHistory } from '@styled-icons/material/ChangeHistory' import type { SpecItem } from '@looker/sdk-codegen' import { Link } from '../Link' -import { diffPath } from '../../utils' +import { diffPath, useNavigation } from '../../utils' import { SdkLanguageSelector } from './SdkLanguageSelector' import { ApiSpecSelector } from './ApiSpecSelector' @@ -50,15 +50,14 @@ export const SelectorContainer: FC = ({ spec, ...spaceProps }) => { - const searchParams = new URLSearchParams(location.search) + const { buildPathWithGlobal } = useNavigation() // TODO: noticing that there are certain pages where we must delete extra params // before pushing its link, what's a way we can handle this? - searchParams.delete('v') return ( - + = ({ headless = false, spec }) => { const location = useLocation() - const navigate = useNavigation() + const { navigate } = useNavigation() const specKey = spec.key const tabNames = ['methods', 'types'] const pathParts = location.pathname.split('/') diff --git a/packages/api-explorer/src/components/SideNav/SideNavMethods.tsx b/packages/api-explorer/src/components/SideNav/SideNavMethods.tsx index 9eb348c5c..918d87431 100644 --- a/packages/api-explorer/src/components/SideNav/SideNavMethods.tsx +++ b/packages/api-explorer/src/components/SideNav/SideNavMethods.tsx @@ -26,10 +26,10 @@ import React, { useEffect, useState } from 'react' import styled from 'styled-components' -import { Accordion2, Heading, Span } from '@looker/components' +import { Accordion2, Heading } from '@looker/components' import type { MethodList } from '@looker/sdk-codegen' import { useSelector } from 'react-redux' -import { useLocation, useRouteMatch } from 'react-router-dom' +import { useRouteMatch } from 'react-router-dom' import { useNavigation, highlightHTML, buildMethodPath } from '../../utils' import { Link } from '../Link' import { selectSearchPattern } from '../../state' @@ -44,9 +44,7 @@ interface MethodsProps { export const SideNavMethods = styled( ({ className, methods, tag, specKey, defaultOpen = false }: MethodsProps) => { - const location = useLocation() - const navigate = useNavigation() - const searchParams = new URLSearchParams(location.search) + const { navigate, buildPathWithGlobal } = useNavigation() const searchPattern = useSelector(selectSearchPattern) const match = useRouteMatch<{ methodTag: string }>( `/:specKey/methods/:methodTag/:methodName?` @@ -85,16 +83,9 @@ export const SideNavMethods = styled( {Object.values(methods).map((method) => (
  • { - // TODO: span behaving like link with custom navigate? - searchParams.delete('v') - return buildMethodPath( - specKey, - tag, - method.name, - searchParams.toString() - ) - }} + to={buildPathWithGlobal( + buildMethodPath(specKey, tag, method.name) + )} > {highlightHTML(searchPattern, method.summary)} diff --git a/packages/api-explorer/src/components/SideNav/SideNavTypes.tsx b/packages/api-explorer/src/components/SideNav/SideNavTypes.tsx index 4de7acf86..702f29fd1 100644 --- a/packages/api-explorer/src/components/SideNav/SideNavTypes.tsx +++ b/packages/api-explorer/src/components/SideNav/SideNavTypes.tsx @@ -28,7 +28,7 @@ import React, { useEffect, useState } from 'react' import styled from 'styled-components' import { Accordion2, Heading } from '@looker/components' import type { TypeList } from '@looker/sdk-codegen' -import { useLocation, useRouteMatch } from 'react-router-dom' +import { useRouteMatch } from 'react-router-dom' import { useSelector } from 'react-redux' import { Link } from '../Link' import { highlightHTML, useNavigation, buildTypePath } from '../../utils' @@ -44,9 +44,7 @@ interface TypesProps { export const SideNavTypes = styled( ({ className, types, tag, specKey, defaultOpen = false }: TypesProps) => { - const location = useLocation() - const navigate = useNavigation() - const searchParams = new URLSearchParams(location.search) + const { navigate, buildPathWithGlobal } = useNavigation() const searchPattern = useSelector(selectSearchPattern) const match = useRouteMatch<{ typeTag: string }>( `/:specKey/types/:typeTag/:typeName?` @@ -85,16 +83,7 @@ export const SideNavTypes = styled( {Object.values(types).map((type) => (
  • { - // TODO: span behaving like link with custom navigate? - searchParams.delete('v') - return buildTypePath( - specKey, - tag, - type.name, - searchParams.toString() - ) - }} + to={buildPathWithGlobal(buildTypePath(specKey, tag, type.name))} > {highlightHTML(searchPattern, type.name)} diff --git a/packages/api-explorer/src/scenes/DiffScene/DiffScene.tsx b/packages/api-explorer/src/scenes/DiffScene/DiffScene.tsx index f14c1ec59..864156bb6 100644 --- a/packages/api-explorer/src/scenes/DiffScene/DiffScene.tsx +++ b/packages/api-explorer/src/scenes/DiffScene/DiffScene.tsx @@ -41,8 +41,9 @@ import { SyncAlt } from '@styled-icons/material/SyncAlt' import { useSelector } from 'react-redux' import { ApixSection } from '../../components' -import { selectCurrentSpec } from '../../state' +import { selectCurrentSpec, useSettingStoreState } from '../../state' import { diffPath, getApixAdaptor, useNavigation } from '../../utils' +import { useTagStoreSync } from '../utils/hooks/tagStoreSync' import { diffSpecs, standardDiffToggles } from './diffUtils' import { DocDiff } from './DocDiff' @@ -84,7 +85,8 @@ const validateParam = (specs: SpecList, specKey = '') => { export const DiffScene: FC = ({ specs, toggleNavigation }) => { const adaptor = getApixAdaptor() - const navigate = useNavigation() + const { navigate } = useNavigation() + const { initialized } = useSettingStoreState() const spec = useSelector(selectCurrentSpec) const currentSpecKey = spec.key const match = useRouteMatch<{ l: string; r: string }>(`/${diffPath}/:l?/:r?`) @@ -96,6 +98,7 @@ export const DiffScene: FC = ({ specs, toggleNavigation }) => { label: `${key} (${spec.status})`, })) + useTagStoreSync() const [leftKey, setLeftKey] = useState(l || currentSpecKey) const [rightKey, setRightKey] = useState(r || '') const [leftApi, setLeftApi] = useState(specs[leftKey].api!) @@ -110,6 +113,10 @@ export const DiffScene: FC = ({ specs, toggleNavigation }) => { } }, [r, rightKey]) + useEffect(() => { + console.log('initialized in diffScene is ', initialized) + }, [initialized]) + useEffect(() => { if (l !== leftKey) { setLeftKey(l) diff --git a/packages/api-explorer/src/scenes/DiffScene/DocDiff/DiffItem.tsx b/packages/api-explorer/src/scenes/DiffScene/DocDiff/DiffItem.tsx index 4c7feb409..be5536d26 100644 --- a/packages/api-explorer/src/scenes/DiffScene/DocDiff/DiffItem.tsx +++ b/packages/api-explorer/src/scenes/DiffScene/DocDiff/DiffItem.tsx @@ -59,7 +59,7 @@ export const DiffMethodLink: FC = ({ method, specKey, }) => { - const navigate = useNavigation() + const { navigate } = useNavigation() if (!method) return {`Missing in ${specKey}`} diff --git a/packages/api-explorer/src/scenes/MethodScene/MethodScene.tsx b/packages/api-explorer/src/scenes/MethodScene/MethodScene.tsx index 64ccf0726..af97ad205 100644 --- a/packages/api-explorer/src/scenes/MethodScene/MethodScene.tsx +++ b/packages/api-explorer/src/scenes/MethodScene/MethodScene.tsx @@ -78,7 +78,7 @@ const showRunIt = async (adaptor: IEnvironmentAdaptor) => { export const MethodScene: FC = ({ api }) => { const adaptor = getApixAdaptor() const history = useHistory() - const navigate = useNavigation() + const { navigate } = useNavigation() const sdkLanguage = useSelector(selectSdkLanguage) const { specKey, methodTag, methodName } = useParams() const { value, toggle, setOn } = useToggle() diff --git a/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.tsx b/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.tsx index c5cd6059b..c5747c7be 100644 --- a/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.tsx +++ b/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.tsx @@ -32,7 +32,7 @@ import { useSelector } from 'react-redux' import { ApixSection, DocTitle, DocMethodSummary, Link } from '../../components' import { buildMethodPath, isValidFilter, useNavigation } from '../../utils' import { selectTagFilter, useSettingActions } from '../../state' -import { useTagSceneSync } from '../../utils/hooks/syncHooks' +import { useTagStoreSync } from '../utils/hooks/tagStoreSync' import { getOperations } from './utils' interface MethodTagSceneProps { @@ -48,12 +48,11 @@ export const MethodTagScene: FC = ({ api }) => { const { specKey, methodTag } = useParams() const history = useHistory() const methods = api.tags[methodTag] - const navigate = useNavigation() + const { navigate, buildPathWithGlobal, navigateWithGlobal } = useNavigation() const selectedTagFilter = useSelector(selectTagFilter) const { setTagFilterAction } = useSettingActions() const [tagFilter, setTagFilter] = useState(selectedTagFilter) - const isSynced = useTagSceneSync() - let searchParams = new URLSearchParams(location.search) + useTagStoreSync() const handleChange = (filter: string) => { navigate(location.pathname, { @@ -62,7 +61,7 @@ export const MethodTagScene: FC = ({ api }) => { } useEffect(() => { - searchParams = new URLSearchParams(location.search) + const searchParams = new URLSearchParams(location.search) const verbParam = searchParams.get('v') || 'ALL' setTagFilterAction({ tagFilter: isValidFilter(location, verbParam) @@ -77,7 +76,7 @@ export const MethodTagScene: FC = ({ api }) => { useEffect(() => { if (!methods) { - navigate(`/${specKey}/methods`) + navigateWithGlobal(`/${specKey}/methods`) } }, [history, methods]) if (!methods) { @@ -88,7 +87,7 @@ export const MethodTagScene: FC = ({ api }) => { )! const operations = getOperations(methods) - return isSynced ? ( + return ( {`${tag.name}: ${tag.description}`} = ({ api }) => { selectedTagFilter === method.httpMethod) && ( { - searchParams.delete('v') - return buildMethodPath( - specKey, - tag.name, - method.name, - searchParams.toString() - ) - }} + to={buildPathWithGlobal( + buildMethodPath(specKey, tag.name, method.name) + )} > @@ -129,5 +122,5 @@ export const MethodTagScene: FC = ({ api }) => { ) )} - ) : null + ) } diff --git a/packages/api-explorer/src/scenes/TypeScene/TypeScene.tsx b/packages/api-explorer/src/scenes/TypeScene/TypeScene.tsx index 5491ed255..3f2494b37 100644 --- a/packages/api-explorer/src/scenes/TypeScene/TypeScene.tsx +++ b/packages/api-explorer/src/scenes/TypeScene/TypeScene.tsx @@ -56,7 +56,7 @@ export const TypeScene: FC = ({ api }) => { const { specKey, typeTag, typeName } = useParams() const type = api.types[typeName] const history = useHistory() - const navigate = useNavigation() + const { navigate } = useNavigation() const typesUsed = typeRefs(api, type?.customTypes) const methodsUsedBy = methodRefs(api, type?.methodRefs) const typesUsedBy = typeRefs(api, type?.parentTypes) diff --git a/packages/api-explorer/src/scenes/TypeTagScene/TypeTagScene.tsx b/packages/api-explorer/src/scenes/TypeTagScene/TypeTagScene.tsx index 20a87eb17..2aab8afd7 100644 --- a/packages/api-explorer/src/scenes/TypeTagScene/TypeTagScene.tsx +++ b/packages/api-explorer/src/scenes/TypeTagScene/TypeTagScene.tsx @@ -30,8 +30,9 @@ import type { ApiModel } from '@looker/sdk-codegen' import { useParams } from 'react-router-dom' import { useSelector } from 'react-redux' import { ApixSection, DocTitle, DocTypeSummary, Link } from '../../components' -import { buildTypePath, useNavigation } from '../../utils' -import { selectTagFilter } from '../../state' +import { buildTypePath, isValidFilter, useNavigation } from '../../utils' +import { selectTagFilter, useSettingActions } from '../../state' +import { useTagStoreSync } from '../utils/hooks/tagStoreSync' import { getMetaTypes } from './utils' interface TypeTagSceneProps { @@ -45,15 +46,32 @@ interface TypeTagSceneParams { export const TypeTagScene: FC = ({ api }) => { const { specKey, typeTag } = useParams() - const navigate = useNavigation() - const searchParams = new URLSearchParams(location.search) + const { navigate, buildPathWithGlobal, navigateWithGlobal } = useNavigation() const selectedTagFilter = useSelector(selectTagFilter) + const { setTagFilterAction } = useSettingActions() const [tagFilter, setTagFilter] = useState(selectedTagFilter) + useTagStoreSync() + + const handleChange = (filter: string) => { + navigate(location.pathname, { + v: filter === 'ALL' ? null : filter.toLowerCase(), + }) + } + + useEffect(() => { + const searchParams = new URLSearchParams(location.search) + const verbParam = searchParams.get('v') || 'ALL' + setTagFilterAction({ + tagFilter: isValidFilter(location, verbParam) + ? verbParam.toUpperCase() + : 'ALL', + }) + }, [location.search]) const types = api.typeTags[typeTag] useEffect(() => { if (!types) { - navigate(`/${specKey}/types`) + navigateWithGlobal(`/${specKey}/types`) } }, [types]) @@ -65,12 +83,6 @@ export const TypeTagScene: FC = ({ api }) => { return <> } - const setValue = (filter: string) => { - navigate(location.pathname, { - v: filter === 'ALL' ? null : filter.toLowerCase(), - }) - } - const tag = Object.values(api.spec.tags!).find((tag) => tag.name === typeTag)! const metaTypes = getMetaTypes(types) return ( @@ -80,7 +92,7 @@ export const TypeTagScene: FC = ({ api }) => { mb="small" mt="xlarge" value={tagFilter} - onChange={setValue} + onChange={handleChange} > ALL @@ -97,16 +109,9 @@ export const TypeTagScene: FC = ({ api }) => { selectedTagFilter === type.metaType.toString().toUpperCase()) && ( { - // TODO: span behaving like link with custom navigate? - searchParams.delete('v') - return buildTypePath( - specKey, - tag.name, - type.name, - searchParams.toString() - ) - }} + to={buildPathWithGlobal( + buildTypePath(specKey, tag.name, type.name) + )} > diff --git a/packages/api-explorer/src/scenes/utils/hooks/tagStoreSync.spec.ts b/packages/api-explorer/src/scenes/utils/hooks/tagStoreSync.spec.ts new file mode 100644 index 000000000..fff996052 --- /dev/null +++ b/packages/api-explorer/src/scenes/utils/hooks/tagStoreSync.spec.ts @@ -0,0 +1,27 @@ +/* + + MIT License + + Copyright (c) 2022 Looker Data Sciences, Inc. + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. + + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. + + */ + +// TODO: testing the hook outside of a component? diff --git a/packages/api-explorer/src/scenes/utils/hooks/tagStoreSync.ts b/packages/api-explorer/src/scenes/utils/hooks/tagStoreSync.ts new file mode 100644 index 000000000..d10c5bd09 --- /dev/null +++ b/packages/api-explorer/src/scenes/utils/hooks/tagStoreSync.ts @@ -0,0 +1,67 @@ +/* + + MIT License + + Copyright (c) 2022 Looker Data Sciences, Inc. + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. + + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. + + */ +import { useLocation } from 'react-router-dom' +import { useSelector } from 'react-redux' +import { useEffect } from 'react' +import { + selectTagFilter, + useSettingActions, + useSettingStoreState, +} from '../../../state' +import { isValidFilter, useNavigation } from '../../../utils' + +/** + * Hook for syncing tag scene URL params with the Redux store + * + * Tag scene specific search parameters: 'v' + */ +export const useTagStoreSync = () => { + const location = useLocation() + const { navigate } = useNavigation() + const { setTagFilterAction } = useSettingActions() + const { initialized } = useSettingStoreState() + const selectedTagFilter = useSelector(selectTagFilter) + + useEffect(() => { + if (initialized) { + const params = new URLSearchParams(location.search) + + // syncing verb filter on tag scene page + const verbParam = params.get('v') || 'ALL' + const validVerbParam = isValidFilter(location, verbParam) + if (validVerbParam) { + setTagFilterAction({ tagFilter: verbParam.toUpperCase() }) + } else { + navigate(location.pathname, { + v: + selectedTagFilter === 'ALL' + ? null + : selectedTagFilter.toLowerCase(), + }) + } + } + }, [initialized]) +} diff --git a/packages/api-explorer/src/utils/hooks/globalStoreSync.spec.ts b/packages/api-explorer/src/utils/hooks/globalStoreSync.spec.ts new file mode 100644 index 000000000..fff996052 --- /dev/null +++ b/packages/api-explorer/src/utils/hooks/globalStoreSync.spec.ts @@ -0,0 +1,27 @@ +/* + + MIT License + + Copyright (c) 2022 Looker Data Sciences, Inc. + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. + + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. + + */ + +// TODO: testing the hook outside of a component? diff --git a/packages/api-explorer/src/utils/hooks/syncHooks.ts b/packages/api-explorer/src/utils/hooks/globalStoreSync.ts similarity index 55% rename from packages/api-explorer/src/utils/hooks/syncHooks.ts rename to packages/api-explorer/src/utils/hooks/globalStoreSync.ts index 865fb5ccc..cc8f373a3 100644 --- a/packages/api-explorer/src/utils/hooks/syncHooks.ts +++ b/packages/api-explorer/src/utils/hooks/globalStoreSync.ts @@ -24,107 +24,61 @@ */ import { useLocation } from 'react-router-dom' -import { useEffect, useState } from 'react' +import { useEffect } from 'react' import { useSelector } from 'react-redux' -import { allAlias, findSdk, isValidFilter, useNavigation } from '../index' +import { allAlias, findSdk, useNavigation } from '../index' import { selectSdkLanguage, selectSearchPattern, - selectTagFilter, useSettingActions, useSettingStoreState, } from '../../state' /** * Hook for syncing global URL params with the Redux store + * Global search parameters: 's', 'sdk' */ -export const useGlobalSync = () => { +export const useGlobalStoreSync = () => { const location = useLocation() - const navigate = useNavigation() + const { navigate } = useNavigation() const { setSdkLanguageAction, setSearchPatternAction } = useSettingActions() const { initialized } = useSettingStoreState() const selectedSdkLanguage = useSelector(selectSdkLanguage) const selectedSearchPattern = useSelector(selectSearchPattern) - const [synced, setSynced] = useState(false) useEffect(() => { if (initialized) { - console.log('inside global sync initialization') - const searchParams = new URLSearchParams(location.search) - const sdkParam = searchParams.get('sdk') || '' + const params = new URLSearchParams(location.search) + + // syncing search query + const searchParam = params.get('s') + if (searchParam) { + setSearchPatternAction({ + searchPattern: searchParam, + }) + } else { + navigate(location.pathname, { + s: selectedSearchPattern || null, + }) + } + + // syncing SDK language selection + const sdkParam = params.get('sdk') || '' const sdk = findSdk(sdkParam) const validSdkParam = !sdkParam.localeCompare(sdk.alias, 'en', { sensitivity: 'base' }) || !sdkParam.localeCompare(sdk.language, 'en', { sensitivity: 'base' }) - if (validSdkParam) { - // sync store with URL setSdkLanguageAction({ sdkLanguage: sdk.language, }) } else { - // sync URL with store const { alias } = findSdk(selectedSdkLanguage) navigate(location.pathname, { sdk: alias === allAlias ? null : alias, }) } - - // TODO: syncing the search (and additional) parameter without bloating code? - const searchQueryParam = searchParams.get('s') - if (searchQueryParam) { - // sync store with URL - setSearchPatternAction({ - searchPattern: searchQueryParam, - }) - } else { - // sync URL with store - navigate(location.pathname, { - s: selectedSearchPattern || null, - }) - } - - setSynced(true) } }, [initialized]) - - console.log('global sync is now gonna return ', synced) - return synced -} - -/** - * Hook for syncing tag scene URL params with the Redux store - */ -export const useTagSceneSync = () => { - const location = useLocation() - const navigate = useNavigation() - const { setTagFilterAction } = useSettingActions() - const { initialized } = useSettingStoreState() - const selectedTagFilter = useSelector(selectTagFilter) - const [synced, setSynced] = useState(false) - - useEffect(() => { - if (initialized) { - console.log('running initialization sync in tag scene hook') - const searchParams = new URLSearchParams(location.search) - const verbParam = searchParams.get('v') || 'ALL' - const validVerbParam = isValidFilter(location, verbParam) - - if (validVerbParam) { - setTagFilterAction({ tagFilter: verbParam.toUpperCase() }) - } else { - navigate(location.pathname, { - v: - selectedTagFilter === 'ALL' - ? null - : selectedTagFilter.toLowerCase(), - }) - } - setSynced(true) - } - console.log('tag scene sync is now going to return ', synced) - }, [initialized]) - - return synced } diff --git a/packages/api-explorer/src/utils/hooks/navHooks.spec.ts b/packages/api-explorer/src/utils/hooks/navHooks.spec.ts deleted file mode 100644 index 77f58e4eb..000000000 --- a/packages/api-explorer/src/utils/hooks/navHooks.spec.ts +++ /dev/null @@ -1,91 +0,0 @@ -/* - - MIT License - - Copyright (c) 2022 Looker Data Sciences, Inc. - - Permission is hereby granted, free of charge, to any person obtaining a copy - of this software and associated documentation files (the "Software"), to deal - in the Software without restriction, including without limitation the rights - to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - copies of the Software, and to permit persons to whom the Software is - furnished to do so, subject to the following conditions: - - The above copyright notice and this permission notice shall be included in all - copies or substantial portions of the Software. - - THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - SOFTWARE. - - */ -import { useHistory } from 'react-router-dom' -import { useNavigation } from './navHooks' - -const mockHistoryPush = jest.fn() -jest.mock('react-router-dom', () => { - const ReactRouterDOM = jest.requireActual('react-router-dom') - return { - ...ReactRouterDOM, - useHistory: () => ({ - push: mockHistoryPush, - location: { pathname: '/3.1/methods', search: 's=test' }, - }), - } -}) - -describe('Navigate', () => { - const history = useHistory() - const navigate = useNavigation() - const curParams = new URLSearchParams(history.location.search) // 's=test' - const route = `/3.1` - - test('preserves existing query params when given params are undefined', () => { - navigate(route) - expect(curParams.get('s')).toBe('test') - expect(mockHistoryPush).lastCalledWith({ - pathname: route, - search: curParams.toString(), - }) - }) - - test('clears existing params when given params are null', () => { - navigate(route, null) - expect(mockHistoryPush).lastCalledWith({ - pathname: route, - }) - }) - - test('null query params are removed', () => { - navigate(route, { s: null, sdk: 'test' }) - expect(mockHistoryPush).lastCalledWith({ - pathname: route, - search: 'sdk=test', - }) - }) - - test('sets query parameters when given a populated query params object', () => { - const newParams = new URLSearchParams() - newParams.set('s', 'test') - newParams.set('sdk', 'kt') - navigate(route, { s: newParams.get('s'), sdk: newParams.get('sdk') }) - expect(mockHistoryPush).lastCalledWith({ - pathname: route, - search: newParams.toString(), - }) - }) - - test('appends parameters when object is passed in with existing parameters', () => { - const newParams = new URLSearchParams() - newParams.set('sdk', 'kt') - navigate(route, { sdk: newParams.get('sdk') }) - expect(mockHistoryPush).lastCalledWith({ - pathname: route, - search: curParams.toString() + '&' + newParams.toString(), - }) - }) -}) diff --git a/packages/api-explorer/src/utils/hooks/navigation.spec.ts b/packages/api-explorer/src/utils/hooks/navigation.spec.ts new file mode 100644 index 000000000..df3479ad6 --- /dev/null +++ b/packages/api-explorer/src/utils/hooks/navigation.spec.ts @@ -0,0 +1,111 @@ +/* + + MIT License + + Copyright (c) 2022 Looker Data Sciences, Inc. + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. + + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. + + */ +import { useHistory } from 'react-router-dom' +import { useNavigation } from './navigation' + +const mockHistoryPush = jest.fn() +jest.mock('react-router-dom', () => { + const ReactRouterDOM = jest.requireActual('react-router-dom') + return { + ...ReactRouterDOM, + useHistory: () => ({ + push: mockHistoryPush, + location: { + pathname: '/3.1/methods/Auth', + search: 's=test&sdk=py&v=get', + }, + }), + } +}) + +describe('useNavigation', () => { + const history = useHistory() + const { navigate, navigateWithGlobal, buildPathWithGlobal } = useNavigation() + const curParams = new URLSearchParams(history.location.search) // 's=test&sdk=py&v=get' + const route = `/3.1` + + describe('navigate', () => { + test('preserves existing query params when given params are undefined', () => { + navigate(route) + expect(curParams.get('s')).toBe('test') + expect(curParams.get('sdk')).toBe('py') + expect(curParams.get('v')).toBe('get') + expect(mockHistoryPush).lastCalledWith({ + pathname: route, + search: curParams.toString(), + }) + }) + + test('clears existing params when given params are null', () => { + navigate(route, null) + expect(mockHistoryPush).lastCalledWith({ + pathname: route, + }) + }) + + test('removes null query params while persisting undefined params if in URL', () => { + navigate(route, { s: null, sdk: 'test' }) + expect(mockHistoryPush).lastCalledWith({ + pathname: route, + search: 'sdk=test&v=get', + }) + }) + + test('sets query parameters when given a populated query params object', () => { + const newParams = new URLSearchParams() + newParams.set('s', 'newTest') + newParams.set('sdk', 'kt') + newParams.set('v', 'post') + navigate(route, { + s: newParams.get('s'), + sdk: newParams.get('sdk'), + v: newParams.get('v'), + }) + expect(mockHistoryPush).lastCalledWith({ + pathname: route, + search: newParams.toString(), + }) + }) + }) + + describe('buildPathWithGlobal', () => { + test('creates path with global parameters and excluding scene specific parameters', () => { + curParams.delete('v') + expect(buildPathWithGlobal(route)).toEqual( + `${route}?${curParams.toString()}` + ) + }) + }) + + describe('navigateWithGlobal', () => { + test('preserves global query params and removes scene specific parameters', () => { + curParams.delete('v') + navigateWithGlobal(route) + expect(curParams.get('s')).toEqual('test') + expect(mockHistoryPush).lastCalledWith(`${route}?${curParams.toString()}`) + }) + }) +}) diff --git a/packages/api-explorer/src/utils/hooks/navHooks.ts b/packages/api-explorer/src/utils/hooks/navigation.ts similarity index 50% rename from packages/api-explorer/src/utils/hooks/navHooks.ts rename to packages/api-explorer/src/utils/hooks/navigation.ts index 0cc4d579f..8ae57c69e 100644 --- a/packages/api-explorer/src/utils/hooks/navHooks.ts +++ b/packages/api-explorer/src/utils/hooks/navigation.ts @@ -35,25 +35,20 @@ interface QueryParamProps { } /** - * Hook for navigating to given route with specified query params - * - * @param path Pathname to navigate to - * @param queryParams Hash of query param name/value pairs to include in the destination url + * Hook for navigating to given route with query params */ export const useNavigation = () => { const history = useHistory() + /** + * Navigates to path including provided search parameters + * + * @param path Pathname to navigate to + * @param queryParams Hash of query param name/value pairs to include in the destination url + */ const navigate = (path: string, queryParams?: QueryParamProps | null) => { const urlParams = new URLSearchParams(history.location.search) - // TODO: making this hook smarter, delete verb when not on scene page - // const match = matchPath<{ specKey: string; tagType: string }>(path, { - // path: `/:specKey/:tagType?`, - // }) - // if (match && match.params.specKey === 'diff') { - // urlParams.delete('v') - // } - // console.log(match) if (queryParams === undefined) { // if params passed in is undefined, maintain existing parameters in the URL @@ -74,5 +69,66 @@ export const useNavigation = () => { } } - return navigate + /** + * Builds path to a scene and removes any scene-specific URL parameters + * + * @param path the destination path + * @returns a path excluding scene-specific search parameters + */ + const buildPathWithGlobal = (path: string) => { + const params = new URLSearchParams(history.location.search) + params.delete('v') + return `${path}?${params.toString()}` + } + + /** + * Navigates to a scene removing any scene-specific URL parameters + * + * @param path Pathname to navigate to + */ + const navigateWithGlobal = (path: string) => { + history.push(buildPathWithGlobal(path)) + } + + // TODO: Discuss proposition of using buildGlobalPath/navigateWithGlobal, + // leaves reconciliation step to do the URL fixing + // /** + // * Builds a path matching the route used by MethodScene + // * @param specKey A string to identify the spec in the URL + // * @param tag Corresponding method tag + // * @param methodName A method name + // * @returns a Method path with filtered search parameters + // */ + // const buildMethodScenePath = ( + // specKey: string, + // tag: string, + // methodName: string + // ) => { + // const params = new URLSearchParams(location.search) + // params.delete('v') + // return `/${specKey}/methods/${tag}/${methodName}${params.toString()}` + // } + // + // /** + // * Builds a path matching the route used by TypeScene + // * @param specKey A string to identify the spec in the URL + // * @param tag Corresponding type tag + // * @param typeName A type name + // * @returns a Type path with filtered search parameters + // */ + // const buildTypeScenePath = ( + // specKey: string, + // tag: string, + // typeName: string + // ) => { + // const params = new URLSearchParams(location.search) + // params.delete('v') + // return `/${specKey}/types/${tag}/${typeName}${params.toString()}` + // } + + return { + navigate, + navigateWithGlobal, + buildPathWithGlobal, + } } diff --git a/packages/api-explorer/src/utils/index.ts b/packages/api-explorer/src/utils/index.ts index e56d13519..f52a37ea1 100644 --- a/packages/api-explorer/src/utils/index.ts +++ b/packages/api-explorer/src/utils/index.ts @@ -30,4 +30,5 @@ export { getLoded } from './lodeUtils' export { useWindowSize } from './useWindowSize' export * from './apixAdaptor' export * from './adaptorUtils' -export { useNavigation } from './hooks/navHooks' +export { useNavigation } from './hooks/navigation' +export { useGlobalStoreSync } from './hooks/globalStoreSync' From 0b09d4f116d905da51ee7057ced91e5f3882a6d2 Mon Sep 17 00:00:00 2001 From: Niral Patel Date: Thu, 11 Aug 2022 23:27:40 +0000 Subject: [PATCH 09/31] Code cleanup --- packages/api-explorer/src/ApiExplorer.tsx | 1 - .../src/components/SelectorContainer/SelectorContainer.tsx | 2 -- packages/api-explorer/src/scenes/DiffScene/DiffScene.tsx | 7 +------ 3 files changed, 1 insertion(+), 9 deletions(-) diff --git a/packages/api-explorer/src/ApiExplorer.tsx b/packages/api-explorer/src/ApiExplorer.tsx index 631074178..96ded994c 100644 --- a/packages/api-explorer/src/ApiExplorer.tsx +++ b/packages/api-explorer/src/ApiExplorer.tsx @@ -130,7 +130,6 @@ export const ApiExplorer: FC = ({ const searchParams = new URLSearchParams(location.search) const searchPattern = searchParams.get('s') || '' const sdkParam = searchParams.get('sdk') || 'all' - const { language: sdkLanguage } = findSdk(sdkParam) setSearchPatternAction({ searchPattern }) setSdkLanguageAction({ sdkLanguage }) diff --git a/packages/api-explorer/src/components/SelectorContainer/SelectorContainer.tsx b/packages/api-explorer/src/components/SelectorContainer/SelectorContainer.tsx index c94a2a7e7..ae8edc923 100644 --- a/packages/api-explorer/src/components/SelectorContainer/SelectorContainer.tsx +++ b/packages/api-explorer/src/components/SelectorContainer/SelectorContainer.tsx @@ -51,8 +51,6 @@ export const SelectorContainer: FC = ({ ...spaceProps }) => { const { buildPathWithGlobal } = useNavigation() - // TODO: noticing that there are certain pages where we must delete extra params - // before pushing its link, what's a way we can handle this? return ( diff --git a/packages/api-explorer/src/scenes/DiffScene/DiffScene.tsx b/packages/api-explorer/src/scenes/DiffScene/DiffScene.tsx index 864156bb6..f50a0c28a 100644 --- a/packages/api-explorer/src/scenes/DiffScene/DiffScene.tsx +++ b/packages/api-explorer/src/scenes/DiffScene/DiffScene.tsx @@ -41,7 +41,7 @@ import { SyncAlt } from '@styled-icons/material/SyncAlt' import { useSelector } from 'react-redux' import { ApixSection } from '../../components' -import { selectCurrentSpec, useSettingStoreState } from '../../state' +import { selectCurrentSpec } from '../../state' import { diffPath, getApixAdaptor, useNavigation } from '../../utils' import { useTagStoreSync } from '../utils/hooks/tagStoreSync' import { diffSpecs, standardDiffToggles } from './diffUtils' @@ -86,7 +86,6 @@ const validateParam = (specs: SpecList, specKey = '') => { export const DiffScene: FC = ({ specs, toggleNavigation }) => { const adaptor = getApixAdaptor() const { navigate } = useNavigation() - const { initialized } = useSettingStoreState() const spec = useSelector(selectCurrentSpec) const currentSpecKey = spec.key const match = useRouteMatch<{ l: string; r: string }>(`/${diffPath}/:l?/:r?`) @@ -113,10 +112,6 @@ export const DiffScene: FC = ({ specs, toggleNavigation }) => { } }, [r, rightKey]) - useEffect(() => { - console.log('initialized in diffScene is ', initialized) - }, [initialized]) - useEffect(() => { if (l !== leftKey) { setLeftKey(l) From 2d54f37662a11201e1a83c6ffc25bc879532aaf6 Mon Sep 17 00:00:00 2001 From: Niral Patel Date: Thu, 11 Aug 2022 23:47:27 +0000 Subject: [PATCH 10/31] Code clean up --- packages/api-explorer/src/scenes/DiffScene/DiffScene.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/api-explorer/src/scenes/DiffScene/DiffScene.tsx b/packages/api-explorer/src/scenes/DiffScene/DiffScene.tsx index f50a0c28a..36b429840 100644 --- a/packages/api-explorer/src/scenes/DiffScene/DiffScene.tsx +++ b/packages/api-explorer/src/scenes/DiffScene/DiffScene.tsx @@ -43,7 +43,6 @@ import { useSelector } from 'react-redux' import { ApixSection } from '../../components' import { selectCurrentSpec } from '../../state' import { diffPath, getApixAdaptor, useNavigation } from '../../utils' -import { useTagStoreSync } from '../utils/hooks/tagStoreSync' import { diffSpecs, standardDiffToggles } from './diffUtils' import { DocDiff } from './DocDiff' @@ -97,7 +96,6 @@ export const DiffScene: FC = ({ specs, toggleNavigation }) => { label: `${key} (${spec.status})`, })) - useTagStoreSync() const [leftKey, setLeftKey] = useState(l || currentSpecKey) const [rightKey, setRightKey] = useState(r || '') const [leftApi, setLeftApi] = useState(specs[leftKey].api!) From caa189c6e261cf9f94c8fdd878be95ac2870333f Mon Sep 17 00:00:00 2001 From: Niral Patel Date: Fri, 12 Aug 2022 15:50:14 +0000 Subject: [PATCH 11/31] Fixed invalid verb param on tab switching, WIP hook testing --- .../src/components/SideNav/SideNav.tsx | 6 ++--- .../scenes/MethodTagScene/MethodTagScene.tsx | 9 ++++--- .../src/scenes/TypeTagScene/TypeTagScene.tsx | 9 ++++--- .../src/scenes/utils/hooks/tagStoreSync.ts | 8 +++--- .../src/utils/hooks/globalStoreSync.spec.ts | 27 ------------------- 5 files changed, 17 insertions(+), 42 deletions(-) delete mode 100644 packages/api-explorer/src/utils/hooks/globalStoreSync.spec.ts diff --git a/packages/api-explorer/src/components/SideNav/SideNav.tsx b/packages/api-explorer/src/components/SideNav/SideNav.tsx index b82424887..c9e61b86b 100644 --- a/packages/api-explorer/src/components/SideNav/SideNav.tsx +++ b/packages/api-explorer/src/components/SideNav/SideNav.tsx @@ -70,7 +70,7 @@ interface SideNavProps { export const SideNav: FC = ({ headless = false, spec }) => { const location = useLocation() - const { navigate } = useNavigation() + const { navigate, navigateWithGlobal } = useNavigation() const specKey = spec.key const tabNames = ['methods', 'types'] const pathParts = location.pathname.split('/') @@ -84,12 +84,12 @@ export const SideNav: FC = ({ headless = false, spec }) => { if (parts[1] === 'diff') { if (parts[3] !== tabNames[index]) { parts[3] = tabNames[index] - navigate(parts.join('/'), { v: null }) + navigateWithGlobal(parts.join('/')) } } else { if (parts[2] !== tabNames[index]) { parts[2] = tabNames[index] - navigate(parts.join('/'), { v: null }) + navigateWithGlobal(parts.join('/')) } } } diff --git a/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.tsx b/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.tsx index c5747c7be..3d883a1ef 100644 --- a/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.tsx +++ b/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.tsx @@ -62,11 +62,12 @@ export const MethodTagScene: FC = ({ api }) => { useEffect(() => { const searchParams = new URLSearchParams(location.search) - const verbParam = searchParams.get('v') || 'ALL' + let verbParam = searchParams.get('v') || 'ALL' + verbParam = isValidFilter(location, verbParam) + ? verbParam.toUpperCase() + : 'ALL' setTagFilterAction({ - tagFilter: isValidFilter(location, verbParam) - ? verbParam.toUpperCase() - : 'ALL', + tagFilter: verbParam, }) }, [location.search]) diff --git a/packages/api-explorer/src/scenes/TypeTagScene/TypeTagScene.tsx b/packages/api-explorer/src/scenes/TypeTagScene/TypeTagScene.tsx index 2aab8afd7..b7c58244f 100644 --- a/packages/api-explorer/src/scenes/TypeTagScene/TypeTagScene.tsx +++ b/packages/api-explorer/src/scenes/TypeTagScene/TypeTagScene.tsx @@ -60,11 +60,12 @@ export const TypeTagScene: FC = ({ api }) => { useEffect(() => { const searchParams = new URLSearchParams(location.search) - const verbParam = searchParams.get('v') || 'ALL' + let verbParam = searchParams.get('v') || 'ALL' + verbParam = isValidFilter(location, verbParam) + ? verbParam.toUpperCase() + : 'ALL' setTagFilterAction({ - tagFilter: isValidFilter(location, verbParam) - ? verbParam.toUpperCase() - : 'ALL', + tagFilter: verbParam, }) }, [location.search]) diff --git a/packages/api-explorer/src/scenes/utils/hooks/tagStoreSync.ts b/packages/api-explorer/src/scenes/utils/hooks/tagStoreSync.ts index d10c5bd09..d2f42657c 100644 --- a/packages/api-explorer/src/scenes/utils/hooks/tagStoreSync.ts +++ b/packages/api-explorer/src/scenes/utils/hooks/tagStoreSync.ts @@ -55,11 +55,11 @@ export const useTagStoreSync = () => { if (validVerbParam) { setTagFilterAction({ tagFilter: verbParam.toUpperCase() }) } else { + const verb = isValidFilter(location, selectedTagFilter) + ? selectedTagFilter + : 'ALL' navigate(location.pathname, { - v: - selectedTagFilter === 'ALL' - ? null - : selectedTagFilter.toLowerCase(), + v: verb === 'ALL' ? null : verb.toLowerCase(), }) } } diff --git a/packages/api-explorer/src/utils/hooks/globalStoreSync.spec.ts b/packages/api-explorer/src/utils/hooks/globalStoreSync.spec.ts deleted file mode 100644 index fff996052..000000000 --- a/packages/api-explorer/src/utils/hooks/globalStoreSync.spec.ts +++ /dev/null @@ -1,27 +0,0 @@ -/* - - MIT License - - Copyright (c) 2022 Looker Data Sciences, Inc. - - Permission is hereby granted, free of charge, to any person obtaining a copy - of this software and associated documentation files (the "Software"), to deal - in the Software without restriction, including without limitation the rights - to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - copies of the Software, and to permit persons to whom the Software is - furnished to do so, subject to the following conditions: - - The above copyright notice and this permission notice shall be included in all - copies or substantial portions of the Software. - - THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - SOFTWARE. - - */ - -// TODO: testing the hook outside of a component? From ae47fa01de002b720e08c21992a407b7f6b7abcd Mon Sep 17 00:00:00 2001 From: Niral Patel Date: Mon, 15 Aug 2022 17:48:12 +0000 Subject: [PATCH 12/31] WIP globalStoreSync tests --- packages/api-explorer/package.json | 3 +- .../src/utils/hooks/globalStoreSync.spec.tsx | 115 ++++++++++++++++++ 2 files changed, 117 insertions(+), 1 deletion(-) create mode 100644 packages/api-explorer/src/utils/hooks/globalStoreSync.spec.tsx diff --git a/packages/api-explorer/package.json b/packages/api-explorer/package.json index af0783bea..04d041283 100644 --- a/packages/api-explorer/package.json +++ b/packages/api-explorer/package.json @@ -38,6 +38,7 @@ "@styled-icons/styled-icon": "^10.6.3", "@testing-library/jest-dom": "^5.11.6", "@testing-library/react": "^11.2.2", + "@testing-library/react-hooks": "^8.0.1", "@testing-library/user-event": "^12.6.0", "@types/expect-puppeteer": "^4.4.6", "@types/jest-environment-puppeteer": "^4.4.1", @@ -67,11 +68,11 @@ "webpack-merge": "^5.7.3" }, "dependencies": { - "@looker/extension-utils": "^0.1.13", "@looker/code-editor": "^0.1.23", "@looker/components": "^2.8.1", "@looker/components-date": "^2.4.1", "@looker/design-tokens": "^2.7.1", + "@looker/extension-utils": "^0.1.13", "@looker/icons": "^1.5.3", "@looker/redux": "0.0.0", "@looker/run-it": "^0.9.36", diff --git a/packages/api-explorer/src/utils/hooks/globalStoreSync.spec.tsx b/packages/api-explorer/src/utils/hooks/globalStoreSync.spec.tsx new file mode 100644 index 000000000..c297596c1 --- /dev/null +++ b/packages/api-explorer/src/utils/hooks/globalStoreSync.spec.tsx @@ -0,0 +1,115 @@ +/* + + MIT License + + Copyright (c) 2022 Looker Data Sciences, Inc. + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. + + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. + + */ +import { renderHook } from '@testing-library/react-hooks' +import { useHistory, useLocation } from 'react-router-dom' +import type { Location, History } from 'history' +import { createTestStore, withReduxProvider } from '../../test-utils' +import { useGlobalStoreSync } from './globalStoreSync' + +jest.mock('react-router', () => { + const ReactRouterDOM = jest.requireActual('react-router-dom') + return { + __esModule: true, + ...ReactRouterDOM, + useHistory: jest.fn(), + useLocation: jest.fn(), + } +}) + +describe('useGlobalStoreSync', () => { + let history: History + const mockUseHistory = useHistory as jest.Mock> + const mockUseLocation = useLocation as jest.Mock< + ReturnType + > + + beforeEach(() => { + history = { + push: jest.fn(), + location, + } as unknown as History + mockUseHistory.mockReturnValue(history) + }) + + test('does nothing if uninitialized', () => { + mockUseLocation.mockReturnValue({ + pathname: '/', + search: '', + } as Location) + const wrapper = ({ children }: any) => withReduxProvider(children) + renderHook(() => useGlobalStoreSync(), { wrapper }) + expect(history.push).not.toHaveBeenCalled() + }) + + test('syncs url with local store if it contains past state information', () => { + const store = createTestStore({ + settings: { + initialized: true, + sdkLanguage: 'kt', + searchPattern: 'test', + }, + }) + mockUseLocation.mockReturnValue({ + pathname: '/', + search: '', + } as Location) + const wrapper = ({ children }: any) => withReduxProvider(children, store) + renderHook(() => useGlobalStoreSync(), { wrapper }) + expect(history.push).toHaveBeenCalledWith({ + pathname: '/', + search: 's=test', + }) + expect(history.push).toHaveBeenCalledWith({ + pathname: '/', + search: 'sdk=kt', + }) + }) + + /** + * TODO: test cases + * 1 - url valid params are synced to store + * 2 - invalid url params are corrected + */ + + // const mockDispatch = jest.fn() + // jest.mock('react-redux', () => ({ + // useDispatch: () => mockDispatch, + // })) + // + // test('syncs local store with valid url parameters', () => { + // const store = createTestStore({ + // settings: { + // initialized: true, + // }, + // }) + // mockUseLocation.mockReturnValue({ + // pathname: '/', + // search: 's=test&sdk=kt', + // } as Location) + // const wrapper = ({ children }: any) => withReduxProvider(children, store) + // renderHook(() => useGlobalStoreSync(), { wrapper }) + // }) +}) From 70ae6e2874834202773863d65b33cff2a7d0ea12 Mon Sep 17 00:00:00 2001 From: Niral Patel Date: Mon, 15 Aug 2022 22:00:51 +0000 Subject: [PATCH 13/31] globalSync and tagSync testing included, refactored files --- .../scenes/utils/hooks/tagStoreSync.spec.ts | 77 +++++++- .../src/scenes/utils/hooks/tagStoreSync.ts | 1 + .../src/utils/hooks/globalStoreSync.spec.tsx | 161 +++++++++------ .../src/utils/hooks/globalStoreSync.ts | 7 - yarn.lock | 186 +++++++++++++----- 5 files changed, 312 insertions(+), 120 deletions(-) diff --git a/packages/api-explorer/src/scenes/utils/hooks/tagStoreSync.spec.ts b/packages/api-explorer/src/scenes/utils/hooks/tagStoreSync.spec.ts index fff996052..574c93585 100644 --- a/packages/api-explorer/src/scenes/utils/hooks/tagStoreSync.spec.ts +++ b/packages/api-explorer/src/scenes/utils/hooks/tagStoreSync.spec.ts @@ -23,5 +23,80 @@ SOFTWARE. */ +import { renderHook } from '@testing-library/react-hooks' +import { useHistory } from 'react-router-dom' +import type { Location } from 'history' +import * as reactRedux from 'react-redux' +import * as routerLocation from 'react-router-dom' +import { createTestStore, withReduxProvider } from '../../../test-utils' +import { useTagStoreSync } from './tagStoreSync' -// TODO: testing the hook outside of a component? +jest.mock('react-router', () => { + const ReactRouter = jest.requireActual('react-router') + return { + ...ReactRouter, + useHistory: jest.fn().mockReturnValue({ push: jest.fn(), location }), + useLocation: jest.fn().mockReturnValue({ pathname: '/', search: '' }), + } +}) + +describe('useTagStoreSync', () => { + const mockDispatch = jest.fn() + + afterEach(() => { + jest.clearAllMocks() + }) + + test('does nothing if uninitialized', () => { + const { push } = useHistory() + const wrapper = ({ children }: any) => withReduxProvider(children) + renderHook(() => useTagStoreSync(), { wrapper }) + expect(push).not.toHaveBeenCalled() + }) + + describe.each([ + ['methods', 'get'], + ['types', 'specification'], + ])('tag filter verb for sidenav %s tab', (tagType, verb) => { + test('overrides store tag filter given valid url tag filter param', () => { + const { push } = useHistory() + const store = createTestStore({ + settings: { + initialized: true, + }, + }) + jest.spyOn(routerLocation, 'useLocation').mockReturnValue({ + pathname: `/4.0/${tagType}/ApiAuth`, + search: `v=${verb}`, + } as unknown as Location) + jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(mockDispatch) + const wrapper = ({ children }: any) => withReduxProvider(children, store) + renderHook(() => useTagStoreSync(), { wrapper }) + expect(push).not.toHaveBeenCalled() + expect(mockDispatch).toHaveBeenLastCalledWith({ + payload: { tagFilter: verb.toUpperCase() }, + type: 'settings/setTagFilterAction', + }) + }) + + test('updates url with store tag filter given invalid url tag filter param', () => { + const { push } = useHistory() + const store = createTestStore({ + settings: { + initialized: true, + }, + }) + jest.spyOn(routerLocation, 'useLocation').mockReturnValue({ + pathname: `/4.0/${tagType}/ApiAuth`, + search: 'v=invalid', + } as unknown as Location) + jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(mockDispatch) + const wrapper = ({ children }: any) => withReduxProvider(children, store) + renderHook(() => useTagStoreSync(), { wrapper }) + expect(push).toHaveBeenCalledWith({ + pathname: `/4.0/${tagType}/ApiAuth`, + search: '', + }) + }) + }) +}) diff --git a/packages/api-explorer/src/scenes/utils/hooks/tagStoreSync.ts b/packages/api-explorer/src/scenes/utils/hooks/tagStoreSync.ts index d2f42657c..39ee1b030 100644 --- a/packages/api-explorer/src/scenes/utils/hooks/tagStoreSync.ts +++ b/packages/api-explorer/src/scenes/utils/hooks/tagStoreSync.ts @@ -55,6 +55,7 @@ export const useTagStoreSync = () => { if (validVerbParam) { setTagFilterAction({ tagFilter: verbParam.toUpperCase() }) } else { + // must confirm store tag filter param is valid for tag type before updating const verb = isValidFilter(location, selectedTagFilter) ? selectedTagFilter : 'ALL' diff --git a/packages/api-explorer/src/utils/hooks/globalStoreSync.spec.tsx b/packages/api-explorer/src/utils/hooks/globalStoreSync.spec.tsx index c297596c1..3ee78d6fc 100644 --- a/packages/api-explorer/src/utils/hooks/globalStoreSync.spec.tsx +++ b/packages/api-explorer/src/utils/hooks/globalStoreSync.spec.tsx @@ -24,92 +24,123 @@ */ import { renderHook } from '@testing-library/react-hooks' -import { useHistory, useLocation } from 'react-router-dom' -import type { Location, History } from 'history' +import { useHistory } from 'react-router-dom' +import type { Location } from 'history' +import * as reactRedux from 'react-redux' +import * as routerLocation from 'react-router-dom' import { createTestStore, withReduxProvider } from '../../test-utils' import { useGlobalStoreSync } from './globalStoreSync' jest.mock('react-router', () => { const ReactRouterDOM = jest.requireActual('react-router-dom') return { - __esModule: true, ...ReactRouterDOM, - useHistory: jest.fn(), - useLocation: jest.fn(), + useHistory: jest.fn().mockReturnValue({ push: jest.fn(), location }), + useLocation: jest.fn().mockReturnValue({ pathname: '/', search: '' }), } }) describe('useGlobalStoreSync', () => { - let history: History - const mockUseHistory = useHistory as jest.Mock> - const mockUseLocation = useLocation as jest.Mock< - ReturnType - > + const mockDispatch = jest.fn() - beforeEach(() => { - history = { - push: jest.fn(), - location, - } as unknown as History - mockUseHistory.mockReturnValue(history) + afterEach(() => { + jest.clearAllMocks() }) test('does nothing if uninitialized', () => { - mockUseLocation.mockReturnValue({ - pathname: '/', - search: '', - } as Location) + const { push } = useHistory() const wrapper = ({ children }: any) => withReduxProvider(children) renderHook(() => useGlobalStoreSync(), { wrapper }) - expect(history.push).not.toHaveBeenCalled() + expect(push).not.toHaveBeenCalled() }) - test('syncs url with local store if it contains past state information', () => { - const store = createTestStore({ - settings: { - initialized: true, - sdkLanguage: 'kt', - searchPattern: 'test', - }, - }) - mockUseLocation.mockReturnValue({ - pathname: '/', - search: '', - } as Location) - const wrapper = ({ children }: any) => withReduxProvider(children, store) - renderHook(() => useGlobalStoreSync(), { wrapper }) - expect(history.push).toHaveBeenCalledWith({ - pathname: '/', - search: 's=test', - }) - expect(history.push).toHaveBeenCalledWith({ - pathname: '/', - search: 'sdk=kt', + describe('search', () => { + test('updates store search pattern with url search pattern if present', () => { + const { push } = useHistory() + const store = createTestStore({ + settings: { + initialized: true, + }, + }) + jest.spyOn(routerLocation, 'useLocation').mockReturnValue({ + pathname: '/', + search: `s=patternFromUrl`, + } as unknown as Location) + jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(mockDispatch) + const wrapper = ({ children }: any) => withReduxProvider(children, store) + renderHook(() => useGlobalStoreSync(), { wrapper }) + expect(mockDispatch).toHaveBeenCalledWith({ + payload: { searchPattern: 'patternFromUrl' }, + type: 'settings/setSearchPatternAction', + }) + expect(push).toHaveBeenCalledWith({ pathname: '/', search: 'sdk=py' }) }) }) - /** - * TODO: test cases - * 1 - url valid params are synced to store - * 2 - invalid url params are corrected - */ + describe('sdk', () => { + test('syncs url sdk param with sdk in store', () => { + const { push } = useHistory() + const store = createTestStore({ + settings: { + initialized: true, + sdkLanguage: 'Kotlin', + }, + }) + const wrapper = ({ children }: any) => withReduxProvider(children, store) + renderHook(() => useGlobalStoreSync(), { wrapper }) + expect(push).toHaveBeenCalledWith({ + pathname: '/', + search: 'sdk=kt', + }) + }) - // const mockDispatch = jest.fn() - // jest.mock('react-redux', () => ({ - // useDispatch: () => mockDispatch, - // })) - // - // test('syncs local store with valid url parameters', () => { - // const store = createTestStore({ - // settings: { - // initialized: true, - // }, - // }) - // mockUseLocation.mockReturnValue({ - // pathname: '/', - // search: 's=test&sdk=kt', - // } as Location) - // const wrapper = ({ children }: any) => withReduxProvider(children, store) - // renderHook(() => useGlobalStoreSync(), { wrapper }) - // }) + test.each([ + ['alias', 'kt'], + ['language', 'kotlin'], + ])( + 'overrides store with sdk full name given valid url sdk %s', + (_, param) => { + const { push } = useHistory() + const store = createTestStore({ + settings: { + initialized: true, + }, + }) + jest.spyOn(routerLocation, 'useLocation').mockReturnValue({ + pathname: '/', + search: `sdk=${param}`, + } as unknown as Location) + jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(mockDispatch) + const wrapper = ({ children }: any) => + withReduxProvider(children, store) + renderHook(() => useGlobalStoreSync(), { wrapper }) + expect(push).not.toHaveBeenCalled() + expect(mockDispatch).toHaveBeenLastCalledWith({ + payload: { sdkLanguage: 'Kotlin' }, + type: 'settings/setSdkLanguageAction', + }) + } + ) + + test('updates url sdk param with store sdk for invalid url sdk param', () => { + const { push } = useHistory() + const store = createTestStore({ + settings: { + initialized: true, + }, + }) + jest.spyOn(routerLocation, 'useLocation').mockReturnValue({ + pathname: '/', + search: `sdk=invalid`, + } as unknown as Location) + jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(mockDispatch) + const wrapper = ({ children }: any) => withReduxProvider(children, store) + renderHook(() => useGlobalStoreSync(), { wrapper }) + expect(mockDispatch).not.toHaveBeenCalled() + expect(push).toHaveBeenCalledWith({ + pathname: '/', + search: `sdk=py`, + }) + }) + }) }) diff --git a/packages/api-explorer/src/utils/hooks/globalStoreSync.ts b/packages/api-explorer/src/utils/hooks/globalStoreSync.ts index cc8f373a3..ab2112df0 100644 --- a/packages/api-explorer/src/utils/hooks/globalStoreSync.ts +++ b/packages/api-explorer/src/utils/hooks/globalStoreSync.ts @@ -29,7 +29,6 @@ import { useSelector } from 'react-redux' import { allAlias, findSdk, useNavigation } from '../index' import { selectSdkLanguage, - selectSearchPattern, useSettingActions, useSettingStoreState, } from '../../state' @@ -38,14 +37,12 @@ import { * Hook for syncing global URL params with the Redux store * Global search parameters: 's', 'sdk' */ - export const useGlobalStoreSync = () => { const location = useLocation() const { navigate } = useNavigation() const { setSdkLanguageAction, setSearchPatternAction } = useSettingActions() const { initialized } = useSettingStoreState() const selectedSdkLanguage = useSelector(selectSdkLanguage) - const selectedSearchPattern = useSelector(selectSearchPattern) useEffect(() => { if (initialized) { @@ -57,10 +54,6 @@ export const useGlobalStoreSync = () => { setSearchPatternAction({ searchPattern: searchParam, }) - } else { - navigate(location.pathname, { - s: selectedSearchPattern || null, - }) } // syncing SDK language selection diff --git a/yarn.lock b/yarn.lock index bca1e1f2f..3efc32fb7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2912,6 +2912,14 @@ "@types/react-test-renderer" ">=16.9.0" react-error-boundary "^3.1.0" +"@testing-library/react-hooks@^8.0.1": + version "8.0.1" + resolved "https://registry.yarnpkg.com/@testing-library/react-hooks/-/react-hooks-8.0.1.tgz#0924bbd5b55e0c0c0502d1754657ada66947ca12" + integrity sha512-Aqhl2IVmLt8IovEVarNDFuJDVWVvhnr9/GCU6UUnrYXwgDFF9h2L2o2P9KBni1AST5sT6riAyoukFLyjQUgD/g== + dependencies: + "@babel/runtime" "^7.12.5" + react-error-boundary "^3.1.0" + "@testing-library/react@^11.2.2": version "11.2.5" resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-11.2.5.tgz#ae1c36a66c7790ddb6662c416c27863d87818eb9" @@ -3847,11 +3855,27 @@ ansi-escapes@^4.2.1, ansi-escapes@^4.3.0: dependencies: type-fest "^0.11.0" -ansi-html@0.0.7, "ansi-html@https://registry.yarnpkg.com/ansi-html-community/-/ansi-html-community-0.0.8.tgz#69fbc4d6ccbe383f9736934ae34c3f8290f1bf41": - version "0.0.8" - resolved "https://registry.yarnpkg.com/ansi-html-community/-/ansi-html-community-0.0.8.tgz#69fbc4d6ccbe383f9736934ae34c3f8290f1bf41" +ansi-html@0.0.7: + version "0.0.7" + resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.7.tgz#813584021962a9e9e6fd039f940d12f56ca7859e" + integrity sha512-JoAxEa1DfP9m2xfB/y2r/aKcwXNlltr4+0QSBC4TrLfcxyvepX2Pv0t/xpgGV5bGsDzCYV8SzjWgyCW0T9yYbA== -ansi-regex@5.0.1, ansi-regex@^2.0.0, ansi-regex@^3.0.0, ansi-regex@^4.1.0, ansi-regex@^5.0.0, ansi-regex@^5.0.1: +ansi-regex@^2.0.0: + version "2.1.1" + resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df" + integrity sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA== + +ansi-regex@^3.0.0: + version "3.0.1" + resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.1.tgz#123d6479e92ad45ad897d4054e3c7ca7db4944e1" + integrity sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw== + +ansi-regex@^4.1.0: + version "4.1.1" + resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.1.1.tgz#164daac87ab2d6f6db3a29875e2d1766582dabed" + integrity sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g== + +ansi-regex@^5.0.0, ansi-regex@^5.0.1: version "5.0.1" resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304" integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ== @@ -4091,6 +4115,11 @@ async-each@^1.0.1: resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.3.tgz#b727dbf87d7651602f06f4d4ac387f47d91b0cbf" integrity sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ== +async-limiter@~1.0.0: + version "1.0.1" + resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd" + integrity sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ== + async@^2.6.2: version "2.6.4" resolved "https://registry.yarnpkg.com/async/-/async-2.6.4.tgz#706b7ff6084664cd7eae713f6f965433b5504221" @@ -4128,7 +4157,14 @@ aws4@^1.8.0: resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59" integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA== -axios@0.21.1, axios@0.21.2, axios@^0.21.1: +axios@0.21.1: + version "0.21.1" + resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.1.tgz#22563481962f4d6bde9a76d516ef0e5d3c09b2b8" + integrity sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA== + dependencies: + follow-redirects "^1.10.0" + +axios@^0.21.1: version "0.21.2" resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.2.tgz#21297d5084b2aeeb422f5d38e7be4fbb82239017" integrity sha512-87otirqUw3e8CzHTMO+/9kh/FSgXt/eVDvipijwDtEuwbkySWZ9SBm6VEubmJ/kLKEoLQV/POhxXFb66bfekfg== @@ -5504,10 +5540,10 @@ css-to-react-native@^3.0.0: css-color-keywords "^1.0.0" postcss-value-parser "^4.0.2" -"css-what@>= 5.0.1", css-what@^4.0.0: - version "6.0.1" - resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.0.1.tgz#3be33be55b9f302f710ba3a9c3abc1e2a63fc7eb" - integrity sha512-z93ZGFLNc6yaoXAmVhqoSIb+BduplteCt1fepvwhBUQK6MNE4g6fgjpuZKJKp0esUe+vXWlIkwZZjNWoOKw0ZA== +css-what@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/css-what/-/css-what-4.0.0.tgz#35e73761cab2eeb3d3661126b23d7aa0e8432233" + integrity sha512-teijzG7kwYfNVsUh2H/YN62xW3KK9YhXEgSlbxMlcyjPNvdKJqFx5lrwlJgoFP1ZHlB89iGDlo/JyshKeRhv5A== css.escape@^1.5.1: version "1.5.1" @@ -7163,11 +7199,16 @@ flush-write-stream@^1.0.0: inherits "^2.0.3" readable-stream "^2.3.6" -follow-redirects@1.14.8, follow-redirects@^1.0.0, follow-redirects@^1.14.0: +follow-redirects@^1.0.0, follow-redirects@^1.14.0: version "1.14.8" resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.8.tgz#016996fb9a11a100566398b1c6839337d7bfa8fc" integrity sha512-1x0S9UVJHsQprFcEC/qnNzBLcIxsjAV905f/UkQxbclCsoTWlacCNOpQa/anodLl2uaEKFhfWOvM2Qg77+15zA== +follow-redirects@^1.10.0: + version "1.15.1" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.1.tgz#0ca6a452306c9b276e4d3127483e29575e207ad5" + integrity sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA== + for-in@^0.1.3: version "0.1.8" resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1" @@ -7512,12 +7553,20 @@ gitconfiglocal@^1.0.0: dependencies: ini "^1.3.2" -"glob-parent@>= 5.1.2", glob-parent@^3.1.0, glob-parent@^5.0.0, glob-parent@^5.1.2, glob-parent@~5.1.0: - version "6.0.2" - resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3" - integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A== +glob-parent@^3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-3.1.0.tgz#9e6af6299d8d3bd2bd40430832bd113df906c5ae" + integrity sha512-E8Ak/2+dZY6fnzlR7+ueWvhsH1SjHr4jjss4YS/h4py44jY9MhK/VFdaZJAWDz6BbL21KeteKxFSFpq8OS5gVA== + dependencies: + is-glob "^3.1.0" + path-dirname "^1.0.0" + +glob-parent@^5.0.0, glob-parent@^5.1.2, glob-parent@~5.1.0: + version "5.1.2" + resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4" + integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow== dependencies: - is-glob "^4.0.3" + is-glob "^4.0.1" glob-to-regexp@^0.3.0: version "0.3.0" @@ -8533,7 +8582,7 @@ is-extendable@^1.0.1: dependencies: is-plain-object "^2.0.4" -is-extglob@^2.1.1: +is-extglob@^2.1.0, is-extglob@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2" integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI= @@ -8565,7 +8614,14 @@ is-generator-fn@^2.0.0: resolved "https://registry.yarnpkg.com/is-generator-fn/-/is-generator-fn-2.1.0.tgz#7d140adc389aaf3011a8f2a2a4cfa6faadffb118" integrity sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ== -is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1: +is-glob@^3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-3.1.0.tgz#7ba5ae24217804ac70707b96922567486cc3e84a" + integrity sha512-UFpDDrPgM6qpnFNI+rh/p3bUaq9hKLZN8bMUWzxmcnZVS3omf4IPK+BrewlnWjO1WmUsMYuSjKh4UJuV4+Lqmw== + dependencies: + is-extglob "^2.1.0" + +is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1: version "4.0.3" resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084" integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg== @@ -9744,10 +9800,10 @@ json-schema-traverse@^1.0.0: resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz#ae7bcb3656ab77a73ba5c49bf654f38e6b6860e2" integrity sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug== -json-schema@0.2.3, json-schema@0.4.0: - version "0.4.0" - resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.4.0.tgz#f7de4cf6efab838ebaeb3236474cbba5a1930ab5" - integrity sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA== +json-schema@0.2.3: + version "0.2.3" + resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13" + integrity sha512-a3xHnILGMtk+hDOqNwHzF6e2fNbiMrXZvxKQiEv2MlgQP+pjIOzqAmKYD2mDpXYE/44M7g+n9p2bKkYWDUcXCQ== json-stable-stringify-without-jsonify@^1.0.1: version "1.0.1" @@ -10858,11 +10914,6 @@ nan@^2.12.1: resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.2.tgz#f5376400695168f4cc694ac9393d0c9585eeea19" integrity sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ== -nanoid@^3.1.22: - version "3.3.1" - resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.1.tgz#6347a18cac88af88f58af0b3594b723d5e99bb35" - integrity sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw== - nanomatch@^1.2.9: version "1.2.13" resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119" @@ -10926,14 +10977,24 @@ node-fetch-npm@^2.0.2: json-parse-better-errors "^1.0.0" safe-buffer "^5.1.1" -node-fetch@2.6.1, node-fetch@2.6.7, node-fetch@^2.3.0, node-fetch@^2.5.0, node-fetch@^2.6.1, node-fetch@^2.6.7: +node-fetch@2.6.1: + version "2.6.1" + resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052" + integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw== + +node-fetch@^2.3.0, node-fetch@^2.5.0, node-fetch@^2.6.1, node-fetch@^2.6.7: version "2.6.7" resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.7.tgz#24de9fba827e3b4ae44dc8b20256a379160052ad" integrity sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ== dependencies: whatwg-url "^5.0.0" -node-forge@1.0.0, node-forge@^0.10.0, node-forge@^1.0.0: +node-forge@^0.10.0: + version "0.10.0" + resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.10.0.tgz#32dea2afb3e9926f02ee5ce8794902691a676bf3" + integrity sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA== + +node-forge@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-1.0.0.tgz#a025e3beeeb90d9cee37dae34d25b968ec3e6f15" integrity sha512-ShkiiAlzSsgH1IwGlA0jybk9vQTIOLyJ9nBd0JTuP+nzADJFLY0NoDijM2zvD/JaezooGu3G2p2FNxOAK6459g== @@ -11652,6 +11713,11 @@ path-browserify@^1.0.1: resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-1.0.1.tgz#d98454a9c3753d5790860f16f68867b9e46be1fd" integrity sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g== +path-dirname@^1.0.0: + version "1.0.2" + resolved "https://registry.yarnpkg.com/path-dirname/-/path-dirname-1.0.2.tgz#cc33d24d525e099a5388c0336c6e32b9160609e0" + integrity sha512-ALzNPpyNq9AqXMBjeymIjFDAkAFH06mHJH/cSBHAgU0s4vfpBn6b2nf8tiRLvagKD8RbTpq2FKTBg7cl9l3c7Q== + path-exists@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-2.1.0.tgz#0feb6c64f0fc518d9a754dd5efb62c7022761f4b" @@ -11742,6 +11808,11 @@ performance-now@^2.1.0: resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b" integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns= +picocolors@^0.2.1: + version "0.2.1" + resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-0.2.1.tgz#570670f793646851d1ba135996962abad587859f" + integrity sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA== + picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3: version "2.3.0" resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972" @@ -11895,13 +11966,12 @@ postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0: resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb" integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ== -postcss@8.2.13, postcss@^7.0.14, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.6: - version "8.2.13" - resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.2.13.tgz#dbe043e26e3c068e45113b1ed6375d2d37e2129f" - integrity sha512-FCE5xLH+hjbzRdpbRb1IMCvPv9yZx2QnDarBEYSN0N0HYk+TcXsEhwdFcFb+SRWOKzKGErhIEbBK2ogyLdTtfQ== +postcss@^7.0.14, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.6: + version "7.0.39" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.39.tgz#9624375d965630e2e1f2c02a935c82a59cb48309" + integrity sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA== dependencies: - colorette "^1.2.2" - nanoid "^3.1.22" + picocolors "^0.2.1" source-map "^0.6.1" pre-commit@1.2.2: @@ -14436,10 +14506,20 @@ tree-kill@^1.2.2: resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.2.tgz#4ca09a9092c88b73a7cdc5e8a01b507b0790a0cc" integrity sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A== -"trim-newlines@>= 3.0.1", trim-newlines@^1.0.0, trim-newlines@^2.0.0, trim-newlines@^3.0.0: - version "4.0.2" - resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-4.0.2.tgz#d6aaaf6a0df1b4b536d183879a6b939489808c7c" - integrity sha512-GJtWyq9InR/2HRiLZgpIKv+ufIKrVrvjQWEj7PxAXNc5dwbNJkqhAUoAGgzRmULAnoOM5EIpveYd3J2VeSAIew== +trim-newlines@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613" + integrity sha512-Nm4cF79FhSTzrLKGDMi3I4utBtFv8qKy4sq1enftf2gMdpqI8oVQTAfySkTz5r49giVzDj88SVZXP4CeYQwjaw== + +trim-newlines@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-2.0.0.tgz#b403d0b91be50c331dfc4b82eeceb22c3de16d20" + integrity sha512-MTBWv3jhVjTU7XR3IQHllbiJs8sc75a80OEhB6or/q7pLTWgQ0bMGQXXYQSrSuXe6WiKWDZ5txXY5P59a/coVA== + +trim-newlines@^3.0.0: + version "3.0.1" + resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-3.0.1.tgz#260a5d962d8b752425b32f3a7db0dcacd176c144" + integrity sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw== trim-off-newlines@^1.0.0: version "1.0.3" @@ -14451,10 +14531,10 @@ trim-trailing-lines@^1.0.0: resolved "https://registry.yarnpkg.com/trim-trailing-lines/-/trim-trailing-lines-1.1.4.tgz#bd4abbec7cc880462f10b2c8b5ce1d8d1ec7c2c0" integrity sha512-rjUWSqnfTNrjbB9NQWfPMH/xRK1deHeGsHoVfpxJ++XeYXE0d6B1En37AHfw3jtfTU7dzMzZL2jjpe8Qb5gLIQ== -trim@0.0.1, "trim@>= 0.0.3": - version "1.0.1" - resolved "https://registry.yarnpkg.com/trim/-/trim-1.0.1.tgz#68e78f6178ccab9687a610752f4f5e5a7022ee8c" - integrity sha512-3JVP2YVqITUisXblCDq/Bi4P9457G/sdEamInkyvCsjbTcXLXIiG7XCb4kGMFWh6JGXesS3TKxOPtrncN/xe8w== +trim@0.0.1: + version "0.0.1" + resolved "https://registry.yarnpkg.com/trim/-/trim-0.0.1.tgz#5858547f6b290757ee95cccc666fb50084c460dd" + integrity sha512-YzQV+TZg4AxpKxaTHK3c3D+kRDCGVEE7LemdlQZoQXn0iennk10RsIoY6ikzAqJTc9Xjl9C1/waHom/J86ziAQ== trough@^1.0.0: version "1.0.5" @@ -14874,7 +14954,7 @@ url-loader@^4.1.1: mime-types "^2.1.27" schema-utils "^3.0.0" -"url-parse@>= 1.5.7", url-parse@^1.4.7: +url-parse@^1.4.7: version "1.5.10" resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.10.tgz#9d3c2f736c1d75dd3bd2be507dcc111f1e2ea9c1" integrity sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ== @@ -15451,10 +15531,22 @@ write-pkg@^3.1.0: sort-keys "^2.0.0" write-json-file "^2.2.0" -ws@7.4.6, "ws@>= 7.4.6", ws@^6.2.1, ws@^7.0.0, ws@^7.3.1, ws@^7.4.6: - version "8.5.0" - resolved "https://registry.yarnpkg.com/ws/-/ws-8.5.0.tgz#bfb4be96600757fe5382de12c670dab984a1ed4f" - integrity sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg== +ws@7.4.6: + version "7.4.6" + resolved "https://registry.yarnpkg.com/ws/-/ws-7.4.6.tgz#5654ca8ecdeee47c33a9a4bf6d28e2be2980377c" + integrity sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A== + +ws@^6.2.1: + version "6.2.2" + resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.2.tgz#dd5cdbd57a9979916097652d78f1cc5faea0c32e" + integrity sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw== + dependencies: + async-limiter "~1.0.0" + +ws@^7.0.0, ws@^7.3.1, ws@^7.4.6: + version "7.5.9" + resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.9.tgz#54fa7db29f4c7cec68b1ddd3a89de099942bb591" + integrity sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q== xml-name-validator@^3.0.0: version "3.0.0" From 376e21b3fa766de8129cf618ebe269a03f7b26c5 Mon Sep 17 00:00:00 2001 From: Niral Patel Date: Mon, 15 Aug 2022 22:57:28 +0000 Subject: [PATCH 14/31] Clean up per Jax comments --- .../scenes/MethodTagScene/MethodTagScene.tsx | 2 +- .../src/scenes/TypeTagScene/TypeTagScene.tsx | 2 +- .../src/scenes/utils/hooks/tagStoreSync.ts | 4 +- .../src/utils/hooks/navigation.ts | 47 ++----------------- packages/api-explorer/src/utils/path.spec.ts | 24 +++++----- packages/api-explorer/src/utils/path.ts | 21 ++++----- 6 files changed, 30 insertions(+), 70 deletions(-) diff --git a/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.tsx b/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.tsx index 3d883a1ef..44663d3ec 100644 --- a/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.tsx +++ b/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.tsx @@ -63,7 +63,7 @@ export const MethodTagScene: FC = ({ api }) => { useEffect(() => { const searchParams = new URLSearchParams(location.search) let verbParam = searchParams.get('v') || 'ALL' - verbParam = isValidFilter(location, verbParam) + verbParam = isValidFilter(location.pathname, verbParam) ? verbParam.toUpperCase() : 'ALL' setTagFilterAction({ diff --git a/packages/api-explorer/src/scenes/TypeTagScene/TypeTagScene.tsx b/packages/api-explorer/src/scenes/TypeTagScene/TypeTagScene.tsx index b7c58244f..f0d0d4a34 100644 --- a/packages/api-explorer/src/scenes/TypeTagScene/TypeTagScene.tsx +++ b/packages/api-explorer/src/scenes/TypeTagScene/TypeTagScene.tsx @@ -61,7 +61,7 @@ export const TypeTagScene: FC = ({ api }) => { useEffect(() => { const searchParams = new URLSearchParams(location.search) let verbParam = searchParams.get('v') || 'ALL' - verbParam = isValidFilter(location, verbParam) + verbParam = isValidFilter(location.pathname, verbParam) ? verbParam.toUpperCase() : 'ALL' setTagFilterAction({ diff --git a/packages/api-explorer/src/scenes/utils/hooks/tagStoreSync.ts b/packages/api-explorer/src/scenes/utils/hooks/tagStoreSync.ts index 39ee1b030..c87fdda88 100644 --- a/packages/api-explorer/src/scenes/utils/hooks/tagStoreSync.ts +++ b/packages/api-explorer/src/scenes/utils/hooks/tagStoreSync.ts @@ -51,12 +51,12 @@ export const useTagStoreSync = () => { // syncing verb filter on tag scene page const verbParam = params.get('v') || 'ALL' - const validVerbParam = isValidFilter(location, verbParam) + const validVerbParam = isValidFilter(location.pathname, verbParam) if (validVerbParam) { setTagFilterAction({ tagFilter: verbParam.toUpperCase() }) } else { // must confirm store tag filter param is valid for tag type before updating - const verb = isValidFilter(location, selectedTagFilter) + const verb = isValidFilter(location.pathname, selectedTagFilter) ? selectedTagFilter : 'ALL' navigate(location.pathname, { diff --git a/packages/api-explorer/src/utils/hooks/navigation.ts b/packages/api-explorer/src/utils/hooks/navigation.ts index 8ae57c69e..a467ab7ec 100644 --- a/packages/api-explorer/src/utils/hooks/navigation.ts +++ b/packages/api-explorer/src/utils/hooks/navigation.ts @@ -37,7 +37,6 @@ interface QueryParamProps { /** * Hook for navigating to given route with query params */ - export const useNavigation = () => { const history = useHistory() @@ -75,7 +74,7 @@ export const useNavigation = () => { * @param path the destination path * @returns a path excluding scene-specific search parameters */ - const buildPathWithGlobal = (path: string) => { + const buildPathWithGlobalParams = (path: string) => { const params = new URLSearchParams(history.location.search) params.delete('v') return `${path}?${params.toString()}` @@ -86,49 +85,13 @@ export const useNavigation = () => { * * @param path Pathname to navigate to */ - const navigateWithGlobal = (path: string) => { - history.push(buildPathWithGlobal(path)) + const navigateWithGlobalParams = (path: string) => { + history.push(buildPathWithGlobalParams(path)) } - // TODO: Discuss proposition of using buildGlobalPath/navigateWithGlobal, - // leaves reconciliation step to do the URL fixing - // /** - // * Builds a path matching the route used by MethodScene - // * @param specKey A string to identify the spec in the URL - // * @param tag Corresponding method tag - // * @param methodName A method name - // * @returns a Method path with filtered search parameters - // */ - // const buildMethodScenePath = ( - // specKey: string, - // tag: string, - // methodName: string - // ) => { - // const params = new URLSearchParams(location.search) - // params.delete('v') - // return `/${specKey}/methods/${tag}/${methodName}${params.toString()}` - // } - // - // /** - // * Builds a path matching the route used by TypeScene - // * @param specKey A string to identify the spec in the URL - // * @param tag Corresponding type tag - // * @param typeName A type name - // * @returns a Type path with filtered search parameters - // */ - // const buildTypeScenePath = ( - // specKey: string, - // tag: string, - // typeName: string - // ) => { - // const params = new URLSearchParams(location.search) - // params.delete('v') - // return `/${specKey}/types/${tag}/${typeName}${params.toString()}` - // } - return { navigate, - navigateWithGlobal, - buildPathWithGlobal, + navigateWithGlobal: navigateWithGlobalParams, + buildPathWithGlobal: buildPathWithGlobalParams, } } diff --git a/packages/api-explorer/src/utils/path.spec.ts b/packages/api-explorer/src/utils/path.spec.ts index 70e4678e7..db50f2b40 100644 --- a/packages/api-explorer/src/utils/path.spec.ts +++ b/packages/api-explorer/src/utils/path.spec.ts @@ -95,14 +95,12 @@ describe('path utils', () => { }) describe('isValidFilter', () => { - const methodLocation = { - pathname: '/3.1/methods/RandomMethod', - } as Location - const typeLocation = { pathname: '/3.1/types/RandomType' } as Location + const methodPath = '/3.1/methods/RandomMethod' + const typePath = '/3.1/types/RandomType' test("validates 'all' as a valid filter for methods and types", () => { - expect(isValidFilter(methodLocation, 'ALL')).toBe(true) - expect(isValidFilter(typeLocation, 'ALL')).toBe(true) + expect(isValidFilter(methodPath, 'ALL')).toBe(true) + expect(isValidFilter(typePath, 'ALL')).toBe(true) }) const methodFilters = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'] @@ -111,35 +109,35 @@ describe('path utils', () => { test.each(methodFilters)( 'validates %s as a valid method filter', (filter) => { - expect(isValidFilter(methodLocation, filter)).toBe(true) + expect(isValidFilter(methodPath, filter)).toBe(true) } ) test.each(methodFilters)( 'invalidates %s when containing extra characters', (filter) => { - expect(isValidFilter(methodLocation, filter + 'x')).toBe(false) + expect(isValidFilter(methodPath, filter + 'x')).toBe(false) } ) test.each(typeFilters)('validates %s as a valid type filter', (filter) => { - expect(isValidFilter(typeLocation, filter)).toBe(true) + expect(isValidFilter(typePath, filter)).toBe(true) }) test.each(typeFilters)( 'invalidates %s when containing extra characters', (filter) => { - expect(isValidFilter(typeLocation, filter + 'x')).toBe(false) + expect(isValidFilter(typePath, filter + 'x')).toBe(false) } ) test('invalidates wrong parameter for methods and types', () => { - expect(isValidFilter(methodLocation, 'INVALID')).toBe(false) - expect(isValidFilter(typeLocation, 'INVALID')).toBe(false) + expect(isValidFilter(methodPath, 'INVALID')).toBe(false) + expect(isValidFilter(typePath, 'INVALID')).toBe(false) }) test.each(typeFilters)('validates %s as a valid type filter', (filter) => { - expect(isValidFilter(typeLocation, filter)).toBe(true) + expect(isValidFilter(typePath, filter)).toBe(true) }) }) }) diff --git a/packages/api-explorer/src/utils/path.ts b/packages/api-explorer/src/utils/path.ts index 215dba965..f50633cd9 100644 --- a/packages/api-explorer/src/utils/path.ts +++ b/packages/api-explorer/src/utils/path.ts @@ -146,21 +146,20 @@ export const getSceneType = (path: string) => { } /** - * Confirms if filter is valid for the page scene type - * @param location browser location + * Confirms if filter is valid for a given method/type tag + * @param path browser location pathname * @param filter filter tag for page */ -export const isValidFilter = ( - location: HLocation | Location, - filter: string -) => { - const sceneType = getSceneType(location.pathname) - if (!sceneType) return false +export const isValidFilter = (path: string, filter: string) => { + let isValid + const sceneType = getSceneType(path) + if (!sceneType) isValid = false else if (!filter.localeCompare('all', 'en', { sensitivity: 'base' })) - return true + isValid = true else if (sceneType === 'methods') { - return methodFilterOptions.test(filter) + isValid = methodFilterOptions.test(filter) } else { - return typeFilterOptions.test(filter) + isValid = typeFilterOptions.test(filter) } + return isValid } From e1e4c0a3cbae282e62b7a175a7f2c0b5536b4863 Mon Sep 17 00:00:00 2001 From: Niral Patel Date: Mon, 15 Aug 2022 23:34:11 +0000 Subject: [PATCH 15/31] Fix navigation hook function naming --- .../src/components/SelectorContainer/SelectorContainer.tsx | 4 ++-- packages/api-explorer/src/components/SideNav/SideNav.tsx | 6 +++--- .../api-explorer/src/components/SideNav/SideNavMethods.tsx | 4 ++-- .../api-explorer/src/components/SideNav/SideNavTypes.tsx | 6 ++++-- .../src/scenes/MethodTagScene/MethodTagScene.tsx | 7 ++++--- .../api-explorer/src/scenes/TypeTagScene/TypeTagScene.tsx | 7 ++++--- packages/api-explorer/src/utils/hooks/navigation.spec.ts | 7 ++++--- packages/api-explorer/src/utils/hooks/navigation.ts | 4 ++-- 8 files changed, 25 insertions(+), 20 deletions(-) diff --git a/packages/api-explorer/src/components/SelectorContainer/SelectorContainer.tsx b/packages/api-explorer/src/components/SelectorContainer/SelectorContainer.tsx index ae8edc923..b627fdf68 100644 --- a/packages/api-explorer/src/components/SelectorContainer/SelectorContainer.tsx +++ b/packages/api-explorer/src/components/SelectorContainer/SelectorContainer.tsx @@ -50,12 +50,12 @@ export const SelectorContainer: FC = ({ spec, ...spaceProps }) => { - const { buildPathWithGlobal } = useNavigation() + const { buildPathWithGlobalParams } = useNavigation() return ( - + = ({ headless = false, spec }) => { const location = useLocation() - const { navigate, navigateWithGlobal } = useNavigation() + const { navigate, navigateWithGlobalParams } = useNavigation() const specKey = spec.key const tabNames = ['methods', 'types'] const pathParts = location.pathname.split('/') @@ -84,12 +84,12 @@ export const SideNav: FC = ({ headless = false, spec }) => { if (parts[1] === 'diff') { if (parts[3] !== tabNames[index]) { parts[3] = tabNames[index] - navigateWithGlobal(parts.join('/')) + navigateWithGlobalParams(parts.join('/')) } } else { if (parts[2] !== tabNames[index]) { parts[2] = tabNames[index] - navigateWithGlobal(parts.join('/')) + navigateWithGlobalParams(parts.join('/')) } } } diff --git a/packages/api-explorer/src/components/SideNav/SideNavMethods.tsx b/packages/api-explorer/src/components/SideNav/SideNavMethods.tsx index 918d87431..2de29c50f 100644 --- a/packages/api-explorer/src/components/SideNav/SideNavMethods.tsx +++ b/packages/api-explorer/src/components/SideNav/SideNavMethods.tsx @@ -44,7 +44,7 @@ interface MethodsProps { export const SideNavMethods = styled( ({ className, methods, tag, specKey, defaultOpen = false }: MethodsProps) => { - const { navigate, buildPathWithGlobal } = useNavigation() + const { navigate, buildPathWithGlobalParams } = useNavigation() const searchPattern = useSelector(selectSearchPattern) const match = useRouteMatch<{ methodTag: string }>( `/:specKey/methods/:methodTag/:methodName?` @@ -83,7 +83,7 @@ export const SideNavMethods = styled( {Object.values(methods).map((method) => (
  • diff --git a/packages/api-explorer/src/components/SideNav/SideNavTypes.tsx b/packages/api-explorer/src/components/SideNav/SideNavTypes.tsx index 702f29fd1..8f5dd0459 100644 --- a/packages/api-explorer/src/components/SideNav/SideNavTypes.tsx +++ b/packages/api-explorer/src/components/SideNav/SideNavTypes.tsx @@ -44,7 +44,7 @@ interface TypesProps { export const SideNavTypes = styled( ({ className, types, tag, specKey, defaultOpen = false }: TypesProps) => { - const { navigate, buildPathWithGlobal } = useNavigation() + const { navigate, buildPathWithGlobalParams } = useNavigation() const searchPattern = useSelector(selectSearchPattern) const match = useRouteMatch<{ typeTag: string }>( `/:specKey/types/:typeTag/:typeName?` @@ -83,7 +83,9 @@ export const SideNavTypes = styled( {Object.values(types).map((type) => (
  • {highlightHTML(searchPattern, type.name)} diff --git a/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.tsx b/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.tsx index 44663d3ec..22e9d8d16 100644 --- a/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.tsx +++ b/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.tsx @@ -48,7 +48,8 @@ export const MethodTagScene: FC = ({ api }) => { const { specKey, methodTag } = useParams() const history = useHistory() const methods = api.tags[methodTag] - const { navigate, buildPathWithGlobal, navigateWithGlobal } = useNavigation() + const { navigate, buildPathWithGlobalParams, navigateWithGlobalParams } = + useNavigation() const selectedTagFilter = useSelector(selectTagFilter) const { setTagFilterAction } = useSettingActions() const [tagFilter, setTagFilter] = useState(selectedTagFilter) @@ -77,7 +78,7 @@ export const MethodTagScene: FC = ({ api }) => { useEffect(() => { if (!methods) { - navigateWithGlobal(`/${specKey}/methods`) + navigateWithGlobalParams(`/${specKey}/methods`) } }, [history, methods]) if (!methods) { @@ -112,7 +113,7 @@ export const MethodTagScene: FC = ({ api }) => { selectedTagFilter === method.httpMethod) && ( diff --git a/packages/api-explorer/src/scenes/TypeTagScene/TypeTagScene.tsx b/packages/api-explorer/src/scenes/TypeTagScene/TypeTagScene.tsx index f0d0d4a34..37bba1224 100644 --- a/packages/api-explorer/src/scenes/TypeTagScene/TypeTagScene.tsx +++ b/packages/api-explorer/src/scenes/TypeTagScene/TypeTagScene.tsx @@ -46,7 +46,8 @@ interface TypeTagSceneParams { export const TypeTagScene: FC = ({ api }) => { const { specKey, typeTag } = useParams() - const { navigate, buildPathWithGlobal, navigateWithGlobal } = useNavigation() + const { navigate, buildPathWithGlobalParams, navigateWithGlobalParams } = + useNavigation() const selectedTagFilter = useSelector(selectTagFilter) const { setTagFilterAction } = useSettingActions() const [tagFilter, setTagFilter] = useState(selectedTagFilter) @@ -72,7 +73,7 @@ export const TypeTagScene: FC = ({ api }) => { const types = api.typeTags[typeTag] useEffect(() => { if (!types) { - navigateWithGlobal(`/${specKey}/types`) + navigateWithGlobalParams(`/${specKey}/types`) } }, [types]) @@ -110,7 +111,7 @@ export const TypeTagScene: FC = ({ api }) => { selectedTagFilter === type.metaType.toString().toUpperCase()) && ( diff --git a/packages/api-explorer/src/utils/hooks/navigation.spec.ts b/packages/api-explorer/src/utils/hooks/navigation.spec.ts index df3479ad6..3a3c72b77 100644 --- a/packages/api-explorer/src/utils/hooks/navigation.spec.ts +++ b/packages/api-explorer/src/utils/hooks/navigation.spec.ts @@ -43,7 +43,8 @@ jest.mock('react-router-dom', () => { describe('useNavigation', () => { const history = useHistory() - const { navigate, navigateWithGlobal, buildPathWithGlobal } = useNavigation() + const { navigate, navigateWithGlobalParams, buildPathWithGlobalParams } = + useNavigation() const curParams = new URLSearchParams(history.location.search) // 's=test&sdk=py&v=get' const route = `/3.1` @@ -94,7 +95,7 @@ describe('useNavigation', () => { describe('buildPathWithGlobal', () => { test('creates path with global parameters and excluding scene specific parameters', () => { curParams.delete('v') - expect(buildPathWithGlobal(route)).toEqual( + expect(buildPathWithGlobalParams(route)).toEqual( `${route}?${curParams.toString()}` ) }) @@ -103,7 +104,7 @@ describe('useNavigation', () => { describe('navigateWithGlobal', () => { test('preserves global query params and removes scene specific parameters', () => { curParams.delete('v') - navigateWithGlobal(route) + navigateWithGlobalParams(route) expect(curParams.get('s')).toEqual('test') expect(mockHistoryPush).lastCalledWith(`${route}?${curParams.toString()}`) }) diff --git a/packages/api-explorer/src/utils/hooks/navigation.ts b/packages/api-explorer/src/utils/hooks/navigation.ts index a467ab7ec..938dd601f 100644 --- a/packages/api-explorer/src/utils/hooks/navigation.ts +++ b/packages/api-explorer/src/utils/hooks/navigation.ts @@ -91,7 +91,7 @@ export const useNavigation = () => { return { navigate, - navigateWithGlobal: navigateWithGlobalParams, - buildPathWithGlobal: buildPathWithGlobalParams, + navigateWithGlobalParams, + buildPathWithGlobalParams, } } From 93b959a0a260bcfa6ae46ef8b53bf4834e7e371f Mon Sep 17 00:00:00 2001 From: Niral Patel Date: Tue, 16 Aug 2022 20:15:05 +0000 Subject: [PATCH 16/31] Diff scene options in URL, testing WIP --- .../src/components/SideNav/SideNav.tsx | 6 +- .../src/components/SideNav/SideNavMethods.tsx | 4 +- .../src/components/SideNav/SideNavTypes.tsx | 4 +- .../src/scenes/DiffScene/DiffScene.tsx | 30 +++++- .../src/scenes/DiffScene/diffUtils.ts | 16 +++ .../scenes/utils/hooks/diffStoreSync.spec.ts | 102 ++++++++++++++++++ .../src/scenes/utils/hooks/diffStoreSync.ts | 65 +++++++++++ .../src/state/settings/selectors.ts | 3 + .../api-explorer/src/state/settings/slice.ts | 6 ++ .../src/utils/hooks/navigation.ts | 8 +- tsconfig.common.json | 2 +- 11 files changed, 232 insertions(+), 14 deletions(-) create mode 100644 packages/api-explorer/src/scenes/utils/hooks/diffStoreSync.spec.ts create mode 100644 packages/api-explorer/src/scenes/utils/hooks/diffStoreSync.ts diff --git a/packages/api-explorer/src/components/SideNav/SideNav.tsx b/packages/api-explorer/src/components/SideNav/SideNav.tsx index 1481d654c..b82424887 100644 --- a/packages/api-explorer/src/components/SideNav/SideNav.tsx +++ b/packages/api-explorer/src/components/SideNav/SideNav.tsx @@ -70,7 +70,7 @@ interface SideNavProps { export const SideNav: FC = ({ headless = false, spec }) => { const location = useLocation() - const { navigate, navigateWithGlobalParams } = useNavigation() + const { navigate } = useNavigation() const specKey = spec.key const tabNames = ['methods', 'types'] const pathParts = location.pathname.split('/') @@ -84,12 +84,12 @@ export const SideNav: FC = ({ headless = false, spec }) => { if (parts[1] === 'diff') { if (parts[3] !== tabNames[index]) { parts[3] = tabNames[index] - navigateWithGlobalParams(parts.join('/')) + navigate(parts.join('/'), { v: null }) } } else { if (parts[2] !== tabNames[index]) { parts[2] = tabNames[index] - navigateWithGlobalParams(parts.join('/')) + navigate(parts.join('/'), { v: null }) } } } diff --git a/packages/api-explorer/src/components/SideNav/SideNavMethods.tsx b/packages/api-explorer/src/components/SideNav/SideNavMethods.tsx index 2de29c50f..7ad4300be 100644 --- a/packages/api-explorer/src/components/SideNav/SideNavMethods.tsx +++ b/packages/api-explorer/src/components/SideNav/SideNavMethods.tsx @@ -54,9 +54,9 @@ export const SideNavMethods = styled( const _isOpen = !isOpen setIsOpen(_isOpen) if (_isOpen) { - navigate(`/${specKey}/methods/${tag}`) + navigate(`/${specKey}/methods/${tag}`, { opts: null }) } else { - navigate(`/${specKey}/methods`) + navigate(`/${specKey}/methods`, { opts: null }) } } diff --git a/packages/api-explorer/src/components/SideNav/SideNavTypes.tsx b/packages/api-explorer/src/components/SideNav/SideNavTypes.tsx index 8f5dd0459..9928fa26f 100644 --- a/packages/api-explorer/src/components/SideNav/SideNavTypes.tsx +++ b/packages/api-explorer/src/components/SideNav/SideNavTypes.tsx @@ -54,9 +54,9 @@ export const SideNavTypes = styled( const _isOpen = !isOpen setIsOpen(_isOpen) if (_isOpen) { - navigate(`/${specKey}/types/${tag}`) + navigate(`/${specKey}/types/${tag}`, { opts: null }) } else { - navigate(`/${specKey}/types`) + navigate(`/${specKey}/types`, { opts: null }) } } diff --git a/packages/api-explorer/src/scenes/DiffScene/DiffScene.tsx b/packages/api-explorer/src/scenes/DiffScene/DiffScene.tsx index 36b429840..594440ec4 100644 --- a/packages/api-explorer/src/scenes/DiffScene/DiffScene.tsx +++ b/packages/api-explorer/src/scenes/DiffScene/DiffScene.tsx @@ -41,9 +41,14 @@ import { SyncAlt } from '@styled-icons/material/SyncAlt' import { useSelector } from 'react-redux' import { ApixSection } from '../../components' -import { selectCurrentSpec } from '../../state' +import { + selectCurrentSpec, + selectDiffOptions, + useSettingActions, +} from '../../state' import { diffPath, getApixAdaptor, useNavigation } from '../../utils' -import { diffSpecs, standardDiffToggles } from './diffUtils' +import { useDiffStoreSync } from '../utils/hooks/diffStoreSync' +import { diffSpecs, getDiffOptionsFromUrl } from './diffUtils' import { DocDiff } from './DocDiff' const diffToggles = [ @@ -85,6 +90,8 @@ const validateParam = (specs: SpecList, specKey = '') => { export const DiffScene: FC = ({ specs, toggleNavigation }) => { const adaptor = getApixAdaptor() const { navigate } = useNavigation() + const selectedDiffOptions = useSelector(selectDiffOptions) + const { setDiffOptionsAction } = useSettingActions() const spec = useSelector(selectCurrentSpec) const currentSpecKey = spec.key const match = useRouteMatch<{ l: string; r: string }>(`/${diffPath}/:l?/:r?`) @@ -102,7 +109,8 @@ export const DiffScene: FC = ({ specs, toggleNavigation }) => { const [rightApi, setRightApi] = useState(() => rightKey ? specs[rightKey].api! : specs[leftKey].api! ) - const [toggles, setToggles] = useState(standardDiffToggles) + const [toggles, setToggles] = useState(selectedDiffOptions) + useDiffStoreSync() useEffect(() => { if (r !== rightKey) { @@ -151,9 +159,21 @@ export const DiffScene: FC = ({ specs, toggleNavigation }) => { const handleTogglesChange = (values?: string[]) => { const newToggles = values || [] - setToggles(newToggles) + navigate(location.pathname, { opts: newToggles.join(',') }) } + useEffect(() => { + const searchParams = new URLSearchParams(location.search) + const diffOptionsParam = getDiffOptionsFromUrl(searchParams.get('opts')) + setDiffOptionsAction({ + diffOptions: diffOptionsParam || [], + }) + }, [location.search]) + + useEffect(() => { + setToggles(selectedDiffOptions) + }, [selectedDiffOptions]) + return ( @@ -197,7 +217,7 @@ export const DiffScene: FC = ({ specs, toggleNavigation }) => { id="options" name="toggles" placeholder="Comparison options" - defaultValues={toggles} + values={toggles} onChange={handleTogglesChange} options={diffToggles} /> diff --git a/packages/api-explorer/src/scenes/DiffScene/diffUtils.ts b/packages/api-explorer/src/scenes/DiffScene/diffUtils.ts index d4bba547a..1bb098512 100644 --- a/packages/api-explorer/src/scenes/DiffScene/diffUtils.ts +++ b/packages/api-explorer/src/scenes/DiffScene/diffUtils.ts @@ -118,3 +118,19 @@ export const diffToSpec = ( result.types = {} return result } + +/** + * Gets all valid diff options from the url opts parameter + * @param opts url diff options parameter value + */ +export const getDiffOptionsFromUrl = (opts: string | null) => { + // expect input to be a comma-delimited list as a string + if (!opts) return null + const diffOptions = [] + for (const option of opts.split(',')) { + if (allDiffToggles.includes(option.toLowerCase())) { + diffOptions.push(option.toLowerCase()) + } + } + return diffOptions +} diff --git a/packages/api-explorer/src/scenes/utils/hooks/diffStoreSync.spec.ts b/packages/api-explorer/src/scenes/utils/hooks/diffStoreSync.spec.ts new file mode 100644 index 000000000..e4da3e2ba --- /dev/null +++ b/packages/api-explorer/src/scenes/utils/hooks/diffStoreSync.spec.ts @@ -0,0 +1,102 @@ +/* + + MIT License + + Copyright (c) 2022 Looker Data Sciences, Inc. + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. + + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. + + */ +import { renderHook } from '@testing-library/react-hooks' +import { useHistory } from 'react-router-dom' +import type { Location } from 'history' +import * as reactRedux from 'react-redux' +import * as routerLocation from 'react-router-dom' +import { createTestStore, withReduxProvider } from '../../../test-utils' +import { useTagStoreSync } from './tagStoreSync' + +jest.mock('react-router', () => { + const ReactRouter = jest.requireActual('react-router') + return { + ...ReactRouter, + useHistory: jest.fn().mockReturnValue({ push: jest.fn(), location }), + useLocation: jest.fn().mockReturnValue({ pathname: '/', search: '' }), + } +}) + +describe('useDiffStoreSync', () => { + const mockDispatch = jest.fn() + + afterEach(() => { + jest.clearAllMocks() + }) + + test('does nothing if uninitialized', () => { + const { push } = useHistory() + const wrapper = ({ children }: any) => withReduxProvider(children) + renderHook(() => useTagStoreSync(), { wrapper }) + expect(push).not.toHaveBeenCalled() + }) + + describe.each([ + ['methods', 'get'], + ['types', 'specification'], + ])('tag filter verb for sidenav %s tab', (tagType, verb) => { + test('overrides store tag filter given valid url tag filter param', () => { + const { push } = useHistory() + const store = createTestStore({ + settings: { + initialized: true, + }, + }) + jest.spyOn(routerLocation, 'useLocation').mockReturnValue({ + pathname: `/4.0/${tagType}/ApiAuth`, + search: `v=${verb}`, + } as unknown as Location) + jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(mockDispatch) + const wrapper = ({ children }: any) => withReduxProvider(children, store) + renderHook(() => useTagStoreSync(), { wrapper }) + expect(push).not.toHaveBeenCalled() + expect(mockDispatch).toHaveBeenLastCalledWith({ + payload: { tagFilter: verb.toUpperCase() }, + type: 'settings/setTagFilterAction', + }) + }) + + test('updates url with store tag filter given invalid url tag filter param', () => { + const { push } = useHistory() + const store = createTestStore({ + settings: { + initialized: true, + }, + }) + jest.spyOn(routerLocation, 'useLocation').mockReturnValue({ + pathname: `/4.0/${tagType}/ApiAuth`, + search: 'v=invalid', + } as unknown as Location) + jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(mockDispatch) + const wrapper = ({ children }: any) => withReduxProvider(children, store) + renderHook(() => useTagStoreSync(), { wrapper }) + expect(push).toHaveBeenCalledWith({ + pathname: `/4.0/${tagType}/ApiAuth`, + search: '', + }) + }) + }) +}) diff --git a/packages/api-explorer/src/scenes/utils/hooks/diffStoreSync.ts b/packages/api-explorer/src/scenes/utils/hooks/diffStoreSync.ts new file mode 100644 index 000000000..266f3f2f8 --- /dev/null +++ b/packages/api-explorer/src/scenes/utils/hooks/diffStoreSync.ts @@ -0,0 +1,65 @@ +/* + + MIT License + + Copyright (c) 2022 Looker Data Sciences, Inc. + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. + + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. + + */ +import { useLocation } from 'react-router-dom' +import { useSelector } from 'react-redux' +import { useEffect } from 'react' +import { + selectDiffOptions, + useSettingActions, + useSettingStoreState, +} from '../../../state' +import { useNavigation } from '../../../utils' +import { getDiffOptionsFromUrl } from '../../DiffScene/diffUtils' + +/** + * Hook for syncing diff scene URL params with the Redux store + * + * Diff scene specific search parameters: 'opts' + */ +export const useDiffStoreSync = () => { + const location = useLocation() + const { navigate } = useNavigation() + const { setDiffOptionsAction } = useSettingActions() + const { initialized } = useSettingStoreState() + const selectedDiffOptions = useSelector(selectDiffOptions) + + useEffect(() => { + if (initialized) { + const params = new URLSearchParams(location.search) + + // syncing diff options on diff scene page + const diffOptionsParam = getDiffOptionsFromUrl(params.get('opts')) + if (diffOptionsParam) { + setDiffOptionsAction({ diffOptions: diffOptionsParam }) + } else { + // must confirm store tag filter param is valid for tag type before updating + navigate(location.pathname, { + opts: selectedDiffOptions ? selectedDiffOptions.join(',') : null, + }) + } + } + }, [initialized]) +} diff --git a/packages/api-explorer/src/state/settings/selectors.ts b/packages/api-explorer/src/state/settings/selectors.ts index fdc62d786..8d0440cb0 100644 --- a/packages/api-explorer/src/state/settings/selectors.ts +++ b/packages/api-explorer/src/state/settings/selectors.ts @@ -27,6 +27,9 @@ import type { RootState } from '../store' const selectSettingsState = (state: RootState) => state.settings +export const selectDiffOptions = (state: RootState) => + selectSettingsState(state).diffOptions + export const selectSdkLanguage = (state: RootState) => selectSettingsState(state).sdkLanguage diff --git a/packages/api-explorer/src/state/settings/slice.ts b/packages/api-explorer/src/state/settings/slice.ts index a5799e4c0..c0f93b1cb 100644 --- a/packages/api-explorer/src/state/settings/slice.ts +++ b/packages/api-explorer/src/state/settings/slice.ts @@ -36,6 +36,7 @@ export interface UserDefinedSettings { } export interface SettingState extends UserDefinedSettings { + diffOptions: string[] searchPattern: string searchCriteria: SearchCriterionTerm[] tagFilter: string @@ -44,6 +45,7 @@ export interface SettingState extends UserDefinedSettings { } export const defaultSettings = { + diffOptions: ['missing', 'params', 'type', 'body', 'response'], sdkLanguage: 'Python', searchPattern: '', searchCriteria: setToCriteria(SearchAll) as SearchCriterionTerm[], @@ -55,6 +57,7 @@ export const defaultSettingsState: SettingState = { initialized: false, } +type SetDiffOptionsAction = Pick type SetSearchPatternAction = Pick type SetSdkLanguageAction = Pick type SetTagFilterAction = Pick @@ -78,6 +81,9 @@ export const settingsSlice = createSlice({ state.error = action.payload state.initialized = false }, + setDiffOptionsAction(state, action: PayloadAction) { + state.diffOptions = action.payload.diffOptions + }, setSdkLanguageAction(state, action: PayloadAction) { state.sdkLanguage = action.payload.sdkLanguage }, diff --git a/packages/api-explorer/src/utils/hooks/navigation.ts b/packages/api-explorer/src/utils/hooks/navigation.ts index 938dd601f..447ef3579 100644 --- a/packages/api-explorer/src/utils/hooks/navigation.ts +++ b/packages/api-explorer/src/utils/hooks/navigation.ts @@ -32,6 +32,8 @@ interface QueryParamProps { sdk?: string | null /** Tag Scene Filter **/ v?: string | null + /** Diff Scene Options **/ + opts?: string | null } /** @@ -76,7 +78,11 @@ export const useNavigation = () => { */ const buildPathWithGlobalParams = (path: string) => { const params = new URLSearchParams(history.location.search) - params.delete('v') + for (const key of params.keys()) { + if (key !== 's' && key !== 'sdk') { + params.delete(key) + } + } return `${path}?${params.toString()}` } diff --git a/tsconfig.common.json b/tsconfig.common.json index fd65008ad..5f8a7cb34 100644 --- a/tsconfig.common.json +++ b/tsconfig.common.json @@ -1,6 +1,6 @@ { "compilerOptions": { - "lib": ["ES2019", "dom"], + "lib": ["ES2019", "dom", "dom.iterable"], "module": "commonjs", "target": "ES2019", "jsx": "react", From 6d46d80ab94cd954d99ac3f1f6fe3ee3a360b85e Mon Sep 17 00:00:00 2001 From: Niral Patel Date: Tue, 16 Aug 2022 23:16:33 +0000 Subject: [PATCH 17/31] Added testing & functional, WIP DiffScene.spec --- .../src/scenes/DiffScene/DiffScene.spec.tsx | 62 ++++++++++++++++++ .../src/scenes/DiffScene/diffUtils.spec.ts | 18 ++++- .../src/scenes/DiffScene/diffUtils.ts | 2 +- .../scenes/utils/hooks/diffStoreSync.spec.ts | 65 +++++++++++++------ .../src/scenes/utils/hooks/diffStoreSync.ts | 1 + 5 files changed, 127 insertions(+), 21 deletions(-) create mode 100644 packages/api-explorer/src/scenes/DiffScene/DiffScene.spec.tsx diff --git a/packages/api-explorer/src/scenes/DiffScene/DiffScene.spec.tsx b/packages/api-explorer/src/scenes/DiffScene/DiffScene.spec.tsx new file mode 100644 index 000000000..06d12b074 --- /dev/null +++ b/packages/api-explorer/src/scenes/DiffScene/DiffScene.spec.tsx @@ -0,0 +1,62 @@ +/* + + MIT License + + Copyright (c) 2021 Looker Data Sciences, Inc. + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. + + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. + + */ +// import React from 'react' +// import { screen } from '@testing-library/react' +// import userEvent from '@testing-library/user-event' +// +// import { getLoadedSpecs } from '../../test-data' +// import { renderWithRouterAndReduxProvider } from '../../test-utils' +// import { DiffScene } from './DiffScene' +// +// const mockHistoryPush = jest.fn() +// jest.mock('react-router-dom', () => { +// const ReactRouterDOM = jest.requireActual('react-router-dom') +// return { +// ...ReactRouterDOM, +// useHistory: () => ({ +// push: mockHistoryPush, +// location, +// }), +// } +// }) +// +// describe('DiffScene', () => { +// const specs = getLoadedSpecs() +// const toggleNavigation = () => false +// test('renders with comparison options', () => { +// renderWithRouterAndReduxProvider( +// +// ) +// +// userEvent.click(screen.getByRole('combobox')) +// userEvent.click( +// screen.getByRole('option', { +// name: 'Missing', +// }) +// ) +// expect(mockHistoryPush).toHaveBeenCalled() +// }) +// }) diff --git a/packages/api-explorer/src/scenes/DiffScene/diffUtils.spec.ts b/packages/api-explorer/src/scenes/DiffScene/diffUtils.spec.ts index 9c305f3e3..837a7efc4 100644 --- a/packages/api-explorer/src/scenes/DiffScene/diffUtils.spec.ts +++ b/packages/api-explorer/src/scenes/DiffScene/diffUtils.spec.ts @@ -27,7 +27,7 @@ import type { DiffRow } from '@looker/sdk-codegen' import { startCount } from '@looker/sdk-codegen' import { api, api40 } from '../../test-data' -import { diffToSpec } from './diffUtils' +import { diffToSpec, getDiffOptionsFromUrl } from './diffUtils' describe('diffUtils', () => { test('builds a psuedo spec from diff', () => { @@ -63,4 +63,20 @@ describe('diffUtils', () => { expect(Object.keys(spec.tags)).toEqual(['Query', 'Dashboard']) expect(Object.keys(spec.types)).toEqual([]) }) + + describe('getDiffOptionsFromUrl', () => { + test('returns null if provided null input or given invalid diffscene options', () => { + expect(getDiffOptionsFromUrl(null)).toBeNull() + const testOptionsParam = 'INVALID,INVALID1,INVALID2' + expect(getDiffOptionsFromUrl(testOptionsParam)).toBeNull() + }) + + test('omits non diffScene options from input', () => { + const testOptionsParam = 'INVALID,missing,type' + expect(getDiffOptionsFromUrl(testOptionsParam)).toEqual([ + 'missing', + 'type', + ]) + }) + }) }) diff --git a/packages/api-explorer/src/scenes/DiffScene/diffUtils.ts b/packages/api-explorer/src/scenes/DiffScene/diffUtils.ts index 1bb098512..c7830adb3 100644 --- a/packages/api-explorer/src/scenes/DiffScene/diffUtils.ts +++ b/packages/api-explorer/src/scenes/DiffScene/diffUtils.ts @@ -132,5 +132,5 @@ export const getDiffOptionsFromUrl = (opts: string | null) => { diffOptions.push(option.toLowerCase()) } } - return diffOptions + return diffOptions.length ? diffOptions : null } diff --git a/packages/api-explorer/src/scenes/utils/hooks/diffStoreSync.spec.ts b/packages/api-explorer/src/scenes/utils/hooks/diffStoreSync.spec.ts index e4da3e2ba..9e1a6878d 100644 --- a/packages/api-explorer/src/scenes/utils/hooks/diffStoreSync.spec.ts +++ b/packages/api-explorer/src/scenes/utils/hooks/diffStoreSync.spec.ts @@ -29,7 +29,7 @@ import type { Location } from 'history' import * as reactRedux from 'react-redux' import * as routerLocation from 'react-router-dom' import { createTestStore, withReduxProvider } from '../../../test-utils' -import { useTagStoreSync } from './tagStoreSync' +import { useDiffStoreSync } from './diffStoreSync' jest.mock('react-router', () => { const ReactRouter = jest.requireActual('react-router') @@ -50,52 +50,79 @@ describe('useDiffStoreSync', () => { test('does nothing if uninitialized', () => { const { push } = useHistory() const wrapper = ({ children }: any) => withReduxProvider(children) - renderHook(() => useTagStoreSync(), { wrapper }) + renderHook(() => useDiffStoreSync(), { wrapper }) expect(push).not.toHaveBeenCalled() }) - describe.each([ - ['methods', 'get'], - ['types', 'specification'], - ])('tag filter verb for sidenav %s tab', (tagType, verb) => { - test('overrides store tag filter given valid url tag filter param', () => { + describe('diff scene options parameter', () => { + test('overrides store diff options given valid url diff options param', () => { const { push } = useHistory() const store = createTestStore({ settings: { initialized: true, }, }) + const testOptions = ['missing', 'params', 'type'] jest.spyOn(routerLocation, 'useLocation').mockReturnValue({ - pathname: `/4.0/${tagType}/ApiAuth`, - search: `v=${verb}`, + pathname: `/`, + search: `opts=${testOptions.join(',')}`, } as unknown as Location) jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(mockDispatch) const wrapper = ({ children }: any) => withReduxProvider(children, store) - renderHook(() => useTagStoreSync(), { wrapper }) - expect(push).not.toHaveBeenCalled() + renderHook(() => useDiffStoreSync(), { wrapper }) + expect(push).toHaveBeenCalledWith({ + pathname: '/', + search: 'opts=missing%2Cparams%2Ctype', + }) expect(mockDispatch).toHaveBeenLastCalledWith({ - payload: { tagFilter: verb.toUpperCase() }, - type: 'settings/setTagFilterAction', + payload: { diffOptions: testOptions }, + type: 'settings/setDiffOptionsAction', + }) + }) + + test('updates url with store diff options given invalid url diff options param', () => { + const { push } = useHistory() + const store = createTestStore({ + settings: { + initialized: true, + }, + }) + jest.spyOn(routerLocation, 'useLocation').mockReturnValue({ + pathname: '/', + search: 'opts=invalid', + } as unknown as Location) + jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(mockDispatch) + const wrapper = ({ children }: any) => withReduxProvider(children, store) + renderHook(() => useDiffStoreSync(), { wrapper }) + expect(push).toHaveBeenCalledWith({ + pathname: `/`, + search: 'opts=missing%2Cparams%2Ctype%2Cbody%2Cresponse', }) }) - test('updates url with store tag filter given invalid url tag filter param', () => { + test('filters invalid options out of from url options parameter if present', () => { const { push } = useHistory() const store = createTestStore({ settings: { initialized: true, }, }) + const testOptions = ['missing', 'INVALID_OPTION', 'type'] jest.spyOn(routerLocation, 'useLocation').mockReturnValue({ - pathname: `/4.0/${tagType}/ApiAuth`, - search: 'v=invalid', + pathname: `/`, + search: `opts=${testOptions.join(',')}`, } as unknown as Location) jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(mockDispatch) const wrapper = ({ children }: any) => withReduxProvider(children, store) - renderHook(() => useTagStoreSync(), { wrapper }) + renderHook(() => useDiffStoreSync(), { wrapper }) + const expectedOptions = ['missing', 'type'] + expect(mockDispatch).toHaveBeenLastCalledWith({ + payload: { diffOptions: expectedOptions }, + type: 'settings/setDiffOptionsAction', + }) expect(push).toHaveBeenCalledWith({ - pathname: `/4.0/${tagType}/ApiAuth`, - search: '', + pathname: `/`, + search: 'opts=missing%2Ctype', }) }) }) diff --git a/packages/api-explorer/src/scenes/utils/hooks/diffStoreSync.ts b/packages/api-explorer/src/scenes/utils/hooks/diffStoreSync.ts index 266f3f2f8..917c4f876 100644 --- a/packages/api-explorer/src/scenes/utils/hooks/diffStoreSync.ts +++ b/packages/api-explorer/src/scenes/utils/hooks/diffStoreSync.ts @@ -54,6 +54,7 @@ export const useDiffStoreSync = () => { const diffOptionsParam = getDiffOptionsFromUrl(params.get('opts')) if (diffOptionsParam) { setDiffOptionsAction({ diffOptions: diffOptionsParam }) + navigate(location.pathname, { opts: diffOptionsParam.join(',') }) } else { // must confirm store tag filter param is valid for tag type before updating navigate(location.pathname, { From 40481436770eaa0d840ef46a756b55f077ebd873 Mon Sep 17 00:00:00 2001 From: Niral Patel Date: Wed, 17 Aug 2022 23:33:34 +0000 Subject: [PATCH 18/31] WIP DiffScene testing --- .../src/scenes/DiffScene/DiffScene.spec.tsx | 107 ++++++++++++------ .../scenes/utils/hooks/diffStoreSync.spec.ts | 2 +- 2 files changed, 71 insertions(+), 38 deletions(-) diff --git a/packages/api-explorer/src/scenes/DiffScene/DiffScene.spec.tsx b/packages/api-explorer/src/scenes/DiffScene/DiffScene.spec.tsx index 06d12b074..df3d85cbe 100644 --- a/packages/api-explorer/src/scenes/DiffScene/DiffScene.spec.tsx +++ b/packages/api-explorer/src/scenes/DiffScene/DiffScene.spec.tsx @@ -23,40 +23,73 @@ SOFTWARE. */ -// import React from 'react' -// import { screen } from '@testing-library/react' -// import userEvent from '@testing-library/user-event' -// -// import { getLoadedSpecs } from '../../test-data' -// import { renderWithRouterAndReduxProvider } from '../../test-utils' -// import { DiffScene } from './DiffScene' -// -// const mockHistoryPush = jest.fn() -// jest.mock('react-router-dom', () => { -// const ReactRouterDOM = jest.requireActual('react-router-dom') -// return { -// ...ReactRouterDOM, -// useHistory: () => ({ -// push: mockHistoryPush, -// location, -// }), -// } -// }) -// -// describe('DiffScene', () => { -// const specs = getLoadedSpecs() -// const toggleNavigation = () => false -// test('renders with comparison options', () => { -// renderWithRouterAndReduxProvider( -// -// ) -// -// userEvent.click(screen.getByRole('combobox')) -// userEvent.click( -// screen.getByRole('option', { -// name: 'Missing', -// }) -// ) -// expect(mockHistoryPush).toHaveBeenCalled() -// }) -// }) +import React from 'react' +import { screen, waitFor } from '@testing-library/react' +import userEvent from '@testing-library/user-event' + +import type { SpecItem } from '@looker/sdk-codegen' +import { getLoadedSpecs } from '../../test-data' +import { + createTestStore, + renderWithRouterAndReduxProvider, +} from '../../test-utils' +import { getApixAdaptor } from '../../utils' +import { DiffScene } from './DiffScene' + +const mockHistoryPush = jest.fn() +jest.mock('react-router-dom', () => { + const ReactRouterDOM = jest.requireActual('react-router-dom') + return { + ...ReactRouterDOM, + useHistory: () => ({ + push: mockHistoryPush, + location, + }), + } +}) + +const specs = getLoadedSpecs() +class MockApixAdaptor { + async fetchSpec(spec: SpecItem) { + return new Promise(() => specs[spec.key]) + } +} + +const mockApixAdaptor = new MockApixAdaptor() +jest.mock('../../utils/apixAdaptor', () => { + const apixAdaptor = jest.requireActual('../../utils/apixAdaptor') + return { + ...apixAdaptor, + getApixAdaptor: jest.fn(), + } +}) + +describe('DiffScene', () => { + ;(getApixAdaptor as jest.Mock).mockReturnValue(mockApixAdaptor) + Element.prototype.scrollTo = jest.fn() + Element.prototype.scrollIntoView = jest.fn() + const store = createTestStore({ + specs: { specs, currentSpecKey: '3.1' }, + }) + const toggleNavigation = () => false + test('toggling comparison option pushes it to url as param', async () => { + renderWithRouterAndReduxProvider( + , + ['/diff/3.1'], + store + ) + + userEvent.click(screen.getByPlaceholderText('Comparison options')) + userEvent.click( + screen.getByRole('option', { + name: 'Missing', + }) + ) + await waitFor(() => { + expect(mockHistoryPush).toHaveBeenCalledWith({ + pathname: '/', + search: 'opts=missing', + }) + }) + }) +}) diff --git a/packages/api-explorer/src/scenes/utils/hooks/diffStoreSync.spec.ts b/packages/api-explorer/src/scenes/utils/hooks/diffStoreSync.spec.ts index 9e1a6878d..cd4cfe071 100644 --- a/packages/api-explorer/src/scenes/utils/hooks/diffStoreSync.spec.ts +++ b/packages/api-explorer/src/scenes/utils/hooks/diffStoreSync.spec.ts @@ -100,7 +100,7 @@ describe('useDiffStoreSync', () => { }) }) - test('filters invalid options out of from url options parameter if present', () => { + test('filters invalid options out of url options parameter if present', () => { const { push } = useHistory() const store = createTestStore({ settings: { From ffda1cacc8891f3173110cfeeb68efffe0fcf04c Mon Sep 17 00:00:00 2001 From: Niral Patel Date: Wed, 17 Aug 2022 23:48:51 +0000 Subject: [PATCH 19/31] Merging changes from main with tag filter PR --- .../src/components/SideNav/SideNav.tsx | 4 +-- packages/api-explorer/src/components/index.ts | 1 - .../src/scenes/MethodScene/MethodScene.tsx | 3 +-- .../DocResponses/DocResponseTypes.tsx | 2 +- .../DocResponses/DocResponses.spec.tsx | 4 +-- .../components/DocResponses/DocResponses.tsx | 2 +- .../components/DocResponses/index.ts | 0 .../components/DocResponses/utils.spec.ts | 2 +- .../components/DocResponses/utils.ts | 0 .../scenes/MethodScene/components/index.ts | 1 + .../MethodTagScene/MethodTagScene.spec.tsx | 4 +-- .../scenes/MethodTagScene/MethodTagScene.tsx | 6 ++--- .../scenes/TypeTagScene/TypeTagScene.spec.tsx | 4 +-- .../src/scenes/TypeTagScene/TypeTagScene.tsx | 6 ++--- .../src/scenes/utils/hooks/index.ts | 27 +++++++++++++++++++ .../scenes/utils/hooks/tagStoreSync.spec.ts | 6 ++--- .../src/scenes/utils/hooks/tagStoreSync.ts | 6 ++--- .../api-explorer/src/scenes/utils/index.ts | 27 +++++++++++++++++++ .../api-explorer/src/utils/hooks/index.ts | 27 +++++++++++++++++++ .../src/utils/hooks/navigation.spec.ts | 22 +++++++-------- .../src/utils/hooks/navigation.ts | 6 +++-- packages/api-explorer/src/utils/index.ts | 3 +-- packages/sdk-rtl/src/errorDoc.spec.ts | 14 ++++++++++ packages/sdk-rtl/src/errorDoc.ts | 2 +- packages/sdk-rtl/src/lookerSDKError.ts | 8 +++--- 25 files changed, 141 insertions(+), 46 deletions(-) rename packages/api-explorer/src/{ => scenes/MethodScene}/components/DocResponses/DocResponseTypes.tsx (98%) rename packages/api-explorer/src/{ => scenes/MethodScene}/components/DocResponses/DocResponses.spec.tsx (95%) rename packages/api-explorer/src/{ => scenes/MethodScene}/components/DocResponses/DocResponses.tsx (100%) rename packages/api-explorer/src/{ => scenes/MethodScene}/components/DocResponses/index.ts (100%) rename packages/api-explorer/src/{ => scenes/MethodScene}/components/DocResponses/utils.spec.ts (97%) rename packages/api-explorer/src/{ => scenes/MethodScene}/components/DocResponses/utils.ts (100%) create mode 100644 packages/api-explorer/src/scenes/utils/hooks/index.ts create mode 100644 packages/api-explorer/src/scenes/utils/index.ts create mode 100644 packages/api-explorer/src/utils/hooks/index.ts diff --git a/packages/api-explorer/src/components/SideNav/SideNav.tsx b/packages/api-explorer/src/components/SideNav/SideNav.tsx index b82424887..b17431050 100644 --- a/packages/api-explorer/src/components/SideNav/SideNav.tsx +++ b/packages/api-explorer/src/components/SideNav/SideNav.tsx @@ -84,12 +84,12 @@ export const SideNav: FC = ({ headless = false, spec }) => { if (parts[1] === 'diff') { if (parts[3] !== tabNames[index]) { parts[3] = tabNames[index] - navigate(parts.join('/'), { v: null }) + navigate(parts.join('/'), { t: null }) } } else { if (parts[2] !== tabNames[index]) { parts[2] = tabNames[index] - navigate(parts.join('/'), { v: null }) + navigate(parts.join('/'), { t: null }) } } } diff --git a/packages/api-explorer/src/components/index.ts b/packages/api-explorer/src/components/index.ts index 0a0f946ed..640add792 100644 --- a/packages/api-explorer/src/components/index.ts +++ b/packages/api-explorer/src/components/index.ts @@ -31,7 +31,6 @@ export { DocMarkdown } from './DocMarkdown' export { DocPseudo } from './DocPseudo' export { DocRateLimited } from './DocRateLimited' export { DocReferences } from './DocReferences' -export { DocResponses } from './DocResponses' export { DocSDKs } from './DocSDKs' export { DocSdkUsage } from './DocSdkUsage' export { DocSource } from './DocSource' diff --git a/packages/api-explorer/src/scenes/MethodScene/MethodScene.tsx b/packages/api-explorer/src/scenes/MethodScene/MethodScene.tsx index af97ad205..2ab6b557c 100644 --- a/packages/api-explorer/src/scenes/MethodScene/MethodScene.tsx +++ b/packages/api-explorer/src/scenes/MethodScene/MethodScene.tsx @@ -49,7 +49,6 @@ import { DocMarkdown, DocRateLimited, DocReferences, - DocResponses, DocSDKs, DocSdkUsage, DocSource, @@ -58,7 +57,7 @@ import { DocSchema, } from '../../components' import { selectSdkLanguage } from '../../state' -import { DocOperation, DocRequestBody } from './components' +import { DocOperation, DocRequestBody, DocResponses } from './components' interface MethodSceneProps { api: ApiModel diff --git a/packages/api-explorer/src/components/DocResponses/DocResponseTypes.tsx b/packages/api-explorer/src/scenes/MethodScene/components/DocResponses/DocResponseTypes.tsx similarity index 98% rename from packages/api-explorer/src/components/DocResponses/DocResponseTypes.tsx rename to packages/api-explorer/src/scenes/MethodScene/components/DocResponses/DocResponseTypes.tsx index 8f9608d6c..a7231da67 100644 --- a/packages/api-explorer/src/components/DocResponses/DocResponseTypes.tsx +++ b/packages/api-explorer/src/scenes/MethodScene/components/DocResponses/DocResponseTypes.tsx @@ -33,7 +33,7 @@ import type { IMethodResponse, } from '@looker/sdk-codegen' -import { ExploreType } from '..' +import { ExploreType } from '../../../../components' interface DocResponseTypesProps { api: ApiModel diff --git a/packages/api-explorer/src/components/DocResponses/DocResponses.spec.tsx b/packages/api-explorer/src/scenes/MethodScene/components/DocResponses/DocResponses.spec.tsx similarity index 95% rename from packages/api-explorer/src/components/DocResponses/DocResponses.spec.tsx rename to packages/api-explorer/src/scenes/MethodScene/components/DocResponses/DocResponses.spec.tsx index 0508ecdea..2466cf561 100644 --- a/packages/api-explorer/src/components/DocResponses/DocResponses.spec.tsx +++ b/packages/api-explorer/src/scenes/MethodScene/components/DocResponses/DocResponses.spec.tsx @@ -27,8 +27,8 @@ import React from 'react' import { screen, waitFor } from '@testing-library/react' import userEvent from '@testing-library/user-event' -import { api } from '../../test-data' -import { renderWithRouter } from '../../test-utils' +import { api } from '../../../../test-data' +import { renderWithRouter } from '../../../../test-utils' import { DocResponses } from './DocResponses' import { buildResponseTree } from './utils' diff --git a/packages/api-explorer/src/components/DocResponses/DocResponses.tsx b/packages/api-explorer/src/scenes/MethodScene/components/DocResponses/DocResponses.tsx similarity index 100% rename from packages/api-explorer/src/components/DocResponses/DocResponses.tsx rename to packages/api-explorer/src/scenes/MethodScene/components/DocResponses/DocResponses.tsx index 7b390bf82..ee89653d7 100644 --- a/packages/api-explorer/src/components/DocResponses/DocResponses.tsx +++ b/packages/api-explorer/src/scenes/MethodScene/components/DocResponses/DocResponses.tsx @@ -28,8 +28,8 @@ import type { FC } from 'react' import React from 'react' import { Tab, TabList, TabPanel, TabPanels, useTabs } from '@looker/components' import type { IMethodResponse, ApiModel } from '@looker/sdk-codegen' - import { CollapserCard } from '@looker/run-it' + import { DocResponseTypes } from './DocResponseTypes' import { buildResponseTree } from './utils' diff --git a/packages/api-explorer/src/components/DocResponses/index.ts b/packages/api-explorer/src/scenes/MethodScene/components/DocResponses/index.ts similarity index 100% rename from packages/api-explorer/src/components/DocResponses/index.ts rename to packages/api-explorer/src/scenes/MethodScene/components/DocResponses/index.ts diff --git a/packages/api-explorer/src/components/DocResponses/utils.spec.ts b/packages/api-explorer/src/scenes/MethodScene/components/DocResponses/utils.spec.ts similarity index 97% rename from packages/api-explorer/src/components/DocResponses/utils.spec.ts rename to packages/api-explorer/src/scenes/MethodScene/components/DocResponses/utils.spec.ts index e4797b67f..4e296e7e7 100644 --- a/packages/api-explorer/src/components/DocResponses/utils.spec.ts +++ b/packages/api-explorer/src/scenes/MethodScene/components/DocResponses/utils.spec.ts @@ -23,7 +23,7 @@ SOFTWARE. */ -import { api } from '../../test-data' +import { api } from '../../../../test-data' import { buildResponseTree } from './utils' describe('DocResponses utils', () => { diff --git a/packages/api-explorer/src/components/DocResponses/utils.ts b/packages/api-explorer/src/scenes/MethodScene/components/DocResponses/utils.ts similarity index 100% rename from packages/api-explorer/src/components/DocResponses/utils.ts rename to packages/api-explorer/src/scenes/MethodScene/components/DocResponses/utils.ts diff --git a/packages/api-explorer/src/scenes/MethodScene/components/index.ts b/packages/api-explorer/src/scenes/MethodScene/components/index.ts index 3287990c0..8ad94f6e2 100644 --- a/packages/api-explorer/src/scenes/MethodScene/components/index.ts +++ b/packages/api-explorer/src/scenes/MethodScene/components/index.ts @@ -25,3 +25,4 @@ */ export { DocOperation } from './DocOperation' export { DocRequestBody } from './DocRequestBody' +export { DocResponses } from './DocResponses' diff --git a/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.spec.tsx b/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.spec.tsx index dcc6efe8e..7b242e65f 100644 --- a/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.spec.tsx +++ b/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.spec.tsx @@ -99,7 +99,7 @@ describe('MethodTagScene', () => { await waitFor(() => { expect(mockHistoryPush).toHaveBeenCalledWith({ pathname: location.pathname, - search: 'v=get', + search: 't=get', }) }) /** Filter by DELETE operation */ @@ -108,7 +108,7 @@ describe('MethodTagScene', () => { // eslint-disable-next-line jest-dom/prefer-in-document expect(mockHistoryPush).toHaveBeenCalledWith({ pathname: location.pathname, - search: 'v=delete', + search: 't=delete', }) }) }) diff --git a/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.tsx b/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.tsx index 22e9d8d16..d9d9e309a 100644 --- a/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.tsx +++ b/packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.tsx @@ -32,7 +32,7 @@ import { useSelector } from 'react-redux' import { ApixSection, DocTitle, DocMethodSummary, Link } from '../../components' import { buildMethodPath, isValidFilter, useNavigation } from '../../utils' import { selectTagFilter, useSettingActions } from '../../state' -import { useTagStoreSync } from '../utils/hooks/tagStoreSync' +import { useTagStoreSync } from '../utils' import { getOperations } from './utils' interface MethodTagSceneProps { @@ -57,13 +57,13 @@ export const MethodTagScene: FC = ({ api }) => { const handleChange = (filter: string) => { navigate(location.pathname, { - v: filter === 'ALL' ? null : filter.toLowerCase(), + t: filter === 'ALL' ? null : filter.toLowerCase(), }) } useEffect(() => { const searchParams = new URLSearchParams(location.search) - let verbParam = searchParams.get('v') || 'ALL' + let verbParam = searchParams.get('t') || 'ALL' verbParam = isValidFilter(location.pathname, verbParam) ? verbParam.toUpperCase() : 'ALL' diff --git a/packages/api-explorer/src/scenes/TypeTagScene/TypeTagScene.spec.tsx b/packages/api-explorer/src/scenes/TypeTagScene/TypeTagScene.spec.tsx index 881fa5fb4..cff8cfa57 100644 --- a/packages/api-explorer/src/scenes/TypeTagScene/TypeTagScene.spec.tsx +++ b/packages/api-explorer/src/scenes/TypeTagScene/TypeTagScene.spec.tsx @@ -98,7 +98,7 @@ describe('TypeTagScene', () => { await waitFor(() => { expect(mockHistoryPush).toHaveBeenCalledWith({ pathname: location.pathname, - search: 'v=specification', + search: 't=specification', }) }) /** Filter by REQUEST */ @@ -106,7 +106,7 @@ describe('TypeTagScene', () => { await waitFor(() => { expect(mockHistoryPush).toHaveBeenCalledWith({ pathname: location.pathname, - search: 'v=request', + search: 't=request', }) }) }) diff --git a/packages/api-explorer/src/scenes/TypeTagScene/TypeTagScene.tsx b/packages/api-explorer/src/scenes/TypeTagScene/TypeTagScene.tsx index 37bba1224..b9566ab62 100644 --- a/packages/api-explorer/src/scenes/TypeTagScene/TypeTagScene.tsx +++ b/packages/api-explorer/src/scenes/TypeTagScene/TypeTagScene.tsx @@ -32,7 +32,7 @@ import { useSelector } from 'react-redux' import { ApixSection, DocTitle, DocTypeSummary, Link } from '../../components' import { buildTypePath, isValidFilter, useNavigation } from '../../utils' import { selectTagFilter, useSettingActions } from '../../state' -import { useTagStoreSync } from '../utils/hooks/tagStoreSync' +import { useTagStoreSync } from '../utils' import { getMetaTypes } from './utils' interface TypeTagSceneProps { @@ -55,13 +55,13 @@ export const TypeTagScene: FC = ({ api }) => { const handleChange = (filter: string) => { navigate(location.pathname, { - v: filter === 'ALL' ? null : filter.toLowerCase(), + t: filter === 'ALL' ? null : filter.toLowerCase(), }) } useEffect(() => { const searchParams = new URLSearchParams(location.search) - let verbParam = searchParams.get('v') || 'ALL' + let verbParam = searchParams.get('t') || 'ALL' verbParam = isValidFilter(location.pathname, verbParam) ? verbParam.toUpperCase() : 'ALL' diff --git a/packages/api-explorer/src/scenes/utils/hooks/index.ts b/packages/api-explorer/src/scenes/utils/hooks/index.ts new file mode 100644 index 000000000..760873280 --- /dev/null +++ b/packages/api-explorer/src/scenes/utils/hooks/index.ts @@ -0,0 +1,27 @@ +/* + + MIT License + + Copyright (c) 2021 Looker Data Sciences, Inc. + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. + + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. + + */ + +export { useTagStoreSync } from './tagStoreSync' diff --git a/packages/api-explorer/src/scenes/utils/hooks/tagStoreSync.spec.ts b/packages/api-explorer/src/scenes/utils/hooks/tagStoreSync.spec.ts index 574c93585..df3dbc61f 100644 --- a/packages/api-explorer/src/scenes/utils/hooks/tagStoreSync.spec.ts +++ b/packages/api-explorer/src/scenes/utils/hooks/tagStoreSync.spec.ts @@ -66,8 +66,8 @@ describe('useTagStoreSync', () => { }, }) jest.spyOn(routerLocation, 'useLocation').mockReturnValue({ - pathname: `/4.0/${tagType}/ApiAuth`, - search: `v=${verb}`, + pathname: `/4.0/${tagType}/ApiAdiffstoreuth`, + search: `t=${verb}`, } as unknown as Location) jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(mockDispatch) const wrapper = ({ children }: any) => withReduxProvider(children, store) @@ -88,7 +88,7 @@ describe('useTagStoreSync', () => { }) jest.spyOn(routerLocation, 'useLocation').mockReturnValue({ pathname: `/4.0/${tagType}/ApiAuth`, - search: 'v=invalid', + search: 't=invalid', } as unknown as Location) jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(mockDispatch) const wrapper = ({ children }: any) => withReduxProvider(children, store) diff --git a/packages/api-explorer/src/scenes/utils/hooks/tagStoreSync.ts b/packages/api-explorer/src/scenes/utils/hooks/tagStoreSync.ts index c87fdda88..8c2b24ffb 100644 --- a/packages/api-explorer/src/scenes/utils/hooks/tagStoreSync.ts +++ b/packages/api-explorer/src/scenes/utils/hooks/tagStoreSync.ts @@ -36,7 +36,7 @@ import { isValidFilter, useNavigation } from '../../../utils' /** * Hook for syncing tag scene URL params with the Redux store * - * Tag scene specific search parameters: 'v' + * Tag scene specific search parameters: 't' */ export const useTagStoreSync = () => { const location = useLocation() @@ -50,7 +50,7 @@ export const useTagStoreSync = () => { const params = new URLSearchParams(location.search) // syncing verb filter on tag scene page - const verbParam = params.get('v') || 'ALL' + const verbParam = params.get('t') || 'ALL' const validVerbParam = isValidFilter(location.pathname, verbParam) if (validVerbParam) { setTagFilterAction({ tagFilter: verbParam.toUpperCase() }) @@ -60,7 +60,7 @@ export const useTagStoreSync = () => { ? selectedTagFilter : 'ALL' navigate(location.pathname, { - v: verb === 'ALL' ? null : verb.toLowerCase(), + t: verb === 'ALL' ? null : verb.toLowerCase(), }) } } diff --git a/packages/api-explorer/src/scenes/utils/index.ts b/packages/api-explorer/src/scenes/utils/index.ts new file mode 100644 index 000000000..409d04295 --- /dev/null +++ b/packages/api-explorer/src/scenes/utils/index.ts @@ -0,0 +1,27 @@ +/* + + MIT License + + Copyright (c) 2021 Looker Data Sciences, Inc. + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. + + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. + + */ + +export { useTagStoreSync } from './hooks' diff --git a/packages/api-explorer/src/utils/hooks/index.ts b/packages/api-explorer/src/utils/hooks/index.ts new file mode 100644 index 000000000..ae7f03245 --- /dev/null +++ b/packages/api-explorer/src/utils/hooks/index.ts @@ -0,0 +1,27 @@ +/* + + MIT License + + Copyright (c) 2021 Looker Data Sciences, Inc. + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. + + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. + + */ +export { useNavigation } from './navigation' +export { useGlobalStoreSync } from './globalStoreSync' diff --git a/packages/api-explorer/src/utils/hooks/navigation.spec.ts b/packages/api-explorer/src/utils/hooks/navigation.spec.ts index 3a3c72b77..d00a9f0c3 100644 --- a/packages/api-explorer/src/utils/hooks/navigation.spec.ts +++ b/packages/api-explorer/src/utils/hooks/navigation.spec.ts @@ -35,7 +35,7 @@ jest.mock('react-router-dom', () => { push: mockHistoryPush, location: { pathname: '/3.1/methods/Auth', - search: 's=test&sdk=py&v=get', + search: 's=test&sdk=py&t=get', }, }), } @@ -45,7 +45,7 @@ describe('useNavigation', () => { const history = useHistory() const { navigate, navigateWithGlobalParams, buildPathWithGlobalParams } = useNavigation() - const curParams = new URLSearchParams(history.location.search) // 's=test&sdk=py&v=get' + const curParams = new URLSearchParams(history.location.search) const route = `/3.1` describe('navigate', () => { @@ -53,7 +53,7 @@ describe('useNavigation', () => { navigate(route) expect(curParams.get('s')).toBe('test') expect(curParams.get('sdk')).toBe('py') - expect(curParams.get('v')).toBe('get') + expect(curParams.get('t')).toBe('get') expect(mockHistoryPush).lastCalledWith({ pathname: route, search: curParams.toString(), @@ -71,7 +71,7 @@ describe('useNavigation', () => { navigate(route, { s: null, sdk: 'test' }) expect(mockHistoryPush).lastCalledWith({ pathname: route, - search: 'sdk=test&v=get', + search: 'sdk=test&t=get', }) }) @@ -79,11 +79,11 @@ describe('useNavigation', () => { const newParams = new URLSearchParams() newParams.set('s', 'newTest') newParams.set('sdk', 'kt') - newParams.set('v', 'post') + newParams.set('t', 'post') navigate(route, { s: newParams.get('s'), sdk: newParams.get('sdk'), - v: newParams.get('v'), + t: newParams.get('t'), }) expect(mockHistoryPush).lastCalledWith({ pathname: route, @@ -92,18 +92,18 @@ describe('useNavigation', () => { }) }) - describe('buildPathWithGlobal', () => { - test('creates path with global parameters and excluding scene specific parameters', () => { - curParams.delete('v') + describe('buildPathWithGlobalParams', () => { + test('creates path with global parameters excluding scene specific parameters', () => { + curParams.delete('t') expect(buildPathWithGlobalParams(route)).toEqual( `${route}?${curParams.toString()}` ) }) }) - describe('navigateWithGlobal', () => { + describe('navigateWithGlobalParams', () => { test('preserves global query params and removes scene specific parameters', () => { - curParams.delete('v') + curParams.delete('t') navigateWithGlobalParams(route) expect(curParams.get('s')).toEqual('test') expect(mockHistoryPush).lastCalledWith(`${route}?${curParams.toString()}`) diff --git a/packages/api-explorer/src/utils/hooks/navigation.ts b/packages/api-explorer/src/utils/hooks/navigation.ts index 447ef3579..6a717404a 100644 --- a/packages/api-explorer/src/utils/hooks/navigation.ts +++ b/packages/api-explorer/src/utils/hooks/navigation.ts @@ -25,13 +25,15 @@ */ import { useHistory } from 'react-router-dom' +const globalParams = ['s', 'sdk'] + interface QueryParamProps { /** Search Query **/ s?: string | null /** Chosen SDK Language **/ sdk?: string | null /** Tag Scene Filter **/ - v?: string | null + t?: string | null /** Diff Scene Options **/ opts?: string | null } @@ -79,7 +81,7 @@ export const useNavigation = () => { const buildPathWithGlobalParams = (path: string) => { const params = new URLSearchParams(history.location.search) for (const key of params.keys()) { - if (key !== 's' && key !== 'sdk') { + if (!globalParams.includes(key)) { params.delete(key) } } diff --git a/packages/api-explorer/src/utils/index.ts b/packages/api-explorer/src/utils/index.ts index f52a37ea1..a486cb17f 100644 --- a/packages/api-explorer/src/utils/index.ts +++ b/packages/api-explorer/src/utils/index.ts @@ -30,5 +30,4 @@ export { getLoded } from './lodeUtils' export { useWindowSize } from './useWindowSize' export * from './apixAdaptor' export * from './adaptorUtils' -export { useNavigation } from './hooks/navigation' -export { useGlobalStoreSync } from './hooks/globalStoreSync' +export { useNavigation, useGlobalStoreSync } from './hooks' diff --git a/packages/sdk-rtl/src/errorDoc.spec.ts b/packages/sdk-rtl/src/errorDoc.spec.ts index 2b5e67c1b..71ffb15b5 100644 --- a/packages/sdk-rtl/src/errorDoc.spec.ts +++ b/packages/sdk-rtl/src/errorDoc.spec.ts @@ -63,6 +63,7 @@ describe('ErrorDoc', () => { const internal = 'https://docs.looker.com/r/err/internal/422/post/bogus/bulk' const badLogin = 'https://docs.looker.com/r/err/4.0/404/post/login' const another404 = 'https://docs.looker.com/r/err/4.0/404/post/another' + const partial404 = '/err/4.0/404/post/another' const hostname = 'https://looker.sdk' const settings = { base_url: hostname } as IApiSettings const transport = new BrowserTransport(settings) @@ -111,6 +112,7 @@ describe('ErrorDoc', () => { it.each<[string, string, number]>([ [badLogin, '## API Response 404 for `login`', 2], // valid mock url and content so load will be called twice [another404, '## Generic 404', 2], // valid mock url and content that defaults to generic message so load will be called twice + [partial404, '## Generic 404', 2], // valid mock url and content that defaults to generic message so load will be called twice [internal, `${no}422/post/bogus/bulk`, 1], // invalid, default to not found [external, `${no}429/delete/bogus/{namespace}/purge`, 1], // invalid, default to not found ['', `${no}bad error code link`, 0], // just bad all around @@ -152,6 +154,7 @@ describe('ErrorDoc', () => { apiPath: '/post/bogus/bulk', }) }) + it('resolves external paths', () => { const actual = errDoc.parse(external) expect(actual).toBeDefined() @@ -162,6 +165,17 @@ describe('ErrorDoc', () => { apiPath: '/delete/bogus/:namespace/purge', }) }) + + it('handles partial urls', () => { + const actual = errDoc.parse(partial404) + expect(actual).toBeDefined() + expect(actual).toEqual({ + redirector: '/err/', + apiVersion: '4.0', + statusCode: '404', + apiPath: '/post/another', + }) + }) }) describe('specPath', () => { diff --git a/packages/sdk-rtl/src/errorDoc.ts b/packages/sdk-rtl/src/errorDoc.ts index dae10a874..b20253b4a 100644 --- a/packages/sdk-rtl/src/errorDoc.ts +++ b/packages/sdk-rtl/src/errorDoc.ts @@ -43,7 +43,7 @@ export type ErrorCodeIndex = Record export const ErrorDocNotFound = '### No documentation found for ' /** API error document_url link pattern */ -const ErrorDocPatternExpression = String.raw`(?https:\/\/docs\.looker\.com\/r\/err\/)(?.*)\/(?\d{3})(?.*)` +const ErrorDocPatternExpression = String.raw`(?(https:\/\/docs\.looker\.com\/r)?\/err\/)(?.*)\/(?\d{3})(?.*)` export const ErrorDocRx = RegExp(ErrorDocPatternExpression, 'i') export interface IErrorDocLink { diff --git a/packages/sdk-rtl/src/lookerSDKError.ts b/packages/sdk-rtl/src/lookerSDKError.ts index faffa4d6e..f83ca73f9 100644 --- a/packages/sdk-rtl/src/lookerSDKError.ts +++ b/packages/sdk-rtl/src/lookerSDKError.ts @@ -45,10 +45,10 @@ type AugmentErrorOptions< : never interface IErrorDetail { - field?: string | null - code?: string | null - message?: string | null - documentation_url: string | null + field?: string + code?: string + message?: string + documentation_url: string } // This specifies SDK custom error options From 071e0b594099ef3c0346697233d8804473e686f8 Mon Sep 17 00:00:00 2001 From: Niral Patel Date: Thu, 18 Aug 2022 17:33:04 +0000 Subject: [PATCH 20/31] WIP: finalizing tests --- .../src/scenes/DiffScene/DiffScene.spec.tsx | 80 +++++++++++++++---- .../src/scenes/DiffScene/diffUtils.spec.ts | 2 +- .../scenes/utils/hooks/tagStoreSync.spec.ts | 2 +- 3 files changed, 68 insertions(+), 16 deletions(-) diff --git a/packages/api-explorer/src/scenes/DiffScene/DiffScene.spec.tsx b/packages/api-explorer/src/scenes/DiffScene/DiffScene.spec.tsx index df3d85cbe..3ec3fa74d 100644 --- a/packages/api-explorer/src/scenes/DiffScene/DiffScene.spec.tsx +++ b/packages/api-explorer/src/scenes/DiffScene/DiffScene.spec.tsx @@ -28,6 +28,10 @@ import { screen, waitFor } from '@testing-library/react' import userEvent from '@testing-library/user-event' import type { SpecItem } from '@looker/sdk-codegen' +import { useHistory } from 'react-router-dom' +import * as routerLocation from 'react-router-dom' +import type { Location } from 'history' +import * as reactRedux from 'react-redux' import { getLoadedSpecs } from '../../test-data' import { createTestStore, @@ -36,15 +40,12 @@ import { import { getApixAdaptor } from '../../utils' import { DiffScene } from './DiffScene' -const mockHistoryPush = jest.fn() -jest.mock('react-router-dom', () => { - const ReactRouterDOM = jest.requireActual('react-router-dom') +jest.mock('react-router', () => { + const ReactRouter = jest.requireActual('react-router') return { - ...ReactRouterDOM, - useHistory: () => ({ - push: mockHistoryPush, - location, - }), + ...ReactRouter, + useHistory: jest.fn().mockReturnValue({ push: jest.fn(), location }), + useLocation: jest.fn().mockReturnValue({ pathname: '/', search: '' }), } }) @@ -65,20 +66,27 @@ jest.mock('../../utils/apixAdaptor', () => { }) describe('DiffScene', () => { + const mockDispatch = jest.fn() + + afterEach(() => { + jest.clearAllMocks() + }) ;(getApixAdaptor as jest.Mock).mockReturnValue(mockApixAdaptor) Element.prototype.scrollTo = jest.fn() Element.prototype.scrollIntoView = jest.fn() - const store = createTestStore({ - specs: { specs, currentSpecKey: '3.1' }, - }) + const toggleNavigation = () => false - test('toggling comparison option pushes it to url as param', async () => { + test('toggling comparison option pushes param to url', async () => { + const { push } = useHistory() + const store = createTestStore({ + specs: { specs, currentSpecKey: '3.1' }, + settings: { initialized: true }, + }) renderWithRouterAndReduxProvider( , ['/diff/3.1'], store ) - userEvent.click(screen.getByPlaceholderText('Comparison options')) userEvent.click( screen.getByRole('option', { @@ -86,10 +94,54 @@ describe('DiffScene', () => { }) ) await waitFor(() => { - expect(mockHistoryPush).toHaveBeenCalledWith({ + expect(push).toHaveBeenCalledWith({ pathname: '/', search: 'opts=missing', }) }) + // TODO: test URL change leads to store dispatch? - change mock history push implementation to change our location + // TODO: test that toggling another will push both options to store/url }) + + test.todo( + 'rendering scene with opts param in url sets selected options in selector', + async () => { + jest.spyOn(routerLocation, 'useLocation').mockReturnValue({ + pathname: `/`, + search: `opts=missing%2Ctype%2Cresponse`, + } as unknown as Location) + const store = createTestStore({ + specs: { specs, currentSpecKey: '3.1' }, + settings: { initialized: true, diffOptions: [] }, + }) + jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(mockDispatch) + renderWithRouterAndReduxProvider( + , + ['/diff/3.1'], + store + ) + expect(mockDispatch).toHaveBeenLastCalledWith({ + payload: { diffOptions: ['missing', 'type', 'response'] }, + type: 'settings/setDiffOptionsAction', + }) + expect( + screen.getByRole('option', { + name: 'Missing', + }) + ).toBeInTheDocument() + expect( + screen.getByRole('option', { + name: 'Type', + }) + ).toBeInTheDocument() + expect( + screen.getByRole('option', { + name: 'Response', + }) + ).toBeInTheDocument() + } + ) + + test.todo('unselecting comparison option will remove it from url opts param') + test.todo('selecting clear option will remove all params from url opts param') }) diff --git a/packages/api-explorer/src/scenes/DiffScene/diffUtils.spec.ts b/packages/api-explorer/src/scenes/DiffScene/diffUtils.spec.ts index 837a7efc4..2f2777fb6 100644 --- a/packages/api-explorer/src/scenes/DiffScene/diffUtils.spec.ts +++ b/packages/api-explorer/src/scenes/DiffScene/diffUtils.spec.ts @@ -71,7 +71,7 @@ describe('diffUtils', () => { expect(getDiffOptionsFromUrl(testOptionsParam)).toBeNull() }) - test('omits non diffScene options from input', () => { + test('omits invalid diffScene options from input', () => { const testOptionsParam = 'INVALID,missing,type' expect(getDiffOptionsFromUrl(testOptionsParam)).toEqual([ 'missing', diff --git a/packages/api-explorer/src/scenes/utils/hooks/tagStoreSync.spec.ts b/packages/api-explorer/src/scenes/utils/hooks/tagStoreSync.spec.ts index df3dbc61f..ca80a2a80 100644 --- a/packages/api-explorer/src/scenes/utils/hooks/tagStoreSync.spec.ts +++ b/packages/api-explorer/src/scenes/utils/hooks/tagStoreSync.spec.ts @@ -66,7 +66,7 @@ describe('useTagStoreSync', () => { }, }) jest.spyOn(routerLocation, 'useLocation').mockReturnValue({ - pathname: `/4.0/${tagType}/ApiAdiffstoreuth`, + pathname: `/4.0/${tagType}/ApiAuth`, search: `t=${verb}`, } as unknown as Location) jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(mockDispatch) From 91917f5d5b1464ca2e1f11eb90786c12bdcce368 Mon Sep 17 00:00:00 2001 From: Niral Patel Date: Thu, 18 Aug 2022 21:16:19 +0000 Subject: [PATCH 21/31] Changes to util files to fix imports --- packages/api-explorer/src/scenes/DiffScene/DiffScene.tsx | 2 +- packages/api-explorer/src/scenes/utils/hooks/index.ts | 1 + packages/api-explorer/src/scenes/utils/index.ts | 1 + 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/api-explorer/src/scenes/DiffScene/DiffScene.tsx b/packages/api-explorer/src/scenes/DiffScene/DiffScene.tsx index 594440ec4..82b43957e 100644 --- a/packages/api-explorer/src/scenes/DiffScene/DiffScene.tsx +++ b/packages/api-explorer/src/scenes/DiffScene/DiffScene.tsx @@ -47,7 +47,7 @@ import { useSettingActions, } from '../../state' import { diffPath, getApixAdaptor, useNavigation } from '../../utils' -import { useDiffStoreSync } from '../utils/hooks/diffStoreSync' +import { useDiffStoreSync } from '../utils' import { diffSpecs, getDiffOptionsFromUrl } from './diffUtils' import { DocDiff } from './DocDiff' diff --git a/packages/api-explorer/src/scenes/utils/hooks/index.ts b/packages/api-explorer/src/scenes/utils/hooks/index.ts index 760873280..b4451f197 100644 --- a/packages/api-explorer/src/scenes/utils/hooks/index.ts +++ b/packages/api-explorer/src/scenes/utils/hooks/index.ts @@ -25,3 +25,4 @@ */ export { useTagStoreSync } from './tagStoreSync' +export { useDiffStoreSync } from './diffStoreSync' diff --git a/packages/api-explorer/src/scenes/utils/index.ts b/packages/api-explorer/src/scenes/utils/index.ts index 409d04295..ba73d5155 100644 --- a/packages/api-explorer/src/scenes/utils/index.ts +++ b/packages/api-explorer/src/scenes/utils/index.ts @@ -25,3 +25,4 @@ */ export { useTagStoreSync } from './hooks' +export { useDiffStoreSync } from './hooks' From d92df040fbd08e04c558fa863864430bcb7650fb Mon Sep 17 00:00:00 2001 From: Niral Patel Date: Fri, 19 Aug 2022 20:54:53 +0000 Subject: [PATCH 22/31] WIP DiffScene.spec testing still, functionality bug fix --- .../src/scenes/DiffScene/DiffScene.spec.tsx | 39 ++++++++++++++++--- .../src/scenes/DiffScene/DocDiff/DiffItem.tsx | 4 +- .../src/scenes/DiffScene/diffUtils.ts | 5 ++- 3 files changed, 38 insertions(+), 10 deletions(-) diff --git a/packages/api-explorer/src/scenes/DiffScene/DiffScene.spec.tsx b/packages/api-explorer/src/scenes/DiffScene/DiffScene.spec.tsx index 3ec3fa74d..16f3988d8 100644 --- a/packages/api-explorer/src/scenes/DiffScene/DiffScene.spec.tsx +++ b/packages/api-explorer/src/scenes/DiffScene/DiffScene.spec.tsx @@ -27,7 +27,7 @@ import React from 'react' import { screen, waitFor } from '@testing-library/react' import userEvent from '@testing-library/user-event' -import type { SpecItem } from '@looker/sdk-codegen' +import type { SpecItem, SpecList } from '@looker/sdk-codegen' import { useHistory } from 'react-router-dom' import * as routerLocation from 'react-router-dom' import type { Location } from 'history' @@ -40,16 +40,38 @@ import { import { getApixAdaptor } from '../../utils' import { DiffScene } from './DiffScene' +// jest.mock('react-router', () => { +// const ReactRouter = jest.requireActual('react-router') +// return { +// ...ReactRouter, +// useHistory: jest.fn().mockReturnValue({ push: jest.fn(), location }), +// useLocation: jest.fn().mockReturnValue({ pathname: '/', search: '' }), +// } +// }) + jest.mock('react-router', () => { + const mockLocation = { + pathname: '/', + search: '', + } const ReactRouter = jest.requireActual('react-router') return { ...ReactRouter, - useHistory: jest.fn().mockReturnValue({ push: jest.fn(), location }), - useLocation: jest.fn().mockReturnValue({ pathname: '/', search: '' }), + useHistory: jest.fn().mockReturnValue({ + push: jest.fn((location) => { + mockLocation.pathname = location.pathname + mockLocation.search = location.search + }), + location, + }), + useLocation: jest.fn(() => ({ + pathname: jest.fn().mockReturnValue(mockLocation.pathname), + search: jest.fn().mockReturnValue(mockLocation.search), + })), } }) -const specs = getLoadedSpecs() +const specs = getLoadedSpecs() as SpecList class MockApixAdaptor { async fetchSpec(spec: SpecItem) { return new Promise(() => specs[spec.key]) @@ -78,9 +100,10 @@ describe('DiffScene', () => { const toggleNavigation = () => false test('toggling comparison option pushes param to url', async () => { const { push } = useHistory() + jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(mockDispatch) const store = createTestStore({ specs: { specs, currentSpecKey: '3.1' }, - settings: { initialized: true }, + settings: { initialized: true, diffOptions: [] }, }) renderWithRouterAndReduxProvider( , @@ -94,11 +117,15 @@ describe('DiffScene', () => { }) ) await waitFor(() => { - expect(push).toHaveBeenCalledWith({ + expect(push).toHaveBeenLastCalledWith({ pathname: '/', search: 'opts=missing', }) }) + expect(mockDispatch).toHaveBeenLastCalledWith({ + payload: { diffOptions: ['missing'] }, + type: 'settings/setDiffOptionsAction', + }) // TODO: test URL change leads to store dispatch? - change mock history push implementation to change our location // TODO: test that toggling another will push both options to store/url }) diff --git a/packages/api-explorer/src/scenes/DiffScene/DocDiff/DiffItem.tsx b/packages/api-explorer/src/scenes/DiffScene/DocDiff/DiffItem.tsx index be5536d26..7b6eb212e 100644 --- a/packages/api-explorer/src/scenes/DiffScene/DocDiff/DiffItem.tsx +++ b/packages/api-explorer/src/scenes/DiffScene/DocDiff/DiffItem.tsx @@ -59,7 +59,7 @@ export const DiffMethodLink: FC = ({ method, specKey, }) => { - const { navigate } = useNavigation() + const { navigateWithGlobalParams } = useNavigation() if (!method) return {`Missing in ${specKey}`} @@ -70,7 +70,7 @@ export const DiffMethodLink: FC = ({ { - navigate(path) + navigateWithGlobalParams(path) }} >{`${method.name} for ${specKey}`} ) diff --git a/packages/api-explorer/src/scenes/DiffScene/diffUtils.ts b/packages/api-explorer/src/scenes/DiffScene/diffUtils.ts index c7830adb3..a40a26a27 100644 --- a/packages/api-explorer/src/scenes/DiffScene/diffUtils.ts +++ b/packages/api-explorer/src/scenes/DiffScene/diffUtils.ts @@ -126,9 +126,10 @@ export const diffToSpec = ( export const getDiffOptionsFromUrl = (opts: string | null) => { // expect input to be a comma-delimited list as a string if (!opts) return null - const diffOptions = [] + const diffOptions: string[] = [] for (const option of opts.split(',')) { - if (allDiffToggles.includes(option.toLowerCase())) { + const op = option.toLowerCase() + if (allDiffToggles.includes(op) && !diffOptions.includes(op)) { diffOptions.push(option.toLowerCase()) } } From 377dac8357528472fdaebc35a19084586f256042 Mon Sep 17 00:00:00 2001 From: Niral Patel Date: Wed, 24 Aug 2022 20:24:51 +0000 Subject: [PATCH 23/31] DiffScene testing bug, no default state set immediately --- packages/api-explorer/package.json | 2 + .../src/scenes/DiffScene/DiffScene.spec.tsx | 164 ++++++++---------- .../api-explorer/src/test-utils/redux.tsx | 12 +- packages/api-explorer/src/utils/index.ts | 1 + .../api-explorer/src/utils/testReduxUtils.tsx | 75 ++++++++ 5 files changed, 160 insertions(+), 94 deletions(-) create mode 100644 packages/api-explorer/src/utils/testReduxUtils.tsx diff --git a/packages/api-explorer/package.json b/packages/api-explorer/package.json index 04d041283..0423c42be 100644 --- a/packages/api-explorer/package.json +++ b/packages/api-explorer/package.json @@ -88,7 +88,9 @@ "react": "^16.13.1", "react-diff-viewer": "^3.1.1", "react-dom": "^16.13.1", + "react-helmet-async": "^1.3.0", "react-is": "^16.13.1", + "react-query": "^3.39.2", "react-redux": "^7.2.3", "react-router": "^5.1.2", "react-router-dom": "^5.1.2", diff --git a/packages/api-explorer/src/scenes/DiffScene/DiffScene.spec.tsx b/packages/api-explorer/src/scenes/DiffScene/DiffScene.spec.tsx index 16f3988d8..b8b0dfe12 100644 --- a/packages/api-explorer/src/scenes/DiffScene/DiffScene.spec.tsx +++ b/packages/api-explorer/src/scenes/DiffScene/DiffScene.spec.tsx @@ -24,50 +24,43 @@ */ import React from 'react' -import { screen, waitFor } from '@testing-library/react' +import { screen, waitFor, render } from '@testing-library/react' import userEvent from '@testing-library/user-event' import type { SpecItem, SpecList } from '@looker/sdk-codegen' -import { useHistory } from 'react-router-dom' -import * as routerLocation from 'react-router-dom' -import type { Location } from 'history' -import * as reactRedux from 'react-redux' +import { useLocation } from 'react-router-dom' +import { useDispatch } from 'react-redux' import { getLoadedSpecs } from '../../test-data' import { createTestStore, + renderWithRouter, renderWithRouterAndReduxProvider, } from '../../test-utils' -import { getApixAdaptor } from '../../utils' +import { getApixAdaptor, MockedProvider, mockHistory } from '../../utils' import { DiffScene } from './DiffScene' -// jest.mock('react-router', () => { -// const ReactRouter = jest.requireActual('react-router') -// return { -// ...ReactRouter, -// useHistory: jest.fn().mockReturnValue({ push: jest.fn(), location }), -// useLocation: jest.fn().mockReturnValue({ pathname: '/', search: '' }), -// } -// }) - -jest.mock('react-router', () => { - const mockLocation = { - pathname: '/', - search: '', +jest.mock('react-redux', () => { + const reactRedux = jest.requireActual('react-redux') + return { + __esModule: true, + ...reactRedux, + useDispatch: jest.fn(reactRedux.useDispatch), } - const ReactRouter = jest.requireActual('react-router') +}) + +jest.mock('react-router-dom', () => { + const ReactRouter = jest.requireActual('react-router-dom') + return { + __esModule: true, ...ReactRouter, useHistory: jest.fn().mockReturnValue({ - push: jest.fn((location) => { - mockLocation.pathname = location.pathname - mockLocation.search = location.search - }), + push: jest.fn(), location, + useLocation: jest + .fn() + .mockReturnValue({ pathname: '/4.0/diff/3.1', search: '' }), }), - useLocation: jest.fn(() => ({ - pathname: jest.fn().mockReturnValue(mockLocation.pathname), - search: jest.fn().mockReturnValue(mockLocation.search), - })), } }) @@ -82,6 +75,7 @@ const mockApixAdaptor = new MockApixAdaptor() jest.mock('../../utils/apixAdaptor', () => { const apixAdaptor = jest.requireActual('../../utils/apixAdaptor') return { + __esModule: true, ...apixAdaptor, getApixAdaptor: jest.fn(), } @@ -98,30 +92,24 @@ describe('DiffScene', () => { Element.prototype.scrollIntoView = jest.fn() const toggleNavigation = () => false - test('toggling comparison option pushes param to url', async () => { - const { push } = useHistory() - jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(mockDispatch) + test.only('updating url dispatches store action', () => { + // skipping test due to an issue with rerender callback returned from @looker/redux + ;(useDispatch as jest.Mock).mockReturnValue(mockDispatch) const store = createTestStore({ - specs: { specs, currentSpecKey: '3.1' }, - settings: { initialized: true, diffOptions: [] }, + specs: { specs, currentSpecKey: '4.0' }, + settings: { initialized: true }, }) - renderWithRouterAndReduxProvider( - , - ['/diff/3.1'], - store - ) - userEvent.click(screen.getByPlaceholderText('Comparison options')) - userEvent.click( - screen.getByRole('option', { - name: 'Missing', - }) - ) - await waitFor(() => { - expect(push).toHaveBeenLastCalledWith({ - pathname: '/', - search: 'opts=missing', - }) + const history = mockHistory({ + initialEntries: ['/4.0/diff/3.1'], }) + const MockScene = ( + + + + ) + const { rerender } = renderWithRouterAndReduxProvider(MockScene) + history.push('/4.0/diff/3.1?opts=missing') + rerender(MockScene) expect(mockDispatch).toHaveBeenLastCalledWith({ payload: { diffOptions: ['missing'] }, type: 'settings/setDiffOptionsAction', @@ -130,45 +118,45 @@ describe('DiffScene', () => { // TODO: test that toggling another will push both options to store/url }) - test.todo( - 'rendering scene with opts param in url sets selected options in selector', - async () => { - jest.spyOn(routerLocation, 'useLocation').mockReturnValue({ - pathname: `/`, - search: `opts=missing%2Ctype%2Cresponse`, - } as unknown as Location) - const store = createTestStore({ - specs: { specs, currentSpecKey: '3.1' }, - settings: { initialized: true, diffOptions: [] }, - }) - jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(mockDispatch) - renderWithRouterAndReduxProvider( - , - ['/diff/3.1'], - store - ) - expect(mockDispatch).toHaveBeenLastCalledWith({ - payload: { diffOptions: ['missing', 'type', 'response'] }, - type: 'settings/setDiffOptionsAction', - }) - expect( - screen.getByRole('option', { - name: 'Missing', - }) - ).toBeInTheDocument() - expect( - screen.getByRole('option', { - name: 'Type', - }) - ).toBeInTheDocument() - expect( - screen.getByRole('option', { - name: 'Response', - }) - ).toBeInTheDocument() - } - ) - + // test.todo( + // 'rendering scene with opts param in url sets selected options in selector', + // async () => { + // jest.spyOn(routerLocation, 'useLocation').mockReturnValue({ + // pathname: `/`, + // search: `opts=missing%2Ctype%2Cresponse`, + // } as unknown as Location) + // const store = createTestStore({ + // specs: { specs, currentSpecKey: '3.1' }, + // settings: { initialized: true, diffOptions: [] }, + // }) + // jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(mockDispatch) + // renderWithRouterAndReduxProvider( + // , + // ['/diff/3.1'], + // store + // ) + // expect(mockDispatch).toHaveBeenLastCalledWith({ + // payload: { diffOptions: ['missing', 'type', 'response'] }, + // type: 'settings/setDiffOptionsAction', + // }) + // expect( + // screen.getByRole('option', { + // name: 'Missing', + // }) + // ).toBeInTheDocument() + // expect( + // screen.getByRole('option', { + // name: 'Type', + // }) + // ).toBeInTheDocument() + // expect( + // screen.getByRole('option', { + // name: 'Response', + // }) + // ).toBeInTheDocument() + // } + // ) + test.todo('toggling comparison option pushes value to url opts param') test.todo('unselecting comparison option will remove it from url opts param') test.todo('selecting clear option will remove all params from url opts param') }) diff --git a/packages/api-explorer/src/test-utils/redux.tsx b/packages/api-explorer/src/test-utils/redux.tsx index f0f6023a8..ade7c1ab7 100644 --- a/packages/api-explorer/src/test-utils/redux.tsx +++ b/packages/api-explorer/src/test-utils/redux.tsx @@ -46,6 +46,12 @@ import { import { specState } from '../test-data' import { renderWithRouter } from './router' +export const preloadedState: RootState = { + settings: defaultSettingsState, + lodes: defaultLodesState, + specs: defaultSpecsState, +} + export const withReduxProvider = ( consumers: ReactElement, store: Store = createTestStore() @@ -68,12 +74,6 @@ export const renderWithRouterAndReduxProvider = ( ) => renderWithRouter(withReduxProvider(consumers, store), initialEntries, options) -export const preloadedState: RootState = { - settings: defaultSettingsState, - lodes: defaultLodesState, - specs: defaultSpecsState, -} - type DeepPartial = { [P in keyof T]?: DeepPartial } diff --git a/packages/api-explorer/src/utils/index.ts b/packages/api-explorer/src/utils/index.ts index a486cb17f..f24e8ca08 100644 --- a/packages/api-explorer/src/utils/index.ts +++ b/packages/api-explorer/src/utils/index.ts @@ -30,4 +30,5 @@ export { getLoded } from './lodeUtils' export { useWindowSize } from './useWindowSize' export * from './apixAdaptor' export * from './adaptorUtils' +export { MockedProvider, mockHistory } from './testReduxUtils' export { useNavigation, useGlobalStoreSync } from './hooks' diff --git a/packages/api-explorer/src/utils/testReduxUtils.tsx b/packages/api-explorer/src/utils/testReduxUtils.tsx new file mode 100644 index 000000000..bc54819f0 --- /dev/null +++ b/packages/api-explorer/src/utils/testReduxUtils.tsx @@ -0,0 +1,75 @@ +/* + + MIT License + + Copyright (c) 2022 Looker Data Sciences, Inc. + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. + + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. + + */ +import { ComponentsProvider } from '@looker/components' +import type { Store } from '@looker/redux' +import React from 'react' +import { QueryClient, QueryClientProvider } from 'react-query' +import { Provider } from 'react-redux' +import { Router } from 'react-router' +import { HelmetProvider } from 'react-helmet-async' +import type { MemoryHistoryBuildOptions, History } from 'history' +import { createMemoryHistory } from 'history' +import type { RootState } from '../state' +import { createTestStore } from '../test-utils' + +export interface MockedProviderProps { + history?: History + store?: Store +} + +/** + * Mocks all providers needed to render any component or scene + */ +export const MockedProvider: React.FC = ({ + children, + history = mockHistory(), + store = createTestStore(), +}) => { + return ( + + + + + + {children} + + + + + + ) +} + +export const mockHistory = ( + /** + * Set the current route by passing in a string or to mock the entire + * history stack pass in MemoryHistoryBuildOptions + */ + route?: string | MemoryHistoryBuildOptions +) => + createMemoryHistory( + typeof route === 'string' ? { initialEntries: [route] } : route + ) From ea02ec2d87f13c0dd78a12bba63b199274214a4b Mon Sep 17 00:00:00 2001 From: Niral Patel Date: Tue, 30 Aug 2022 18:06:49 +0000 Subject: [PATCH 24/31] WIP unable to init store with default settings in DiffScene spec --- .../src/scenes/DiffScene/DiffScene.spec.tsx | 106 +++++++++--------- .../api-explorer/src/test-utils/redux.tsx | 6 +- 2 files changed, 57 insertions(+), 55 deletions(-) diff --git a/packages/api-explorer/src/scenes/DiffScene/DiffScene.spec.tsx b/packages/api-explorer/src/scenes/DiffScene/DiffScene.spec.tsx index b8b0dfe12..d875d0363 100644 --- a/packages/api-explorer/src/scenes/DiffScene/DiffScene.spec.tsx +++ b/packages/api-explorer/src/scenes/DiffScene/DiffScene.spec.tsx @@ -39,62 +39,62 @@ import { import { getApixAdaptor, MockedProvider, mockHistory } from '../../utils' import { DiffScene } from './DiffScene' -jest.mock('react-redux', () => { - const reactRedux = jest.requireActual('react-redux') - return { - __esModule: true, - ...reactRedux, - useDispatch: jest.fn(reactRedux.useDispatch), - } -}) - -jest.mock('react-router-dom', () => { - const ReactRouter = jest.requireActual('react-router-dom') - - return { - __esModule: true, - ...ReactRouter, - useHistory: jest.fn().mockReturnValue({ - push: jest.fn(), - location, - useLocation: jest - .fn() - .mockReturnValue({ pathname: '/4.0/diff/3.1', search: '' }), - }), - } -}) +// jest.mock('react-redux', () => { +// const reactRedux = jest.requireActual('react-redux') +// return { +// __esModule: true, +// ...reactRedux, +// useDispatch: jest.fn(reactRedux.useDispatch), +// } +// }) + +// jest.mock('react-router-dom', () => { +// const ReactRouter = jest.requireActual('react-router-dom') +// +// return { +// __esModule: true, +// ...ReactRouter, +// useHistory: jest.fn().mockReturnValue({ +// push: jest.fn(), +// location, +// useLocation: jest +// .fn() +// .mockReturnValue({ pathname: '/4.0/diff/3.1', search: '' }), +// }), +// } +// }) const specs = getLoadedSpecs() as SpecList -class MockApixAdaptor { - async fetchSpec(spec: SpecItem) { - return new Promise(() => specs[spec.key]) - } -} - -const mockApixAdaptor = new MockApixAdaptor() -jest.mock('../../utils/apixAdaptor', () => { - const apixAdaptor = jest.requireActual('../../utils/apixAdaptor') - return { - __esModule: true, - ...apixAdaptor, - getApixAdaptor: jest.fn(), - } -}) +// class MockApixAdaptor { +// async fetchSpec(spec: SpecItem) { +// return new Promise(() => specs[spec.key]) +// } +// } + +// const mockApixAdaptor = new MockApixAdaptor() +// jest.mock('../../utils/apixAdaptor', () => { +// const apixAdaptor = jest.requireActual('../../utils/apixAdaptor') +// return { +// __esModule: true, +// ...apixAdaptor, +// getApixAdaptor: jest.fn(), +// } +// }) describe('DiffScene', () => { - const mockDispatch = jest.fn() + // const mockDispatch = jest.fn() - afterEach(() => { - jest.clearAllMocks() - }) - ;(getApixAdaptor as jest.Mock).mockReturnValue(mockApixAdaptor) + // afterEach(() => { + // jest.clearAllMocks() + // }) + // ;(getApixAdaptor as jest.Mock).mockReturnValue(mockApixAdaptor) Element.prototype.scrollTo = jest.fn() Element.prototype.scrollIntoView = jest.fn() const toggleNavigation = () => false test.only('updating url dispatches store action', () => { - // skipping test due to an issue with rerender callback returned from @looker/redux - ;(useDispatch as jest.Mock).mockReturnValue(mockDispatch) + // ;(useDispatch as jest.Mock).mockReturnValue(mockDispatch) + // TODO issue: executing createTestStore here doesn't init default settings const store = createTestStore({ specs: { specs, currentSpecKey: '4.0' }, settings: { initialized: true }, @@ -107,13 +107,13 @@ describe('DiffScene', () => { ) - const { rerender } = renderWithRouterAndReduxProvider(MockScene) - history.push('/4.0/diff/3.1?opts=missing') - rerender(MockScene) - expect(mockDispatch).toHaveBeenLastCalledWith({ - payload: { diffOptions: ['missing'] }, - type: 'settings/setDiffOptionsAction', - }) + const { rerender } = render(MockScene) + // history.push('/4.0/diff/3.1?opts=missing') + // rerender(MockScene) + // expect(mockDispatch).toHaveBeenLastCalledWith({ + // payload: { diffOptions: ['missing'] }, + // type: 'settings/setDiffOptionsAction', + // }) // TODO: test URL change leads to store dispatch? - change mock history push implementation to change our location // TODO: test that toggling another will push both options to store/url }) diff --git a/packages/api-explorer/src/test-utils/redux.tsx b/packages/api-explorer/src/test-utils/redux.tsx index ade7c1ab7..4071150df 100644 --- a/packages/api-explorer/src/test-utils/redux.tsx +++ b/packages/api-explorer/src/test-utils/redux.tsx @@ -78,8 +78,9 @@ type DeepPartial = { [P in keyof T]?: DeepPartial } -export const createTestStore = (overrides?: DeepPartial) => - createStore({ +export const createTestStore = (overrides?: DeepPartial) => { + // TODO: revert back to implicit return after fixing default initialization issue + return createStore({ preloadedState: { settings: { ...preloadedState.settings, @@ -100,3 +101,4 @@ export const createTestStore = (overrides?: DeepPartial) => specs: specsSlice.reducer, }, }) +} From c0297edf504fa307d0d8a5e01b3dba92f9cdba0d Mon Sep 17 00:00:00 2001 From: Niral Patel Date: Wed, 31 Aug 2022 20:52:18 +0000 Subject: [PATCH 25/31] Setting up diffscene spec for other tests --- .../src/scenes/DiffScene/DiffScene.spec.tsx | 184 +++++++++--------- 1 file changed, 89 insertions(+), 95 deletions(-) diff --git a/packages/api-explorer/src/scenes/DiffScene/DiffScene.spec.tsx b/packages/api-explorer/src/scenes/DiffScene/DiffScene.spec.tsx index d875d0363..e58443b85 100644 --- a/packages/api-explorer/src/scenes/DiffScene/DiffScene.spec.tsx +++ b/packages/api-explorer/src/scenes/DiffScene/DiffScene.spec.tsx @@ -28,73 +28,72 @@ import { screen, waitFor, render } from '@testing-library/react' import userEvent from '@testing-library/user-event' import type { SpecItem, SpecList } from '@looker/sdk-codegen' -import { useLocation } from 'react-router-dom' +import * as routerLocation from 'react-router-dom' +import * as reactRedux from 'react-redux' import { useDispatch } from 'react-redux' +import type { Location } from 'history' import { getLoadedSpecs } from '../../test-data' import { createTestStore, - renderWithRouter, renderWithRouterAndReduxProvider, } from '../../test-utils' import { getApixAdaptor, MockedProvider, mockHistory } from '../../utils' import { DiffScene } from './DiffScene' -// jest.mock('react-redux', () => { -// const reactRedux = jest.requireActual('react-redux') -// return { -// __esModule: true, -// ...reactRedux, -// useDispatch: jest.fn(reactRedux.useDispatch), -// } -// }) - -// jest.mock('react-router-dom', () => { -// const ReactRouter = jest.requireActual('react-router-dom') -// -// return { -// __esModule: true, -// ...ReactRouter, -// useHistory: jest.fn().mockReturnValue({ -// push: jest.fn(), -// location, -// useLocation: jest -// .fn() -// .mockReturnValue({ pathname: '/4.0/diff/3.1', search: '' }), -// }), -// } -// }) +jest.mock('react-redux', () => { + const reactRedux = jest.requireActual('react-redux') + return { + __esModule: true, + ...reactRedux, + useDispatch: jest.fn(reactRedux.useDispatch), + } +}) + +jest.mock('react-router-dom', () => { + const ReactRouter = jest.requireActual('react-router-dom') + + return { + __esModule: true, + ...ReactRouter, + useHistory: jest.fn().mockReturnValue({ + push: jest.fn(), + location, + }), + useLocation: jest.fn().mockReturnValue({ pathname: '/', search: '' }), + } +}) const specs = getLoadedSpecs() as SpecList -// class MockApixAdaptor { -// async fetchSpec(spec: SpecItem) { -// return new Promise(() => specs[spec.key]) -// } -// } - -// const mockApixAdaptor = new MockApixAdaptor() -// jest.mock('../../utils/apixAdaptor', () => { -// const apixAdaptor = jest.requireActual('../../utils/apixAdaptor') -// return { -// __esModule: true, -// ...apixAdaptor, -// getApixAdaptor: jest.fn(), -// } -// }) +class MockApixAdaptor { + async fetchSpec(spec: SpecItem) { + return new Promise(() => specs[spec.key]) + } +} + +const mockApixAdaptor = new MockApixAdaptor() +jest.mock('../../utils/apixAdaptor', () => { + const apixAdaptor = jest.requireActual('../../utils/apixAdaptor') + return { + __esModule: true, + ...apixAdaptor, + getApixAdaptor: jest.fn(), + } +}) describe('DiffScene', () => { - // const mockDispatch = jest.fn() + const mockDispatch = jest.fn() - // afterEach(() => { - // jest.clearAllMocks() - // }) - // ;(getApixAdaptor as jest.Mock).mockReturnValue(mockApixAdaptor) + afterEach(() => { + jest.clearAllMocks() + }) + ;(getApixAdaptor as jest.Mock).mockReturnValue(mockApixAdaptor) Element.prototype.scrollTo = jest.fn() Element.prototype.scrollIntoView = jest.fn() const toggleNavigation = () => false - test.only('updating url dispatches store action', () => { - // ;(useDispatch as jest.Mock).mockReturnValue(mockDispatch) - // TODO issue: executing createTestStore here doesn't init default settings + // TODO: address issue with initializing redux store with preloadedState + test.skip('updating url dispatches store action', () => { + ;(useDispatch as jest.Mock).mockReturnValue(mockDispatch) const store = createTestStore({ specs: { specs, currentSpecKey: '4.0' }, settings: { initialized: true }, @@ -108,54 +107,49 @@ describe('DiffScene', () => { ) const { rerender } = render(MockScene) - // history.push('/4.0/diff/3.1?opts=missing') - // rerender(MockScene) - // expect(mockDispatch).toHaveBeenLastCalledWith({ - // payload: { diffOptions: ['missing'] }, - // type: 'settings/setDiffOptionsAction', - // }) - // TODO: test URL change leads to store dispatch? - change mock history push implementation to change our location - // TODO: test that toggling another will push both options to store/url + history.push('/4.0/diff/3.1?opts=missing') + rerender(MockScene) + expect(mockDispatch).toHaveBeenLastCalledWith({ + payload: { diffOptions: ['missing'] }, + type: 'settings/setDiffOptionsAction', + }) }) - // test.todo( - // 'rendering scene with opts param in url sets selected options in selector', - // async () => { - // jest.spyOn(routerLocation, 'useLocation').mockReturnValue({ - // pathname: `/`, - // search: `opts=missing%2Ctype%2Cresponse`, - // } as unknown as Location) - // const store = createTestStore({ - // specs: { specs, currentSpecKey: '3.1' }, - // settings: { initialized: true, diffOptions: [] }, - // }) - // jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(mockDispatch) - // renderWithRouterAndReduxProvider( - // , - // ['/diff/3.1'], - // store - // ) - // expect(mockDispatch).toHaveBeenLastCalledWith({ - // payload: { diffOptions: ['missing', 'type', 'response'] }, - // type: 'settings/setDiffOptionsAction', - // }) - // expect( - // screen.getByRole('option', { - // name: 'Missing', - // }) - // ).toBeInTheDocument() - // expect( - // screen.getByRole('option', { - // name: 'Type', - // }) - // ).toBeInTheDocument() - // expect( - // screen.getByRole('option', { - // name: 'Response', - // }) - // ).toBeInTheDocument() - // } - // ) + test('rendering scene with url opts param sets selected diff options in store', async () => { + jest.spyOn(routerLocation, 'useLocation').mockReturnValue({ + pathname: `/`, + search: 'opts=missing%2Ctype%2Cresponse', + } as unknown as Location) + const store = createTestStore({ + specs: { specs, currentSpecKey: '3.1' }, + settings: { initialized: true, diffOptions: [] }, + }) + jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(mockDispatch) + renderWithRouterAndReduxProvider( + , + ['/diff/3.1'], + store + ) + expect(mockDispatch).toHaveBeenLastCalledWith({ + payload: { diffOptions: ['missing', 'type', 'response'] }, + type: 'settings/setDiffOptionsAction', + }) + expect( + screen.getByRole('option', { + name: 'Missing', + }) + ).toBeInTheDocument() + expect( + screen.getByRole('option', { + name: 'Type', + }) + ).toBeInTheDocument() + expect( + screen.getByRole('option', { + name: 'Response', + }) + ).toBeInTheDocument() + }) test.todo('toggling comparison option pushes value to url opts param') test.todo('unselecting comparison option will remove it from url opts param') test.todo('selecting clear option will remove all params from url opts param') From ef95f97705eb10c641740241d510c2a457810315 Mon Sep 17 00:00:00 2001 From: Niral Patel Date: Thu, 1 Sep 2022 18:03:03 +0000 Subject: [PATCH 26/31] Removing testReduxUtils, making spec file without this test --- .../src/components/SideNav/SideNavMethods.tsx | 3 +- packages/api-explorer/src/utils/index.ts | 1 - .../api-explorer/src/utils/testReduxUtils.tsx | 75 ------------------- 3 files changed, 1 insertion(+), 78 deletions(-) delete mode 100644 packages/api-explorer/src/utils/testReduxUtils.tsx diff --git a/packages/api-explorer/src/components/SideNav/SideNavMethods.tsx b/packages/api-explorer/src/components/SideNav/SideNavMethods.tsx index 8e9f6f223..03519e359 100644 --- a/packages/api-explorer/src/components/SideNav/SideNavMethods.tsx +++ b/packages/api-explorer/src/components/SideNav/SideNavMethods.tsx @@ -44,8 +44,7 @@ interface MethodsProps { export const SideNavMethods = styled( ({ className, methods, tag, specKey, defaultOpen = false }: MethodsProps) => { - const { buildPathWithGlobalParams, navigateWithGlobalParams } = - useNavigation() + const { buildPathWithGlobalParams, navigate } = useNavigation() const searchPattern = useSelector(selectSearchPattern) const match = useRouteMatch<{ methodTag: string }>( `/:specKey/methods/:methodTag/:methodName?` diff --git a/packages/api-explorer/src/utils/index.ts b/packages/api-explorer/src/utils/index.ts index a0959f5ab..1eaca523a 100644 --- a/packages/api-explorer/src/utils/index.ts +++ b/packages/api-explorer/src/utils/index.ts @@ -30,5 +30,4 @@ export { getLoded } from './lodeUtils' export { useWindowSize } from './useWindowSize' export * from './apixAdaptor' export * from './adaptorUtils' -export { MockedProvider, mockHistory } from './testReduxUtils' export { useNavigation, useGlobalStoreSync, useQuery } from './hooks' diff --git a/packages/api-explorer/src/utils/testReduxUtils.tsx b/packages/api-explorer/src/utils/testReduxUtils.tsx deleted file mode 100644 index bc54819f0..000000000 --- a/packages/api-explorer/src/utils/testReduxUtils.tsx +++ /dev/null @@ -1,75 +0,0 @@ -/* - - MIT License - - Copyright (c) 2022 Looker Data Sciences, Inc. - - Permission is hereby granted, free of charge, to any person obtaining a copy - of this software and associated documentation files (the "Software"), to deal - in the Software without restriction, including without limitation the rights - to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - copies of the Software, and to permit persons to whom the Software is - furnished to do so, subject to the following conditions: - - The above copyright notice and this permission notice shall be included in all - copies or substantial portions of the Software. - - THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - SOFTWARE. - - */ -import { ComponentsProvider } from '@looker/components' -import type { Store } from '@looker/redux' -import React from 'react' -import { QueryClient, QueryClientProvider } from 'react-query' -import { Provider } from 'react-redux' -import { Router } from 'react-router' -import { HelmetProvider } from 'react-helmet-async' -import type { MemoryHistoryBuildOptions, History } from 'history' -import { createMemoryHistory } from 'history' -import type { RootState } from '../state' -import { createTestStore } from '../test-utils' - -export interface MockedProviderProps { - history?: History - store?: Store -} - -/** - * Mocks all providers needed to render any component or scene - */ -export const MockedProvider: React.FC = ({ - children, - history = mockHistory(), - store = createTestStore(), -}) => { - return ( - - - - - - {children} - - - - - - ) -} - -export const mockHistory = ( - /** - * Set the current route by passing in a string or to mock the entire - * history stack pass in MemoryHistoryBuildOptions - */ - route?: string | MemoryHistoryBuildOptions -) => - createMemoryHistory( - typeof route === 'string' ? { initialEntries: [route] } : route - ) From 90840d4f4b6db9f3b6f7bd80a843379cb71e4e23 Mon Sep 17 00:00:00 2001 From: Niral Patel Date: Fri, 2 Sep 2022 00:00:31 +0000 Subject: [PATCH 27/31] Moving forward with finalizing document ignoring spec bug --- .../src/scenes/DiffScene/DiffScene.spec.tsx | 166 ++++++++++++------ .../src/scenes/DiffScene/DiffScene.tsx | 6 + .../api-explorer/src/scenes/utils/index.ts | 3 +- 3 files changed, 118 insertions(+), 57 deletions(-) diff --git a/packages/api-explorer/src/scenes/DiffScene/DiffScene.spec.tsx b/packages/api-explorer/src/scenes/DiffScene/DiffScene.spec.tsx index e58443b85..ec6f6af68 100644 --- a/packages/api-explorer/src/scenes/DiffScene/DiffScene.spec.tsx +++ b/packages/api-explorer/src/scenes/DiffScene/DiffScene.spec.tsx @@ -24,46 +24,45 @@ */ import React from 'react' -import { screen, waitFor, render } from '@testing-library/react' -import userEvent from '@testing-library/user-event' +import { screen, waitFor } from '@testing-library/react' -import type { SpecItem, SpecList } from '@looker/sdk-codegen' -import * as routerLocation from 'react-router-dom' -import * as reactRedux from 'react-redux' -import { useDispatch } from 'react-redux' -import type { Location } from 'history' +import type { SpecItem } from '@looker/sdk-codegen' +import userEvent from '@testing-library/user-event' import { getLoadedSpecs } from '../../test-data' import { createTestStore, renderWithRouterAndReduxProvider, } from '../../test-utils' -import { getApixAdaptor, MockedProvider, mockHistory } from '../../utils' +import { getApixAdaptor } from '../../utils' import { DiffScene } from './DiffScene' -jest.mock('react-redux', () => { - const reactRedux = jest.requireActual('react-redux') - return { - __esModule: true, - ...reactRedux, - useDispatch: jest.fn(reactRedux.useDispatch), - } -}) +// jest.mock('react-redux', () => { +// const reactRedux = jest.requireActual('react-redux') +// return { +// __esModule: true, +// ...reactRedux, +// useDispatch: jest.fn(reactRedux.useDispatch), +// } +// }) +const mockHistoryPush = jest.fn() jest.mock('react-router-dom', () => { const ReactRouter = jest.requireActual('react-router-dom') - + const mockLocation = jest + .fn() + .mockReturnValue({ pathname: '/3.1/diff', search: '' }) return { __esModule: true, ...ReactRouter, - useHistory: jest.fn().mockReturnValue({ - push: jest.fn(), - location, + useHistory: () => ({ + push: mockHistoryPush, + location: mockLocation, }), - useLocation: jest.fn().mockReturnValue({ pathname: '/', search: '' }), + useLocation: mockLocation, } }) -const specs = getLoadedSpecs() as SpecList +const specs = getLoadedSpecs() class MockApixAdaptor { async fetchSpec(spec: SpecItem) { return new Promise(() => specs[spec.key]) @@ -81,8 +80,6 @@ jest.mock('../../utils/apixAdaptor', () => { }) describe('DiffScene', () => { - const mockDispatch = jest.fn() - afterEach(() => { jest.clearAllMocks() }) @@ -91,66 +88,125 @@ describe('DiffScene', () => { Element.prototype.scrollIntoView = jest.fn() const toggleNavigation = () => false - // TODO: address issue with initializing redux store with preloadedState - test.skip('updating url dispatches store action', () => { - ;(useDispatch as jest.Mock).mockReturnValue(mockDispatch) + + test('selecting comparison option pushes value to url opts param', async () => { const store = createTestStore({ - specs: { specs, currentSpecKey: '4.0' }, - settings: { initialized: true }, + specs: { specs, currentSpecKey: '3.1' }, + settings: { diffOptions: [] }, + }) + renderWithRouterAndReduxProvider( + , + ['/3.1/diff'], + store + ) + userEvent.click(screen.getByPlaceholderText('Comparison options')) + userEvent.click( + screen.getByRole('option', { + name: 'Missing', + }) + ) + await waitFor(() => { + expect(mockHistoryPush).toHaveBeenLastCalledWith({ + pathname: '/3.1/diff', + search: 'opts=missing', + }) }) - const history = mockHistory({ - initialEntries: ['/4.0/diff/3.1'], + }) + + test('unselecting comparison option will remove it from url opts param', async () => { + const store = createTestStore({ + specs: { specs, currentSpecKey: '3.1' }, + settings: { diffOptions: ['missing', 'params'] }, }) - const MockScene = ( - - - + renderWithRouterAndReduxProvider( + , + ['/3.1/diff'], + store ) - const { rerender } = render(MockScene) - history.push('/4.0/diff/3.1?opts=missing') - rerender(MockScene) - expect(mockDispatch).toHaveBeenLastCalledWith({ - payload: { diffOptions: ['missing'] }, - type: 'settings/setDiffOptionsAction', + userEvent.click(screen.getByPlaceholderText('Comparison options')) + userEvent.click( + screen.getByRole('option', { + name: 'Missing', + }) + ) + await waitFor(() => { + expect(mockHistoryPush).toHaveBeenLastCalledWith({ + pathname: '/3.1/diff', + search: 'opts=params', + }) }) }) - test('rendering scene with url opts param sets selected diff options in store', async () => { - jest.spyOn(routerLocation, 'useLocation').mockReturnValue({ - pathname: `/`, - search: 'opts=missing%2Ctype%2Cresponse', - } as unknown as Location) + test('selecting clear option will remove all params from url opts param', async () => { const store = createTestStore({ specs: { specs, currentSpecKey: '3.1' }, - settings: { initialized: true, diffOptions: [] }, }) - jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(mockDispatch) renderWithRouterAndReduxProvider( , - ['/diff/3.1'], + ['/3.1/diff'], store ) - expect(mockDispatch).toHaveBeenLastCalledWith({ - payload: { diffOptions: ['missing', 'type', 'response'] }, - type: 'settings/setDiffOptionsAction', + userEvent.click( + screen.getByRole('button', { + name: 'Clear Field', + }) + ) + await waitFor(() => { + expect(mockHistoryPush).toHaveBeenLastCalledWith({ + pathname: '/3.1/diff', + search: '', + }) }) + }) + + // TODO: the following test cases should be able to pass but face unique bugs to this spec file + test('rendering with no url opts param results in default comparison options toggled', () => { + const store = createTestStore({ + specs: { specs, currentSpecKey: '3.1' }, + settings: { + diffOptions: ['missing', 'params', 'type', 'body', 'response'], + }, + }) + renderWithRouterAndReduxProvider( + , + ['/3.1/diff'], + store + ) + /* + * If you uncomment out the following line, this test will err + * informing you that there are multiple elements with this role + * + * Yet if you try querying a specific option, say with a name of + * one of these comparison options, it will err saying it could not find + */ + // expect(screen.getByRole('option')).toBeInTheDocument() expect( screen.getByRole('option', { name: 'Missing', }) ).toBeInTheDocument() + expect( + screen.getByRole('option', { + name: 'Parameters', + }) + ).toBeInTheDocument() expect( screen.getByRole('option', { name: 'Type', }) ).toBeInTheDocument() + expect( + screen.getByRole('option', { + name: 'Body', + }) + ).toBeInTheDocument() expect( screen.getByRole('option', { name: 'Response', }) ).toBeInTheDocument() }) - test.todo('toggling comparison option pushes value to url opts param') - test.todo('unselecting comparison option will remove it from url opts param') - test.todo('selecting clear option will remove all params from url opts param') + test.skip('updating url dispatches store action', () => { + // ;(useDispatch as jest.Mock).mockReturnValue(mockDispatch) + }) }) diff --git a/packages/api-explorer/src/scenes/DiffScene/DiffScene.tsx b/packages/api-explorer/src/scenes/DiffScene/DiffScene.tsx index 13f839ea2..ece65ff78 100644 --- a/packages/api-explorer/src/scenes/DiffScene/DiffScene.tsx +++ b/packages/api-explorer/src/scenes/DiffScene/DiffScene.tsx @@ -40,12 +40,14 @@ import { import { SyncAlt } from '@styled-icons/material/SyncAlt' import { useSelector } from 'react-redux' +import isEqual from 'lodash/isEqual' import { ApixSection } from '../../components' import { selectCurrentSpec, selectSpecs, selectDiffOptions, useSettingActions, + useSettingStoreState, } from '../../state' import { diffPath, getApixAdaptor, useNavigation } from '../../utils' import { useDiffStoreSync } from '../utils' @@ -91,6 +93,7 @@ export const DiffScene: FC = ({ toggleNavigation }) => { const adaptor = getApixAdaptor() const { navigate } = useNavigation() const selectedDiffOptions = useSelector(selectDiffOptions) + const { initialized } = useSettingStoreState() const { setDiffOptionsAction } = useSettingActions() const spec = useSelector(selectCurrentSpec) const specs = useSelector(selectSpecs) @@ -164,14 +167,17 @@ export const DiffScene: FC = ({ toggleNavigation }) => { } useEffect(() => { + if (!initialized) return const searchParams = new URLSearchParams(location.search) const diffOptionsParam = getDiffOptionsFromUrl(searchParams.get('opts')) + // if (isEqual(diffOptionsParam, selectedDiffOptions)) return setDiffOptionsAction({ diffOptions: diffOptionsParam || [], }) }, [location.search]) useEffect(() => { + // if (isEqual(toggles, selectedDiffOptions)) return setToggles(selectedDiffOptions) }, [selectedDiffOptions]) diff --git a/packages/api-explorer/src/scenes/utils/index.ts b/packages/api-explorer/src/scenes/utils/index.ts index ba73d5155..22f453fd4 100644 --- a/packages/api-explorer/src/scenes/utils/index.ts +++ b/packages/api-explorer/src/scenes/utils/index.ts @@ -24,5 +24,4 @@ */ -export { useTagStoreSync } from './hooks' -export { useDiffStoreSync } from './hooks' +export { useTagStoreSync, useDiffStoreSync } from './hooks' From 268ecd38ee3ecc0c6721864d6a8ded34893eba4d Mon Sep 17 00:00:00 2001 From: Niral Patel Date: Fri, 2 Sep 2022 23:33:30 +0000 Subject: [PATCH 28/31] Refactoring file and tests --- packages/api-explorer/package.json | 2 - .../SideNav/SideNavMethods.spec.tsx | 10 +- .../src/scenes/DiffScene/DiffScene.spec.tsx | 118 ++++++++---------- .../src/scenes/DiffScene/DiffScene.tsx | 6 +- .../DiffScene/DocDiff/DiffItem.spec.tsx | 7 +- .../src/scenes/DiffScene/diffUtils.spec.ts | 20 ++- .../src/scenes/DiffScene/diffUtils.ts | 1 - .../src/scenes/utils/hooks/diffStoreSync.ts | 1 + .../api-explorer/src/test-utils/redux.tsx | 18 ++- 9 files changed, 93 insertions(+), 90 deletions(-) diff --git a/packages/api-explorer/package.json b/packages/api-explorer/package.json index d0449f768..5b91b8c1c 100644 --- a/packages/api-explorer/package.json +++ b/packages/api-explorer/package.json @@ -87,9 +87,7 @@ "react": "^16.13.1", "react-diff-viewer": "^3.1.1", "react-dom": "^16.13.1", - "react-helmet-async": "^1.3.0", "react-is": "^16.13.1", - "react-query": "^3.39.2", "react-redux": "^7.2.3", "react-router": "^5.1.2", "react-router-dom": "^5.1.2", diff --git a/packages/api-explorer/src/components/SideNav/SideNavMethods.spec.tsx b/packages/api-explorer/src/components/SideNav/SideNavMethods.spec.tsx index 508d6f457..c9518dd11 100644 --- a/packages/api-explorer/src/components/SideNav/SideNavMethods.spec.tsx +++ b/packages/api-explorer/src/components/SideNav/SideNavMethods.spec.tsx @@ -76,7 +76,10 @@ describe('SideNavMethods', () => { const firstMethod = Object.values(methods)[0].schema.summary expect(screen.queryByText(firstMethod)).not.toBeInTheDocument() userEvent.click(screen.getByText(tag)) - expect(mockHistoryPush).toHaveBeenCalledWith(`/${specKey}/methods/${tag}`) + expect(mockHistoryPush).toHaveBeenCalledWith({ + pathname: `/${specKey}/methods/${tag}`, + search: '', + }) expect(screen.getByRole('link', { name: firstMethod })).toBeInTheDocument() expect(screen.getAllByRole('link')).toHaveLength( Object.values(methods).length @@ -98,7 +101,10 @@ describe('SideNavMethods', () => { Object.values(methods).length ) userEvent.click(screen.getByText(tag)) - expect(mockHistoryPush).toHaveBeenCalledWith(`/${specKey}/methods`) + expect(mockHistoryPush).toHaveBeenCalledWith({ + pathname: `/${specKey}/methods`, + search: '', + }) expect(screen.queryByText(firstMethod)).not.toBeInTheDocument() expect(screen.queryByRole('link')).not.toBeInTheDocument() }) diff --git a/packages/api-explorer/src/scenes/DiffScene/DiffScene.spec.tsx b/packages/api-explorer/src/scenes/DiffScene/DiffScene.spec.tsx index ec6f6af68..f11e0b82f 100644 --- a/packages/api-explorer/src/scenes/DiffScene/DiffScene.spec.tsx +++ b/packages/api-explorer/src/scenes/DiffScene/DiffScene.spec.tsx @@ -36,29 +36,24 @@ import { import { getApixAdaptor } from '../../utils' import { DiffScene } from './DiffScene' -// jest.mock('react-redux', () => { -// const reactRedux = jest.requireActual('react-redux') -// return { -// __esModule: true, -// ...reactRedux, -// useDispatch: jest.fn(reactRedux.useDispatch), -// } -// }) - const mockHistoryPush = jest.fn() jest.mock('react-router-dom', () => { + const location = { + pathname: '/3.1/diff', + search: '', + hash: '', + state: {}, + key: '', + } const ReactRouter = jest.requireActual('react-router-dom') - const mockLocation = jest - .fn() - .mockReturnValue({ pathname: '/3.1/diff', search: '' }) return { __esModule: true, ...ReactRouter, useHistory: () => ({ push: mockHistoryPush, - location: mockLocation, + location, }), - useLocation: mockLocation, + useLocation: jest.fn().mockReturnValue(location), } }) @@ -89,7 +84,49 @@ describe('DiffScene', () => { const toggleNavigation = () => false - test('selecting comparison option pushes value to url opts param', async () => { + test('rendering with no url opts param results in default comparison options toggled', () => { + const store = createTestStore({ + specs: { specs, currentSpecKey: '3.1' }, + }) + renderWithRouterAndReduxProvider( + , + ['/3.1/diff'], + store + ) + + expect( + screen.getByRole('option', { + name: 'Missing Delete', + }) + ).toBeInTheDocument() + expect( + screen.getByRole('option', { + name: 'Parameters Delete', + }) + ).toBeInTheDocument() + expect( + screen.getByRole('option', { + name: 'Type Delete', + }) + ).toBeInTheDocument() + expect( + screen.getByRole('option', { + name: 'Body Delete', + }) + ).toBeInTheDocument() + expect( + screen.queryByRole('option', { + name: 'Status Delete', + }) + ).not.toBeInTheDocument() + expect( + screen.getByRole('option', { + name: 'Response Delete', + }) + ).toBeInTheDocument() + }) + + test('selecting a comparison option pushes it to url opts param', async () => { const store = createTestStore({ specs: { specs, currentSpecKey: '3.1' }, settings: { diffOptions: [] }, @@ -158,55 +195,4 @@ describe('DiffScene', () => { }) }) }) - - // TODO: the following test cases should be able to pass but face unique bugs to this spec file - test('rendering with no url opts param results in default comparison options toggled', () => { - const store = createTestStore({ - specs: { specs, currentSpecKey: '3.1' }, - settings: { - diffOptions: ['missing', 'params', 'type', 'body', 'response'], - }, - }) - renderWithRouterAndReduxProvider( - , - ['/3.1/diff'], - store - ) - /* - * If you uncomment out the following line, this test will err - * informing you that there are multiple elements with this role - * - * Yet if you try querying a specific option, say with a name of - * one of these comparison options, it will err saying it could not find - */ - // expect(screen.getByRole('option')).toBeInTheDocument() - expect( - screen.getByRole('option', { - name: 'Missing', - }) - ).toBeInTheDocument() - expect( - screen.getByRole('option', { - name: 'Parameters', - }) - ).toBeInTheDocument() - expect( - screen.getByRole('option', { - name: 'Type', - }) - ).toBeInTheDocument() - expect( - screen.getByRole('option', { - name: 'Body', - }) - ).toBeInTheDocument() - expect( - screen.getByRole('option', { - name: 'Response', - }) - ).toBeInTheDocument() - }) - test.skip('updating url dispatches store action', () => { - // ;(useDispatch as jest.Mock).mockReturnValue(mockDispatch) - }) }) diff --git a/packages/api-explorer/src/scenes/DiffScene/DiffScene.tsx b/packages/api-explorer/src/scenes/DiffScene/DiffScene.tsx index ece65ff78..fb4e76108 100644 --- a/packages/api-explorer/src/scenes/DiffScene/DiffScene.tsx +++ b/packages/api-explorer/src/scenes/DiffScene/DiffScene.tsx @@ -27,7 +27,7 @@ import type { FC } from 'react' import React, { useState, useEffect } from 'react' import type { ApiModel, DiffRow, SpecList } from '@looker/sdk-codegen' -import { useRouteMatch } from 'react-router-dom' +import { useLocation, useRouteMatch } from 'react-router-dom' import { Box, Flex, @@ -40,7 +40,6 @@ import { import { SyncAlt } from '@styled-icons/material/SyncAlt' import { useSelector } from 'react-redux' -import isEqual from 'lodash/isEqual' import { ApixSection } from '../../components' import { selectCurrentSpec, @@ -92,6 +91,7 @@ const validateParam = (specs: SpecList, specKey = '') => { export const DiffScene: FC = ({ toggleNavigation }) => { const adaptor = getApixAdaptor() const { navigate } = useNavigation() + const location = useLocation() const selectedDiffOptions = useSelector(selectDiffOptions) const { initialized } = useSettingStoreState() const { setDiffOptionsAction } = useSettingActions() @@ -170,14 +170,12 @@ export const DiffScene: FC = ({ toggleNavigation }) => { if (!initialized) return const searchParams = new URLSearchParams(location.search) const diffOptionsParam = getDiffOptionsFromUrl(searchParams.get('opts')) - // if (isEqual(diffOptionsParam, selectedDiffOptions)) return setDiffOptionsAction({ diffOptions: diffOptionsParam || [], }) }, [location.search]) useEffect(() => { - // if (isEqual(toggles, selectedDiffOptions)) return setToggles(selectedDiffOptions) }, [selectedDiffOptions]) diff --git a/packages/api-explorer/src/scenes/DiffScene/DocDiff/DiffItem.spec.tsx b/packages/api-explorer/src/scenes/DiffScene/DocDiff/DiffItem.spec.tsx index 01109034c..8ba670eaa 100644 --- a/packages/api-explorer/src/scenes/DiffScene/DocDiff/DiffItem.spec.tsx +++ b/packages/api-explorer/src/scenes/DiffScene/DocDiff/DiffItem.spec.tsx @@ -51,10 +51,9 @@ describe('DiffMethodLink', () => { const link = screen.getByRole('link') expect(link).toHaveTextContent(`${method.name} for ${specKey}`) fireEvent.click(link) - expect(pushSpy).toHaveBeenCalledWith({ - pathname: `/${specKey}/methods/${method.schema.tags[0]}/${method.name}`, - search: '', - }) + expect(pushSpy).toHaveBeenCalledWith( + `/${specKey}/methods/${method.schema.tags[0]}/${method.name}` + ) }) test('it renders missing method and does not navigate on click', () => { diff --git a/packages/api-explorer/src/scenes/DiffScene/diffUtils.spec.ts b/packages/api-explorer/src/scenes/DiffScene/diffUtils.spec.ts index 2f2777fb6..bb559b398 100644 --- a/packages/api-explorer/src/scenes/DiffScene/diffUtils.spec.ts +++ b/packages/api-explorer/src/scenes/DiffScene/diffUtils.spec.ts @@ -72,11 +72,29 @@ describe('diffUtils', () => { }) test('omits invalid diffScene options from input', () => { - const testOptionsParam = 'INVALID,missing,type' + const testOptionsParam = 'INVALID,missing,INVALID,type,INVALID' expect(getDiffOptionsFromUrl(testOptionsParam)).toEqual([ 'missing', 'type', ]) }) + + test('omits duplicate diffScene options from input', () => { + const testOptionsParam = 'missing,missing,type,type,type' + expect(getDiffOptionsFromUrl(testOptionsParam)).toEqual([ + 'missing', + 'type', + ]) + }) + + test('disregards case sensitivity of options', () => { + const testOptionsParam = 'mIssInG,tYpE,PARAMS,boDy' + expect(getDiffOptionsFromUrl(testOptionsParam)).toEqual([ + 'missing', + 'type', + 'params', + 'body', + ]) + }) }) }) diff --git a/packages/api-explorer/src/scenes/DiffScene/diffUtils.ts b/packages/api-explorer/src/scenes/DiffScene/diffUtils.ts index a40a26a27..6261ecfa4 100644 --- a/packages/api-explorer/src/scenes/DiffScene/diffUtils.ts +++ b/packages/api-explorer/src/scenes/DiffScene/diffUtils.ts @@ -124,7 +124,6 @@ export const diffToSpec = ( * @param opts url diff options parameter value */ export const getDiffOptionsFromUrl = (opts: string | null) => { - // expect input to be a comma-delimited list as a string if (!opts) return null const diffOptions: string[] = [] for (const option of opts.split(',')) { diff --git a/packages/api-explorer/src/scenes/utils/hooks/diffStoreSync.ts b/packages/api-explorer/src/scenes/utils/hooks/diffStoreSync.ts index 917c4f876..a097f4357 100644 --- a/packages/api-explorer/src/scenes/utils/hooks/diffStoreSync.ts +++ b/packages/api-explorer/src/scenes/utils/hooks/diffStoreSync.ts @@ -54,6 +54,7 @@ export const useDiffStoreSync = () => { const diffOptionsParam = getDiffOptionsFromUrl(params.get('opts')) if (diffOptionsParam) { setDiffOptionsAction({ diffOptions: diffOptionsParam }) + // update url to reflect valid param entries navigate(location.pathname, { opts: diffOptionsParam.join(',') }) } else { // must confirm store tag filter param is valid for tag type before updating diff --git a/packages/api-explorer/src/test-utils/redux.tsx b/packages/api-explorer/src/test-utils/redux.tsx index 4071150df..f0f6023a8 100644 --- a/packages/api-explorer/src/test-utils/redux.tsx +++ b/packages/api-explorer/src/test-utils/redux.tsx @@ -46,12 +46,6 @@ import { import { specState } from '../test-data' import { renderWithRouter } from './router' -export const preloadedState: RootState = { - settings: defaultSettingsState, - lodes: defaultLodesState, - specs: defaultSpecsState, -} - export const withReduxProvider = ( consumers: ReactElement, store: Store = createTestStore() @@ -74,13 +68,18 @@ export const renderWithRouterAndReduxProvider = ( ) => renderWithRouter(withReduxProvider(consumers, store), initialEntries, options) +export const preloadedState: RootState = { + settings: defaultSettingsState, + lodes: defaultLodesState, + specs: defaultSpecsState, +} + type DeepPartial = { [P in keyof T]?: DeepPartial } -export const createTestStore = (overrides?: DeepPartial) => { - // TODO: revert back to implicit return after fixing default initialization issue - return createStore({ +export const createTestStore = (overrides?: DeepPartial) => + createStore({ preloadedState: { settings: { ...preloadedState.settings, @@ -101,4 +100,3 @@ export const createTestStore = (overrides?: DeepPartial) => { specs: specsSlice.reducer, }, }) -} From 7e8e5581ab72617131d0bca26901351f1782398b Mon Sep 17 00:00:00 2001 From: Niral Patel Date: Tue, 6 Sep 2022 00:30:17 +0000 Subject: [PATCH 29/31] Wrap up DiffScene spec, WIP e2e --- .../src/components/SideNav/SideNav.tsx | 6 ++--- .../src/scenes/DiffScene/DiffScene.spec.tsx | 17 ++++++------ .../src/scenes/DiffScene/DiffScene.tsx | 4 +-- .../src/scenes/DiffScene/diffUtils.spec.ts | 27 +++++++++---------- .../src/scenes/DiffScene/diffUtils.ts | 4 +-- .../scenes/utils/hooks/diffStoreSync.spec.ts | 6 ++--- .../src/scenes/utils/hooks/diffStoreSync.ts | 9 +++---- .../src/state/settings/selectors.spec.ts | 13 ++++++++- 8 files changed, 47 insertions(+), 39 deletions(-) diff --git a/packages/api-explorer/src/components/SideNav/SideNav.tsx b/packages/api-explorer/src/components/SideNav/SideNav.tsx index b17431050..1481d654c 100644 --- a/packages/api-explorer/src/components/SideNav/SideNav.tsx +++ b/packages/api-explorer/src/components/SideNav/SideNav.tsx @@ -70,7 +70,7 @@ interface SideNavProps { export const SideNav: FC = ({ headless = false, spec }) => { const location = useLocation() - const { navigate } = useNavigation() + const { navigate, navigateWithGlobalParams } = useNavigation() const specKey = spec.key const tabNames = ['methods', 'types'] const pathParts = location.pathname.split('/') @@ -84,12 +84,12 @@ export const SideNav: FC = ({ headless = false, spec }) => { if (parts[1] === 'diff') { if (parts[3] !== tabNames[index]) { parts[3] = tabNames[index] - navigate(parts.join('/'), { t: null }) + navigateWithGlobalParams(parts.join('/')) } } else { if (parts[2] !== tabNames[index]) { parts[2] = tabNames[index] - navigate(parts.join('/'), { t: null }) + navigateWithGlobalParams(parts.join('/')) } } } diff --git a/packages/api-explorer/src/scenes/DiffScene/DiffScene.spec.tsx b/packages/api-explorer/src/scenes/DiffScene/DiffScene.spec.tsx index f11e0b82f..d24ad1737 100644 --- a/packages/api-explorer/src/scenes/DiffScene/DiffScene.spec.tsx +++ b/packages/api-explorer/src/scenes/DiffScene/DiffScene.spec.tsx @@ -24,7 +24,7 @@ */ import React from 'react' -import { screen, waitFor } from '@testing-library/react' +import { screen, waitFor, within } from '@testing-library/react' import type { SpecItem } from '@looker/sdk-codegen' import userEvent from '@testing-library/user-event' @@ -75,7 +75,7 @@ jest.mock('../../utils/apixAdaptor', () => { }) describe('DiffScene', () => { - afterEach(() => { + beforeEach(() => { jest.clearAllMocks() }) ;(getApixAdaptor as jest.Mock).mockReturnValue(mockApixAdaptor) @@ -137,6 +137,9 @@ describe('DiffScene', () => { store ) userEvent.click(screen.getByPlaceholderText('Comparison options')) + await waitFor(() => { + expect(screen.getByRole('dialog')).toBeInTheDocument() + }) userEvent.click( screen.getByRole('option', { name: 'Missing', @@ -160,12 +163,10 @@ describe('DiffScene', () => { ['/3.1/diff'], store ) - userEvent.click(screen.getByPlaceholderText('Comparison options')) - userEvent.click( - screen.getByRole('option', { - name: 'Missing', - }) - ) + const missingOption = screen.getByRole('option', { + name: 'Missing Delete', + }) + userEvent.click(within(missingOption).getByRole('button')) await waitFor(() => { expect(mockHistoryPush).toHaveBeenLastCalledWith({ pathname: '/3.1/diff', diff --git a/packages/api-explorer/src/scenes/DiffScene/DiffScene.tsx b/packages/api-explorer/src/scenes/DiffScene/DiffScene.tsx index fb4e76108..0fc6bc85d 100644 --- a/packages/api-explorer/src/scenes/DiffScene/DiffScene.tsx +++ b/packages/api-explorer/src/scenes/DiffScene/DiffScene.tsx @@ -50,7 +50,7 @@ import { } from '../../state' import { diffPath, getApixAdaptor, useNavigation } from '../../utils' import { useDiffStoreSync } from '../utils' -import { diffSpecs, getDiffOptionsFromUrl } from './diffUtils' +import { diffSpecs, getValidDiffOptions } from './diffUtils' import { DocDiff } from './DocDiff' const diffToggles = [ @@ -169,7 +169,7 @@ export const DiffScene: FC = ({ toggleNavigation }) => { useEffect(() => { if (!initialized) return const searchParams = new URLSearchParams(location.search) - const diffOptionsParam = getDiffOptionsFromUrl(searchParams.get('opts')) + const diffOptionsParam = getValidDiffOptions(searchParams.get('opts')) setDiffOptionsAction({ diffOptions: diffOptionsParam || [], }) diff --git a/packages/api-explorer/src/scenes/DiffScene/diffUtils.spec.ts b/packages/api-explorer/src/scenes/DiffScene/diffUtils.spec.ts index bb559b398..9418a6e79 100644 --- a/packages/api-explorer/src/scenes/DiffScene/diffUtils.spec.ts +++ b/packages/api-explorer/src/scenes/DiffScene/diffUtils.spec.ts @@ -27,7 +27,7 @@ import type { DiffRow } from '@looker/sdk-codegen' import { startCount } from '@looker/sdk-codegen' import { api, api40 } from '../../test-data' -import { diffToSpec, getDiffOptionsFromUrl } from './diffUtils' +import { diffToSpec, getValidDiffOptions } from './diffUtils' describe('diffUtils', () => { test('builds a psuedo spec from diff', () => { @@ -64,32 +64,29 @@ describe('diffUtils', () => { expect(Object.keys(spec.types)).toEqual([]) }) - describe('getDiffOptionsFromUrl', () => { - test('returns null if provided null input or given invalid diffscene options', () => { - expect(getDiffOptionsFromUrl(null)).toBeNull() + describe('getValidDiffOptions', () => { + test('returns null if provided null input', () => { + expect(getValidDiffOptions(null)).toBeNull() + }) + + test('returns null if input contains no valid diffscene options', () => { const testOptionsParam = 'INVALID,INVALID1,INVALID2' - expect(getDiffOptionsFromUrl(testOptionsParam)).toBeNull() + expect(getValidDiffOptions(testOptionsParam)).toBeNull() }) - test('omits invalid diffScene options from input', () => { + test('omits invalid diffScene options given input with valid options', () => { const testOptionsParam = 'INVALID,missing,INVALID,type,INVALID' - expect(getDiffOptionsFromUrl(testOptionsParam)).toEqual([ - 'missing', - 'type', - ]) + expect(getValidDiffOptions(testOptionsParam)).toEqual(['missing', 'type']) }) test('omits duplicate diffScene options from input', () => { const testOptionsParam = 'missing,missing,type,type,type' - expect(getDiffOptionsFromUrl(testOptionsParam)).toEqual([ - 'missing', - 'type', - ]) + expect(getValidDiffOptions(testOptionsParam)).toEqual(['missing', 'type']) }) test('disregards case sensitivity of options', () => { const testOptionsParam = 'mIssInG,tYpE,PARAMS,boDy' - expect(getDiffOptionsFromUrl(testOptionsParam)).toEqual([ + expect(getValidDiffOptions(testOptionsParam)).toEqual([ 'missing', 'type', 'params', diff --git a/packages/api-explorer/src/scenes/DiffScene/diffUtils.ts b/packages/api-explorer/src/scenes/DiffScene/diffUtils.ts index 6261ecfa4..bac9230ba 100644 --- a/packages/api-explorer/src/scenes/DiffScene/diffUtils.ts +++ b/packages/api-explorer/src/scenes/DiffScene/diffUtils.ts @@ -120,10 +120,10 @@ export const diffToSpec = ( } /** - * Gets all valid diff options from the url opts parameter + * Returns all valid diff options contained in list * @param opts url diff options parameter value */ -export const getDiffOptionsFromUrl = (opts: string | null) => { +export const getValidDiffOptions = (opts: string | null) => { if (!opts) return null const diffOptions: string[] = [] for (const option of opts.split(',')) { diff --git a/packages/api-explorer/src/scenes/utils/hooks/diffStoreSync.spec.ts b/packages/api-explorer/src/scenes/utils/hooks/diffStoreSync.spec.ts index cd4cfe071..93d905ea4 100644 --- a/packages/api-explorer/src/scenes/utils/hooks/diffStoreSync.spec.ts +++ b/packages/api-explorer/src/scenes/utils/hooks/diffStoreSync.spec.ts @@ -32,9 +32,9 @@ import { createTestStore, withReduxProvider } from '../../../test-utils' import { useDiffStoreSync } from './diffStoreSync' jest.mock('react-router', () => { - const ReactRouter = jest.requireActual('react-router') + const ReactRouterDom = jest.requireActual('react-router-dom') return { - ...ReactRouter, + ...ReactRouterDom, useHistory: jest.fn().mockReturnValue({ push: jest.fn(), location }), useLocation: jest.fn().mockReturnValue({ pathname: '/', search: '' }), } @@ -100,7 +100,7 @@ describe('useDiffStoreSync', () => { }) }) - test('filters invalid options out of url options parameter if present', () => { + test('filters invalid options out of url options parameter and updates url during sync', () => { const { push } = useHistory() const store = createTestStore({ settings: { diff --git a/packages/api-explorer/src/scenes/utils/hooks/diffStoreSync.ts b/packages/api-explorer/src/scenes/utils/hooks/diffStoreSync.ts index a097f4357..228abde58 100644 --- a/packages/api-explorer/src/scenes/utils/hooks/diffStoreSync.ts +++ b/packages/api-explorer/src/scenes/utils/hooks/diffStoreSync.ts @@ -32,7 +32,7 @@ import { useSettingStoreState, } from '../../../state' import { useNavigation } from '../../../utils' -import { getDiffOptionsFromUrl } from '../../DiffScene/diffUtils' +import { getValidDiffOptions } from '../../DiffScene/diffUtils' /** * Hook for syncing diff scene URL params with the Redux store @@ -49,15 +49,14 @@ export const useDiffStoreSync = () => { useEffect(() => { if (initialized) { const params = new URLSearchParams(location.search) - - // syncing diff options on diff scene page - const diffOptionsParam = getDiffOptionsFromUrl(params.get('opts')) + // sync store with url opts param if valid + const diffOptionsParam = getValidDiffOptions(params.get('opts')) if (diffOptionsParam) { setDiffOptionsAction({ diffOptions: diffOptionsParam }) // update url to reflect valid param entries navigate(location.pathname, { opts: diffOptionsParam.join(',') }) } else { - // must confirm store tag filter param is valid for tag type before updating + // sync url opts param with store navigate(location.pathname, { opts: selectedDiffOptions ? selectedDiffOptions.join(',') : null, }) diff --git a/packages/api-explorer/src/state/settings/selectors.spec.ts b/packages/api-explorer/src/state/settings/selectors.spec.ts index 762ddce04..9dee34ff3 100644 --- a/packages/api-explorer/src/state/settings/selectors.spec.ts +++ b/packages/api-explorer/src/state/settings/selectors.spec.ts @@ -24,13 +24,24 @@ */ import { createTestStore, preloadedState } from '../../test-utils' -import { selectSdkLanguage, isInitialized, selectTagFilter } from './selectors' +import { + selectSdkLanguage, + isInitialized, + selectTagFilter, + selectDiffOptions, +} from './selectors' const testStore = createTestStore() describe('Settings selectors', () => { const state = testStore.getState() + test('selectDiffOptions selects', () => { + expect(selectDiffOptions(state)).toEqual( + preloadedState.settings.diffOptions + ) + }) + test('selectSdkLanguage selects', () => { expect(selectSdkLanguage(state)).toEqual( preloadedState.settings.sdkLanguage From a8965ea348575f5d2ac3fdcd1acd266b4480c1d1 Mon Sep 17 00:00:00 2001 From: Niral Patel Date: Tue, 6 Sep 2022 06:00:15 +0000 Subject: [PATCH 30/31] Added 1 e2e test for DiffScene --- packages/api-explorer/e2e/diffScene.spec.ts | 75 ++++++++++++++++++++- 1 file changed, 73 insertions(+), 2 deletions(-) diff --git a/packages/api-explorer/e2e/diffScene.spec.ts b/packages/api-explorer/e2e/diffScene.spec.ts index fe6fa60b3..9f6b0180c 100644 --- a/packages/api-explorer/e2e/diffScene.spec.ts +++ b/packages/api-explorer/e2e/diffScene.spec.ts @@ -36,6 +36,7 @@ const resultCardsSelector = 'section#top div[class*=SpaceVertical] div[class*=Card]' const baseInputSelector = 'input#listbox-input-base' const compInputSelector = 'input#listbox-input-compare' +const compOptionsInputSelector = 'input#listbox-input-options' const globalOptionsSelector = '#modal-root [role=option] span' const switchButtonSelector = '.switch-button' @@ -225,7 +226,9 @@ describe('Diff Scene', () => { // Check the URL // Would like to do this earlier, but not sure what to wait on const compUrl = page.url() - expect(compUrl).toEqual(`${BASE_URL}/3.1/diff/4.0?sdk=py`) + expect(compUrl).toEqual( + `${BASE_URL}/3.1/diff/4.0?sdk=py&opts=missing%2Cparams%2Ctype%2Cbody%2Cresponse` + ) // Check the results const diffResultCards = await page.$$(resultCardsSelector) @@ -253,7 +256,9 @@ describe('Diff Scene', () => { await page.waitForTimeout(150) const switchUrl = page.url() - expect(switchUrl).toEqual(`${BASE_URL}/4.0/diff/3.1?sdk=py`) + expect(switchUrl).toEqual( + `${BASE_URL}/4.0/diff/3.1?sdk=py&opts=missing%2Cparams%2Ctype%2Cbody%2Cresponse` + ) // Check the results again, even though they should be the same const diff40to31Page1Methods = await Promise.all( @@ -265,4 +270,70 @@ describe('Diff Scene', () => { expect(diff40to31Page1Methods).toHaveLength(15) expect(diff40to31Page1Methods).toContain('delete_board_item') }) + + it('updates when a comparison option is toggled', async () => { + await goToPage(`${BASE_URL}/3.1/diff/4.0`) + + // expect default diff options in url + expect(page.url()).toEqual( + `${BASE_URL}/3.1/diff/4.0?sdk=py&opts=missing%2Cparams%2Ctype%2Cbody%2Cresponse` + ) + + // "Base" input element + const baseInputElement = await page.$(baseInputSelector) + expect(baseInputElement).not.toBeNull() + + // "Comparison" input element + const compInputElement = await page.$(compInputSelector) + expect(compInputElement).not.toBeNull() + + // "Comparison Options" input element + const compOptionsInputElement = await page.$(compOptionsInputSelector) + expect(compOptionsInputElement).not.toBeNull() + + // Check that initial results exist with default comparison options + const initDiffResults = await page.$$(resultCardsSelector) + expect(initDiffResults).not.toHaveLength(0) + const initDiff31to40Page1Methods = await Promise.all( + initDiffResults.map((resultCard) => + page.evaluate((el) => el.innerText.match(/^[a-z_]*/)[0], resultCard) + ) + ) + expect(initDiff31to40Page1Methods).toHaveLength(15) + expect(initDiff31to40Page1Methods).toContain('delete_alert') + + // Click comparison input + await compOptionsInputElement!.click() + const compOptionsOnClick = await page.$$(globalOptionsSelector) + expect(compOptionsOnClick).toHaveLength(6) + + // Find an option containing the text Missing + const missingOptionIndex = await page.$$eval(globalOptionsSelector, (els) => + els.findIndex((el) => el?.textContent?.match('Missing')) + ) + const missingOption = compOptionsOnClick[missingOptionIndex] + expect(missingOption).not.toBeUndefined() + + // Click that option + await missingOption.click() + await page.waitForSelector(resultCardsSelector, { timeout: 5000 }) + + // Check the URL + // Would like to do this earlier, but not sure what to wait on + const compUrl = page.url() + expect(compUrl).toEqual( + `${BASE_URL}/3.1/diff/4.0?sdk=py&opts=params%2Ctype%2Cbody%2Cresponse` + ) + + // Check that there are new results + const newDiffResults = await page.$$(resultCardsSelector) + expect(newDiffResults).not.toHaveLength(0) + const newDiff31to40Page1Methods = await Promise.all( + newDiffResults.map((resultCard) => + page.evaluate((el) => el.innerText.match(/^[a-z_]*/)[0], resultCard) + ) + ) + expect(newDiff31to40Page1Methods).toHaveLength(15) + expect(newDiff31to40Page1Methods).not.toContain('delete_alert') + }) }) From c34fdeec5a053ec1a2d0440228f8e355c0104388 Mon Sep 17 00:00:00 2001 From: Niral Patel Date: Wed, 7 Sep 2022 22:59:17 +0000 Subject: [PATCH 31/31] Refactoring diffUtils function --- packages/api-explorer/src/scenes/DiffScene/DiffScene.tsx | 2 +- packages/api-explorer/src/scenes/DiffScene/diffUtils.spec.ts | 4 ++-- packages/api-explorer/src/scenes/DiffScene/diffUtils.ts | 4 ++-- packages/api-explorer/src/scenes/utils/hooks/diffStoreSync.ts | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/api-explorer/src/scenes/DiffScene/DiffScene.tsx b/packages/api-explorer/src/scenes/DiffScene/DiffScene.tsx index 0fc6bc85d..524723e0e 100644 --- a/packages/api-explorer/src/scenes/DiffScene/DiffScene.tsx +++ b/packages/api-explorer/src/scenes/DiffScene/DiffScene.tsx @@ -171,7 +171,7 @@ export const DiffScene: FC = ({ toggleNavigation }) => { const searchParams = new URLSearchParams(location.search) const diffOptionsParam = getValidDiffOptions(searchParams.get('opts')) setDiffOptionsAction({ - diffOptions: diffOptionsParam || [], + diffOptions: diffOptionsParam, }) }, [location.search]) diff --git a/packages/api-explorer/src/scenes/DiffScene/diffUtils.spec.ts b/packages/api-explorer/src/scenes/DiffScene/diffUtils.spec.ts index 9418a6e79..0fd68e68f 100644 --- a/packages/api-explorer/src/scenes/DiffScene/diffUtils.spec.ts +++ b/packages/api-explorer/src/scenes/DiffScene/diffUtils.spec.ts @@ -66,12 +66,12 @@ describe('diffUtils', () => { describe('getValidDiffOptions', () => { test('returns null if provided null input', () => { - expect(getValidDiffOptions(null)).toBeNull() + expect(getValidDiffOptions(null)).toHaveLength(0) }) test('returns null if input contains no valid diffscene options', () => { const testOptionsParam = 'INVALID,INVALID1,INVALID2' - expect(getValidDiffOptions(testOptionsParam)).toBeNull() + expect(getValidDiffOptions(testOptionsParam)).toHaveLength(0) }) test('omits invalid diffScene options given input with valid options', () => { diff --git a/packages/api-explorer/src/scenes/DiffScene/diffUtils.ts b/packages/api-explorer/src/scenes/DiffScene/diffUtils.ts index bac9230ba..4113f4a28 100644 --- a/packages/api-explorer/src/scenes/DiffScene/diffUtils.ts +++ b/packages/api-explorer/src/scenes/DiffScene/diffUtils.ts @@ -124,7 +124,7 @@ export const diffToSpec = ( * @param opts url diff options parameter value */ export const getValidDiffOptions = (opts: string | null) => { - if (!opts) return null + if (!opts) return [] const diffOptions: string[] = [] for (const option of opts.split(',')) { const op = option.toLowerCase() @@ -132,5 +132,5 @@ export const getValidDiffOptions = (opts: string | null) => { diffOptions.push(option.toLowerCase()) } } - return diffOptions.length ? diffOptions : null + return diffOptions } diff --git a/packages/api-explorer/src/scenes/utils/hooks/diffStoreSync.ts b/packages/api-explorer/src/scenes/utils/hooks/diffStoreSync.ts index 228abde58..b37629303 100644 --- a/packages/api-explorer/src/scenes/utils/hooks/diffStoreSync.ts +++ b/packages/api-explorer/src/scenes/utils/hooks/diffStoreSync.ts @@ -51,7 +51,7 @@ export const useDiffStoreSync = () => { const params = new URLSearchParams(location.search) // sync store with url opts param if valid const diffOptionsParam = getValidDiffOptions(params.get('opts')) - if (diffOptionsParam) { + if (diffOptionsParam.length) { setDiffOptionsAction({ diffOptions: diffOptionsParam }) // update url to reflect valid param entries navigate(location.pathname, { opts: diffOptionsParam.join(',') })