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() {
return htmlSafe(
I18n.t("poll.ranked_choice.winner", {
count: this.args.rankedChoiceOutcome.round_activity.length,
winner: this.args.rankedChoiceOutcome.winning_candidate.html,
count: this.args.rankedChoiceOutcome?.round_activity?.length,
winner: this.args.rankedChoiceOutcome?.winning_candidate?.html,
})
);
}
get rankedChoiceTiedText() {
return I18n.t("poll.ranked_choice.tied", {
count: this.args.rankedChoiceOutcome.round_activity.length,
count: this.args.rankedChoiceOutcome?.round_activity?.length,
});
}
@ -32,45 +32,49 @@ export default class PollResultsRankedChoiceComponent extends Component {
</tr>
</thead>
<tbody>
{{#each @rankedChoiceOutcome.round_activity as |round|}}
{{#if round.majority}}
<tr>
<td>{{round.round}}</td>
<td>{{htmlSafe round.majority.html}}</td>
<td>{{i18n "poll.ranked_choice.none"}}</td>
</tr>
{{else}}
<tr>
<td>{{round.round}}</td>
<td>{{i18n "poll.ranked_choice.none"}}</td>
<td>
{{#each round.eliminated as |eliminated|}}
{{htmlSafe eliminated.html}}
{{/each}}
</td>
</tr>
{{/if}}
{{/each}}
{{#if @rankedChoiceOutcome}}
{{#each @rankedChoiceOutcome.round_activity as |round|}}
{{#if round.majority}}
<tr>
<td>{{round.round}}</td>
<td>{{htmlSafe round.majority.html}}</td>
<td>{{i18n "poll.ranked_choice.none"}}</td>
</tr>
{{else}}
<tr>
<td>{{round.round}}</td>
<td>{{i18n "poll.ranked_choice.none"}}</td>
<td>
{{#each round.eliminated as |eliminated|}}
{{htmlSafe eliminated.html}}
{{/each}}
</td>
</tr>
{{/if}}
{{/each}}
{{/if}}
</tbody>
</table>
<h3 class="poll-results-ranked-choice-subtitle-outcome">
{{i18n "poll.ranked_choice.title.outcome"}}
</h3>
{{#if @rankedChoiceOutcome.tied}}
<span
class="poll-results-ranked-choice-info"
>{{this.rankedChoiceTiedText}}</span>
<ul class="poll-results-ranked-choice-tied-candidates">
{{#each @rankedChoiceOutcome.tied_candidates as |tied_candidate|}}
<li class="poll-results-ranked-choice-tied-candidate">{{htmlSafe
tied_candidate.html
}}</li>
{{/each}}
</ul>
{{else}}
<span
class="poll-results-ranked-choice-info"
>{{this.rankedChoiceWinnerText}}</span>
{{#if @rankedChoiceOutcome}}
{{#if @rankedChoiceOutcome.tied}}
<span
class="poll-results-ranked-choice-info"
>{{this.rankedChoiceTiedText}}</span>
<ul class="poll-results-ranked-choice-tied-candidates">
{{#each @rankedChoiceOutcome.tied_candidates as |tied_candidate|}}
<li class="poll-results-ranked-choice-tied-candidate">{{htmlSafe
tied_candidate.html
}}</li>
{{/each}}
</ul>
{{else}}
<span
class="poll-results-ranked-choice-info"
>{{this.rankedChoiceWinnerText}}</span>
{{/if}}
{{/if}}
</template>
}

View File

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

View File

@ -58,4 +58,18 @@ module("Poll | Component | poll-results-ranked-choice", function (hooks) {
"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"
);
});
});