fix tests

cloudscape-design · Sep 14, 2023 · a837467 · a837467
1 parent e642b4b
commit a837467
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 72 deletions.
diff --git a/src/table/__integ__/resizable-columns.test.ts b/src/table/__integ__/resizable-columns.test.ts
@@ -104,7 +104,9 @@ class TablePage extends BasePageObject {
   async assertColumnWidth(columnIndex: number, expected: number) {
     await this.browser.waitUntil(async () => (await this.getColumnWidth(columnIndex)) === expected, {
       timeout: 1000,
-      timeoutMsg: `Column at index "${columnIndex}" should have width "${expected}"`,
+      timeoutMsg: `Column at index "${columnIndex}" should have width "${expected}". Observed width is "${await this.getColumnWidth(
+        columnIndex
+      )}".`,
     });
   }
 }
@@ -272,12 +274,8 @@ test(
     await page.assertColumnWidth(1, originalWidth + 20);
     await expect(page.readTableWidth(1)).resolves.toEqual(originalWidth + 20);
 
-    await page.keys(['Space', 'ArrowLeft', 'Space']);
-    await page.assertColumnWidth(1, originalWidth + 10);
-    await expect(page.readTableWidth(1)).resolves.toEqual(originalWidth + 10);
-
     await page.keys(['Enter', 'ArrowRight', 'Escape']);
-    await page.assertColumnWidth(1, originalWidth + 10);
-    await expect(page.readTableWidth(1)).resolves.toEqual(originalWidth + 10);
+    await page.assertColumnWidth(1, originalWidth + 20);
+    await expect(page.readTableWidth(1)).resolves.toEqual(originalWidth + 20);
   })
 );
diff --git a/src/table/__tests__/resizable-columns.test.tsx b/src/table/__tests__/resizable-columns.test.tsx
@@ -317,35 +317,42 @@ describe('resize with keyboard', () => {
 
     columnResizerWrapper.focus();
     columnResizerWrapper.keydown(KeyCode.right);
-    columnResizerWrapper.keydown(KeyCode.enter);
+    columnResizerWrapper.click();
 
     expect(onChange).toHaveBeenCalledTimes(0);
   });
 
-  test.each([KeyCode.space, KeyCode.enter])('activates and commits resize with [%s] key code', keyCode => {
+  test('activates and commits resize with resizer click', () => {
     const onChange = jest.fn();
     const { wrapper } = renderTable(<Table {...defaultProps} onColumnWidthsChange={event => onChange(event.detail)} />);
     const columnResizerWrapper = wrapper.findColumnResizer(1)!;
 
     columnResizerWrapper.focus();
-    columnResizerWrapper.keydown(keyCode);
+    columnResizerWrapper.click();
     columnResizerWrapper.keydown(KeyCode.left);
-    columnResizerWrapper.keydown(keyCode);
+    expect(columnResizerWrapper.getElement()).toHaveTextContent('140');
+
+    columnResizerWrapper.click();
 
     expect(onChange).toHaveBeenCalledTimes(1);
     expect(onChange).toHaveBeenCalledWith({ widths: [140, 300] });
   });
 
-  test.each([KeyCode.escape])('discards resize with [%s] key code', keyCode => {
+  test('discards resize with escape', () => {
     const onChange = jest.fn();
     const { wrapper } = renderTable(<Table {...defaultProps} onColumnWidthsChange={event => onChange(event.detail)} />);
     const columnResizerWrapper = wrapper.findColumnResizer(1)!;
 
     columnResizerWrapper.focus();
-    columnResizerWrapper.keydown(KeyCode.enter);
+    columnResizerWrapper.click();
+
     columnResizerWrapper.keydown(KeyCode.right);
-    columnResizerWrapper.keydown(keyCode);
-    columnResizerWrapper.keydown(KeyCode.enter);
+    expect(columnResizerWrapper.getElement()).toHaveTextContent('160');
+
+    columnResizerWrapper.keydown(KeyCode.escape);
+    expect(columnResizerWrapper.getElement()).toHaveTextContent('150');
+
+    columnResizerWrapper.click();
 
     expect(onChange).toHaveBeenCalledTimes(0);
   });
@@ -356,11 +363,16 @@ describe('resize with keyboard', () => {
     const columnResizerWrapper = wrapper.findColumnResizer(1)!;
 
     columnResizerWrapper.focus();
-    columnResizerWrapper.keydown(KeyCode.enter);
+    columnResizerWrapper.click();
+
     columnResizerWrapper.keydown(KeyCode.right);
+    expect(columnResizerWrapper.getElement()).toHaveTextContent('160');
+
     wrapper.findColumnResizer(2)!.focus();
+    expect(columnResizerWrapper.getElement()).toHaveTextContent('150');
+
     columnResizerWrapper.focus();
-    columnResizerWrapper.keydown(KeyCode.enter);
+    columnResizerWrapper.click();
 
     expect(onChange).toHaveBeenCalledTimes(0);
   });

diff --git a/src/table/resizer/index.tsx b/src/table/resizer/index.tsx
@@ -181,62 +181,61 @@ export function Resizer({
   }, [headerCell, isDragging, isKeyboardDragging, resizerHasFocus, handlers]);
 
   return (
-    <>
-      <button
-        ref={resizerRef}
-        aria-labelledby={ariaLabelledby}
-        aria-roledescription="Resize handle"
-        className={clsx(
-          styles.resizer,
-          isDragging && styles['resizer-active'],
-          (resizerHasFocus || showFocusRing) && styles['has-focus']
-        )}
-        onMouseDown={event => {
-          if (event.button !== 0) {
-            return;
-          }
-          event.preventDefault();
-          const headerCell = findUpUntil(event.currentTarget, element => element.tagName.toLowerCase() === 'th')!;
-          setIsDragging(true);
-          setHeaderCell(headerCell);
-        }}
-        onClick={() => {
-          // Prevents mousemove handler from interfering when activated with VO+Space.
-          setIsDragging(false);
-
-          // Start resize
-          if (!isKeyboardDragging) {
-            setIsKeyboardDragging(true);
-            handlers?.announceColumnWidth();
-          }
-          // Commit resize
-          else {
-            setIsKeyboardDragging(false);
-            handlers?.announceColumnWidth();
-            onFinishStable();
-          }
-        }}
-        onFocus={event => {
-          const headerCell = findUpUntil(event.currentTarget, element => element.tagName.toLowerCase() === 'th')!;
-          setResizerHasFocus(true);
-          setHeaderCell(headerCell);
-          onFocus?.();
-        }}
-        onBlur={() => {
-          setResizerHasFocus(false);
-          onBlur?.();
-
-          // Discard keyboard resize if active
-          if (isKeyboardDragging) {
-            setIsKeyboardDragging(false);
-            handlers?.resetColumnWidth();
-          }
-        }}
-        tabIndex={tabIndex}
-        data-focus-id={focusId}
-      />
+    <button
+      ref={resizerRef}
+      aria-labelledby={ariaLabelledby}
+      aria-roledescription="Resize handle"
+      className={clsx(
+        styles.resizer,
+        isDragging && styles['resizer-active'],
+        (resizerHasFocus || showFocusRing) && styles['has-focus']
+      )}
+      onMouseDown={event => {
+        if (event.button !== 0) {
+          return;
+        }
+        event.preventDefault();
+        const headerCell = findUpUntil(event.currentTarget, element => element.tagName.toLowerCase() === 'th')!;
+        setIsDragging(true);
+        setHeaderCell(headerCell);
+      }}
+      onClick={() => {
+        // Prevents mousemove handler from interfering when activated with VO+Space.
+        setIsDragging(false);
+
+        // Start resize
+        if (!isKeyboardDragging) {
+          setIsKeyboardDragging(true);
+          handlers?.announceColumnWidth();
+        }
+        // Commit resize
+        else {
+          setIsKeyboardDragging(false);
+          handlers?.announceColumnWidth();
+          onFinishStable();
+        }
+      }}
+      onFocus={event => {
+        const headerCell = findUpUntil(event.currentTarget, element => element.tagName.toLowerCase() === 'th')!;
+        setResizerHasFocus(true);
+        setHeaderCell(headerCell);
+        onFocus?.();
+      }}
+      onBlur={() => {
+        setResizerHasFocus(false);
+        onBlur?.();
+
+        // Discard keyboard resize if active
+        if (isKeyboardDragging) {
+          setIsKeyboardDragging(false);
+          handlers?.resetColumnWidth();
+        }
+      }}
+      tabIndex={tabIndex}
+      data-focus-id={focusId}
+    >
       <LiveRegion assertive={true}>{liveAnnouncement}</LiveRegion>
-    </>
+    </button>
   );
 }