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;
});
});