-
Notifications
You must be signed in to change notification settings - Fork 133
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Jotai migration isFeedbackModalOpen (#2860)
* Jotai migration isFeedbackModalOpen * Update Jotai migration isFeedbackModalOpen * Use different atom method * Add tests for Jotai migration isFeedbackModalOpen * Remove toggleFeedbackModal function from reducers * Remove dead code --------- Co-authored-by: Adam Jetmar <ajetmar@redhat.com>
- Loading branch information
Showing
11 changed files
with
171 additions
and
68 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,141 @@ | ||
| import React, { Context, createContext, useContext, useState } from 'react'; | ||
| import { createChromeContext } from '../../../src/chrome/create-chrome'; | ||
| import { ChromeAPI } from '@redhat-cloud-services/types'; | ||
| import { AnalyticsBrowser } from '@segment/analytics-next'; | ||
| import { ChromeAuthContextValue } from '../../../src/auth/ChromeAuthContext'; | ||
| import { getSharedScope, initSharedScope } from '@scalprum/core'; | ||
| import { Store } from 'redux'; | ||
| import Feedback from '../../../src/components/Feedback'; | ||
| import { IntlProvider } from 'react-intl'; | ||
| import InternalChromeContext from '../../../src/utils/internalChromeContext'; | ||
| import { Provider as JotaiProvider } from 'jotai'; | ||
| import chromeStore from '../../../src/state/chromeStore'; | ||
|
|
||
| describe('Feedback Modal', () => { | ||
| let chromeContext: Context<ChromeAPI>; | ||
| let contextValue: ChromeAPI; | ||
| const NestedComponen = () => { | ||
| return ( | ||
| <IntlProvider locale="en"> | ||
| <InternalChromeContext.Provider value={{ getEnvironment: () => 'stage' } as any}> | ||
| <Feedback /> | ||
| </InternalChromeContext.Provider> | ||
| </IntlProvider> | ||
| ); | ||
| }; | ||
| const InnerComponent = () => { | ||
| const { usePendoFeedback } = useContext(chromeContext); | ||
| usePendoFeedback(); | ||
| return null; | ||
| }; | ||
|
|
||
| const Wrapper = () => { | ||
| const [removeComponent, setRemoveComponent] = useState(false); | ||
| return ( | ||
| <IntlProvider locale="en"> | ||
| <InternalChromeContext.Provider value={{ getEnvironment: () => 'stage' } as any}> | ||
| <Feedback /> | ||
| {!removeComponent ? <InnerComponent /> : null} | ||
| <button onClick={() => setRemoveComponent(true)}>Remove component from dom</button> | ||
| </InternalChromeContext.Provider> | ||
| </IntlProvider> | ||
| ); | ||
| }; | ||
|
|
||
| const CustomButton = () => { | ||
| const { toggleFeedbackModal } = useContext(chromeContext); | ||
|
|
||
| return ( | ||
| <button style={{ padding: '5px 10px' }} onClick={() => toggleFeedbackModal(true)}> | ||
| Custom feedback button | ||
| </button> | ||
| ); | ||
| }; | ||
|
|
||
| const CustomComponent = () => { | ||
| return ( | ||
| <IntlProvider locale="en"> | ||
| <JotaiProvider store={chromeStore}> | ||
| <InternalChromeContext.Provider value={{ getEnvironment: () => 'stage' } as any}> | ||
| <CustomButton /> | ||
| <Feedback /> | ||
| </InternalChromeContext.Provider> | ||
| </JotaiProvider> | ||
| </IntlProvider> | ||
| ); | ||
| }; | ||
|
|
||
| beforeEach(() => { | ||
| initSharedScope(); | ||
| const scope = getSharedScope(); | ||
| scope['@chrome/visibilityFunctions'] = { | ||
| '*': { | ||
| loaded: 1, | ||
| get: () => {}, | ||
| }, | ||
| }; | ||
| contextValue = createChromeContext({ | ||
| analytics: {} as AnalyticsBrowser, | ||
| chromeAuth: { | ||
| getUser: () => Promise.resolve({}), | ||
| } as ChromeAuthContextValue, | ||
| helpTopics: {} as ChromeAPI['helpTopics'], | ||
| quickstartsAPI: {} as ChromeAPI['quickStarts'], | ||
| registerModule: () => {}, | ||
| setPageMetadata: () => {}, | ||
| store: { | ||
| dispatch: () => {}, | ||
| } as unknown as Store, | ||
| useGlobalFilter: () => {}, | ||
| }); | ||
| chromeContext = createContext(contextValue); | ||
| }); | ||
| it('should test opening and closing feedback modal', () => { | ||
| const Modal = () => { | ||
| return ( | ||
| <chromeContext.Provider value={contextValue}> | ||
| <NestedComponen /> | ||
| </chromeContext.Provider> | ||
| ); | ||
| }; | ||
| cy.mount(<Modal />); | ||
| cy.contains('Tell us about your experience').should('not.exist'); | ||
| cy.contains('Feedback').click(); | ||
| cy.contains('Tell us about your experience').should('exist'); | ||
| cy.get('[aria-label="Close"]').click(); | ||
| cy.contains('Tell us about your experience').should('not.exist'); | ||
| }); | ||
|
|
||
| it('should test pendoFeedback', () => { | ||
| const Context = () => { | ||
| return ( | ||
| <chromeContext.Provider value={contextValue}> | ||
| <Wrapper /> | ||
| </chromeContext.Provider> | ||
| ); | ||
| }; | ||
| cy.mount(<Context />); | ||
| cy.contains('Tell us about your experience').should('not.exist'); | ||
| cy.contains('Feedback').click(); | ||
| cy.contains('Tell us about your experience').should('not.exist'); | ||
| cy.contains('Remove component from dom').click(); | ||
| cy.contains('Feedback').click(); | ||
| cy.contains('Tell us about your experience').should('exist'); | ||
| }); | ||
|
|
||
| it('should use custom feedback button to open feedback modal', () => { | ||
| const CustomModal = () => { | ||
| return ( | ||
| <chromeContext.Provider value={contextValue}> | ||
| <CustomComponent /> | ||
| </chromeContext.Provider> | ||
| ); | ||
| }; | ||
| cy.mount(<CustomModal />); | ||
| cy.contains('Tell us about your experience').should('not.exist'); | ||
| cy.contains('Custom feedback button').click(); | ||
| cy.contains('Tell us about your experience').should('exist'); | ||
| cy.get('[aria-label="Close"]').click(); | ||
| cy.contains('Tell us about your experience').should('not.exist'); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,22 +1,20 @@ | ||
| import { useEffect } from 'react'; | ||
| import { spinUpStore } from '../../redux/redux-config'; | ||
| import { setPendoFeedbackFlag } from '../../redux/actions'; | ||
| import { useSetAtom } from 'jotai'; | ||
| import { usePendoFeedbackAtom } from '../../state/atoms/feedbackModalAtom'; | ||
|
|
||
| const usePendoFeedback = () => { | ||
| /** | ||
| * We have to use the "spinUpStore" instead of just calling useDispatch | ||
| * Otherwise we will end up using the "dispatch" instance from the application not chrome! | ||
| */ | ||
| const { | ||
| store: { dispatch }, | ||
| } = spinUpStore(); | ||
| const setPendoFeedback = useSetAtom(usePendoFeedbackAtom); | ||
|
|
||
| useEffect(() => { | ||
| dispatch(setPendoFeedbackFlag(true)); | ||
| setPendoFeedback(true); | ||
| return () => { | ||
| dispatch(setPendoFeedbackFlag(false)); | ||
| setPendoFeedback(false); | ||
| }; | ||
| }, []); | ||
| }, [setPendoFeedback]); | ||
| }; | ||
|
|
||
| export default usePendoFeedback; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| import { atom } from 'jotai'; | ||
|
|
||
| export const isFeedbackModalOpenAtom = atom(false); | ||
| export const usePendoFeedbackAtom = atom(false); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters