PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Test for showing a spinner after submitting a new poll (#7194)

Browse source
This commit is contained in:
Andy Balaam 2021-11-24 16:24:19 +00:00 committed by GitHub
parent a0e8c29d85
commit ea97c416f5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 81 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
test/components/views/elements/PollCreateDialog-test.tsx
View file

@ -37,29 +37,6 @@ afterAll(() => {
}); });
describe("PollCreateDialog", () => { describe("PollCreateDialog", () => {
it("doesn't allow submitting until there are options", () => {
const dialog = mount(
<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />,
);
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(
<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />,
);
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", () => { it("renders a blank poll", () => {
const dialog = mount( const dialog = mount(
<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />, <PollCreateDialog room={createRoom()} onFinished={jest.fn()} />,
@ -85,6 +62,45 @@ describe("PollCreateDialog", () => {
changeValue(dialog, "Option 3", "Mu"); changeValue(dialog, "Option 3", "Mu");
expect(dialog).toMatchSnapshot(); expect(dialog).toMatchSnapshot();
}); });
it("doesn't allow submitting until there are options", () => {
const dialog = mount(
<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />,
);
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(
<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />,
);
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("displays a spinner after submitting", () => {
TestUtils.stubClient();
MatrixClientPeg.get().sendEvent = jest.fn(() => Promise.resolve());
const dialog = mount(
<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />,
);
changeValue(dialog, "Question or topic", "Q");
changeValue(dialog, "Option 1", "A1");
changeValue(dialog, "Option 2", "A2");
expect(dialog.find("Spinner").length).toBe(0);
dialog.find("button").simulate("click");
expect(dialog.find("Spinner").length).toBe(1);
});
}); });
function createRoom(): Room { function createRoom(): Room {

84
test/components/views/elements/__snapshots__/PollCreateDialog-test.tsx.snap
View file

@ -542,7 +542,7 @@ exports[`PollCreateDialog renders a blank poll 1`] = `
class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint" class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"
> >
<input <input
id="mx_Field_7" id="mx_Field_1"
label="Question or topic" label="Question or topic"
maxlength="340" maxlength="340"
placeholder="Write something..." placeholder="Write something..."
@ -550,7 +550,7 @@ exports[`PollCreateDialog renders a blank poll 1`] = `
value="" value=""
/> />
<label <label
for="mx_Field_7" for="mx_Field_1"
> >
Question or topic Question or topic
</label> </label>
@ -565,7 +565,7 @@ exports[`PollCreateDialog renders a blank poll 1`] = `
class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint" class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"
> >
<input <input
id="mx_Field_8" id="mx_Field_2"
label="Option 1" label="Option 1"
maxlength="340" maxlength="340"
placeholder="Write an option" placeholder="Write an option"
@ -573,7 +573,7 @@ exports[`PollCreateDialog renders a blank poll 1`] = `
value="" value=""
/> />
<label <label
for="mx_Field_8" for="mx_Field_2"
> >
Option 1 Option 1
</label> </label>
@ -591,7 +591,7 @@ exports[`PollCreateDialog renders a blank poll 1`] = `
class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint" class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"
> >
<input <input
id="mx_Field_9" id="mx_Field_3"
label="Option 2" label="Option 2"
maxlength="340" maxlength="340"
placeholder="Write an option" placeholder="Write an option"
@ -599,7 +599,7 @@ exports[`PollCreateDialog renders a blank poll 1`] = `
value="" value=""
/> />
<label <label
for="mx_Field_9" for="mx_Field_3"
> >
Option 2 Option 2
</label> </label>
@ -700,7 +700,7 @@ exports[`PollCreateDialog renders a blank poll 1`] = `
class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint" class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"
> >
<input <input
id="mx_Field_7" id="mx_Field_1"
label="Question or topic" label="Question or topic"
maxlength="340" maxlength="340"
placeholder="Write something..." placeholder="Write something..."
@ -708,7 +708,7 @@ exports[`PollCreateDialog renders a blank poll 1`] = `
value="" value=""
/> />
<label <label
for="mx_Field_7" for="mx_Field_1"
> >
Question or topic Question or topic
</label> </label>
@ -723,7 +723,7 @@ exports[`PollCreateDialog renders a blank poll 1`] = `
class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint" class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"
> >
<input <input
id="mx_Field_8" id="mx_Field_2"
label="Option 1" label="Option 1"
maxlength="340" maxlength="340"
placeholder="Write an option" placeholder="Write an option"
@ -731,7 +731,7 @@ exports[`PollCreateDialog renders a blank poll 1`] = `
value="" value=""
/> />
<label <label
for="mx_Field_8" for="mx_Field_2"
> >
Option 1 Option 1
</label> </label>
@ -749,7 +749,7 @@ exports[`PollCreateDialog renders a blank poll 1`] = `
class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint" class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"
> >
<input <input
id="mx_Field_9" id="mx_Field_3"
label="Option 2" label="Option 2"
maxlength="340" maxlength="340"
placeholder="Write an option" placeholder="Write an option"
@ -757,7 +757,7 @@ exports[`PollCreateDialog renders a blank poll 1`] = `
value="" value=""
/> />
<label <label
for="mx_Field_9" for="mx_Field_3"
> >
Option 2 Option 2
</label> </label>
@ -885,7 +885,7 @@ exports[`PollCreateDialog renders a blank poll 1`] = `
> >
<input <input
disabled={false} disabled={false}
id="mx_Field_7" id="mx_Field_1"
label="Question or topic" label="Question or topic"
maxLength={340} maxLength={340}
onBlur={[Function]} onBlur={[Function]}
@ -896,7 +896,7 @@ exports[`PollCreateDialog renders a blank poll 1`] = `
value="" value=""
/> />
<label <label
htmlFor="mx_Field_7" htmlFor="mx_Field_1"
> >
Question or topic Question or topic
</label> </label>
@ -928,7 +928,7 @@ exports[`PollCreateDialog renders a blank poll 1`] = `
> >
<input <input
disabled={false} disabled={false}
id="mx_Field_8" id="mx_Field_2"
label="Option 1" label="Option 1"
maxLength={340} maxLength={340}
onBlur={[Function]} onBlur={[Function]}
@ -939,7 +939,7 @@ exports[`PollCreateDialog renders a blank poll 1`] = `
value="" value=""
/> />
<label <label
htmlFor="mx_Field_8" htmlFor="mx_Field_2"
> >
Option 1 Option 1
</label> </label>
@ -986,7 +986,7 @@ exports[`PollCreateDialog renders a blank poll 1`] = `
> >
<input <input
disabled={false} disabled={false}
id="mx_Field_9" id="mx_Field_3"
label="Option 2" label="Option 2"
maxLength={340} maxLength={340}
onBlur={[Function]} onBlur={[Function]}
@ -997,7 +997,7 @@ exports[`PollCreateDialog renders a blank poll 1`] = `
value="" value=""
/> />
<label <label
htmlFor="mx_Field_9" htmlFor="mx_Field_3"
> >
Option 2 Option 2
</label> </label>
@ -1661,7 +1661,7 @@ exports[`PollCreateDialog renders a question and some options 1`] = `
class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint" class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"
> >
<input <input
id="mx_Field_10" id="mx_Field_4"
label="Question or topic" label="Question or topic"
maxlength="340" maxlength="340"
placeholder="Write something..." placeholder="Write something..."
@ -1669,7 +1669,7 @@ exports[`PollCreateDialog renders a question and some options 1`] = `
value="How many turnips is the optimal number?" value="How many turnips is the optimal number?"
/> />
<label <label
for="mx_Field_10" for="mx_Field_4"
> >
Question or topic Question or topic
</label> </label>
@ -1684,7 +1684,7 @@ exports[`PollCreateDialog renders a question and some options 1`] = `
class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint" class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"
> >
<input <input
id="mx_Field_11" id="mx_Field_5"
label="Option 1" label="Option 1"
maxlength="340" maxlength="340"
placeholder="Write an option" placeholder="Write an option"
@ -1692,7 +1692,7 @@ exports[`PollCreateDialog renders a question and some options 1`] = `
value="As many as my neighbour" value="As many as my neighbour"
/> />
<label <label
for="mx_Field_11" for="mx_Field_5"
> >
Option 1 Option 1
</label> </label>
@ -1710,7 +1710,7 @@ exports[`PollCreateDialog renders a question and some options 1`] = `
class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint" class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"
> >
<input <input
id="mx_Field_12" id="mx_Field_6"
label="Option 2" label="Option 2"
maxlength="340" maxlength="340"
placeholder="Write an option" placeholder="Write an option"
@ -1718,7 +1718,7 @@ exports[`PollCreateDialog renders a question and some options 1`] = `
value="The question is meaningless" value="The question is meaningless"
/> />
<label <label
for="mx_Field_12" for="mx_Field_6"
> >
Option 2 Option 2
</label> </label>
@ -1736,7 +1736,7 @@ exports[`PollCreateDialog renders a question and some options 1`] = `
class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint" class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"
> >
<input <input
id="mx_Field_13" id="mx_Field_7"
label="Option 3" label="Option 3"
maxlength="340" maxlength="340"
placeholder="Write an option" placeholder="Write an option"
@ -1744,7 +1744,7 @@ exports[`PollCreateDialog renders a question and some options 1`] = `
value="Mu" value="Mu"
/> />
<label <label
for="mx_Field_13" for="mx_Field_7"
> >
Option 3 Option 3
</label> </label>
@ -1844,7 +1844,7 @@ exports[`PollCreateDialog renders a question and some options 1`] = `
class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint" class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"
> >
<input <input
id="mx_Field_10" id="mx_Field_4"
label="Question or topic" label="Question or topic"
maxlength="340" maxlength="340"
placeholder="Write something..." placeholder="Write something..."
@ -1852,7 +1852,7 @@ exports[`PollCreateDialog renders a question and some options 1`] = `
value="How many turnips is the optimal number?" value="How many turnips is the optimal number?"
/> />
<label <label
for="mx_Field_10" for="mx_Field_4"
> >
Question or topic Question or topic
</label> </label>
@ -1867,7 +1867,7 @@ exports[`PollCreateDialog renders a question and some options 1`] = `
class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint" class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"
> >
<input <input
id="mx_Field_11" id="mx_Field_5"
label="Option 1" label="Option 1"
maxlength="340" maxlength="340"
placeholder="Write an option" placeholder="Write an option"
@ -1875,7 +1875,7 @@ exports[`PollCreateDialog renders a question and some options 1`] = `
value="As many as my neighbour" value="As many as my neighbour"
/> />
<label <label
for="mx_Field_11" for="mx_Field_5"
> >
Option 1 Option 1
</label> </label>
@ -1893,7 +1893,7 @@ exports[`PollCreateDialog renders a question and some options 1`] = `
class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint" class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"
> >
<input <input
id="mx_Field_12" id="mx_Field_6"
label="Option 2" label="Option 2"
maxlength="340" maxlength="340"
placeholder="Write an option" placeholder="Write an option"
@ -1901,7 +1901,7 @@ exports[`PollCreateDialog renders a question and some options 1`] = `
value="The question is meaningless" value="The question is meaningless"
/> />
<label <label
for="mx_Field_12" for="mx_Field_6"
> >
Option 2 Option 2
</label> </label>
@ -1919,7 +1919,7 @@ exports[`PollCreateDialog renders a question and some options 1`] = `
class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint" class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"
> >
<input <input
id="mx_Field_13" id="mx_Field_7"
label="Option 3" label="Option 3"
maxlength="340" maxlength="340"
placeholder="Write an option" placeholder="Write an option"
@ -1927,7 +1927,7 @@ exports[`PollCreateDialog renders a question and some options 1`] = `
value="Mu" value="Mu"
/> />
<label <label
for="mx_Field_13" for="mx_Field_7"
> >
Option 3 Option 3
</label> </label>
@ -2054,7 +2054,7 @@ exports[`PollCreateDialog renders a question and some options 1`] = `
> >
<input <input
disabled={false} disabled={false}
id="mx_Field_10" id="mx_Field_4"
label="Question or topic" label="Question or topic"
maxLength={340} maxLength={340}
onBlur={[Function]} onBlur={[Function]}
@ -2065,7 +2065,7 @@ exports[`PollCreateDialog renders a question and some options 1`] = `
value="How many turnips is the optimal number?" value="How many turnips is the optimal number?"
/> />
<label <label
htmlFor="mx_Field_10" htmlFor="mx_Field_4"
> >
Question or topic Question or topic
</label> </label>
@ -2097,7 +2097,7 @@ exports[`PollCreateDialog renders a question and some options 1`] = `
> >
<input <input
disabled={false} disabled={false}
id="mx_Field_11" id="mx_Field_5"
label="Option 1" label="Option 1"
maxLength={340} maxLength={340}
onBlur={[Function]} onBlur={[Function]}
@ -2108,7 +2108,7 @@ exports[`PollCreateDialog renders a question and some options 1`] = `
value="As many as my neighbour" value="As many as my neighbour"
/> />
<label <label
htmlFor="mx_Field_11" htmlFor="mx_Field_5"
> >
Option 1 Option 1
</label> </label>
@ -2155,7 +2155,7 @@ exports[`PollCreateDialog renders a question and some options 1`] = `
> >
<input <input
disabled={false} disabled={false}
id="mx_Field_12" id="mx_Field_6"
label="Option 2" label="Option 2"
maxLength={340} maxLength={340}
onBlur={[Function]} onBlur={[Function]}
@ -2166,7 +2166,7 @@ exports[`PollCreateDialog renders a question and some options 1`] = `
value="The question is meaningless" value="The question is meaningless"
/> />
<label <label
htmlFor="mx_Field_12" htmlFor="mx_Field_6"
> >
Option 2 Option 2
</label> </label>
@ -2213,7 +2213,7 @@ exports[`PollCreateDialog renders a question and some options 1`] = `
> >
<input <input
disabled={false} disabled={false}
id="mx_Field_13" id="mx_Field_7"
label="Option 3" label="Option 3"
maxLength={340} maxLength={340}
onBlur={[Function]} onBlur={[Function]}
@ -2224,7 +2224,7 @@ exports[`PollCreateDialog renders a question and some options 1`] = `
value="Mu" value="Mu"
/> />
<label <label
htmlFor="mx_Field_13" htmlFor="mx_Field_7"
> >
Option 3 Option 3
</label> </label>