diff --git a/src/components/OwnerMessage/OwnerMessage.jsx b/src/components/OwnerMessage/OwnerMessage.jsx index e67b89195a..df9d99d251 100644 --- a/src/components/OwnerMessage/OwnerMessage.jsx +++ b/src/components/OwnerMessage/OwnerMessage.jsx @@ -51,8 +51,7 @@ function OwnerMessage({ const [modalWrongPictureFormatWarning, setModalWrongPictureFormatWarning] = useState(false); const canEditHeaderMessage = dispatch(hasPermission('editHeaderMessage')); - - const isImage = /;base64/g; + const isImageMessage = value => typeof value === 'string' && value.includes(';base64'); function toggle() { setModal(!modal); @@ -116,14 +115,14 @@ function OwnerMessage({ } function getContent(messages) { - if (isImage.test(messages)) { + if (isImageMessage(messages)) { return ; } return {messages}; } function getHistoryContent(messages) { - if (isImage.test(messages)) { + if (isImageMessage(messages)) { return ; } return {messages}; @@ -165,6 +164,7 @@ function OwnerMessage({ const headerBg = darkMode ? 'bg-space-cadet' : ''; const bodyBg = darkMode ? 'bg-yinmn-blue' : ''; const boxStyling = darkMode ? boxStyleDark : boxStyle; + const hasSelectedImage = isImageMessage(message); return (
@@ -250,20 +250,25 @@ function OwnerMessage({ disabled={disableTextInput} className={styles.inputs} /> -

- Or upload a picture: -

- - (max size 1000 x 400 pixels and 100 KB) - - handleImageUpload(event)} - className={styles.inputs} - /> + {!hasSelectedImage && ( + <> +

+ Or upload a picture: +

+ + (max size 1000 x 400 pixels and 100 KB) + + handleImageUpload(event)} + className={styles.inputs} + /> + + )} { describe('OwnerMessage Component', () => { const middlewares = [thunk]; const mockStore = configureStore(middlewares); - - it('should render without errors', () => { - const initialState = { - auth: { - user: { - role: 'Owner', - }, + const baseState = { + auth: { + user: { + role: 'Owner', }, - ownerMessage: { - message: 'Sample Message', - standardMessage: 'Sample Standard Message', - }, - theme: { - darkMode: false, + }, + ownerMessage: { + message: 'Sample Message', + standardMessage: 'Sample Standard Message', + history: { + data: [], + pagination: { + page: 1, + totalPages: 1, + }, }, - }; + }, + theme: { + darkMode: false, + }, + }; - // Create a mock store with initial state + function renderComponent(initialState = baseState) { const store = mockStore(initialState); - - // Mock the action creators store.dispatch = vi.fn(); - // Render with Provider render( , ); - // Basic assertion to check if the component rendered + return store; + } + + it('should render without errors', () => { + renderComponent(); + expect(screen.getByText('Sample Message')).toBeInTheDocument(); }); it('should display standard message when no owner message exists', () => { - const initialState = { - auth: { - user: { - role: 'Owner', - }, - }, + renderComponent({ + ...baseState, ownerMessage: { + ...baseState.ownerMessage, message: null, - standardMessage: 'Sample Standard Message', }, - theme: { - darkMode: false, - }, - }; - - const store = mockStore(initialState); - store.dispatch = vi.fn(); - - render( - - - , - ); + }); expect(screen.getByText('Sample Standard Message')).toBeInTheDocument(); }); it('should show edit and delete buttons for owner role', () => { - const initialState = { - auth: { - user: { - role: 'Owner', - }, - }, - ownerMessage: { - message: 'Sample Message', - standardMessage: 'Sample Standard Message', - }, - theme: { - darkMode: false, + renderComponent(); + + expect(screen.getByTitle('Edit this header')).toBeInTheDocument(); + expect(screen.getByTitle('Click to restore header to standard message')).toBeInTheDocument(); + }); + + it('hides the image upload controls after a photo is selected', async () => { + const originalFileReader = global.FileReader; + + class MockFileReader { + onloadend = null; + + readAsDataURL() { + this.result = 'data:image/png;base64,mock-image-payload'; + queueMicrotask(() => { + this.onloadend?.(); + }); + } + } + + global.FileReader = MockFileReader; + + renderComponent(); + + fireEvent.click(screen.getByLabelText('Edit header message')); + expect(screen.getByText('Or upload a picture:')).toBeInTheDocument(); + + fireEvent.change(screen.getByLabelText('Choose owner message image'), { + target: { + files: [new File(['mock'], 'owner-message.png', { type: 'image/png' })], }, - }; + }); - const store = mockStore(initialState); - store.dispatch = vi.fn(); + await waitFor(() => { + expect(screen.queryByText('Or upload a picture:')).not.toBeInTheDocument(); + }); - render( - - - , - ); + expect(screen.queryByLabelText('Choose owner message image')).not.toBeInTheDocument(); - expect(screen.getByTitle('Edit this header')).toBeInTheDocument(); - expect(screen.getByTitle('Click to restore header to standard message')).toBeInTheDocument(); + global.FileReader = originalFileReader; }); });