fix: tests

src/components/flow/actions/openticket/OpenTicket.test.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import OpenTicketComp from './OpenTicket';
 import { Types } from 'config/interfaces';
+import { composeComponentTestUtils } from 'testUtils';
 
 const mockContext = {
   config: {
@@ -11,7 +12,7 @@ const mockContext = {
 
 describe('OpenTicketComp', () => {
   it('should render subject if provided', () => {
-    const props = {
+    const baseProps = {
       ticketer: { name: 'John Doe', uuid: '1234' },
       subject: 'Test Subject',
       body: 'This is the body',
@@ -20,53 +21,68 @@ describe('OpenTicketComp', () => {
       uuid: '5678',
       context: mockContext,
     };
-
-    render(<OpenTicketComp {...props} />);
-    expect(screen.getByText('Test Subject')).toBeInTheDocument();
+    const { setup } = composeComponentTestUtils(OpenTicketComp, baseProps);
+    const { wrapper, props } = setup();
+    expect(props.context).toBe(mockContext);
+    expect(wrapper.text()).toContain('Test Subject');
   });
 
   it('should render topic name if subject is not provided', () => {
-    const props = {
+    const baseProps = {
       ticketer: { name: 'John Doe', uuid: '1234' },
-      topic: { name: 'Test Topic', uuid: '5678' },
+      topic: {
+        name: 'Test Topic',
+      },
       body: 'This is the body',
       result_name: 'Result Name',
       type: Types.open_ticket,
       uuid: '5678',
       context: mockContext,
     };
 
-    render(<OpenTicketComp {...props} context={mockContext} />);
+    const { setup } = composeComponentTestUtils(OpenTicketComp, baseProps);
+    const { wrapper } = setup();
 
-    expect(screen.getByText('Test Topic')).toBeInTheDocument();
+    expect(wrapper.text()).toContain('Test Topic');
   });
 
   it('should display ticketer name if brand is not present in ticketer name', () => {
-    const props = {
+    const baseProps = {
+      context: {
+        config: {
+          brand: 'MyBrand',
+        },
+      },
       ticketer: { name: 'Another Brand Support', uuid: '1234' },
       body: 'This is the body',
       result_name: 'Result Name',
       type: Types.open_ticket,
       uuid: '5678',
-      context: mockContext,
     };
 
-    render(<OpenTicketComp {...props} />);
+    const { setup } = composeComponentTestUtils(OpenTicketComp, baseProps);
+    const { wrapper } = setup();
 
-    expect(screen.getByText(/Another Brand Support/)).toBeInTheDocument();
+    expect(wrapper.text()).toContain('Another Brand Support');
   });
 
   it('should not display ticketer name if brand is in ticketer name', () => {
-    const props = {
-      ticketer: { name: 'MyBrand Support', uuid: '1234' },
+    const baseProps = {
+      context: {
+        config: {
+          brand: 'MyBrand',
+        },
+      },
+      ticketer: { name: 'RapidPro MyBrand', uuid: '1234' },
       body: 'This is the body',
       result_name: 'Result Name',
       type: Types.open_ticket,
       uuid: '5678',
     };
 
-    render(<OpenTicketComp {...props} context={mockContext} />);
+    const { setup } = composeComponentTestUtils(OpenTicketComp, baseProps);
+    const { wrapper } = setup();
 
-    expect(screen.queryByText(/Using/)).not.toBeInTheDocument();
+    expect(wrapper.text()).not.toContain('Using');
   });
 });

src/components/flow/actions/openticket/OpenTicket.tsx

@@ -6,20 +6,16 @@ const OpenTicketComp: React.SFC<OpenTicket> = (
   { ticketer, subject, topic }: OpenTicket,
   context: any,
 ): JSX.Element => {
-  const brand =
-    context && context.config && 'brand' in context.config
-      ? context.config.brand
-      : null;
-  const showTicketer = brand ? ticketer.name.indexOf(brand) === -1 : true;
+  const showTicketer = !ticketer.name.match(context.config.brand);
   return (
     <div style={{ textAlign: 'center' }}>
       <div>{subject ? subject : topic ? topic.name : null}</div>
-      {showTicketer ? (
+      {showTicketer && (
         <div style={{ fontSize: '80%' }}>
-          Using aaaa {JSON.stringify(context)}{' '}
+          Using
           <span style={{ fontWeight: 400 }}>{ticketer.name}</span>
         </div>
-      ) : null}
+      )}
     </div>
   );
 };