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>

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);
+        });
     });
 });

lms/djangoapps/teams/static/teams/js/spec/views/team_card_spec.js

 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() {

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);
         });
     });
 });

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);
+            }
         });
     };
 

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() {

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',

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); }