Add toggle names button tests

nbgrader/server_extensions/formgrader/static/js/gradebook_notebook_submissions.js

@@ -195,7 +195,7 @@ let updateToggleNamesButtonLabel = function() {
     const button = document.getElementById("toggle_names");
     const icons = document.getElementsByClassName("glyphicon name-hidden");
     const icon_array = [...icons];
-    if (icon_array.some(el => el.checkVisibility())){
+    if (icon_array.some(el => $(el).is(':visible'))){
         button.innerHTML = "Show All Names";
     } else{
         button.innerHTML = "Hide All Names";

nbgrader/tests/labextension_ui-tests/tests/test_formgrader.spec.ts

@@ -510,6 +510,55 @@ test('Gradebook3 show hide names', async ({
 
 });
 
+/*
+  Toggle name visibility button
+ */
+test('Gradebook toggle names button', async ({
+  page,
+  baseURL,
+  tmpPath
+}) => {
+
+  test.skip(is_windows, 'This test does not work on Windows');
+
+  if (baseURL === undefined) throw new Error("BaseURL is undefined.");
+
+  // create environment
+  await create_env(page, tmpPath, exchange_dir, cache_dir, is_windows);
+  await add_courses(page, baseURL, tmpPath);
+  await open_formgrader(page);
+
+  // get formgrader iframe
+  const iframe = page.mainFrame().childFrames()[0];
+
+  // Change iframe URL to gradebook Problem Set 1
+  await iframe.goto(`${baseURL}/formgrader/gradebook/Problem Set 1/Problem 1`);
+  await check_formgrader_breadcrumbs(iframe, ["Manual Grading", "Problem Set 1", "Problem 1"]);
+
+  const button = iframe.locator("[id='toggle_names']").first()
+  const hidden = iframe.locator("td .glyphicon.name-hidden").first();
+  const shown = iframe.locator("td .glyphicon.name-shown").first();
+
+  // At the start, all names are hidden
+  await expect(button).toHaveText("Show All Names", {useInnerText: true});
+  await expect(hidden).toBeVisible();
+  await expect(shown).toBeHidden();
+
+  // Clicking should make names shown
+  await button.click();
+  await expect(button).toHaveText("Hide All Names", {useInnerText: true});
+  await expect(hidden).toBeHidden();
+  await expect(shown).toBeVisible();
+
+  // If there is at least one hidden, button should default to showing all names
+  await shown.click();
+  await expect(button).toHaveText("Show All Names", {useInnerText: true});
+  await button.click();
+  await expect(hidden).toBeHidden();
+  await expect(shown).toBeVisible();
+
+});
+
 /*
  * Load students and test students links
  */

nbgrader/tests/nbextensions/test_formgrader.py

@@ -278,6 +278,38 @@ def test_gradebook3_show_hide_names(browser, port, gradebook):
     assert hidden.is_displayed()
 
 
+@pytest.mark.nbextensions
+def test_gradebook_toggle_names_button(browser, port, gradebook):
+    problem = gradebook.find_assignment("Problem Set 1").notebooks[0]
+    utils._load_gradebook_page(browser, port, "gradebook/Problem Set 1/{}".format(problem.name))
+    submissions = problem.submissions
+    submissions.sort(key=lambda x: x.id)
+
+    button = browser.find_element(By.ID, "toggle_names")
+    row1 = browser.find_element(By.CSS_SELECTOR, "tbody tr")
+    col1 = row1.find_element(By.CSS_SELECTOR, "td")
+    hidden = col1.find_element(By.CSS_SELECTOR, ".glyphicon.name-hidden")
+    shown = col1.find_element(By.CSS_SELECTOR, ".glyphicon.name-shown")
+
+    # At the start, all names are hidden
+    assert button.text == "Show All Names"
+    assert hidden.is_displayed()
+    assert not shown.is_displayed()
+
+    # Clicking should make names shown
+    button.click()
+    assert button.text == "Hide All Names"
+    assert not hidden.is_displayed()
+    assert shown.is_displayed()
+
+    # If there is at least one hidden, button should default to showing all names
+    shown.click()
+    assert button.text == "Show All Names"
+    button.click()
+    assert not hidden.is_displayed()
+    assert shown.is_displayed()
+
+
 @pytest.mark.nbextensions
 def test_load_student1(browser, port, gradebook):
     # load the student view