refactor(reply-card-spec): improve test coverage and test quality for reply card tests

Author: domw30

src/components/reply-card/reply-card.test.tsx

@@ -4,6 +4,11 @@ import { shallow } from 'enzyme';
 
 import ReplyCard, { Properties } from './reply-card';
 import { ContentHighlighter } from '../content-highlighter';
+import { IconButton } from '@zero-tech/zui/components';
+
+import { bem } from '../../lib/bem';
+
+const c = bem('.reply-card');
 
 describe('ReplyCard', () => {
   const subject = (props: Partial<Properties>) => {
@@ -22,10 +27,9 @@ describe('ReplyCard', () => {
   };
 
   it('renders reply message', function () {
-    const message = 'hello';
-    const wrapper = subject({ message });
+    const wrapper = subject({ message: 'hello' });
 
-    expect(wrapper.find(ContentHighlighter).prop('message').trim()).toStrictEqual(message);
+    expect(wrapper.find(ContentHighlighter)).toHaveProp('message', 'hello');
   });
 
   it('does not render reply message if no message is present', function () {
@@ -34,72 +38,36 @@ describe('ReplyCard', () => {
     expect(wrapper).not.toHaveElement(ContentHighlighter);
   });
 
-  it('call onRemove when close icon is clicked', function () {
-    const onRemove = jest.fn();
-
-    const wrapper = subject({ onRemove });
-    wrapper.find('IconButton').simulate('click');
+  it('renders media when media url is present', function () {
+    const wrapper = subject({ mediaName: 'test-media-name', mediaUrl: 'test-media-url' });
 
-    expect(onRemove).toHaveBeenCalledOnce();
+    expect(wrapper).toHaveElement(c('media-container'));
   });
 
-  it('renders the sender name', function () {
-    const wrapper = subject({
-      senderIsCurrentUser: false,
-      senderFirstName: 'Jackie',
-      senderLastName: 'Chan',
-    });
+  it('does not render media when media url is NOT present', function () {
+    const wrapper = subject({ message: 'hello' });
 
-    expect(wrapper.find('.reply-card__header').text()).toEqual('Jackie Chan');
+    expect(wrapper).not.toHaveElement(c('media-container'));
   });
 
-  it('renders "You" if the sender is the current user', function () {
-    const wrapper = subject({
-      senderIsCurrentUser: true,
-      senderFirstName: 'Jackie',
-      senderLastName: 'Chan',
-    });
+  it('renders the sender name when senderIsCurrentUser is false', function () {
+    const wrapper = subject({ senderIsCurrentUser: false, senderFirstName: 'Jackie', senderLastName: 'Chan' });
 
-    expect(wrapper.find('.reply-card__header').text()).toEqual('You');
+    expect(wrapper.find(c('header'))).toHaveText('Jackie Chan');
   });
 
-  it('renders media when media url is present and NO message', function () {
-    const wrapper = subject({
-      senderIsCurrentUser: true,
-      senderFirstName: 'Jackie',
-      senderLastName: 'Chan',
-      mediaName: 'test-media-name',
-      mediaUrl: 'test-media-url',
-    });
+  it('renders "You" if the sender is the current user', function () {
+    const wrapper = subject({ senderIsCurrentUser: true, senderFirstName: 'Jackie', senderLastName: 'Chan' });
 
-    expect(wrapper).toHaveElement('.reply-card__media-container');
-    expect(wrapper).not.toHaveElement(ContentHighlighter);
+    expect(wrapper.find(c('header'))).toHaveText('You');
   });
 
-  it('renders media and message when media url and message are present', function () {
-    const wrapper = subject({
-      senderIsCurrentUser: true,
-      senderFirstName: 'Jackie',
-      senderLastName: 'Chan',
-      mediaName: 'test-media-name',
-      mediaUrl: 'test-media-url',
-      message: 'hello',
-    });
-
-    expect(wrapper).toHaveElement('.reply-card__media-container');
-    expect(wrapper).toHaveElement(ContentHighlighter);
-  });
+  it('call onRemove when close icon is clicked', function () {
+    const onRemove = jest.fn();
 
-  it('does not render media when media url is NOT present', function () {
-    const wrapper = subject({
-      senderIsCurrentUser: true,
-      senderFirstName: 'Jackie',
-      senderLastName: 'Chan',
-      mediaName: '',
-      mediaUrl: '',
-      message: 'hello',
-    });
+    const wrapper = subject({ onRemove });
+    wrapper.find(IconButton).simulate('click');
 
-    expect(wrapper).not.toHaveElement('.reply-card__media-container');
+    expect(onRemove).toHaveBeenCalledOnce();
   });
 });