From d99890fb1a21a45a7b19f5da6fc2400befa2f4f9 Mon Sep 17 00:00:00 2001
From: Ben Warzeski <bwarzeski@edx.org>
Date: Wed, 1 Jul 2020 15:37:45 -0400
Subject: [PATCH] Team card teamset name (#24360)
* show teamset as pennant in team cards within my_teams view
* update verifyCards spec helper to be able to check teamset label
* update tests for team_card teamset label.
Co-authored-by: Ben Warzeski <benwarzeski@edX-C02CD0HCLVDM.cable.rcn.com>
---
.../teams/js/spec/views/my_teams_spec.js | 11 ++++-
.../teams/js/spec/views/team_card_spec.js | 42 ++++++++++++++-----
.../static/teams/js/spec/views/teams_spec.js | 21 ++++++++--
.../js/spec_helpers/team_spec_helpers.js | 20 ++++++++-
.../teams/static/teams/js/views/my_teams.js | 8 +++-
.../teams/static/teams/js/views/team_card.js | 6 +++
.../teams/static/teams/js/views/teams.js | 1 +
7 files changed, 92 insertions(+), 17 deletions(-)
diff --git a/lms/djangoapps/teams/static/teams/js/spec/views/my_teams_spec.js b/lms/djangoapps/teams/static/teams/js/spec/views/my_teams_spec.js
index 5331dbfdb6e..cd416ea1aea 100644
--- a/lms/djangoapps/teams/static/teams/js/spec/views/my_teams_spec.js
+++ b/lms/djangoapps/teams/static/teams/js/spec/views/my_teams_spec.js
@@ -13,7 +13,10 @@ define([
});
mockGetTopic = function(topicId) {
- return $.Deferred().resolve(TeamSpecHelpers.createMockTopic({id: topicId}));
+ return $.Deferred().resolve(TeamSpecHelpers.createMockTopic({
+ id: topicId,
+ name: 'teamset-name-' + topicId,
+ }));
};
createMyTeamsView = function(myTeams) {
@@ -78,5 +81,11 @@ define([
);
AjaxHelpers.respondWithJson(requests, {});
});
+
+ it('sets showTeamsetOnTeamCards on child Teams view', function() {
+ var teams = TeamSpecHelpers.createMockTeams({results: []}),
+ myTeamsView = createMyTeamsView(teams);
+ TeamSpecHelpers.verifyCards(myTeamsView, [], true);
+ });
});
});
diff --git a/lms/djangoapps/teams/static/teams/js/spec/views/team_card_spec.js b/lms/djangoapps/teams/static/teams/js/spec/views/team_card_spec.js
index b70e6f77514..db80f6c30ee 100644
--- a/lms/djangoapps/teams/static/teams/js/spec/views/team_card_spec.js
+++ b/lms/djangoapps/teams/static/teams/js/spec/views/team_card_spec.js
@@ -1,41 +1,54 @@
define(['jquery',
'underscore',
'moment',
+ 'teams/js/spec_helpers/team_spec_helpers',
'teams/js/views/team_card',
'teams/js/models/team',
'teams/js/models/topic'],
- function($, _, moment, TeamCardView, Team, Topic) {
+ function($, _, moment, TeamSpecHelpers, TeamCardView, Team, Topic) {
'use strict';
describe('TeamCardView', function() {
var createTeamCardView, view;
+ var teamName = 'Test Team',
+ teamID = 'test-team',
+ courseID = TeamSpecHelpers.testCourseID,
+ teamsetID = TeamSpecHelpers.testTopicID,
+ teamsetName = 'Team Set',
+ description = 'A team for testing';
+
createTeamCardView = function(topicOptions) {
var model = new Team({
- id: 'test-team',
- name: 'Test Team',
+ id: teamID,
+ name: teamName,
+ course_id: courseID,
+ topic_id: teamsetID,
+ description: description,
is_active: true,
- course_id: 'test/course/id',
- topic_id: 'test-topic',
- description: 'A team for testing',
last_activity_at: '2015-08-21T18:53:01.145Z',
country: 'us',
language: 'en',
membership: []
}),
- topic = new Topic(_.extend({id: 'test-topic'}, topicOptions)),
+ topic = new Topic(_.extend({
+ id: teamsetID,
+ name: teamsetName,
+ }, topicOptions)),
TeamCardClass = TeamCardView.extend({
courseMaxTeamSize: '100',
srInfo: {
id: 'test-sr-id',
text: 'Screenreader text'
},
+ showTeamset: true,
countries: {us: 'United States of America'},
languages: {en: 'English'},
// eslint-disable-next-line no-unused-vars
getTopic: function(topicId) { return $.Deferred().resolve(topic); }
});
return new TeamCardClass({
- model: model
+ model: model,
+ showTopic: true,
});
};
@@ -47,8 +60,9 @@ define(['jquery',
it('can render itself', function() {
expect(view.$el).toHaveClass('list-card');
- expect(view.$el.find('.card-title').text()).toContain('Test Team');
- expect(view.$el.find('.card-description').text()).toContain('A team for testing');
+ expect(view.$el.find('.card-title').text()).toContain(teamName);
+ expect(view.$el.find('.card-description').text()).toContain(description);
+ expect(view.$el.find('.card-type').text()).toContain(teamsetName);
expect(view.$el.find('.team-activity abbr').attr('title')).toContain('August 21st 2015');
expect(view.$el.find('.team-activity').text()).toContain('Last activity');
expect(view.$el.find('.card-meta').text()).toContain('0 / 100 Members');
@@ -56,8 +70,14 @@ define(['jquery',
expect(view.$el.find('.team-language').text()).toContain('English');
});
+ it('does not show teamset name is showTeamset is false', function() {
+ view.showTeamset = false;
+ view.render();
+ expect(view.$el.find('.card-type').length).toEqual(0);
+ });
+
it('navigates to the associated team page when its action button is clicked', function() {
- expect(view.$('.action').attr('href')).toEqual('#teams/test-topic/test-team');
+ expect(view.$('.action').attr('href')).toEqual('#teams/' + teamsetID + '/' + teamID);
});
describe('Profile Image Thumbnails', function() {
diff --git a/lms/djangoapps/teams/static/teams/js/spec/views/teams_spec.js b/lms/djangoapps/teams/static/teams/js/spec/views/teams_spec.js
index a36cee98c7a..1106a4ee13a 100644
--- a/lms/djangoapps/teams/static/teams/js/spec/views/teams_spec.js
+++ b/lms/djangoapps/teams/static/teams/js/spec/views/teams_spec.js
@@ -16,13 +16,17 @@ define([
var MockTeamsView = TeamsView.extend({
// eslint-disable-next-line no-unused-vars
getTopic: function(topicId) {
- return $.Deferred().resolve(TeamSpecHelpers.createMockTopic({}));
- }
+ return $.Deferred().resolve(TeamSpecHelpers.createMockTopic({
+ id: topicId,
+ name: 'teamset-name-' + topicId,
+ }));
+ },
});
return new MockTeamsView({
el: '.teams-container',
collection: options.teams || TeamSpecHelpers.createMockTeams(),
showActions: true,
+ showTeamset: options.showTeamset,
context: TeamSpecHelpers.testContext
}).render();
};
@@ -40,7 +44,18 @@ define([
expect(footerEl.text()).toMatch('1\\s+out of\\s+\/\\s+2'); // eslint-disable-line no-useless-escape
expect(footerEl).not.toHaveClass('hidden');
- TeamSpecHelpers.verifyCards(teamsView, testTeamData);
+ TeamSpecHelpers.verifyCards(teamsView, testTeamData, false);
+ });
+
+ it('forwards the showTeamset option to loaded team cards)', function() {
+ var testTeamData = TeamSpecHelpers.createMockTeamData(1, 5),
+ teamsView = createTeamsView({
+ teams: TeamSpecHelpers.createMockTeams({
+ results: testTeamData
+ }),
+ showTeamset: true,
+ });
+ TeamSpecHelpers.verifyCards(teamsView, testTeamData, true);
});
});
});
diff --git a/lms/djangoapps/teams/static/teams/js/spec_helpers/team_spec_helpers.js b/lms/djangoapps/teams/static/teams/js/spec_helpers/team_spec_helpers.js
index 65914993f94..efe97c24dcc 100644
--- a/lms/djangoapps/teams/static/teams/js/spec_helpers/team_spec_helpers.js
+++ b/lms/djangoapps/teams/static/teams/js/spec_helpers/team_spec_helpers.js
@@ -113,13 +113,31 @@ define([
);
};
- var verifyCards = function(view, teams) {
+
+ /**
+ * Verify that the given view shows cards for each of the teams included.
+ * If showTeamset is included (true or false), the test will also verify that the teamset
+ * label/penannt is or is not included in the card accordingly.
+ *
+ * @param {JQ Element} view - jquery DOM element for the card container
+ * @param {TeamModel[]} teams - list of teams to verify.
+ * @param {[bool]} showTeamset - should show teamset string? (if not included, do not check
+ * the teamset string at all)
+ */
+ var verifyCards = function(view, teams, showTeamset) {
var teamCards = view.$('.team-card');
_.each(teams, function(team, index) {
var currentCard = teamCards.eq(index);
+ var teamsetString = 'teamset-name-' + team.topic_id;
expect(currentCard.text()).toMatch(team.name);
expect(currentCard.text()).toMatch(_.object(testLanguages)[team.language]);
expect(currentCard.text()).toMatch(_.object(testCountries)[team.country]);
+ if (showTeamset === false) {
+ expect(currentCard.text()).not.toMatch(teamsetString);
+ }
+ if (showTeamset === true) {
+ expect(currentCard.text()).toMatch(teamsetString);
+ }
});
};
diff --git a/lms/djangoapps/teams/static/teams/js/views/my_teams.js b/lms/djangoapps/teams/static/teams/js/views/my_teams.js
index 3a7931a2fb7..e73bfae6da7 100644
--- a/lms/djangoapps/teams/static/teams/js/views/my_teams.js
+++ b/lms/djangoapps/teams/static/teams/js/views/my_teams.js
@@ -7,7 +7,13 @@
initialize: function(options) {
this.getTopic = options.getTopic;
- TeamsView.prototype.initialize.call(this, options);
+ TeamsView.prototype.initialize.call(
+ this,
+ _.extend(
+ { showTeamset: true },
+ options
+ )
+ );
},
render: function() {
diff --git a/lms/djangoapps/teams/static/teams/js/views/team_card.js b/lms/djangoapps/teams/static/teams/js/views/team_card.js
index f6978f3f75d..91dedde1d89 100644
--- a/lms/djangoapps/teams/static/teams/js/views/team_card.js
+++ b/lms/djangoapps/teams/static/teams/js/views/team_card.js
@@ -138,11 +138,17 @@
this.model.on('change:membership', function() {
this.detailViews[0].memberships = this.model.get('membership');
}, this);
+
+ this.teamsetName = null;
+ this.getTopic(this.model.get('topic_id')).done(_.bind(function(teamset) {
+ this.teamsetName = teamset.get('name');
+ }, this));
},
configuration: 'list_card',
cardClass: 'team-card',
title: function() { return this.model.get('name'); },
+ pennant: function() { return this.showTeamset ? this.teamsetName : undefined; },
description: function() { return this.model.get('description'); },
details: function() { return this.detailViews; },
actionClass: 'action-view',
diff --git a/lms/djangoapps/teams/static/teams/js/views/teams.js b/lms/djangoapps/teams/static/teams/js/views/teams.js
index 71ac15dd072..3f6732db4b4 100644
--- a/lms/djangoapps/teams/static/teams/js/views/teams.js
+++ b/lms/djangoapps/teams/static/teams/js/views/teams.js
@@ -24,6 +24,7 @@
router: options.router,
courseMaxTeamSize: this.context.courseMaxTeamSize,
srInfo: this.srInfo,
+ showTeamset: options.showTeamset,
countries: TeamUtils.selectorOptionsArrayToHashWithBlank(this.context.countries),
languages: TeamUtils.selectorOptionsArrayToHashWithBlank(this.context.languages),
getTopic: function(topicId) { return view.getTopic(topicId); }
--
GitLab