Refactored unit test to remove global variables, remove duplicate tests, and break apart large tests.

Author: jmkulwik

apps/test/unit/code-studio/components/pairing/PairingTest.js

@@ -1,33 +1,39 @@
 import React from 'react';
-import assert from 'assert';
 import sinon from 'sinon';
 import {mount} from 'enzyme';
 import {expect} from '../../../../util/configuredChai';
 
 import Pairing from '@cdo/apps/code-studio/components/pairing/Pairing.jsx';
 
 describe('Pairing component', function () {
-  var component;
-  var server;
-
-  function createDomElement(ajaxUrl) {
-    component = mount(React.createElement(Pairing, {source: ajaxUrl}));
+  function createDomElement() {
+    return mount(React.createElement(Pairing, {source: '/pairings'}));
   }
 
-  function setupFakeAjax(url, response) {
-    server = sinon.fakeServer.create();
-
-    server.respondWith("GET", url, [
+  function setupFakeAjax(response) {
+    var server = sinon.fakeServer.create();
+    server.respondWith("GET", '/pairings', [
       200, {"Content-Type": "application/json"}, JSON.stringify(response)
     ]);
+    return server;
   }
 
-  function teardownFakeAjax() {
+  function teardownFakeAjax(server) {
     server.restore();
   }
 
+  function verifyStartingValues(component, student=0, select=0, stop=0) {
+      expect(component.find('Pairing').length).to.equal(1);
+      expect(component.find('.selected').length).to.equal(0);
+      expect(component.find('.addPartners').length).to.equal(0);
+      expect(component.find('.student').length).to.equal(student);
+      expect(component.find('select').length).to.equal(select);
+      expect(component.find('.stop').length).to.equal(stop);
+  }
+
   describe('for student in multiple sections', function () {
-    var ajaxUrl = '/pairings';
+    var component;
+    var server;
     var ajaxState = {
       sections: [{
         id: 1,
@@ -39,26 +45,20 @@ describe('Pairing component', function () {
     };
 
     beforeEach(function () {
-      setupFakeAjax(ajaxUrl, ajaxState);
-      createDomElement(ajaxUrl);
+      server = setupFakeAjax(ajaxState);
+      component = createDomElement();
       component.update();
       server.respond();
     });
 
     afterEach(function () {
-      teardownFakeAjax();
+      teardownFakeAjax(server);
       component = null;
     });
 
-    it('should render a section dropdown', function () {
-      expect(component.find('select').length).to.equal(1);
-    });
-
-    it('should not render a list of students', function () {
-      expect(component.find('.student').length).to.equal(0);
-    });
-
     it('should change the section and render a list of students when a section with students is selected', function () {
+      verifyStartingValues(component, 0, 1);
+
       // choose first section
       component.find('select').simulate('change', {target: {value: '1'}});
       expect(component.find('select').props().value).to.equal(1);
@@ -72,6 +72,7 @@ describe('Pairing component', function () {
   });
 
   describe('before ajax response is received', function () {
+    var component;
     beforeEach(function () {
       component = mount(React.createElement(Pairing, {}));
       component.update();
@@ -82,58 +83,49 @@ describe('Pairing component', function () {
     });
 
     it('should not render a section dropdown', function () {
-      expect(component.find('.stop').length).to.equal(0);
-      expect(component.find('select').length).to.equal(0);
+      verifyStartingValues(component);
     });
   });
 
   describe('for student in one section', function () {
-    var ajaxUrl = '/pairings';
+    var component;
+    var server;
     var ajaxState = {
-      sections: [{id: 1, name: "A section", students: [{id: 11, name: "First student"}, {id: 12, name: "Second Student"}]}],
+      sections: [{
+        id: 1,
+        name: "A section",
+        students: [{id: 11, name: "First student"}, {id: 12, name: "Second Student"}]}],
       pairings: []
     };
 
     beforeEach(function () {
-      setupFakeAjax(ajaxUrl, ajaxState);
-      createDomElement(ajaxUrl);
+      server = setupFakeAjax(ajaxState);
+      component = createDomElement();
       component.update();
       server.respond();
     });
 
     afterEach(function () {
-      teardownFakeAjax();
+      teardownFakeAjax(server);
       component = null;
     });
 
-    it('should not render a section dropdown', function () {
-      expect(component.find('select').length).to.equal(0);
-    });
-
-    it('should render a list of students', function () {
-      expect(component.find('.student').length).to.equal(2);
-      expect(component.find('.selected').length).to.equal(0);
-    });
-
-    it('should select a student when clicking on it', function () {
-      expect(component.find('.student').length).to.equal(2);
-      expect(component.find('.selected').length).to.equal(0);
-      expect(component.find('.addPartners').length).to.equal(0);
+    it('should recall two students are selected when two students are clicked', function () {
+      verifyStartingValues(component, 2);
 
-      // click on first student to select
+      // click on both students to select
       component.find('.student').first().simulate('click');
-      expect(component.find('.student').length).to.equal(2);
-      expect(component.find('.selected').length).to.equal(1);
-      expect(component.find('.addPartners').length).to.equal(1);
-
-      // click on second student to select
       component.find('.student').last().simulate('click');
       expect(component.find('.student').length).to.equal(2);
       expect(component.find('.selected').length).to.equal(2);
       expect(component.find('.addPartners').length).to.equal(1);
+    });
 
-      // click on second student again to unselect
-      component.find('.student').last().simulate('click');
+    it('should stop displaying addPartners when student is unclicked', function () {
+      verifyStartingValues(component, 2);
+
+      // click on first student to select
+      component.find('.student').first().simulate('click');
       expect(component.find('.student').length).to.equal(2);
       expect(component.find('.selected').length).to.equal(1);
       expect(component.find('.addPartners').length).to.equal(1);
@@ -146,9 +138,7 @@ describe('Pairing component', function () {
     });
 
     it('should let you select a student and add them as a partner', function () {
-      expect(component.find('.student').length).to.equal(2);
-      expect(component.find('.selected').length).to.equal(0);
-      expect(component.find('.addPartners').length).to.equal(0);
+      verifyStartingValues(component, 2);
 
       // click on first student to select
       component.find('.student').first().simulate('click');
@@ -161,12 +151,13 @@ describe('Pairing component', function () {
 
       // verify that the right data is sent to the server
       let data = server.requests[server.requests.length - 1].requestBody;
-      assert.equal('{"pairings":[{"id":11,"name":"First student"}]}', data);
+      expect('{"pairings":[{"id":11,"name":"First student"}]}').to.equal(data);
     });
   });
 
   describe('for student who is currently pairing', function () {
-    var ajaxUrl = '/pairings';
+    var component;
+    var server;
     var ajaxState = {
       sections: [{
         id: 1,
@@ -180,28 +171,19 @@ describe('Pairing component', function () {
     };
 
     beforeEach(function () {
-      setupFakeAjax(ajaxUrl, ajaxState);
-      createDomElement(ajaxUrl);
+      server = setupFakeAjax(ajaxState);
+      component = createDomElement();
       component.update();
       server.respond();
     });
 
     afterEach(function () {
-      teardownFakeAjax();
+      teardownFakeAjax(server);
       component = null;
     });
 
-    it('should not render a section dropdown', function () {
-      expect(component.find('select').length).to.equal(0);
-      expect(component.find('Pairing').length).to.equal(1);
-    });
-
-    it('should render a list of students', function () {
-      expect(component.find('.student').length).to.equal(3);
-    });
-
     it('should remove all students and go back to selection mode when clicking Stop', function () {
-      expect(component.find('.student').length).to.equal(3);
+      verifyStartingValues(component, 3, 0, 1);
 
       // click on stop button
       component.find('.stop').simulate('click');