element-web/test/components/views/messages/MPollBody-test.tsx

/*
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.
*/

import React from "react";
import { mount, ReactWrapper } from "enzyme";

import sdk from "../../../skinned-sdk";
import * as TestUtils from "../../../test-utils";

import { Callback, IContent, MatrixEvent } from "matrix-js-sdk";
import { ISendEventResponse } from "matrix-js-sdk/src/@types/requests";
import { Relations } from "matrix-js-sdk/src/models/relations";
import { IPollAnswer, IPollContent, POLL_RESPONSE_EVENT_TYPE } from "../../../../src/polls/consts";
import { UserVote, allVotes } from "../../../../src/components/views/messages/MPollBody";
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
import { IBodyProps } from "../../../../src/components/views/messages/IBodyProps";

const CHECKED = "mx_MPollBody_option_checked";

const _MPollBody = sdk.getComponent("views.messages.MPollBody");
const MPollBody = TestUtils.wrapInMatrixClientContext(_MPollBody);

MatrixClientPeg.matrixClient = {
    getUserId: () => "@me:example.com",
    sendEvent: () => Promise.resolve({ "event_id": "fake_send_id" }),
};

describe("MPollBody", () => {
    it("finds no votes if there are none", () => {
        expect(allVotes(newPollRelations([]))).toEqual([]);
    });

    it("can find all the valid responses to a poll", () => {
        const ev1 = responseEvent();
        const ev2 = responseEvent();
        const badEvent = badResponseEvent();

        const pollRelations = newPollRelations([ev1, badEvent, ev2]);
        expect(allVotes(pollRelations)).toEqual([
            new UserVote(
                ev1.getTs(),
                ev1.getSender(),
                ev1.getContent()[POLL_RESPONSE_EVENT_TYPE.name].answers,
            ),
            new UserVote(
                ev2.getTs(),
                ev2.getSender(),
                ev2.getContent()[POLL_RESPONSE_EVENT_TYPE.name].answers,
            ),
        ]);
    });

    it("renders no votes if none were made", () => {
        const votes = [];
        const body = newMPollBody(votes);
        expect(votesCount(body, "pizza")).toBe("");
        expect(votesCount(body, "poutine")).toBe("");
        expect(votesCount(body, "italian")).toBe("");
        expect(votesCount(body, "wings")).toBe("");
        expect(body.find(".mx_MPollBody_totalVotes").text()).toBe("No votes cast");
    });

    it("finds votes from multiple people", () => {
        const votes = [
            responseEvent("@me:example.com", "pizza"),
            responseEvent("@bellc:example.com", "pizza"),
            responseEvent("@catrd:example.com", "poutine"),
            responseEvent("@dune2:example.com", "wings"),
        ];
        const body = newMPollBody(votes);
        expect(votesCount(body, "pizza")).toBe("2 votes");
        expect(votesCount(body, "poutine")).toBe("1 vote");
        expect(votesCount(body, "italian")).toBe("0 votes");
        expect(votesCount(body, "wings")).toBe("1 vote");
        expect(body.find(".mx_MPollBody_totalVotes").text()).toBe("Based on 4 votes");
    });

    it("hides scores if I have not voted", () => {
        const votes = [
            responseEvent("@alice:example.com", "pizza"),
            responseEvent("@bellc:example.com", "pizza"),
            responseEvent("@catrd:example.com", "poutine"),
            responseEvent("@dune2:example.com", "wings"),
        ];
        const body = newMPollBody(votes);
        expect(votesCount(body, "pizza")).toBe("");
        expect(votesCount(body, "poutine")).toBe("");
        expect(votesCount(body, "italian")).toBe("");
        expect(votesCount(body, "wings")).toBe("");
        expect(body.find(".mx_MPollBody_totalVotes").text()).toBe(
            "4 votes cast. Vote to see the results");
    });

    it("hides a single vote if I have not voted", () => {
        const votes = [
            responseEvent("@alice:example.com", "pizza"),
        ];
        const body = newMPollBody(votes);
        expect(votesCount(body, "pizza")).toBe("");
        expect(votesCount(body, "poutine")).toBe("");
        expect(votesCount(body, "italian")).toBe("");
        expect(votesCount(body, "wings")).toBe("");
        expect(body.find(".mx_MPollBody_totalVotes").text()).toBe(
            "1 vote cast. Vote to see the results");
    });

    it("takes someone's most recent vote if they voted several times", () => {
        const votes = [
            responseEvent("@me:example.com", "pizza", 12),
            responseEvent("@me:example.com", "wings", 20),   // latest me
            responseEvent("@qbert:example.com", "pizza", 14),
            responseEvent("@qbert:example.com", "poutine", 16), // latest qbert
            responseEvent("@qbert:example.com", "wings", 15),
        ];
        const body = newMPollBody(votes);
        expect(votesCount(body, "pizza")).toBe("0 votes");
        expect(votesCount(body, "poutine")).toBe("1 vote");
        expect(votesCount(body, "italian")).toBe("0 votes");
        expect(votesCount(body, "wings")).toBe("1 vote");
        expect(body.find(".mx_MPollBody_totalVotes").text()).toBe("Based on 2 votes");
    });

    it("uses my local vote", () => {
        // Given I haven't voted
        const votes = [
            responseEvent("@nf:example.com", "pizza", 15),
            responseEvent("@fg:example.com", "pizza", 15),
            responseEvent("@hi:example.com", "pizza", 15),
        ];
        const body = newMPollBody(votes);

        // When I vote for Italian
        clickRadio(body, "italian");

        // My vote is counted
        expect(votesCount(body, "pizza")).toBe("3 votes");
        expect(votesCount(body, "poutine")).toBe("0 votes");
        expect(votesCount(body, "italian")).toBe("1 vote");
        expect(votesCount(body, "wings")).toBe("0 votes");

        expect(body.find(".mx_MPollBody_totalVotes").text()).toBe("Based on 4 votes");
    });

    it("overrides my other votes with my local vote", () => {
        // Given two of us have voted for Italian
        const votes = [
            responseEvent("@me:example.com", "pizza", 12),
            responseEvent("@me:example.com", "poutine", 13),
            responseEvent("@me:example.com", "italian", 14),
            responseEvent("@nf:example.com", "italian", 15),
        ];
        const body = newMPollBody(votes);

        // When I click Wings
        clickRadio(body, "wings");

        // Then my vote is counted for Wings, and not for Italian
        expect(votesCount(body, "pizza")).toBe("0 votes");
        expect(votesCount(body, "poutine")).toBe("0 votes");
        expect(votesCount(body, "italian")).toBe("1 vote");
        expect(votesCount(body, "wings")).toBe("1 vote");

        expect(body.find(".mx_MPollBody_totalVotes").text()).toBe("Based on 2 votes");

        // And my vote is highlighted
        expect(voteButton(body, "wings").hasClass(CHECKED)).toBe(true);
        expect(voteButton(body, "italian").hasClass(CHECKED)).toBe(false);
    });

    it("cancels my local vote if another comes in", () => {
        // Given I voted locally
        const votes = [responseEvent("@me:example.com", "pizza", 100)];
        const body = newMPollBody(votes);
        const props: IBodyProps = body.instance().props as IBodyProps;
        const pollRelations: Relations = props.getRelationsForEvent(
            "$mypoll", "m.reference", POLL_RESPONSE_EVENT_TYPE.name);
        clickRadio(body, "pizza");

        // When a new vote from me comes in
        pollRelations.addEvent(responseEvent("@me:example.com", "wings", 101));

        // Then the new vote is counted, not the old one
        expect(votesCount(body, "pizza")).toBe("0 votes");
        expect(votesCount(body, "poutine")).toBe("0 votes");
        expect(votesCount(body, "italian")).toBe("0 votes");
        expect(votesCount(body, "wings")).toBe("1 vote");

        expect(body.find(".mx_MPollBody_totalVotes").text()).toBe("Based on 1 vote");
    });

    it("doesn't cancel my local vote if someone else votes", () => {
        // Given I voted locally
        const votes = [responseEvent("@me:example.com", "pizza")];
        const body = newMPollBody(votes);
        const props: IBodyProps = body.instance().props as IBodyProps;
        const pollRelations: Relations = props.getRelationsForEvent(
            "$mypoll", "m.reference", POLL_RESPONSE_EVENT_TYPE.name);
        clickRadio(body, "pizza");

        // When a new vote from someone else comes in
        pollRelations.addEvent(responseEvent("@xx:example.com", "wings", 101));

        // Then my vote is still for pizza
        // NOTE: the new event does not affect the counts for other people -
        //       that is handled through the Relations, not by listening to
        //       these timeline events.
        expect(votesCount(body, "pizza")).toBe("1 vote");
        expect(votesCount(body, "poutine")).toBe("0 votes");
        expect(votesCount(body, "italian")).toBe("0 votes");
        expect(votesCount(body, "wings")).toBe("1 vote");

        expect(body.find(".mx_MPollBody_totalVotes").text()).toBe("Based on 2 votes");

        // And my vote is highlighted
        expect(voteButton(body, "pizza").hasClass(CHECKED)).toBe(true);
        expect(voteButton(body, "wings").hasClass(CHECKED)).toBe(false);
    });

    it("highlights my vote even if I did it on another device", () => {
        // Given I voted italian
        const votes = [
            responseEvent("@me:example.com", "italian"),
            responseEvent("@nf:example.com", "wings"),
        ];
        const body = newMPollBody(votes);

        // But I didn't click anything locally

        // Then my vote is highlighted, and others are not
        expect(voteButton(body, "italian").hasClass(CHECKED)).toBe(true);
        expect(voteButton(body, "wings").hasClass(CHECKED)).toBe(false);
    });

    it("ignores extra answers", () => {
        // When cb votes for 2 things, we consider the first only
        const votes = [
            responseEvent("@cb:example.com", ["pizza", "wings"]),
            responseEvent("@me:example.com", "wings"),
        ];
        const body = newMPollBody(votes);
        expect(votesCount(body, "pizza")).toBe("1 vote");
        expect(votesCount(body, "poutine")).toBe("0 votes");
        expect(votesCount(body, "italian")).toBe("0 votes");
        expect(votesCount(body, "wings")).toBe("1 vote");
        expect(body.find(".mx_MPollBody_totalVotes").text()).toBe("Based on 2 votes");
    });

    it("allows un-voting by passing an empty vote", () => {
        const votes = [
            responseEvent("@nc:example.com", "pizza", 12),
            responseEvent("@nc:example.com", [], 13),
            responseEvent("@me:example.com", "italian"),
        ];
        const body = newMPollBody(votes);
        expect(votesCount(body, "pizza")).toBe("0 votes");
        expect(votesCount(body, "poutine")).toBe("0 votes");
        expect(votesCount(body, "italian")).toBe("1 vote");
        expect(votesCount(body, "wings")).toBe("0 votes");
        expect(body.find(".mx_MPollBody_totalVotes").text()).toBe("Based on 1 vote");
    });

    it("allows re-voting after un-voting", () => {
        const votes = [
            responseEvent("@op:example.com", "pizza", 12),
            responseEvent("@op:example.com", [], 13),
            responseEvent("@op:example.com", "italian", 14),
            responseEvent("@me:example.com", "italian"),
        ];
        const body = newMPollBody(votes);
        expect(votesCount(body, "pizza")).toBe("0 votes");
        expect(votesCount(body, "poutine")).toBe("0 votes");
        expect(votesCount(body, "italian")).toBe("2 votes");
        expect(votesCount(body, "wings")).toBe("0 votes");
        expect(body.find(".mx_MPollBody_totalVotes").text()).toBe("Based on 2 votes");
    });

    it("treats any invalid answer as a spoiled ballot", () => {
        // Note that tr's second vote has a valid first answer, but
        // the ballot is still spoiled because the second answer is
        // invalid, even though we would ignore it if we continued.
        const votes = [
            responseEvent("@me:example.com", "pizza", 12),
            responseEvent("@me:example.com", ["pizza", "doesntexist"], 13),
            responseEvent("@uy:example.com", "italian", 14),
            responseEvent("@uy:example.com", "doesntexist", 15),
        ];
        const body = newMPollBody(votes);
        expect(votesCount(body, "pizza")).toBe("0 votes");
        expect(votesCount(body, "poutine")).toBe("0 votes");
        expect(votesCount(body, "italian")).toBe("0 votes");
        expect(votesCount(body, "wings")).toBe("0 votes");
        expect(body.find(".mx_MPollBody_totalVotes").text()).toBe("Based on 0 votes");
    });

    it("allows re-voting after a spoiled ballot", () => {
        const votes = [
            responseEvent("@me:example.com", "pizza", 12),
            responseEvent("@me:example.com", ["pizza", "doesntexist"], 13),
            responseEvent("@uy:example.com", "italian", 14),
            responseEvent("@uy:example.com", "doesntexist", 15),
            responseEvent("@uy:example.com", "poutine", 16),
        ];
        const body = newMPollBody(votes);
        expect(votesCount(body, "pizza")).toBe("0 votes");
        expect(votesCount(body, "poutine")).toBe("1 vote");
        expect(votesCount(body, "italian")).toBe("0 votes");
        expect(votesCount(body, "wings")).toBe("0 votes");
        expect(body.find(".mx_MPollBody_totalVotes").text()).toBe("Based on 1 vote");
    });

    it("renders nothing if poll has no answers", () => {
        const answers = [];
        const votes = [];
        const body = newMPollBody(votes, answers);
        expect(body.html()).toBe("");
    });

    it("renders nothing if poll has more than 20 answers", () => {
        const answers = [...Array(21).keys()].map((i) => {
            return { "id": `id${i}`, "org.matrix.msc1767.text": `Name ${i}` };
        });
        const votes = [];
        const body = newMPollBody(votes, answers);
        expect(body.html()).toBe("");
    });

    it("sends a vote event when I choose an option", () => {
        const receivedEvents = [];
        MatrixClientPeg.matrixClient.sendEvent = (
            roomId: string,
            eventType: string,
            content: IContent,
            txnId?: string,
            callback?: Callback,
        ): Promise<ISendEventResponse> => {
            receivedEvents.push( { roomId, eventType, content, txnId, callback } );
            return Promise.resolve({ "event_id": "fake_tracked_send_id" });
        };

        const votes = [];
        const body = newMPollBody(votes);
        clickRadio(body, "wings");
        expect(receivedEvents).toEqual([
            expectedResponseEvent("wings"),
        ]);
    });

    it("sends only one vote event when I click several times", () => {
        const receivedEvents = [];
        MatrixClientPeg.matrixClient.sendEvent = (
            roomId: string,
            eventType: string,
            content: IContent,
            txnId?: string,
            callback?: Callback,
        ): Promise<ISendEventResponse> => {
            receivedEvents.push( { roomId, eventType, content, txnId, callback } );
            return Promise.resolve({ "event_id": "fake_tracked_send_id" });
        };

        const votes = [];
        const body = newMPollBody(votes);
        clickRadio(body, "wings");
        clickRadio(body, "wings");
        clickRadio(body, "wings");
        clickRadio(body, "wings");
        expect(receivedEvents).toEqual([
            expectedResponseEvent("wings"),
        ]);
    });

    it("sends several events when I click different options", () => {
        const receivedEvents = [];
        MatrixClientPeg.matrixClient.sendEvent = (
            roomId: string,
            eventType: string,
            content: IContent,
            txnId?: string,
            callback?: Callback,
        ): Promise<ISendEventResponse> => {
            receivedEvents.push( { roomId, eventType, content, txnId, callback } );
            return Promise.resolve({ "event_id": "fake_tracked_send_id" });
        };

        const votes = [];
        const body = newMPollBody(votes);
        clickRadio(body, "wings");
        clickRadio(body, "italian");
        clickRadio(body, "poutine");
        expect(receivedEvents).toEqual([
            expectedResponseEvent("wings"),
            expectedResponseEvent("italian"),
            expectedResponseEvent("poutine"),
        ]);
    });

    it("renders a poll with no votes", () => {
        const votes = [];
        const body = newMPollBody(votes);
        expect(body).toMatchSnapshot();
    });

    it("renders a poll with only non-local votes", () => {
        const votes = [
            responseEvent("@op:example.com", "pizza", 12),
            responseEvent("@op:example.com", [], 13),
            responseEvent("@op:example.com", "italian", 14),
            responseEvent("@me:example.com", "wings", 15),
            responseEvent("@qr:example.com", "italian", 16),
        ];
        const body = newMPollBody(votes);
        expect(body).toMatchSnapshot();
    });

    it("renders a poll with local, non-local and invalid votes", () => {
        const votes = [
            responseEvent("@a:example.com", "pizza", 12),
            responseEvent("@b:example.com", [], 13),
            responseEvent("@c:example.com", "italian", 14),
            responseEvent("@d:example.com", "italian", 14),
            responseEvent("@e:example.com", "wings", 15),
            responseEvent("@me:example.com", "italian", 16),
        ];
        const body = newMPollBody(votes);
        clickRadio(body, "italian");
        expect(body).toMatchSnapshot();
    });

    it("renders a poll that I have not voted in", () => {
        const votes = [
            responseEvent("@op:example.com", "pizza", 12),
            responseEvent("@op:example.com", [], 13),
            responseEvent("@op:example.com", "italian", 14),
            responseEvent("@yo:example.com", "wings", 15),
            responseEvent("@qr:example.com", "italian", 16),
        ];
        const body = newMPollBody(votes);
        expect(body).toMatchSnapshot();
    });
});

function newPollRelations(relationEvents: Array<MatrixEvent>): Relations {
    const pollRelations = new Relations(
        "m.reference", POLL_RESPONSE_EVENT_TYPE.name, null);
    for (const ev of relationEvents) {
        pollRelations.addEvent(ev);
    }
    return pollRelations;
}

function newMPollBody(
    relationEvents: Array<MatrixEvent>,
    answers?: IPollAnswer[],
): ReactWrapper {
    const pollRelations = new Relations(
        "m.reference", POLL_RESPONSE_EVENT_TYPE.name, null);
    for (const ev of relationEvents) {
        pollRelations.addEvent(ev);
    }

    return mount(<MPollBody
        mxEvent={new MatrixEvent({
            "event_id": "$mypoll",
            "room_id": "#myroom:example.com",
            "content": newPollStart(answers),
        })}
        getRelationsForEvent={
            (eventId: string, relationType: string, eventType: string) => {
                expect(eventId).toBe("$mypoll");
                expect(relationType).toBe("m.reference");
                expect(eventType).toBe(POLL_RESPONSE_EVENT_TYPE.name);
                return pollRelations;
            }
        }
    />);
}

function clickRadio(wrapper: ReactWrapper, value: string) {
    wrapper.find(`StyledRadioButton[value="${value}"]`).simulate("click");
}

function voteButton(wrapper: ReactWrapper, value: string): ReactWrapper {
    return wrapper.find(
        `div.mx_MPollBody_option`,
    ).findWhere(w => w.key() === value);
}

function votesCount(wrapper: ReactWrapper, value: string): string {
    return wrapper.find(
        `StyledRadioButton[value="${value}"] .mx_MPollBody_optionVoteCount`,
    ).text();
}

function newPollStart(answers?: IPollAnswer[]): IPollContent {
    if (!answers) {
        answers = [
            { "id": "pizza", "org.matrix.msc1767.text": "Pizza" },
            { "id": "poutine", "org.matrix.msc1767.text": "Poutine" },
            { "id": "italian", "org.matrix.msc1767.text": "Italian" },
            { "id": "wings", "org.matrix.msc1767.text": "Wings" },
        ];
    }

    return {
        "org.matrix.msc3381.poll.start": {
            "question": {
                "org.matrix.msc1767.text": "What should we order for the party?",
            },
            "kind": "org.matrix.msc3381.poll.disclosed",
            "answers": answers,
        },
        "org.matrix.msc1767.text": "What should we order for the party?\n" +
            "1. Pizza\n2. Poutine\n3. Italian\n4. Wings",
    };
}

function badResponseEvent(): MatrixEvent {
    return new MatrixEvent(
        {
            "event_id": nextId(),
            "type": POLL_RESPONSE_EVENT_TYPE.name,
            "content": {
                "m.relates_to": {
                    "rel_type": "m.reference",
                    "event_id": "$mypoll",
                },
                // Does not actually contain a response
            },
        },
    );
}

function responseEvent(
    sender = "@alice:example.com",
    answers: string | Array<string> = "italian",
    ts = 0,
): MatrixEvent {
    const ans = typeof answers === "string" ? [answers] : answers;
    return new MatrixEvent(
        {
            "event_id": nextId(),
            "room_id": "#myroom:example.com",
            "origin_server_ts": ts,
            "type": POLL_RESPONSE_EVENT_TYPE.name,
            "sender": sender,
            "content": {
                "m.relates_to": {
                    "rel_type": "m.reference",
                    "event_id": "$mypoll",
                },
                [POLL_RESPONSE_EVENT_TYPE.name]: {
                    "answers": ans,
                },
            },
        },
    );
}

function expectedResponseEvent(answer: string) {
    return {
        "content": {
            [POLL_RESPONSE_EVENT_TYPE.name]: {
                "answers": [answer],
            },
            "m.relates_to": {
                "event_id": "$mypoll",
                "rel_type": "m.reference",
            },
        },
        "eventType": POLL_RESPONSE_EVENT_TYPE.name,
        "roomId": "#myroom:example.com",
        "txnId": undefined,
        "callback": undefined,
    };
}

let EVENT_ID = 0;
function nextId(): string {
    EVENT_ID++;
    return EVENT_ID.toString();
}