test: add example for checking checkbox in table row

jrolfs · jrolfs · commit 05da6a4be6bb · 2022-09-23T01:30:55.000-07:00
diff --git a/test/fixture/locators.test.ts b/test/fixture/locators.test.ts
@@ -253,6 +253,20 @@ test.describe('lib/fixture.ts (locators)', () => {
       expect(text).toEqual(['Hello h1', 'Hello h2'])
     })
 
+    test.describe('accessible tables?', () => {
+      test.use({asyncUtilTimeout: 3000})
+
+      test.only('matches table row with `RegExp` text matcher', async ({screen, within}) => {
+        const table = await screen.findByTestId('editable-nested-table-GroupCode')
+        const row = within(table).getByRole('row', {name: /LINEHOLDER/})
+        const checkbox = within(row).getByRole('checkbox')
+
+        await expect(checkbox).not.toBeChecked()
+        await checkbox.check()
+        await expect(checkbox).toBeChecked()
+      })
+    })
+
     test('throws Testing Library error when locator times out', async ({queries}) => {
       const query = async () => queries.findByText(/Loaded!/, undefined, {timeout: 500})
 
diff --git a/test/fixtures/late-page.html b/test/fixtures/late-page.html
@@ -3,6 +3,27 @@
   <body>
     <span>Loading...</span>
     <span id="hidden" style="visibility: hidden">Hidden</span>
+
+    <table data-testid="editable-nested-table-GroupCode" class="css-1n5gbw2" style="display: none;" id="table">
+      <tbody>
+        <tr data-testid="erow-GroupCode-0" class="css-105800b">
+          <td data-testid="etd-GroupCode-active-0" class="css-1f7ypku">
+            <label
+              for="input-GroupCode-active-0"
+              data-testid="checkbox-input-GroupCode-active-0"
+              class="css-1lua7zz"
+            >
+              <input type="checkbox" id="input-GroupCode-active-0" name="input-GroupCode-active-0" aria-labelledby="input-GroupCode-active-0" class="css-38lalc">
+              <span tabindex="0" class="css-12234rr">…</span>
+              <span class="css-1008avk"></span>
+            </label>
+          </td>
+          <td data-testid="td-GroupCode-code-0" class="css-1f7voku">01</td>
+          <td data-testid="td-GroupCode-description-0" class="css-1f7vpku">LINEHOLDER</td>
+        </tr>
+      </tbody>
+    </table>
+
     <script>
       setTimeout(() => {
         const loaded = document.createElement('span')
@@ -44,6 +65,9 @@
         modal.appendChild(modalHeader)
 
         document.body.appendChild(modal)
+
+        // Deferred Table
+        document.querySelector('#table').style = 'display: table'
       }, 2000)
     </script>
   </body>
