test(context): cover NodeList for include/exclude and fix doc examples (#5178)

The `context.md` examples labeled "Test a Node list" and "Test
everything except these DOM nodes" used `document.querySelector(...)`,
which only ever returns a single node, so they didn't actually show a
NodeList. Switched both to `document.querySelectorAll(...)` and tweaked
the comments so the examples demonstrate the NodeList support that
already works. Also added two `Context` unit tests: one for a NodeList
passed as the bare context, and one for NodeLists passed via
`include`/`exclude`. (`doc/API.md` already lists NodeList as an accepted
context, so it didn't need a change.)

Heads up: I couldn't get the browser test runner going in my
environment, so the new assertions were checked against the built
`axe.js` bundle under jsdom rather than web-test-runner — prettier and
eslint are clean. Worth a CI run to confirm in-browser.

Closes: #3348

Author: cycsmail

doc/context.md

@@ -43,8 +43,8 @@ const img = document.createElement('img');
 document.body.appendChild(img);
 await axe.run(img);
 
-// Test a Node list:
-const nodes = document.querySelector('main, header');
+// Test a NodeList, such as one returned by document.querySelectorAll:
+const nodes = document.querySelectorAll('main, header');
 await axe.run(nodes);
 
 // Test an array of nodes:
@@ -73,8 +73,8 @@ There are often areas of a page that as a developer you have no control over. Yo
 // Test everything except the ad banners:
 await axe.run({ exclude: '.ad-banner' });
 
-// Test everything except these DOM nodes:
-const youtubeVids = document.querySelector('iframe[src^="youtube.com"]');
+// Test everything except these DOM nodes (a NodeList works too):
+const youtubeVids = document.querySelectorAll('iframe[src^="youtube.com"]');
 await axe.run({ exclude: youtubeVids });
 ```
 

test/core/base/context.js

@@ -196,6 +196,16 @@ describe('Context', () => {
       assert.deepEqual(selectors(result.include), ['#foo', '#bar', '#baz']);
     });
 
+    it('accepts a NodeList', () => {
+      fixture.innerHTML =
+        '<div id="foo"></div><div id="bar"></div><div id="baz"></div>';
+      const nodeList = fixture.querySelectorAll('div');
+
+      const result = new Context(nodeList);
+      assert.deepEqual(selectors(result.include), ['#foo', '#bar', '#baz']);
+      assert.isEmpty(result.exclude);
+    });
+
     describe('throwing errors', () => {
       let isInFrame;
 
@@ -261,6 +271,17 @@ describe('Context', () => {
       assert.isAtLeast(context.flatTree.length, 1);
     });
 
+    it('accepts a NodeList for the include and exclude properties', () => {
+      fixture.innerHTML =
+        '<div id="foo"></div><div id="bar"></div><div id="baz"></div>';
+      const result = new Context({
+        include: fixture.querySelectorAll('#foo, #bar'),
+        exclude: fixture.querySelectorAll('#baz')
+      });
+      assert.deepEqual(selectors(result.include), ['#foo', '#bar']);
+      assert.deepEqual(selectors(result.exclude), ['#baz']);
+    });
+
     it('should disregard bad input, non-matching selectors', () => {
       const flatTree = axe.utils.getFlattenedTree(document);
       const context = new Context({