how to name mocha tests

I made a pie chart dojo/dojox widget at work this week. Upon making a first pass at testing and then braving a review, a coworker suggested that the names of my tests could be better. We ended up changing up what I had to:

• Pie Chart Widget
  • setData method
    • when y/text data is supplied
      • should have legend data with percentages
  • prepLegend method
    • when is called following data being set
      • should be no error
    • when is called without data being set
      • should yield appropriate error
  • prepChart method
    • when is called without data being set
      • should yield appropriate error
    • when is called following data being set
      • when no theme is specified
        • should have the Distinctive theme
      • when a theme is specified
        • should use theme

 
 

I feel what is above mostly speaks on its lone in terms of what is good form. One thing I will add is that I was under the misimpression for a while that the describes in a mocha test should strictly be three tiers deep which is not so. Just use as many tiers as makes sense. Here are the actual tests themselves:

define([
   "dojoTest/fixtures/TestImage",
   "dojoSrc/Util",
   "dojoSrc/widgets/PieChart",
   "dojo/Deferred",
   "dojox/charting/themes/Adobebricks",
   "dojox/charting/themes/Distinctive",
   "dojo/dom-construct"
], function(TestImage, Util, PieChart, Deferred, adobebricks, distinctive, domConstruct) {
   describe("Pie Chart Widget", function() {
      describe("setData method", function() {
         describe("when y/text data is supplied", function() {
            var legendData;
            
            before(function() {
               var data = [];
               data.push({y: 15, text: "Buchanan"});
               data.push({y: 30, text: "Coolidge"});
               data.push({y: 13, text: "Fillmore"});
               data.push({y: 20, text: "Garfield"});
               data.push({y: 37, text: "Nixon"});
               data.push({y: 11, text: "Polk"});
               data.push({y: 27, text: "Taft"});
               var widget = new PieChart();
               widget.setData(data);
               legendData = widget.getLegendData();
            });
            
            it("should have legend data with percentages", function() {
               assert.isTrue(legendData[0].number == 15);
               assert.isTrue(legendData[0].percentage == "9.8%");
               assert.isTrue(legendData[0].description == "Buchanan");
               
               assert.isTrue(legendData[1].number == 30);
               assert.isTrue(legendData[1].percentage == "19.6%");
               assert.isTrue(legendData[1].description == "Coolidge");
               
               assert.isTrue(legendData[2].number == 13);
               assert.isTrue(legendData[2].percentage == "8.5%");
               assert.isTrue(legendData[2].description == "Fillmore");
               
               assert.isTrue(legendData[3].number == 20);
               assert.isTrue(legendData[3].percentage == "13.1%");
               assert.isTrue(legendData[3].description == "Garfield");
               
               assert.isTrue(legendData[4].number == 37);
               assert.isTrue(legendData[4].percentage == "24.2%");
               assert.isTrue(legendData[4].description == "Nixon");
               
               assert.isTrue(legendData[5].number == 11);
               assert.isTrue(legendData[5].percentage == "7.2%");
               assert.isTrue(legendData[5].description == "Polk");
               
               assert.isTrue(legendData[6].number == 27);
               assert.isTrue(legendData[6].percentage == "17.6%");
               assert.isTrue(legendData[6].description == "Taft");
            });
         });
      });
      
      describe("prepLegend method", function() {
         describe("when is called following data being set", function() {
            var error
            
            before(function() {
               var data = [];
               var widget = new PieChart();
               widget.setData(data);
               widget.prepChart();
               var table = domConstruct.create("table");
               widget.prepLegend(table);
               error = widget.getError();
            });
               
            it("should be no error", function() {
               assert.isTrue(error == null);
            });
         });
         
         describe("when is called without data being set", function() {
            var error
            
            before(function() {
               var widget = new PieChart();
               widget.prepChart();
               var table = domConstruct.create("table");
               widget.prepLegend(table);
               error = widget.getError();
            });
            
            it("should yield appropriate error", function() {
               assert.isTrue(error == "The call to prepLegend does not have a preceding call
                     to setData and thus is moot.");
            });
         });
      });
      
      describe("prepChart method", function() {
         describe("when is called without data being set", function() {
            var error;
            
            before(function() {
               var widget = new PieChart();
               widget.prepChart();
               error = widget.getError();
            });
            
            it("should yield appropriate error", function() {
               assert.isTrue(error == "The call to prepChart does not have a preceding call to
                     setData and thus is moot.");
            });
         });
         
         describe("when is called following data being set", function() {
            describe("when no theme is specified", function() {
               var firstPieSliceColor;
               var distinctiveComparison;
               
               before(function() {
                  var data = [];
                  data.push({y: 15, text: "Buchanan"});
                  data.push({y: 30, text: "Coolidge"});
                  data.push({y: 13, text: "Fillmore"});
                  data.push({y: 20, text: "Garfield"});
                  data.push({y: 37, text: "Nixon"});
                  data.push({y: 11, text: "Polk"});
                  data.push({y: 27, text: "Taft"});
                  var widget = new PieChart();
                  widget.setData(data);
                  widget.prepChart();
                  var svg = widget.getSvg();
                  firstPieSliceColor = svg.childNodes[3].childNodes[0].getAttribute("fill");
               });
               
               it("should have the Distinctive theme", function() {
                  assert.isTrue(firstPieSliceColor == "rgb(73, 124, 145)");
               });
            });
            
            describe("when a theme is specified", function() {
               var firstPieSliceColor;
               var distinctiveComparison;
               
               before(function() {
                  var data = [];
                  data.push({y: 15, text: "Buchanan"});
                  data.push({y: 30, text: "Coolidge"});
                  data.push({y: 13, text: "Fillmore"});
                  data.push({y: 20, text: "Garfield"});
                  data.push({y: 37, text: "Nixon"});
                  data.push({y: 11, text: "Polk"});
                  data.push({y: 27, text: "Taft"});
                  var widget = new PieChart();
                  widget.setData(data);
                  widget.prepChart(adobebricks);
                  var svg = widget.getSvg();
                  firstPieSliceColor = svg.childNodes[3].childNodes[0].getAttribute("fill");
               });
               
               it("should use theme", function() {
                  assert.isTrue(firstPieSliceColor == "rgb(127, 37, 24)");
               });
            });
         });
      });
   });
});