diff --git a/src/components/views/elements/PollCreateDialog.tsx b/src/components/views/elements/PollCreateDialog.tsx index 9ef02212bc..11a1e72b83 100644 --- a/src/components/views/elements/PollCreateDialog.tsx +++ b/src/components/views/elements/PollCreateDialog.tsx @@ -89,7 +89,7 @@ export default class PollCreateDialog extends ScrollableBaseModal { // Scroll the button into view after the state update to ensure we don't experience // a pop-in effect, and to avoid the button getting cut off due to a mid-scroll render. - this.addOptionRef.current?.scrollIntoView(); + this.addOptionRef.current?.scrollIntoView?.(); }); }; diff --git a/test/components/views/elements/PollCreateDialog-test.tsx b/test/components/views/elements/PollCreateDialog-test.tsx new file mode 100644 index 0000000000..62e05bd483 --- /dev/null +++ b/test/components/views/elements/PollCreateDialog-test.tsx @@ -0,0 +1,109 @@ +/* +Copyright 2021 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +// skinned-sdk should be the first import in most tests +import '../../../skinned-sdk'; +import React from "react"; +import { mount, ReactWrapper } from "enzyme"; +import * as TestUtils from "../../../test-utils"; +import { MatrixClientPeg } from "../../../../src/MatrixClientPeg"; +import { Room } from "matrix-js-sdk/src/models/room"; +import _PollCreateDialog from "../../../../src/components/views/elements/PollCreateDialog"; +const PollCreateDialog = TestUtils.wrapInMatrixClientContext(_PollCreateDialog); + +// Fake date to give a predictable snapshot +const realDateNow = Date.now; +const realDateToISOString = Date.prototype.toISOString; +Date.now = jest.fn(() => 2345678901234); +// eslint-disable-next-line no-extend-native +Date.prototype.toISOString = jest.fn(() => "2021-11-23T14:35:14.240Z"); +afterAll(() => { + Date.now = realDateNow; + // eslint-disable-next-line no-extend-native + Date.prototype.toISOString = realDateToISOString; +}); + +describe("PollCreateDialog", () => { + it("doesn't allow submitting until there are options", () => { + const dialog = mount( + , + ); + expect(submitIsDisabled(dialog)).toBe(true); + }); + + it("does allow submitting when there are options and a question", () => { + // Given a dialog with no info in (which I am unable to submit) + const dialog = mount( + , + ); + expect(submitIsDisabled(dialog)).toBe(true); + + // When I set some values in the boxes + changeValue(dialog, "Question or topic", "Q"); + changeValue(dialog, "Option 1", "A1"); + changeValue(dialog, "Option 2", "A2"); + + // Then I am able to submit + expect(submitIsDisabled(dialog)).toBe(false); + }); + + it("renders a blank poll", () => { + const dialog = mount( + , + ); + expect(dialog).toMatchSnapshot(); + }); + + it("renders a question and some options", () => { + const dialog = mount( + , + ); + expect(submitIsDisabled(dialog)).toBe(true); + + // When I set some values in the boxes + changeValue( + dialog, + "Question or topic", + "How many turnips is the optimal number?", + ); + changeValue(dialog, "Option 1", "As many as my neighbour"); + changeValue(dialog, "Option 2", "The question is meaningless"); + dialog.find("div.mx_PollCreateDialog_addOption").simulate("click"); + changeValue(dialog, "Option 3", "Mu"); + expect(dialog).toMatchSnapshot(); + }); +}); + +function createRoom(): Room { + return new Room( + "roomid", + MatrixClientPeg.get(), + "@name:example.com", + {}, + ); +} + +function changeValue(wrapper: ReactWrapper, labelText: string, value: string) { + wrapper.find(`input[label="${labelText}"]`).simulate( + "change", + { target: { value: value } }, + ); +} + +function submitIsDisabled(wrapper: ReactWrapper) { + return wrapper.find('button[type="submit"]').prop("aria-disabled") === true; +} + diff --git a/test/components/views/elements/__snapshots__/PollCreateDialog-test.tsx.snap b/test/components/views/elements/__snapshots__/PollCreateDialog-test.tsx.snap new file mode 100644 index 0000000000..e780530ae2 --- /dev/null +++ b/test/components/views/elements/__snapshots__/PollCreateDialog-test.tsx.snap @@ -0,0 +1,2349 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`PollCreateDialog renders a blank poll 1`] = ` + + + + +
+
+ +
+

+ Create poll +

+
+
+
+
+
+

+ What is your poll question or topic? +

+
+ + +
+

+ Create options +

+
+
+ + +
+
+
+
+
+ + +
+
+
+
+ Add option +
+
+
+
+
+ Cancel +
+ +
+ +
+ } + onActivation={[Function]} + onDeactivation={[Function]} + persistentFocus={false} + returnFocus={[Function]} + shards={Array []} + sideCar={ + Object { + "assignMedium": [Function], + "assignSyncMedium": [Function], + "options": Object { + "async": true, + "ssr": false, + }, + "read": [Function], + "useMedium": [Function], + } + } + > + +
+

+ Create poll +

+
+
+
+
+
+

+ What is your poll question or topic? +

+
+ + +
+

+ Create options +

+
+
+ + +
+
+
+
+
+ + +
+
+
+
+ Add option +
+
+
+
+
+ Cancel +
+ +
+ +
+ } + onActivation={[Function]} + onDeactivation={[Function]} + persistentFocus={false} + returnFocus={[Function]} + shards={Array []} + sideCar={ + Object { + "assignMedium": [Function], + "assignSyncMedium": [Function], + "options": Object { + "async": true, + "ssr": false, + }, + "read": [Function], + "useMedium": [Function], + } + } + /> + +
+
+

+ Create poll +

+ +
+ +
+
+
+
+

+ What is your poll question or topic? +

+ +
+ + +
+ +

+ Create options +

+
+ +
+ + +
+ + +
+ +
+
+ +
+ + +
+ + +
+ +
+ + Add option +
, + } + } + kind="secondary" + onClick={[Function]} + role="button" + tabIndex={0} + > +
+ Add option +
+ +
+
+
+ +
+ Cancel +
+ + + + +
+ +
+
+ + + + +`; + +exports[`PollCreateDialog renders a question and some options 1`] = ` + + + + +
+
+ +
+

+ Create poll +

+
+
+
+
+
+

+ What is your poll question or topic? +

+
+ + +
+

+ Create options +

+
+
+ + +
+
+
+
+
+ + +
+
+
+
+
+ + +
+
+
+
+ Add option +
+
+
+
+
+ Cancel +
+ +
+ +
+ } + onActivation={[Function]} + onDeactivation={[Function]} + persistentFocus={false} + returnFocus={[Function]} + shards={Array []} + sideCar={ + Object { + "assignMedium": [Function], + "assignSyncMedium": [Function], + "options": Object { + "async": true, + "ssr": false, + }, + "read": [Function], + "useMedium": [Function], + } + } + > + +
+

+ Create poll +

+
+
+
+
+
+

+ What is your poll question or topic? +

+
+ + +
+

+ Create options +

+
+
+ + +
+
+
+
+
+ + +
+
+
+
+
+ + +
+
+
+
+ Add option +
+
+
+
+
+ Cancel +
+ +
+ +
+ } + onActivation={[Function]} + onDeactivation={[Function]} + persistentFocus={false} + returnFocus={[Function]} + shards={Array []} + sideCar={ + Object { + "assignMedium": [Function], + "assignSyncMedium": [Function], + "options": Object { + "async": true, + "ssr": false, + }, + "read": [Function], + "useMedium": [Function], + } + } + /> + +
+
+

+ Create poll +

+ +
+ +
+
+
+
+

+ What is your poll question or topic? +

+ +
+ + +
+ +

+ Create options +

+
+ +
+ + +
+ + +
+ +
+
+ +
+ + +
+ + +
+ +
+
+ +
+ + +
+ + +
+ +
+ + Add option +
, + } + } + kind="secondary" + onClick={[Function]} + role="button" + tabIndex={0} + > +
+ Add option +
+ +
+
+
+ +
+ Cancel +
+ + + + +
+ +
+
+ + + + +`;