[No QA][TS migration] Migrate multiple unit and Performance test to Typescript#37685
Conversation
… ReportactionsList.perf-test, ReportActionCompose-perf-test and ReportScreen-perf-test
| jest.mock('@src/components/withNavigationFocus', () => (Component: ComponentType<WithNavigationFocusProps>) => { | ||
| function WithNavigationFocus(props: WithNavigationFocusProps) { |
There was a problem hiding this comment.
| jest.mock('@src/components/withNavigationFocus', () => (Component: ComponentType<WithNavigationFocusProps>) => { | |
| function WithNavigationFocus(props: WithNavigationFocusProps) { | |
| jest.mock('@src/components/withNavigationFocus', <TProps extends WithNavigationFocusProps>() => (Component: ComponentType<TProps>) => { | |
| function WithNavigationFocus(props: Omit<TProps, keyof WithNavigationFocusProps>) { |
Also, update {...props} to be {...(props as TProps)}
| disabled={false} | ||
| report={LHNTestUtils.getFakeReport()} | ||
| isComposerFullSize | ||
| listHeight={200} |
There was a problem hiding this comment.
It was a random value as it is not important for the test.
| jest.mock('@src/components/withNavigationFocus', () => (Component: ComponentType<WithNavigationFocusProps>) => { | ||
| function WithNavigationFocus(props: WithNavigationFocusProps) { |
| jest.mock('@src/components/withNavigationFocus', () => (Component: ComponentType<WithNavigationFocusProps>) => { | ||
| function WithNavigationFocus(props: WithNavigationFocusProps) { |
| // Initialize the network key for OfflineWithFeedback | ||
| beforeEach(() => { | ||
| global.fetch = TestHelper.getGlobalFetchMock(); | ||
| global.fetch = TestHelper.getGlobalFetchMock() as typeof fetch; |
There was a problem hiding this comment.
| global.fetch = TestHelper.getGlobalFetchMock() as typeof fetch; | |
| // @ts-expect-error TODO: Remove this once TestHelper (https://github.com/Expensify/App/issues/25318) is migrated to TypeScript. | |
| global.fetch = TestHelper.getGlobalFetchMock(); |
It would be better to just suppress the error and comment that we need to remove the comment once TestUtils is migrated
| <ReportScreen | ||
| // eslint-disable-next-line react/jsx-props-no-spreading | ||
| {...args} | ||
| // @ts-expect-error TODO: Remove this once ReportScreen is migrated to TypeScript. |
| .then(() => | ||
| measurePerformance( | ||
| <ReportScreenWrapper | ||
| // @ts-expect-error TODO: Remove this once ReportScreen is migrated to TypeScript. |
tests/unit/MiddlewareTest.ts
Outdated
|
|
||
| beforeAll(() => { | ||
| global.fetch = TestHelper.getGlobalFetchMock(); | ||
| global.fetch = TestHelper.getGlobalFetchMock() as typeof fetch; |
| describe('Middleware', () => { | ||
| describe('HandleUnusedOptimisticID', () => { | ||
| test('Normal request', async () => { | ||
| const actual = jest.requireActual('../../src/libs/Middleware/HandleUnusedOptimisticID'); |
There was a problem hiding this comment.
This was removed because in this specific case there is no need for a spyon, using the actual function works as expected, what is needed is using mockImplementation for global.fetch as this is the one we use for checking if the information/number of calls were correct.
Test is working as expected.
| }); | ||
|
|
||
| test('Request with preexistingReportID', async () => { | ||
| const actual = jest.requireActual('../../src/libs/Middleware/HandleUnusedOptimisticID'); |
| .then(() => | ||
| measurePerformance( | ||
| <ReportScreenWrapper | ||
| // @ts-expect-error TODO: Remove this once ReportScreen is migrated to TypeScript. |
There was a problem hiding this comment.
Let's add a link as well
| // @ts-expect-error TODO: Remove this once ReportScreen is migrated to TypeScript. | |
| // @ts-expect-error TODO: Remove this once ReportScreen (https://github.com/Expensify/App/issues/25216) is migrated to TypeScript. |
| * @returns {Promise<{data: {message: String}}>} | ||
| */ | ||
| async function mockGetCommitDefaultImplementation({commit_sha}) { | ||
| function mockGetCommitDefaultImplementation({commit_sha}: {commit_sha: string}): {data: {message: string}} { |
There was a problem hiding this comment.
Let's create types for {commit_sha: string} and {data: {message: string}} to improve readability
|
|
||
| beforeEach(() => { | ||
| mockGetPullRequest.mockImplementation(async ({pull_number}) => (pull_number in PRList ? {data: PRList[pull_number]} : {})); | ||
| mockGetPullRequest.mockImplementation(({pull_number}: {pull_number: number}) => (pull_number in PRList ? {data: PRList[pull_number]} : {})); |
There was a problem hiding this comment.
Same, please put {pull_number: number} into type, and add return type as well
| return mockGetInputDefaultImplementation(key); | ||
| }); | ||
| mockGetPullRequest.mockImplementation(async ({pull_number}) => { | ||
| mockGetPullRequest.mockImplementation(({pull_number}) => { |
There was a problem hiding this comment.
You can then reuse created type to type this function props
| data: [{name: '42.42.42-43', commit: {sha: 'xyz'}}, ...defaultTags], | ||
| }); | ||
| mockGetCommit.mockImplementation(async ({commit_sha}) => { | ||
| mockGetCommit.mockImplementation(({commit_sha}) => { |
There was a problem hiding this comment.
Same, you can then reuse created type to type this function props
# Conflicts: # tests/perf-test/ReportActionsList.perf-test.tsx
|
|
||
| /** Indicate that users are dragging file or not */ | ||
| setIsDraggingOver: (value: boolean) => void; | ||
| setIsDraggingOver?: (value: boolean) => void; |
There was a problem hiding this comment.
Are you sure this should be optional?
There was a problem hiding this comment.
Yes, @VickyStash explained the reason here: #37820 (comment)
|
@hungvu193 Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
|
We did not find an internal engineer to review this PR, trying to assign a random engineer to #32031 as well as to this PR... Please reach out for help on Slack if no one gets assigned! |
|
Lint is falling @ruben-rebelo. Hey @nkuoch, this one need your approval, let me know if you need me to complete the checklist. |
|
Yes please complete the checklist @hungvu193 once lint failures are fixed |
Reviewer Checklist
Screenshots/VideosAndroid: NativeN/A Android: mWeb ChromeN/A iOS: NativeN/A iOS: mWeb SafariN/A MacOS: Chrome / SafariN/A MacOS: DesktopN/A |
|
@ruben-rebelo Typecheck is failing |
|
@ruben-rebelo is OOO and will return on March 21. |
# Conflicts: # tests/unit/MiddlewareTest.ts
|
@ruben-rebelo TS checks are still failing here 👀 |
|
@ruben-rebelo lint is still failing, please fix it. Thank you 😃 |
|
Checklist completed. Perf test is failing on main, it doesn't relate to this PR .All yours @nkuoch |
|
Reassure was fixed on main but since the failing test is changed in this PR let's merge main into this branch and make sure it passes |
Co-authored-by: Fábio Henriques <fabio.lacerda@outlook.com>
|
@roryabraham looks like this was merged without a test passing. Please add a note explaining why this was done and remove the |
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
|
Removing emergency label. Tests passed |
Details
[TS migration] Migrate MiddlewareTest, markPullRequestAsDeployedTest, ReportactionsList.perf-test, ReportActionCompose-perf-test and ReportScreen-perf-test to Typescript
Fixed Issues
$ #32031
$ #32032
$ #32033
$ #32034
$ #32035
PROPOSAL: N/A
Tests
Verify that no errors appear in the JS console
Run Unit test works as before
Run Performance tests works as before
Offline tests
N/A
QA Steps
N/A
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand notonIconClick)myBool && <MyComponent />.src/languages/*files and using the translation methodWaiting for Copylabel for a copy review on the original GH to get the correct copy.STYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel so the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
N/a
Android: mWeb Chrome
N/a
iOS: Native
N/a
iOS: mWeb Safari
N/a
MacOS: Chrome / Safari
N/a
MacOS: Desktop
N/a