// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
import {Preferences} from '@constants';
import {renderWithIntlAndTheme} from '@test/intl-test-helper';
import EditedIndicator from './index';
describe('components/EditedIndicator', () => {
const baseProps = {
baseTextStyle: {fontSize: 16, color: '#000'},
theme: Preferences.THEMES.denim,
context: ['paragraph'],
testID: 'edited-indicator-test',
};
it('should render with default props', () => {
const {getByTestId} = renderWithIntlAndTheme(
,
);
const indicator = getByTestId('edited-indicator-test');
expect(indicator).toBeTruthy();
expect(indicator.props.children).toEqual([
' ', // spacer for paragraph context
expect.objectContaining({
props: expect.objectContaining({
name: 'pencil-outline',
size: 14, // default icon size
}),
}),
expect.objectContaining({
props: expect.objectContaining({
id: 'post_message_view.edited',
defaultMessage: 'Edited',
}),
}),
]);
});
it('should render with custom icon size', () => {
const {getByTestId} = renderWithIntlAndTheme(
,
);
const indicator = getByTestId('edited-indicator-test');
const icon = indicator.props.children[1];
expect(icon.props.size).toBe(20);
});
it('should render with custom testID', () => {
const {getByTestId} = renderWithIntlAndTheme(
,
);
expect(getByTestId('custom-test-id')).toBeTruthy();
});
describe('component structure', () => {
it('should render pencil-outline icon', () => {
const {getByTestId} = renderWithIntlAndTheme(
,
);
const indicator = getByTestId('edited-indicator-test');
const icon = indicator.props.children[1];
expect(icon.props.name).toBe('pencil-outline');
});
it('should render "Edited" text with correct props', () => {
const {getByTestId} = renderWithIntlAndTheme(
,
);
const indicator = getByTestId('edited-indicator-test');
const formattedText = indicator.props.children[2];
expect(formattedText.props.id).toBe('post_message_view.edited');
expect(formattedText.props.defaultMessage).toBe('Edited');
});
});
describe('edge cases', () => {
it('should handle empty context array', () => {
const {getByTestId} = renderWithIntlAndTheme(
,
);
const indicator = getByTestId('edited-indicator-test');
expect(indicator.props.children[0]).toBe('');
});
it('should handle undefined context elements', () => {
const {getByTestId} = renderWithIntlAndTheme(
,
);
const indicator = getByTestId('edited-indicator-test');
expect(indicator.props.children[0]).toBe('');
});
it('should handle context with multiple elements', () => {
const {getByTestId} = renderWithIntlAndTheme(
,
);
const indicator = getByTestId('edited-indicator-test');
expect(indicator.props.children[0]).toBe(' ');
});
});
});