-
Notifications
You must be signed in to change notification settings - Fork 2.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[No QA][TS migration] Migrate multiple unit and Performance test to Typescript #37685
[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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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)}
@@ -87,6 +95,8 @@ function ReportActionComposeWrapper() { | |||
reportID="1" | |||
disabled={false} | |||
report={LHNTestUtils.getFakeReport()} | |||
isComposerFullSize | |||
listHeight={200} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just curious, why 200
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same
jest.mock('@src/components/withNavigationFocus', () => (Component: ComponentType<WithNavigationFocusProps>) => { | ||
function WithNavigationFocus(props: WithNavigationFocusProps) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same
}), | ||
); | ||
|
||
// 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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
@@ -136,6 +149,7 @@ function ReportScreenWrapper(args) { | |||
<ReportScreen | |||
// eslint-disable-next-line react/jsx-props-no-spreading | |||
{...args} | |||
// @ts-expect-error TODO: Remove this once ReportScreen is migrated to TypeScript. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please link the issue
@@ -245,6 +262,7 @@ test('[ReportScreen] should press of the report item', () => { | |||
.then(() => | |||
measurePerformance( | |||
<ReportScreenWrapper | |||
// @ts-expect-error TODO: Remove this once ReportScreen is migrated to TypeScript. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same
tests/unit/MiddlewareTest.ts
Outdated
@@ -13,7 +14,7 @@ Onyx.init({ | |||
}); | |||
|
|||
beforeAll(() => { | |||
global.fetch = TestHelper.getGlobalFetchMock(); | |||
global.fetch = TestHelper.getGlobalFetchMock() as typeof fetch; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same
@@ -29,8 +30,6 @@ beforeEach(async () => { | |||
describe('Middleware', () => { | |||
describe('HandleUnusedOptimisticID', () => { | |||
test('Normal request', async () => { | |||
const actual = jest.requireActual('../../src/libs/Middleware/HandleUnusedOptimisticID'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why was this removed?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why was this removed?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same as before
@@ -245,6 +263,7 @@ test('[ReportScreen] should press of the report item', () => { | |||
.then(() => | |||
measurePerformance( | |||
<ReportScreenWrapper | |||
// @ts-expect-error TODO: Remove this once ReportScreen is migrated to TypeScript. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's create types for {commit_sha: string}
and {data: {message: string}}
to improve readability
workflowRunURL = `${process.env.GITHUB_SERVER_URL}/${process.env.GITHUB_REPOSITORY}/actions/runs/${process.env.GITHUB_RUN_ID}`; | ||
}); | ||
|
||
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same, please put {pull_number: number}
into type, and add return type as well
@@ -209,7 +217,7 @@ platform | result | |||
} | |||
return mockGetInputDefaultImplementation(key); | |||
}); | |||
mockGetPullRequest.mockImplementation(async ({pull_number}) => { | |||
mockGetPullRequest.mockImplementation(({pull_number}) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You can then reuse created type to type this function props
@@ -226,7 +234,7 @@ platform | result | |||
mockListTags.mockResolvedValue({ | |||
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same, you can then reuse created type to type this function props
# Conflicts: # tests/perf-test/ReportActionsList.perf-test.tsx
@@ -8,7 +8,7 @@ type DragAndDropProviderProps = { | |||
isDisabled?: boolean; | |||
|
|||
/** Indicate that users are dragging file or not */ | |||
setIsDraggingOver: (value: boolean) => void; | |||
setIsDraggingOver?: (value: boolean) => void; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Are you sure this should be optional?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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 <[email protected]>
@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 Issues
section aboveTests
sectionOffline steps
sectionQA steps
sectiontoggleReport
and notonIconClick
)myBool && <MyComponent />
.src/languages/*
files and using the translation methodWaiting for Copy
label for a copy review on the original GH to get the correct copy.STYLE.md
) were followedAvatar
, I verified the components usingAvatar
are working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)
)Avatar
is modified, I verified thatAvatar
is working as expected in all cases)Design
label so the design team can review the changes.ScrollView
component to make it scrollable when more elements are added to the page.main
branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTest
steps.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