sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Migrate some enzyme tests to RTL (#9383)

Browse Source
This commit is contained in:
Michael Telatynski
2022-10-10 16:29:10 +01:00
committed by GitHub
parent c795ada78c
commit 6b30a5e1c9
10 changed files with 102 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files
test/components/views/messages/CallEvent-test.tsx
-1
View File
@@ -16,7 +16,6 @@ limitations under the License.
import React from "react";
import { render, screen, act, cleanup, fireEvent, waitFor } from "@testing-library/react";
import "@testing-library/jest-dom";
import { mocked, Mocked } from "jest-mock";
import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixClient, PendingEventOrdering } from "matrix-js-sdk/src/client";
test/components/views/messages/DateSeparator-test.tsx
+15 -13
View File
@@ -15,9 +15,8 @@ limitations under the License.
*/
import React from "react";
// eslint-disable-next-line deprecate/import
import { mount } from "enzyme";
import { mocked } from "jest-mock";
import { render } from "@testing-library/react";
import { formatFullDateNoTime } from "../../../../src/DateUtils";
import SettingsStore from "../../../../src/settings/SettingsStore";
@@ -48,10 +47,11 @@ describe("DateSeparator", () => {
const mockClient = getMockClientWithEventEmitter({});
const getComponent = (props = {}) =>
mount(<DateSeparator {...defaultProps} {...props} />, {
wrappingComponent: MatrixClientContext.Provider,
wrappingComponentProps: { value: mockClient },
});
render((
<MatrixClientContext.Provider value={mockClient}>
<DateSeparator {...defaultProps} {...props} />
</MatrixClientContext.Provider>
));
type TestCase = [string, number, string];
const testCases: TestCase[] = [
@@ -81,18 +81,19 @@ describe("DateSeparator", () => {
});
it('renders the date separator correctly', () => {
const component = getComponent();
expect(component).toMatchSnapshot();
const { asFragment } = getComponent();
expect(asFragment()).toMatchSnapshot();
expect(SettingsStore.getValue).toHaveBeenCalledWith(UIFeature.TimelineEnableRelativeDates);
});
it.each(testCases)('formats date correctly when current time is %s', (_d, ts, result) => {
expect(getComponent({ ts, forExport: false }).text()).toEqual(result);
expect(getComponent({ ts, forExport: false }).container.textContent).toEqual(result);
});
describe('when forExport is true', () => {
it.each(testCases)('formats date in full when current time is %s', (_d, ts) => {
expect(getComponent({ ts, forExport: true }).text()).toEqual(formatFullDateNoTime(new Date(ts)));
expect(getComponent({ ts, forExport: true }).container.textContent)
.toEqual(formatFullDateNoTime(new Date(ts)));
});
});
@@ -105,7 +106,8 @@ describe("DateSeparator", () => {
});
});
it.each(testCases)('formats date in full when current time is %s', (_d, ts) => {
expect(getComponent({ ts, forExport: false }).text()).toEqual(formatFullDateNoTime(new Date(ts)));
expect(getComponent({ ts, forExport: false }).container.textContent)
.toEqual(formatFullDateNoTime(new Date(ts)));
});
});
@@ -118,8 +120,8 @@ describe("DateSeparator", () => {
});
});
it('renders the date separator correctly', () => {
const component = getComponent();
expect(component).toMatchSnapshot();
const { asFragment } = getComponent();
expect(asFragment()).toMatchSnapshot();
});
});
});
test/components/views/messages/__snapshots__/DateSeparator-test.tsx.snap
+23 -72
View File
@@ -1,16 +1,12 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`DateSeparator renders the date separator correctly 1`] = `
<DateSeparator
now="2021-12-17T08:09:00.000Z"
roomId="!unused:example.org"
ts={1639728540000}
>
<DocumentFragment>
<div
aria-label="Today"
className="mx_DateSeparator"
class="mx_DateSeparator"
role="separator"
tabIndex={-1}
tabindex="-1"
>
<hr
role="none"
@@ -24,85 +20,40 @@ exports[`DateSeparator renders the date separator correctly 1`] = `
role="none"
/>
</div>
</DateSeparator>
</DocumentFragment>
`;
exports[`DateSeparator when feature_jump_to_date is enabled renders the date separator correctly 1`] = `
<DateSeparator
now="2021-12-17T08:09:00.000Z"
roomId="!unused:example.org"
ts={1639728540000}
>
<DocumentFragment>
<div
aria-label="Fri, Dec 17 2021"
className="mx_DateSeparator"
class="mx_DateSeparator"
role="separator"
tabIndex={-1}
tabindex="-1"
>
<hr
role="none"
/>
<ContextMenuTooltipButton
className="mx_DateSeparator_jumpToDateMenu"
isExpanded={false}
onClick={[Function]}
title="Jump to date"
<div
aria-expanded="false"
aria-haspopup="true"
aria-label="Jump to date"
class="mx_AccessibleButton mx_DateSeparator_jumpToDateMenu"
role="button"
tabindex="0"
>
<AccessibleTooltipButton
aria-expanded={false}
aria-haspopup={true}
className="mx_DateSeparator_jumpToDateMenu"
forceHide={false}
onClick={[Function]}
onContextMenu={[Function]}
title="Jump to date"
<h2
aria-hidden="true"
>
<AccessibleButton
aria-expanded={false}
aria-haspopup={true}
aria-label="Jump to date"
className="mx_DateSeparator_jumpToDateMenu"
element="div"
onBlur={[Function]}
onClick={[Function]}
onContextMenu={[Function]}
onFocus={[Function]}
onMouseLeave={[Function]}
onMouseOver={[Function]}
role="button"
tabIndex={0}
>
<div
aria-expanded={false}
aria-haspopup={true}
aria-label="Jump to date"
className="mx_AccessibleButton mx_DateSeparator_jumpToDateMenu"
onBlur={[Function]}
onClick={[Function]}
onContextMenu={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
onMouseLeave={[Function]}
onMouseOver={[Function]}
role="button"
tabIndex={0}
>
<h2
aria-hidden="true"
>
Fri, Dec 17 2021
</h2>
<div
className="mx_DateSeparator_chevron"
/>
</div>
</AccessibleButton>
</AccessibleTooltipButton>
</ContextMenuTooltipButton>
Fri, Dec 17 2021
</h2>
<div
class="mx_DateSeparator_chevron"
/>
</div>
<hr
role="none"
/>
</div>
</DateSeparator>
</DocumentFragment>
`;