Using NUnitASP to test DataGrid editing

Last week I was struggling with a way to test editing capabilities of my DataGrids using NUnitASP. The premise is that I have a data management page that has two DataGrids. Each had an EditCommandColumn defined so users could do inline editing of the information. I didn’t feel comfortable with it, though, because I couldn’t get it wrapped in Unit Tests with NUNitASP. The reason is that when you define and EditCommandColumn you can define the text of the links or push button, but .NET doesn’t render the controls with an ID, which happens to be how NUnitASP hooks everything up.

I knew there was TemplateColumn, but I really didn’t want to roll my own solution to editing DataGrids. What I found was an easy solution which is only slightly harder than using EditCommandColumn.

First, create a DataGrid that looks like:


      
        ReadOnly="True" />
    
    
    
      
        Edit
      
      
        Update
        Cancel
      
    
  

Note that the TemplateColumn defines both an ItemTemplate and an EditItemTemplate.

Next, wire up the code behind. I used a general approach for Edit and Cancel, since all the DataGrids will do the same thing with that:

protected void cmdEdit_Click(object source, EventArgs e)
{
  LinkButton edit = (LinkButton)source;
  DataGrid dg = (DataGrid)edit.Parent.Parent.Parent.Parent;
  int itemIndex = ((DataGridItem)edit.Parent.Parent).ItemIndex;
  dg.EditItemIndex = itemIndex;
  BindData();
}

protected void ReasonCodeGrid_UpdateCommand(object source, EventArgs e)
{
  DataGridItem rowBeingEdited = ReasonCodeGrid.Items[ReasonCodeGrid.EditItemIndex];
  int reasonCodeId = int.Parse(rowBeingEdited.Cells[0].Text);
  string englishDesc = ((TextBox)rowBeingEdited.Cells[1].Controls[0]).Text;
  string spanishDesc = ((TextBox)rowBeingEdited.Cells[2].Controls[0]).Text;
  ReasonCode reasonCode = new ReasonCode(reasonCodeId);
  reasonCode.ReasonCodeEnglish = englishDesc;
  reasonCode.ReasonCodeSpanish = spanishDesc;
  reasonCode.Update();
  ReasonCodeGrid.EditItemIndex = -1;
  BindData();
}

(For those interested, my BindData() method just sets the DataSource of the DataGrid).

The key here is the EditItemIndex. Setting it to something other than -1 is just like having an EditCommandColumn and clicking on the Edit button. Setting it back to -1 is the same thing that Update and Cancel does in the EditCommandColumn.

So now you have a DataGrid that displays an Edit button, and when you click on the Edit button, Update and Cancel links appear for that row. Knowing now how that works, I can drive my UI with NUnitASP tests like:

public void TestEditReasonCodeGrid()
{
  AuthenticateUser();
  Browser.GetPage(DATA_MANAGEMENT_URL);
  DataGridTester.Row editRow = reasonCodeGrid.GetRow(0);
  LinkButtonTester editLink = new LinkButtonTester("cmdEditReasonCode", editRow);
  AssertVisibility(editLink, true);
  editLink.Click();
  LinkButtonTester updateLink = new LinkButtonTester("cmdUpdateReasonCode", editRow);
  LinkButtonTester cancelLink = new LinkButtonTester("cmdCancelReasonCode", editRow);
  AssertVisibility(updateLink, true);
  AssertVisibility(cancelLink, true);
}