diff --git a/src/editors/components/EditorHeader/HeaderTitle.jsx b/src/editors/components/EditorHeader/HeaderTitle.jsx index 3c8929c38..bcdc34f75 100644 --- a/src/editors/components/EditorHeader/HeaderTitle.jsx +++ b/src/editors/components/EditorHeader/HeaderTitle.jsx @@ -16,7 +16,7 @@ export const HeaderTitle = ({ intl, isInitialized, setBlockTitle, - typeHeader, + returnTitle, }) => { if (!isInitialized) { return intl.formatMessage(messages.loading); } const { @@ -30,7 +30,7 @@ export const HeaderTitle = ({ } = localTitleHooks({ editorRef, setBlockTitle, - typeHeader, + returnTitle, }); if (isEditing) { @@ -75,11 +75,11 @@ HeaderTitle.propTypes = { // redux isInitialized: PropTypes.bool.isRequired, setBlockTitle: PropTypes.func.isRequired, - typeHeader: PropTypes.string.isRequired, + returnTitle: PropTypes.string.isRequired, }; export const mapStateToProps = (state) => ({ - typeHeader: selectors.app.typeHeader(state), + returnTitle: selectors.app.returnTitle(state), isInitialized: selectors.app.isInitialized(state), }); diff --git a/src/editors/components/EditorHeader/HeaderTitle.test.jsx b/src/editors/components/EditorHeader/HeaderTitle.test.jsx index fb43661bd..c3872a3e5 100644 --- a/src/editors/components/EditorHeader/HeaderTitle.test.jsx +++ b/src/editors/components/EditorHeader/HeaderTitle.test.jsx @@ -14,7 +14,7 @@ jest.mock('../../data/redux', () => ({ }, selectors: { app: { - typeHeader: jest.fn(state => ({ typeHeader: state })), + returnTitle: jest.fn(state => ({ returnTitle: state })), isInitialized: jest.fn(state => ({ studioEndpointUrl: state })), }, }, @@ -30,7 +30,7 @@ describe('HeaderTitle', () => { editorRef: jest.fn().mockName('args.editorRef'), isInitialized: false, setBlockTitle: jest.fn().mockName('args.setBlockTitle'), - typeHeader: 'html', + returnTitle: 'html', }; const localTitleHooksProps = { inputRef: jest.fn().mockName('localTitleHooks.inputRef'), @@ -49,7 +49,7 @@ describe('HeaderTitle', () => { expect(localTitleHooks).toHaveBeenCalledWith({ editorRef: props.editorRef, setBlockTitle: props.setBlockTitle, - typeHeader: props.typeHeader, + returnTitle: props.returnTitle, }); }); }); @@ -70,9 +70,9 @@ describe('HeaderTitle', () => { describe('mapStateToProps', () => { const testState = { T: 'esting', S: 'tate' }; - test('typeHeader from app.typeHeader', () => { - expect(module.mapStateToProps(testState).typeHeader) - .toEqual(selectors.app.typeHeader(testState)); + test('returnTitle from app.returnTitle', () => { + expect(module.mapStateToProps(testState).returnTitle) + .toEqual(selectors.app.returnTitle(testState)); }); test('isInitialized from app.isInitialized', () => { expect(module.mapStateToProps(testState).isInitialized) diff --git a/src/editors/components/EditorHeader/hooks.js b/src/editors/components/EditorHeader/hooks.js index 42a490a32..bdb7ac0ce 100644 --- a/src/editors/components/EditorHeader/hooks.js +++ b/src/editors/components/EditorHeader/hooks.js @@ -13,9 +13,9 @@ export const hooks = { localTitle: ({ setBlockTitle, stopEditing, - typeHeader, + returnTitle, }) => { - const [localTitle, setLocalTitle] = React.useState(typeHeader); + const [localTitle, setLocalTitle] = React.useState(returnTitle); return { updateTitle: () => { setBlockTitle(localTitle); @@ -40,13 +40,13 @@ export const hooks = { export const localTitleHooks = ({ editorRef, setBlockTitle, - typeHeader, + returnTitle, }) => { const { isEditing, startEditing, stopEditing } = module.hooks.isEditing(); const { localTitle, handleChange, updateTitle } = module.hooks.localTitle({ setBlockTitle, stopEditing, - typeHeader, + returnTitle, }); return { isEditing, diff --git a/src/editors/components/EditorHeader/hooks.test.js b/src/editors/components/EditorHeader/hooks.test.js index 3acaa4dac..e5f98f7fb 100644 --- a/src/editors/components/EditorHeader/hooks.test.js +++ b/src/editors/components/EditorHeader/hooks.test.js @@ -12,7 +12,7 @@ jest.mock('react', () => { describe('EditorHeader hooks', () => { const editorRef = { current: {} }; - const typeHeader = 'Type Header'; + const returnTitle = 'Type Header'; let setBlockTitle; let output; beforeEach(() => { @@ -42,11 +42,11 @@ describe('EditorHeader hooks', () => { output = module.hooks.localTitle({ setBlockTitle, stopEditing, - typeHeader, + returnTitle, }); }); - test('returns the state value for localTitle, defaulted to typeHeader', () => { - expect(output.localTitle).toEqual({ state: typeHeader }); + test('returns the state value for localTitle, defaulted to returnTitle', () => { + expect(output.localTitle).toEqual({ state: returnTitle }); }); describe('updateTitle hook', () => { it('calls setBlockTitle with localTitle, and stopEditing', () => { @@ -60,7 +60,7 @@ describe('EditorHeader hooks', () => { const value = 'SOME VALUe'; output.handleChange({ target: { value } }); expect(React.updateState).toHaveBeenCalledWith({ - val: typeHeader, + val: returnTitle, newVal: value, }); }); @@ -122,7 +122,7 @@ describe('EditorHeader hooks', () => { module.hooks.isEditing = newHooks.isEditing; module.hooks.localTitle = newHooks.localTitle; module.hooks.handleKeyDown = newHooks.handleKeyDown; - output = module.localTitleHooks({ editorRef, setBlockTitle, typeHeader }); + output = module.localTitleHooks({ editorRef, setBlockTitle, returnTitle }); }); afterEach(() => { module.hooks = oldHooks; @@ -136,7 +136,7 @@ describe('EditorHeader hooks', () => { expect(output.updateTitle).toEqual({ setBlockTitle, stopEditing: values.stopEditing, - typeHeader, + returnTitle, }); expect(output.handleChange).toEqual(values.handleChange); expect(output.localTitle).toEqual(values.localTitle); diff --git a/src/editors/data/redux/app/selectors.js b/src/editors/data/redux/app/selectors.js index 5ade3ae4d..18425939f 100644 --- a/src/editors/data/redux/app/selectors.js +++ b/src/editors/data/redux/app/selectors.js @@ -36,12 +36,18 @@ export const isInitialized = createSelector( (unitUrl, editorInitialized, blockValue) => !!(unitUrl && blockValue && editorInitialized), ); -export const typeHeader = createSelector( - [module.simpleSelectors.blockType], - (blockType) => { +export const returnTitle = createSelector( + [ + module.simpleSelectors.blockType, + module.simpleSelectors.blockTitle, + ], + (blockType, blockTitle) => { if (blockType === null) { return null; } + if (blockTitle !== null) { + return blockTitle; + } return (blockType === blockTypes.html) ? 'Text' : blockType[0].toUpperCase() + blockType.substring(1); @@ -52,5 +58,5 @@ export default { ...simpleSelectors, isInitialized, returnUrl, - typeHeader, + returnTitle, }; diff --git a/src/editors/data/redux/app/selectors.test.js b/src/editors/data/redux/app/selectors.test.js index a13bb8178..99c92f096 100644 --- a/src/editors/data/redux/app/selectors.test.js +++ b/src/editors/data/redux/app/selectors.test.js @@ -44,6 +44,7 @@ describe('app selectors unit tests', () => { simpleKeys.saveResponse, simpleKeys.studioEndpointUrl, simpleKeys.unitUrl, + simpleKeys.blockTitle, ].map(testSimpleSelector); }); }); @@ -86,19 +87,26 @@ describe('app selectors unit tests', () => { ].map(([args, expected]) => expect(cb(...args)).toEqual(expected)); }); }); - describe('typeHeader', () => { - it('is memoized based on blockType', () => { - expect(selectors.typeHeader.preSelectors).toEqual([simpleSelectors.blockType]); + describe('returnTitle', () => { + const title = 'tItLe'; + it('is memoized based on blockType and blockTitle', () => { + expect(selectors.returnTitle.preSelectors).toEqual([ + simpleSelectors.blockType, + simpleSelectors.blockTitle, + ]); }); it('returns null if blockType is null', () => { - expect(selectors.typeHeader.cb(null)).toEqual(null); + expect(selectors.returnTitle.cb(null, title)).toEqual(null); + }); + it('returns blockTitle if blockTitle is not null', () => { + expect(selectors.returnTitle.cb('html', title)).toEqual(title); }); it('returns Text if the blockType is html', () => { - expect(selectors.typeHeader.cb('html')).toEqual('Text'); + expect(selectors.returnTitle.cb('html', null)).toEqual('Text'); }); it('returns the blockType capitalized if not html', () => { - expect(selectors.typeHeader.cb('video')).toEqual('Video'); - expect(selectors.typeHeader.cb('random')).toEqual('Random'); + expect(selectors.returnTitle.cb('video', null)).toEqual('Video'); + expect(selectors.returnTitle.cb('random', null)).toEqual('Random'); }); }); });