FIX: poll ranked choice results not showing on first vote (#28542)

Currently (for Ranked Choice only) a javascript exception is raised on very first vote, preventing the results from being rendered requiring a browser refresh (which doesn't error).

Resolves: TypeError: this.args.rankedChoiceOutcome.round_activity is undefined with simple addition of optional chaining operator.
This commit is contained in:
Robert 2024-11-05 01:29:07 +00:00 committed by GitHub
parent 40a4d55c77
commit 1aa836163e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 56 additions and 38 deletions

View File

@ -7,15 +7,15 @@ export default class PollResultsRankedChoiceComponent extends Component {
get rankedChoiceWinnerText() { get rankedChoiceWinnerText() {
return htmlSafe( return htmlSafe(
I18n.t("poll.ranked_choice.winner", { I18n.t("poll.ranked_choice.winner", {
count: this.args.rankedChoiceOutcome.round_activity.length, count: this.args.rankedChoiceOutcome?.round_activity?.length,
winner: this.args.rankedChoiceOutcome.winning_candidate.html, winner: this.args.rankedChoiceOutcome?.winning_candidate?.html,
}) })
); );
} }
get rankedChoiceTiedText() { get rankedChoiceTiedText() {
return I18n.t("poll.ranked_choice.tied", { return I18n.t("poll.ranked_choice.tied", {
count: this.args.rankedChoiceOutcome.round_activity.length, count: this.args.rankedChoiceOutcome?.round_activity?.length,
}); });
} }
@ -32,6 +32,7 @@ export default class PollResultsRankedChoiceComponent extends Component {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{{#if @rankedChoiceOutcome}}
{{#each @rankedChoiceOutcome.round_activity as |round|}} {{#each @rankedChoiceOutcome.round_activity as |round|}}
{{#if round.majority}} {{#if round.majority}}
<tr> <tr>
@ -51,11 +52,13 @@ export default class PollResultsRankedChoiceComponent extends Component {
</tr> </tr>
{{/if}} {{/if}}
{{/each}} {{/each}}
{{/if}}
</tbody> </tbody>
</table> </table>
<h3 class="poll-results-ranked-choice-subtitle-outcome"> <h3 class="poll-results-ranked-choice-subtitle-outcome">
{{i18n "poll.ranked_choice.title.outcome"}} {{i18n "poll.ranked_choice.title.outcome"}}
</h3> </h3>
{{#if @rankedChoiceOutcome}}
{{#if @rankedChoiceOutcome.tied}} {{#if @rankedChoiceOutcome.tied}}
<span <span
class="poll-results-ranked-choice-info" class="poll-results-ranked-choice-info"
@ -72,5 +75,6 @@ export default class PollResultsRankedChoiceComponent extends Component {
class="poll-results-ranked-choice-info" class="poll-results-ranked-choice-info"
>{{this.rankedChoiceWinnerText}}</span> >{{this.rankedChoiceWinnerText}}</span>
{{/if}} {{/if}}
{{/if}}
</template> </template>
} }

View File

@ -272,7 +272,7 @@ export default class PollComponent extends Component {
} }
get rankedChoiceOutcome() { get rankedChoiceOutcome() {
return this.poll.ranked_choice_outcome || []; return this.poll.ranked_choice_outcome || null;
} }
get min() { get min() {

View File

@ -58,4 +58,18 @@ module("Poll | Component | poll-results-ranked-choice", function (hooks) {
"displays the winner information" "displays the winner information"
); );
}); });
test("Renders the ranked choice results component without error when outcome data is empty", async function (assert) {
this.rankedChoiceOutcome = null;
await render(
hbs`<PollResultsRankedChoice @rankedChoiceOutcome={{this.rankedChoiceOutcome}} />`
);
assert.strictEqual(
count("table.poll-results-ranked-choice tr"),
1,
"there are no rounds of ranked choice displayed, only the header"
);
});
}); });