runfix: ts strict errors

src/script/components/MessagesList/Message/ContentMessage/MessageFooterLike.test.tsx

@@ -18,22 +18,9 @@
  */
 
 import ko from 'knockout';
-import TestPage from 'Util/test/TestPage';
 import {ContentMessage} from 'src/script/entity/message/ContentMessage';
-import MessageFooterLike, {MessageFooterLikeProps} from './MessageFooterLike';
-
-class MessageFooterLikePage extends TestPage<MessageFooterLikeProps> {
-  constructor(props?: MessageFooterLikeProps) {
-    super(MessageFooterLike, props);
-  }
-
-  getMessageFooterLike = () => this.get('[data-uie-name="element-message-call"]');
-  getLikeNameList = () => this.get('[data-uie-name="message-liked-names"]');
-  getLike = () => this.get('[data-uie-name="do-like-message"]');
-
-  clickLikeNameList = () => this.click(this.getLikeNameList());
-  clickLike = () => this.click(this.getLike());
-}
+import MessageFooterLike from './MessageFooterLike';
+import {render, fireEvent} from '@testing-library/react';
 
 const createLikeMessage = (partialLikeMessage: Partial<ContentMessage>) => {
   const likeMessage: Partial<ContentMessage> = {
@@ -47,52 +34,55 @@ const createLikeMessage = (partialLikeMessage: Partial<ContentMessage>) => {
 
 describe('MessageFooterLike', () => {
   it('triggers message likes', async () => {
-    const spyOnLike = jest.fn();
     const message = createLikeMessage({});
-    const messageFooterLikePage = new MessageFooterLikePage({
+
+    const props = {
       is1to1Conversation: false,
       message,
-      onClickLikes: () => {},
-      onLike: spyOnLike,
-    });
+      onClickLikes: jest.fn(),
+      onLike: jest.fn(),
+    };
 
-    expect(messageFooterLikePage.getLike()).not.toBeNull();
-    messageFooterLikePage.clickLike();
+    const {getByTestId} = render(<MessageFooterLike {...props} />);
+    const likeMessageElement = getByTestId('do-like-message');
 
-    expect(spyOnLike).toHaveBeenCalledWith(message);
+    fireEvent.click(likeMessageElement);
+    expect(props.onLike).toHaveBeenCalledWith(message);
   });
 
   it('does open conversation details in group conversation when clicking on like names', async () => {
-    const spyOnOpenConversationDetails = jest.fn();
-    const messageFooterLikePage = new MessageFooterLikePage({
+    const props = {
       is1to1Conversation: false,
       message: createLikeMessage({
         is_liked: ko.pureComputed(() => true),
       }),
-      onClickLikes: spyOnOpenConversationDetails,
-      onLike: () => {},
-    });
+      onClickLikes: jest.fn(),
+      onLike: jest.fn(),
+    };
 
-    expect(messageFooterLikePage.getLikeNameList()).not.toBeNull();
-    messageFooterLikePage.clickLikeNameList();
+    const {getByTestId} = render(<MessageFooterLike {...props} />);
+    const likeNameList = getByTestId('message-liked-names');
 
-    expect(spyOnOpenConversationDetails).toHaveBeenCalled();
+    fireEvent.click(likeNameList);
+    expect(props.onClickLikes).toHaveBeenCalled();
   });
 
   it('does not open conversation details in 1:1 conversation when clicking on like names', async () => {
-    const spyOnOpenConversationDetails = jest.fn();
-    const messageFooterLikePage = new MessageFooterLikePage({
+    const props = {
       is1to1Conversation: true,
       message: createLikeMessage({
         is_liked: ko.pureComputed(() => true),
       }),
-      onClickLikes: spyOnOpenConversationDetails,
-      onLike: () => {},
-    });
+      onClickLikes: jest.fn(),
+      onLike: jest.fn(),
+    };
+
+    const {getByTestId} = render(<MessageFooterLike {...props} />);
 
-    expect(messageFooterLikePage.getLikeNameList()).not.toBeNull();
-    messageFooterLikePage.clickLikeNameList();
+    const likeNameList = getByTestId('message-liked-names');
+    expect(likeNameList).not.toBeNull();
 
-    expect(spyOnOpenConversationDetails).not.toHaveBeenCalled();
+    fireEvent.click(likeNameList);
+    expect(props.onClickLikes).not.toHaveBeenCalled();
   });
 });

src/script/components/MessagesList/Message/ContentMessage/asset/AssetHeader.test.tsx

@@ -17,41 +17,31 @@
  *
  */
 
-import TestPage from 'Util/test/TestPage';
+import AssetHeader from './AssetHeader';
+import {render} from '@testing-library/react';
 import {createRandomUuid} from 'Util/util';
 import * as TimeUtil from 'Util/TimeUtil';
 
 import {Message} from '../../../../../entity/message/Message';
 import {User} from '../../../../../entity/User';
-import AssetHeader, {AssetHeaderProps} from './AssetHeader';
-
-class AssetHeaderPage extends TestPage<AssetHeaderProps> {
-  constructor(props?: AssetHeaderProps) {
-    super(AssetHeader, props);
-  }
-
-  getUserName = () => this.get('span[data-uie-name="asset-header-user-name"]').textContent;
-  getTime = () => this.get('span[data-uie-name="asset-header-time"]').textContent;
-}
 
 describe('AssetHeader', () => {
-  it('displays the expected username and time', async () => {
+  it('displays the expected username and time', () => {
     const timestamp = new Date('2021-01-21T15:08:14.225Z').getTime();
     const userName = 'John Doe';
     jest.spyOn(TimeUtil, 'formatTimeShort').mockReturnValue('3:08 PM');
     jest.spyOn(TimeUtil, 'formatDateShort').mockReturnValue('01/21');
 
-    const user = new User(createRandomUuid(), null);
+    const user = new User(createRandomUuid());
     user.name(userName);
 
     const message = new Message(createRandomUuid());
     message.timestamp(timestamp);
     message.user(user);
 
-    const assetHeader = new AssetHeaderPage({message});
-
-    expect(assetHeader.getUserName()).toBe(userName);
+    const {queryByText} = render(<AssetHeader message={message} />);
 
-    expect(assetHeader.getTime()).toBe('01/21 3:08 PM');
+    expect(queryByText(userName)).not.toBeNull();
+    expect(queryByText('01/21 3:08 PM')).not.toBeNull();
   });
 });

src/script/components/MessagesList/Message/ContentMessage/asset/AssetLoader.test.tsx

@@ -17,74 +17,63 @@
  *
  */
 
-import TestPage from 'Util/test/TestPage';
-
-import AssetLoader, {AssetLoaderProps} from './AssetLoader';
-
-class AssetLoaderPage extends TestPage<AssetLoaderProps> {
-  constructor(props?: AssetLoaderProps) {
-    super(AssetLoader, props);
-  }
-
-  getStatus = () => this.get('div[data-uie-name="status-loading-media"]');
-  clickStatus = () => this.click(this.getStatus());
-  getViewBox = () => this.get('svg[data-uie-name="asset-loader-svg"]').getAttribute('viewBox');
-  getCircle = () => this.get('circle[data-uie-name="asset-loader-circle"]');
-}
+import AssetLoader from './AssetLoader';
+import {render, fireEvent} from '@testing-library/react';
 
 describe('AssetLoader', () => {
+  const defaultProps = {large: false, loadProgress: 10, onCancel: jest.fn()};
   it('runs onClick when clicking it', async () => {
-    const onClickMock = jest.fn();
+    const {getByTestId} = render(<AssetLoader {...defaultProps} />);
 
-    const assetLoader = new AssetLoaderPage({large: false, loadProgress: 10, onCancel: onClickMock});
-    assetLoader.clickStatus();
+    const assetLoader = getByTestId('status-loading-media');
 
-    expect(onClickMock.mock.calls.length).toBe(1);
+    fireEvent.click(assetLoader);
+    expect(defaultProps.onCancel).toHaveBeenCalledTimes(1);
   });
 
   it('sets the correct viewBox size', async () => {
-    const assetLoaderSmall = new AssetLoaderPage({large: false, loadProgress: 10, onCancel: () => {}});
-    const viewBoxSmall = assetLoaderSmall.getViewBox();
-    expect(viewBoxSmall).toBe(`0 0 32 32`);
+    const props = {...defaultProps};
+    const {getByTestId, rerender} = render(<AssetLoader {...props} />);
 
-    const assetLoaderLarge = new AssetLoaderPage({large: true, loadProgress: 10, onCancel: () => {}});
-    const viewBoxLarge = assetLoaderLarge.getViewBox();
-    expect(viewBoxLarge).toBe(`0 0 64 64`);
-  });
+    const assetLoaderSvg = getByTestId('asset-loader-svg');
 
-  it('sets the correct viewBox size', async () => {
-    const assetLoaderSmall = new AssetLoaderPage({large: false, loadProgress: 10, onCancel: () => {}});
-    const viewBoxSmall = assetLoaderSmall.getViewBox();
+    const viewBoxSmall = assetLoaderSvg.getAttribute('viewBox');
     expect(viewBoxSmall).toBe(`0 0 32 32`);
 
-    const assetLoaderLarge = new AssetLoaderPage({large: true, loadProgress: 10, onCancel: () => {}});
-    const viewBoxLarge = assetLoaderLarge.getViewBox();
+    props.large = true;
+    rerender(<AssetLoader {...props} />);
+
+    const viewBoxLarge = assetLoaderSvg.getAttribute('viewBox');
     expect(viewBoxLarge).toBe(`0 0 64 64`);
   });
 
   it('sets the correct circle style', async () => {
-    const assetLoaderSmallTen = new AssetLoaderPage({large: false, loadProgress: 10, onCancel: () => {}});
-    const strokeDasharraySmallTen = window
-      .getComputedStyle(assetLoaderSmallTen.getCircle())
-      .getPropertyValue('stroke-dasharray');
+    const props = {...defaultProps};
+
+    const {getByTestId, rerender} = render(<AssetLoader {...props} />);
+
+    const circleElement = getByTestId('asset-loader-circle');
+
+    const strokeDasharraySmallTen = window.getComputedStyle(circleElement).getPropertyValue('stroke-dasharray');
     expect(strokeDasharraySmallTen).toBe('10 100');
 
-    const assetLoaderSmallFifty = new AssetLoaderPage({large: false, loadProgress: 50, onCancel: () => {}});
-    const strokeDasharraySmallFifty = window
-      .getComputedStyle(assetLoaderSmallFifty.getCircle())
-      .getPropertyValue('stroke-dasharray');
+    props.loadProgress = 50;
+    rerender(<AssetLoader {...props} />);
+
+    const strokeDasharraySmallFifty = window.getComputedStyle(circleElement).getPropertyValue('stroke-dasharray');
     expect(strokeDasharraySmallFifty).toBe('50 100');
 
-    const assetLoaderLargeTen = new AssetLoaderPage({large: true, loadProgress: 10, onCancel: () => {}});
-    const strokeDasharrayLargeTen = window
-      .getComputedStyle(assetLoaderLargeTen.getCircle())
-      .getPropertyValue('stroke-dasharray');
+    props.large = true;
+    props.loadProgress = 10;
+    rerender(<AssetLoader {...props} />);
+
+    const strokeDasharrayLargeTen = window.getComputedStyle(circleElement).getPropertyValue('stroke-dasharray');
     expect(strokeDasharrayLargeTen).toBe('20 200');
 
-    const assetLoaderLargeFifty = new AssetLoaderPage({large: true, loadProgress: 50, onCancel: () => {}});
-    const strokeDasharrayLargeFifty = window
-      .getComputedStyle(assetLoaderLargeFifty.getCircle())
-      .getPropertyValue('stroke-dasharray');
+    props.loadProgress = 50;
+    rerender(<AssetLoader {...props} />);
+
+    const strokeDasharrayLargeFifty = window.getComputedStyle(circleElement).getPropertyValue('stroke-dasharray');
     expect(strokeDasharrayLargeFifty).toBe('100 200');
   });
 });

src/script/components/MessagesList/Message/ContentMessage/asset/FileAssetComponent.test.tsx

@@ -19,21 +19,11 @@
 
 import ko from 'knockout';
 import {ContentMessage} from 'src/script/entity/message/ContentMessage';
-import TestPage from 'Util/test/TestPage';
-import FileAssetComponent, {FileAssetProps} from './FileAssetComponent';
+import FileAssetComponent from './FileAssetComponent';
 import {FileAsset} from 'src/script/entity/message/FileAsset';
 import {StatusType} from '../../../../../message/StatusType';
 import {TeamState} from 'src/script/team/TeamState';
-
-class FileAssetComponentTestPage extends TestPage<FileAssetProps> {
-  constructor(props?: FileAssetProps) {
-    super(FileAssetComponent, props);
-  }
-
-  getFile = () => this.get('[data-uie-name="file"]');
-
-  getFileSize = () => this.get('[data-uie-name="file-size"]').textContent;
-}
+import {render} from '@testing-library/react';
 
 describe('FileAssetComponent', () => {
   function mockContentMessage(): ContentMessage {
@@ -47,49 +37,42 @@ describe('FileAssetComponent', () => {
     return message;
   }
 
-  it('renders file uploads', () => {
-    const teamState = {
-      isFileSharingReceivingEnabled: ko.pureComputed(() => true),
-    } as TeamState;
+  const teamState = {
+    isFileSharingReceivingEnabled: ko.pureComputed(() => true),
+  } as TeamState;
 
-    const testPage = new FileAssetComponentTestPage({
+  it('renders file uploads', () => {
+    const props = {
       message: mockContentMessage(),
       teamState,
-    });
+    };
+
+    const {queryByTestId} = render(<FileAssetComponent {...props} />);
 
-    const fileUploadMessage = testPage.getFile();
-    expect(fileUploadMessage).not.toBeNull();
+    expect(queryByTestId('file')).not.toBeNull();
   });
 
   it('does not render file uploads from timed-out / obfuscated messages', () => {
-    const teamState = {
-      isFileSharingReceivingEnabled: ko.pureComputed(() => true),
-    } as TeamState;
-
     const message = mockContentMessage();
     message.ephemeral_expires(true);
     message.status(StatusType.SENT);
 
-    const testPage = new FileAssetComponentTestPage({
+    const props = {
       message,
       teamState,
-    });
+    };
 
-    const fileUploadMessage = testPage.getFile();
-    expect(fileUploadMessage).toBeNull();
+    const {queryByTestId} = render(<FileAssetComponent {...props} />);
+    expect(queryByTestId('file')).toBeNull();
   });
 
   it('shows the file size in MB', () => {
-    const teamState = {
-      isFileSharingReceivingEnabled: ko.pureComputed(() => true),
-    } as TeamState;
-
-    const testPage = new FileAssetComponentTestPage({
+    const props = {
       message: mockContentMessage(),
       teamState,
-    });
+    };
 
-    const fileSize = testPage.getFileSize();
-    expect(fileSize).toBe('10 MB');
+    const {queryByText} = render(<FileAssetComponent {...props} />);
+    expect(queryByText('10 MB')).not.toBeNull();
   });
 });