runfix: refactor tests and fix ts strict errors (#13781)

* runfix: fix strict ts errors in AudioSeekBar

* refactor: migrate MediaButton test to testing-library

* refactor: migrate SeekBar test to testing-library

* refactor: migrate CallMessage test to testing-library

* refactor: migrate CallTimeoutMessage test to testing-library

* refactor: migrate DecryptErrorMessage test to testing-library

* refactor: migrate DeleteMessage test to testing-library

* fix ts errors in DeleteMessage component

* refactor: migrate EphemeralTimer test to testing-library

* refactor: migrate FileTypeRestrictedMessage test to testing-library

* refactor: migrate LegalHoldMessage test to testing-library

* refactor: migrate MemberMessage  test to testing-library

* refactor: migrate PingMessage test to testing-library

* refactor: migrate ReadReceiptStatus test to testing-library

* refactor: migrate SystemMessage test to testing-library

* refactor: migrate VerificationMessage test to testing-library

* refactor: mock icons in call message test

Author: PatrykBuniX

src/script/components/MessagesList/Message/CallMessage.test.tsx

@@ -18,30 +18,19 @@
  */
 
 import ko from 'knockout';
-import TestPage from 'Util/test/TestPage';
 import {CallMessage as CallMessageEntity} from 'src/script/entity/message/CallMessage';
-import CallMessage, {CallMessageProps} from './CallMessage';
+import CallMessage from './CallMessage';
+import {render} from '@testing-library/react';
 
 jest.mock('Components/Icon', () => ({
   Hangup: function HangupIcon() {
-    return <span className="hangupicon"></span>;
+    return <span>hangupIcon</span>;
   },
   Pickup: function PickupIcon() {
-    return <span className="pickupicon"></span>;
+    return <span>pickupIcon</span>;
   },
 }));
 
-class CallMessagePage extends TestPage<CallMessageProps> {
-  constructor(props?: CallMessageProps) {
-    super(CallMessage, props);
-  }
-
-  getCallMessage = (completed: 'completed' | 'not_completed') =>
-    this.get(`[data-uie-name="element-message-call"]${completed ? `[data-uie-value="${completed}"]` : ''}`);
-  getPickupIcon = () => this.get('.pickupicon');
-  getHangupIcon = () => this.get('.hangupicon');
-}
-
 const createCallMessage = (partialCallMessage: Partial<CallMessageEntity>) => {
   const callMessage: Partial<CallMessageEntity> = {
     caption: ko.pureComputed(() => ''),
@@ -56,24 +45,34 @@ const createCallMessage = (partialCallMessage: Partial<CallMessageEntity>) => {
 
 describe('CallMessage', () => {
   it('shows green pickup icon for completed calls', async () => {
-    const callMessagePage = new CallMessagePage({
+    const props = {
       message: createCallMessage({
         wasCompleted: () => true,
       }),
-    });
+    };
+
+    const {getByTestId, queryByText} = render(<CallMessage {...props} />);
 
-    expect(callMessagePage.getCallMessage('completed')).not.toBeNull();
-    expect(callMessagePage.getPickupIcon()).not.toBeNull();
+    const elementMessageCall = getByTestId('element-message-call');
+    expect(elementMessageCall.getAttribute('data-uie-value')).toEqual('completed');
+
+    expect(queryByText('hangupIcon')).toBeNull();
+    expect(queryByText('pickupIcon')).not.toBeNull();
   });
 
   it('shows red hangup icon for incompleted calls', async () => {
-    const callMessagePage = new CallMessagePage({
+    const props = {
       message: createCallMessage({
         wasCompleted: () => false,
       }),
-    });
+    };
+
+    const {getByTestId, queryByText} = render(<CallMessage {...props} />);
+
+    const elementMessageCall = getByTestId('element-message-call');
+    expect(elementMessageCall.getAttribute('data-uie-value')).toEqual('not_completed');
 
-    expect(callMessagePage.getCallMessage('not_completed')).not.toBeNull();
-    expect(callMessagePage.getHangupIcon()).not.toBeNull();
+    expect(queryByText('pickupIcon')).toBeNull();
+    expect(queryByText('hangupIcon')).not.toBeNull();
   });
 });

src/script/components/MessagesList/Message/CallTimeoutMessage.test.tsx

@@ -18,23 +18,10 @@
  */
 
 import ko from 'knockout';
-import TestPage from 'Util/test/TestPage';
 import {CallingTimeoutMessage as CallTimeoutMessageEntity} from 'src/script/entity/message/CallingTimeoutMessage';
-import CallTimeoutMessage, {CallTimeoutMessageProps} from './CallTimeoutMessage';
+import CallTimeoutMessage from './CallTimeoutMessage';
 import {REASON} from '@wireapp/avs';
-
-class CallTimeoutMessagePage extends TestPage<CallTimeoutMessageProps> {
-  constructor(props?: CallTimeoutMessageProps) {
-    super(CallTimeoutMessage, props);
-  }
-
-  getCallTimeoutMessage = (reason: REASON.NOONE_JOINED | REASON.EVERYONE_LEFT) =>
-    this.get(
-      `[data-uie-name="element-message-call"][data-uie-value="${
-        reason === REASON.NOONE_JOINED ? 'no-one-joined' : 'everyone-left'
-      }"]`,
-    );
-}
+import {render} from '@testing-library/react';
 
 const createCallTimeoutMessage = (partialCallTimeoutMessage: Partial<CallTimeoutMessageEntity>) => {
   const callMessage: Partial<CallTimeoutMessageEntity> = {
@@ -49,22 +36,24 @@ const createCallTimeoutMessage = (partialCallTimeoutMessage: Partial<CallTimeout
 
 describe('CallTimeoutMessage', () => {
   it('shows that nobody joined', async () => {
-    const callMessagePage = new CallTimeoutMessagePage({
-      message: createCallTimeoutMessage({
-        reason: REASON.NOONE_JOINED,
-      }),
+    const message = createCallTimeoutMessage({
+      reason: REASON.NOONE_JOINED,
     });
 
-    expect(callMessagePage.getCallTimeoutMessage(REASON.NOONE_JOINED)).not.toBeNull();
+    const {getByTestId} = render(<CallTimeoutMessage message={message} />);
+
+    const elementMessageCall = getByTestId('element-message-call');
+    expect(elementMessageCall.getAttribute('data-uie-value')).toEqual('no-one-joined');
   });
 
   it('shows that all participants left', async () => {
-    const callMessagePage = new CallTimeoutMessagePage({
-      message: createCallTimeoutMessage({
-        reason: REASON.EVERYONE_LEFT,
-      }),
+    const message = createCallTimeoutMessage({
+      reason: REASON.EVERYONE_LEFT,
     });
 
-    expect(callMessagePage.getCallTimeoutMessage(REASON.EVERYONE_LEFT)).not.toBeNull();
+    const {getByTestId} = render(<CallTimeoutMessage message={message} />);
+
+    const elementMessageCall = getByTestId('element-message-call');
+    expect(elementMessageCall.getAttribute('data-uie-value')).toEqual('everyone-left');
   });
 });

src/script/components/MessagesList/Message/ContentMessage/asset/controls/AudioSeekBar.tsx

@@ -37,7 +37,7 @@ const AudioSeekBar: React.FC<AudioSeekBarProps> = ({asset, audioElement, disable
   const [path, setPath] = useState('');
   const [loudness, setLoudness] = useState<number[]>([]);
   const [position, setPosition] = useState(0);
-  const svgNode = useRef<SVGSVGElement>();
+  const svgNode = useRef<SVGSVGElement>(null);
   const [clipId] = useState(`clip-${createRandomUuid()}`);
 
   useEffect(() => {
@@ -46,8 +46,10 @@ const AudioSeekBar: React.FC<AudioSeekBarProps> = ({asset, audioElement, disable
   }, []);
 
   useEffect(() => {
-    if (asset.meta?.loudness !== null) {
-      setLoudness(Array.from(asset.meta.loudness).map(level => level / 256));
+    const loudness = asset.meta?.loudness;
+
+    if (loudness) {
+      setLoudness(Array.from(loudness).map(level => level / 256));
     }
   }, [asset]);
 
@@ -84,6 +86,10 @@ const AudioSeekBar: React.FC<AudioSeekBarProps> = ({asset, audioElement, disable
   const updateSvgWidth = () => setSvgWidth(svgNode.current?.clientWidth ?? 0);
 
   const onLevelClick = (event: React.MouseEvent<SVGSVGElement, MouseEvent>) => {
+    if (!svgNode.current) {
+      return;
+    }
+
     const mouse_x = (event.pageX ?? event.clientX) - svgNode.current.getBoundingClientRect().left;
     const calculatedTime = (audioElement.duration * mouse_x) / svgNode.current.clientWidth;
     const currentTime = isNaN(calculatedTime) ? 0 : calculatedTime;

src/script/components/MessagesList/Message/ContentMessage/asset/controls/MediaButton.test.tsx

@@ -19,21 +19,9 @@
 
 import ko from 'knockout';
 import {AssetTransferState} from 'src/script/assets/AssetTransferState';
-import TestPage from 'Util/test/TestPage';
 import MediaButton, {MediaButtonProps} from './MediaButton';
 import {FileAsset} from 'src/script/entity/message/FileAsset';
-
-class MediaButtonTestPage extends TestPage<MediaButtonProps> {
-  constructor(props?: MediaButtonProps) {
-    super(MediaButton, props);
-  }
-
-  getPlayButton = () => this.get('[data-uie-name="do-play-media"]');
-  getPauseButton = () => this.get('[data-uie-name="do-pause-media"]');
-  getAssetLoader = () => this.get('[data-uie-name="status-loading-media"]');
-  clickOnPlayButton = () => this.click(this.getPlayButton());
-  clickOnPauseButton = () => this.click(this.getPauseButton());
-}
+import {render, fireEvent} from '@testing-library/react';
 
 describe('MediaButton', () => {
   const getDefaultProps = (): MediaButtonProps => {
@@ -61,34 +49,30 @@ describe('MediaButton', () => {
     jest.spyOn(props, 'play');
     jest.spyOn(props, 'pause');
 
-    const testPage = new MediaButtonTestPage(props);
-
-    testPage.clickOnPlayButton();
+    const {getByTestId} = render(<MediaButton {...props} />);
 
+    const playButton = getByTestId('do-play-media');
+    fireEvent.click(playButton);
     expect(props.play).toHaveBeenCalledTimes(1);
 
-    testPage.clickOnPauseButton();
-
+    const pauseButton = getByTestId('do-pause-media');
+    fireEvent.click(pauseButton);
     expect(props.pause).toHaveBeenCalledTimes(1);
   });
 
   it('displays a loader if the media is being downloaded', () => {
     const props: MediaButtonProps = {...getDefaultProps(), transferState: AssetTransferState.DOWNLOADING};
 
-    const testPage = new MediaButtonTestPage(props);
-
-    const loader = testPage.getAssetLoader();
+    const {queryByTestId} = render(<MediaButton {...props} />);
 
-    expect(loader).not.toBe(null);
+    expect(queryByTestId('status-loading-media')).not.toBe(null);
   });
 
   it('displays a loader if the media is being uploaded', () => {
     const props: MediaButtonProps = {...getDefaultProps(), transferState: AssetTransferState.UPLOADING};
 
-    const testPage = new MediaButtonTestPage(props);
-
-    const loader = testPage.getAssetLoader();
+    const {queryByTestId} = render(<MediaButton {...props} />);
 
-    expect(loader).not.toBe(null);
+    expect(queryByTestId('status-loading-media')).not.toBe(null);
   });
 });

src/script/components/MessagesList/Message/ContentMessage/asset/controls/SeekBar.test.tsx

@@ -17,53 +17,43 @@
  *
  */
 
-import {act} from '@testing-library/react';
-import TestPage from 'Util/test/TestPage';
-import SeekBar, {SeekBarProps} from './SeekBar';
+import SeekBar from './SeekBar';
+import {render, act} from '@testing-library/react';
 
-class SeekBarPage extends TestPage<SeekBarProps> {
-  constructor(props?: SeekBarProps) {
-    super(SeekBar, props);
-  }
+const createAudioElement = (currentTime: number, maxTime: number) => {
+  const audioElement = document.createElement('audio');
+  Object.defineProperty(audioElement, 'duration', {get: () => maxTime});
+  audioElement.currentTime = currentTime;
+  return audioElement;
+};
 
-  getSeekBar = () => this.get('input[data-uie-name="asset-control-media-seek-bar"]');
-  getProgress = (): string =>
-    this.getSeekBar()
-      .getAttribute('style')
-      .replace(/--seek-bar-progress: (.*);/, '$1');
-}
+const getProgress = (element: HTMLElement) =>
+  element.getAttribute('style')?.replace(/--seek-bar-progress: (.*);/, '$1');
 
 describe('SeekBar', () => {
   it('shows how much of an audio asset has been already played', async () => {
-    const createAudioElement = (currentTime: number, maxTime: number) => {
-      const audioElement = document.createElement('audio');
-      Object.defineProperty(audioElement, 'duration', {get: () => maxTime});
-      audioElement.currentTime = currentTime;
-      return audioElement;
+    const audioElement = createAudioElement(25, 100);
+
+    const props = {
+      dark: false,
+      disabled: false,
+      mediaElement: audioElement,
     };
 
-    const checkProgress = (currentTime: number, expectation: string) => {
-      audioElement.currentTime = currentTime;
+    const {getByTestId, rerender} = render(<SeekBar {...props} />);
+
+    const mediaSeekBar = getByTestId('asset-control-media-seek-bar');
 
+    const checkProgress = (currentTime: number, expectation: string) => {
+      props.mediaElement.currentTime = currentTime;
       act(() => {
         audioElement.dispatchEvent(new Event('timeupdate'));
       });
-
-      testPage.update();
-
-      expect(testPage.getProgress()).toEqual(expectation);
+      rerender(<SeekBar {...props} />);
+      expect(getProgress(mediaSeekBar)).toEqual(expectation);
     };
 
-    const audioElement = createAudioElement(25, 100);
-
-    const testPage = new SeekBarPage({
-      dark: false,
-      disabled: false,
-      mediaElement: audioElement,
-    });
-
-    expect(testPage.getProgress()).toEqual('0%');
-
+    expect(getProgress(mediaSeekBar)).toEqual('0%');
     checkProgress(50, '50%');
     checkProgress(75, '75%');
     checkProgress(100, '100%');