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

Poll history - make poll history independent from dialogs (#10349)

Browse source 
* move pollhistory from dialogs to polls directory

* rename PollHistoryDialog -> PollHistory

* rename references to PollHistoryDialog

* move title to PollHistory

* add option to collapse empty dialog header
This commit is contained in:
Kerry 2023-03-13 09:22:30 +13:00 • committed by GitHub
parent 127a3b667c
commit 1e46efe89c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
25 changed files with 290 additions and 251 deletions
Download patch file Download diff file Expand all files Collapse all files

186
test/components/views/dialogs/polls/__snapshots__/PollHistoryDialog-test.tsx.snap
View file

@ -1,186 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<PollHistoryDialog /> Poll detail displays poll detail on active poll list item click 1`] = `
<h2
data-testid="pollQuestion"
>
Question?
</h2>
`;
exports[`<PollHistoryDialog /> Poll detail displays poll detail on past poll list item click 1`] = `
<h2
data-testid="pollQuestion"
>
What?
</h2>
`;
exports[`<PollHistoryDialog /> Poll detail navigates back to poll list from detail view on header click 1`] = `
<div
class="mx_AccessibleButton mx_PollDetailHeader mx_AccessibleButton_hasKind mx_AccessibleButton_kind_content_inline"
role="button"
tabindex="0"
>
<div
class="mx_PollDetailHeader_icon"
/>
Active polls
</div>
`;
exports[`<PollHistoryDialog /> renders a list of active polls when there are polls in the room 1`] = `
<div>
<div
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
<div
aria-labelledby="mx_BaseDialog_title"
class="mx_Dialog_fixedWidth"
data-focus-lock-disabled="false"
role="dialog"
>
<div
class="mx_Dialog_header mx_Dialog_headerWithCancel"
>
<h2
class="mx_Heading_h2 mx_Dialog_title"
id="mx_BaseDialog_title"
>
Polls history
</h2>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
class="mx_PollHistoryDialog_content"
>
<div
class="mx_PollHistoryList"
>
<fieldset
class="mx_FilterTabGroup"
>
<label
data-testid="filter-tab-PollHistoryDialog_filter-ACTIVE"
>
<input
checked=""
name="PollHistoryDialog_filter"
type="radio"
value="ACTIVE"
/>
<span>
Active polls
</span>
</label>
<label
data-testid="filter-tab-PollHistoryDialog_filter-ENDED"
>
<input
name="PollHistoryDialog_filter"
type="radio"
value="ENDED"
/>
<span>
Past polls
</span>
</label>
</fieldset>
<ol
class="mx_PollHistoryList_list mx_PollHistoryList_list_ACTIVE"
>
<li
class="mx_PollListItem"
data-testid="pollListItem-$2"
>
<div
tabindex="0"
>
<div
class="mx_PollListItem_content"
>
<span>
02/02/23
</span>
<div
class="mx_PollListItem_icon"
/>
<span
class="mx_PollListItem_question"
>
Where?
</span>
</div>
</div>
</li>
<li
class="mx_PollListItem"
data-testid="pollListItem-$1"
>
<div
tabindex="0"
>
<div
class="mx_PollListItem_content"
>
<span>
02/02/23
</span>
<div
class="mx_PollListItem_icon"
/>
<span
class="mx_PollListItem_question"
>
Question?
</span>
</div>
</div>
</li>
</ol>
</div>
</div>
</div>
<div
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
</div>
`;
exports[`<PollHistoryDialog /> renders a no polls message and a load more button when not at end of timeline 1`] = `
<div
class="mx_AccessibleButton mx_PollHistoryList_loadMorePolls mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
role="button"
tabindex="0"
>
Load more polls
<div
class="mx_InlineSpinner"
>
<div
aria-label="Loading…"
class="mx_InlineSpinner_icon mx_Spinner_icon"
style="width: 16px; height: 16px;"
/>
</div>
</div>
`;
exports[`<PollHistoryDialog /> renders a no polls message and a load more button when not at end of timeline 2`] = `
<div
class="mx_AccessibleButton mx_PollHistoryList_loadMorePolls mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
role="button"
tabindex="0"
>
Load more polls
</div>
`;

18
test/components/views/dialogs/polls/PollHistoryDialog-test.tsx → test/components/views/polls/pollHistory/PollHistory-test.tsx
View file

@ -20,7 +20,7 @@ import { Filter } from "matrix-js-sdk/src/filter";
import { EventTimeline, Room } from "matrix-js-sdk/src/matrix";
import { M_POLL_START } from "matrix-js-sdk/src/@types/polls";
import { PollHistoryDialog } from "../../../../../src/components/views/dialogs/polls/PollHistoryDialog";
import { PollHistory } from "../../../../../src/components/views/polls/pollHistory/PollHistory";
import {
flushPromises,
getMockClientWithEventEmitter,
@ -34,8 +34,9 @@ import {
import { RoomPermalinkCreator } from "../../../../../src/utils/permalinks/Permalinks";
import defaultDispatcher from "../../../../../src/dispatcher/dispatcher";
import { Action } from "../../../../../src/dispatcher/actions";
import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
describe("<PollHistoryDialog />", () => {
describe("<PollHistory />", () => {
// 14.03.2022 16:15
const now = 1647270879403;
const userId = "@alice:domain.org";
@ -65,7 +66,12 @@ describe("<PollHistoryDialog />", () => {
permalinkCreator: new RoomPermalinkCreator(room),
onFinished: jest.fn(),
};
const getComponent = () => render(<PollHistoryDialog {...defaultProps} />);
const getComponent = () =>
render(<PollHistory {...defaultProps} />, {
wrapper: ({ children }) => (
<MatrixClientContext.Provider value={mockClient}>{children}</MatrixClientContext.Provider>
),
});
beforeAll(() => {
mockIntlDateTimeFormat();
@ -239,7 +245,7 @@ describe("<PollHistoryDialog />", () => {
// flush relations calls for polls
await flushPromises();
expect(getByTestId("filter-tab-PollHistoryDialog_filter-ACTIVE").firstElementChild).toBeChecked();
expect(getByTestId("filter-tab-PollHistory_filter-ACTIVE").firstElementChild).toBeChecked();
expect(container).toMatchSnapshot();
// this poll is ended, and default filter is ACTIVE
@ -288,7 +294,7 @@ describe("<PollHistoryDialog />", () => {
expect(queryByText("What?")).not.toBeInTheDocument();
fireEvent.click(getByText("Past polls"));
expect(getByTestId("filter-tab-PollHistoryDialog_filter-ENDED").firstElementChild).toBeChecked();
expect(getByTestId("filter-tab-PollHistory_filter-ENDED").firstElementChild).toBeChecked();
// active polls no longer shown
expect(queryByText("Question?")).not.toBeInTheDocument();
@ -396,7 +402,7 @@ describe("<PollHistoryDialog />", () => {
// main list header displayed again
expect(getByText("Polls history")).toBeInTheDocument();
// active filter still active
expect(getByTestId("filter-tab-PollHistoryDialog_filter-ACTIVE").firstElementChild).toBeChecked();
expect(getByTestId("filter-tab-PollHistory_filter-ACTIVE").firstElementChild).toBeChecked();
// list displayed
expect(container.getElementsByClassName("mx_PollHistoryList_list").length).toBeTruthy();
});

2
test/components/views/dialogs/polls/PollListItem-test.tsx → test/components/views/polls/pollHistory/PollListItem-test.tsx
View file

@ -18,7 +18,7 @@ import React from "react";
import { fireEvent, render } from "@testing-library/react";
import { MatrixEvent } from "matrix-js-sdk/src/matrix";
import { PollListItem } from "../../../../../src/components/views/dialogs/polls/PollListItem";
import { PollListItem } from "../../../../../src/components/views/polls/pollHistory/PollListItem";
import { makePollStartEvent, mockIntlDateTimeFormat, unmockIntlDateTimeFormat } from "../../../../test-utils";
describe("<PollListItem />", () => {

2
test/components/views/dialogs/polls/PollListItemEnded-test.tsx → test/components/views/polls/pollHistory/PollListItemEnded-test.tsx
View file

@ -19,7 +19,7 @@ import { render } from "@testing-library/react";
import { MatrixEvent, Poll, Room } from "matrix-js-sdk/src/matrix";
import { M_TEXT } from "matrix-js-sdk/src/@types/extensible_events";
import { PollListItemEnded } from "../../../../../src/components/views/dialogs/polls/PollListItemEnded";
import { PollListItemEnded } from "../../../../../src/components/views/polls/pollHistory/PollListItemEnded";
import {
flushPromises,
getMockClientWithEventEmitter,

158
test/components/views/polls/pollHistory/__snapshots__/PollHistory-test.tsx.snap Normal file
View file

@ -0,0 +1,158 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<PollHistory /> Poll detail displays poll detail on active poll list item click 1`] = `
<h2
data-testid="pollQuestion"
>
Question?
</h2>
`;
exports[`<PollHistory /> Poll detail displays poll detail on past poll list item click 1`] = `
<h2
data-testid="pollQuestion"
>
What?
</h2>
`;
exports[`<PollHistory /> Poll detail navigates back to poll list from detail view on header click 1`] = `
<div
class="mx_AccessibleButton mx_PollDetailHeader mx_AccessibleButton_hasKind mx_AccessibleButton_kind_content_inline"
role="button"
tabindex="0"
>
<div
class="mx_PollDetailHeader_icon"
/>
Active polls
</div>
`;
exports[`<PollHistory /> renders a list of active polls when there are polls in the room 1`] = `
<div>
<div
class="mx_PollHistory_content"
>
<h2
class="mx_Heading_h2 mx_PollHistory_header"
>
Polls history
</h2>
<div
class="mx_PollHistoryList"
>
<fieldset
class="mx_FilterTabGroup"
>
<label
data-testid="filter-tab-PollHistory_filter-ACTIVE"
>
<input
checked=""
name="PollHistory_filter"
type="radio"
value="ACTIVE"
/>
<span>
Active polls
</span>
</label>
<label
data-testid="filter-tab-PollHistory_filter-ENDED"
>
<input
name="PollHistory_filter"
type="radio"
value="ENDED"
/>
<span>
Past polls
</span>
</label>
</fieldset>
<ol
class="mx_PollHistoryList_list mx_PollHistoryList_list_ACTIVE"
>
<li
class="mx_PollListItem"
data-testid="pollListItem-$2"
>
<div
tabindex="0"
>
<div
class="mx_PollListItem_content"
>
<span>
02/02/23
</span>
<div
class="mx_PollListItem_icon"
/>
<span
class="mx_PollListItem_question"
>
Where?
</span>
</div>
</div>
</li>
<li
class="mx_PollListItem"
data-testid="pollListItem-$1"
>
<div
tabindex="0"
>
<div
class="mx_PollListItem_content"
>
<span>
02/02/23
</span>
<div
class="mx_PollListItem_icon"
/>
<span
class="mx_PollListItem_question"
>
Question?
</span>
</div>
</div>
</li>
</ol>
</div>
</div>
</div>
`;
exports[`<PollHistory /> renders a no polls message and a load more button when not at end of timeline 1`] = `
<div
class="mx_AccessibleButton mx_PollHistoryList_loadMorePolls mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
role="button"
tabindex="0"
>
Load more polls
<div
class="mx_InlineSpinner"
>
<div
aria-label="Loading…"
class="mx_InlineSpinner_icon mx_Spinner_icon"
style="width: 16px; height: 16px;"
/>
</div>
</div>
`;
exports[`<PollHistory /> renders a no polls message and a load more button when not at end of timeline 2`] = `
<div
class="mx_AccessibleButton mx_PollHistoryList_loadMorePolls mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
role="button"
tabindex="0"
>
Load more polls
</div>
`;

0
test/components/views/dialogs/polls/__snapshots__/PollListItem-test.tsx.snap → test/components/views/polls/pollHistory/__snapshots__/PollListItem-test.tsx.snap
View file

0
test/components/views/dialogs/polls/__snapshots__/PollListItemEnded-test.tsx.snap → test/components/views/polls/pollHistory/__snapshots__/PollListItemEnded-test.tsx.snap
View file

2
test/components/views/right_panel/RoomSummaryCard-test.tsx
View file

@ -29,7 +29,7 @@ import Modal from "../../../../src/Modal";
import RightPanelStore from "../../../../src/stores/right-panel/RightPanelStore";
import { RightPanelPhases } from "../../../../src/stores/right-panel/RightPanelStorePhases";
import { getMockClientWithEventEmitter, mockClientMethodsUser } from "../../../test-utils";
import { PollHistoryDialog } from "../../../../src/components/views/dialogs/polls/PollHistoryDialog";
import { PollHistoryDialog } from "../../../../src/components/views/dialogs/PollHistoryDialog";
import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalinks";
describe("<RoomSummaryCard />", () => {