imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add jump to date functionality to date headers in timeline v2 (#7339)

Browse source 
Fix https://github.com/vector-im/element-web/issues/7677

Utilizes MSC3030: https://github.com/matrix-org/matrix-doc/pull/3030

https://user-images.githubusercontent.com/558581/150060664-79627573-f4fd-497c-b726-dc3485854bd0.png
This commit is contained in:
Eric Eastwood 2022-01-27 16:32:12 -06:00 • committed by GitHub
parent efa1667d7e
commit 7fa27f5834
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 630 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

26
test/components/views/messages/DateSeparator-test.tsx
View file

@ -64,7 +64,11 @@ describe("DateSeparator", () => {
beforeEach(() => {
global.Date = MockDate as unknown as DateConstructor;
(SettingsStore.getValue as jest.Mock).mockReturnValue(true);
(SettingsStore.getValue as jest.Mock) = jest.fn((arg) => {
if (arg === UIFeature.TimelineEnableRelativeDates) {
return true;
}
});
});
afterAll(() => {
@ -89,10 +93,28 @@ describe("DateSeparator", () => {
describe('when Settings.TimelineEnableRelativeDates is falsy', () => {
beforeEach(() => {
(SettingsStore.getValue as jest.Mock).mockReturnValue(false);
(SettingsStore.getValue as jest.Mock) = jest.fn((arg) => {
if (arg === UIFeature.TimelineEnableRelativeDates) {
return false;
}
});
});
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)));
});
});
describe('when feature_jump_to_date is enabled', () => {
beforeEach(() => {
(SettingsStore.getValue as jest.Mock) = jest.fn((arg) => {
if (arg === "feature_jump_to_date") {
return true;
}
});
});
it('renders the date separator correctly', () => {
const component = getComponent();
expect(component).toMatchSnapshot();
});
});
});

84
test/components/views/messages/__snapshots__/DateSeparator-test.tsx.snap
View file

@ -30,3 +30,87 @@ exports[`DateSeparator renders the date separator correctly 1`] = `
</DateSeparator>
</Wrapper>
`;
exports[`DateSeparator when feature_jump_to_date is enabled renders the date separator correctly 1`] = `
<Wrapper
now="2021-12-17T08:09:00.000Z"
ts={1639728540000}
>
<DateSeparator
now="2021-12-17T08:09:00.000Z"
ts={1639728540000}
>
<h2
aria-label="Fri, Dec 17 2021"
className="mx_DateSeparator"
role="separator"
tabIndex={-1}
>
<hr
role="none"
/>
<ContextMenuTooltipButton
className="mx_DateSeparator_jumpToDateMenu"
isExpanded={false}
onClick={[Function]}
title="Jump to date"
>
<AccessibleTooltipButton
aria-expanded={false}
aria-haspopup={true}
className="mx_DateSeparator_jumpToDateMenu"
forceHide={false}
onClick={[Function]}
onContextMenu={[Function]}
title="Jump to date"
>
<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}
>
<div
aria-hidden="true"
>
Fri, Dec 17 2021
</div>
<div
className="mx_DateSeparator_chevron"
/>
</div>
</AccessibleButton>
</AccessibleTooltipButton>
</ContextMenuTooltipButton>
<hr
role="none"
/>
</h2>
</DateSeparator>
</Wrapper>
`;