Set up comprehensive frontend testing infrastructure

- Install Jest for unit testing with React Testing Library
- Install Playwright for end-to-end testing
- Configure Jest with proper TypeScript support and module mapping
- Create test setup files and utilities for both unit and e2e tests

Components:
* Jest configuration with coverage thresholds
* Playwright configuration with browser automation
* Unit tests for LoginForm, AuthContext, and useSocketIO hook
* E2E tests for authentication, dashboard, and agents workflows
* GitHub Actions workflow for automated testing
* Mock data and API utilities for consistent testing
* Test documentation with best practices

Testing features:
- Unit tests with 70% coverage threshold
- E2E tests with API mocking and user journey testing
- CI/CD integration for automated test runs
- Cross-browser testing support with Playwright
- Authentication system testing end-to-end

🚀 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/node_modules/@testing-library/user-event/dist/esm/event/selection/getInputRange.js

@@ -0,0 +1,16 @@
+import { getTargetTypeAndSelection } from './getTargetTypeAndSelection.js';
+
+/**
+ * Get the range that would be overwritten by input.
+ */ function getInputRange(focusNode) {
+    const typeAndSelection = getTargetTypeAndSelection(focusNode);
+    if (typeAndSelection.type === 'input') {
+        return typeAndSelection.selection;
+    } else if (typeAndSelection.type === 'contenteditable') {
+        var _typeAndSelection_selection;
+        // Multi-range on contenteditable edits the first selection instead of the last
+        return (_typeAndSelection_selection = typeAndSelection.selection) === null || _typeAndSelection_selection === undefined ? undefined : _typeAndSelection_selection.getRangeAt(0);
+    }
+}
+
+export { getInputRange };

frontend/node_modules/@testing-library/user-event/dist/esm/event/selection/getTargetTypeAndSelection.js

@@ -0,0 +1,29 @@
+import { getUISelection } from '../../document/UI.js';
+import '../../utils/dataTransfer/Clipboard.js';
+import { getContentEditable } from '../../utils/edit/isContentEditable.js';
+import { hasOwnSelection } from '../../utils/focus/selection.js';
+
+/**
+ * Determine which selection logic and selection ranges to consider.
+ */ function getTargetTypeAndSelection(node) {
+    const element = getElement(node);
+    if (element && hasOwnSelection(element)) {
+        return {
+            type: 'input',
+            selection: getUISelection(element)
+        };
+    }
+    const selection = element === null || element === undefined ? undefined : element.ownerDocument.getSelection();
+    // It is possible to extend a single-range selection into a contenteditable.
+    // This results in the range acting like a range outside of contenteditable.
+    const isCE = getContentEditable(node) && (selection === null || selection === undefined ? undefined : selection.anchorNode) && getContentEditable(selection.anchorNode);
+    return {
+        type: isCE ? 'contenteditable' : 'default',
+        selection
+    };
+}
+function getElement(node) {
+    return node.nodeType === 1 ? node : node.parentElement;
+}
+
+export { getTargetTypeAndSelection };

frontend/node_modules/@testing-library/user-event/dist/esm/event/selection/index.js

@@ -0,0 +1,9 @@
+export { getInputRange } from './getInputRange.js';
+export { modifySelection } from './modifySelection.js';
+export { moveSelection } from './moveSelection.js';
+export { setSelectionPerMouseDown } from './setSelectionPerMouse.js';
+export { modifySelectionPerMouseMove } from './modifySelectionPerMouse.js';
+export { isAllSelected, selectAll } from './selectAll.js';
+export { setSelectionRange } from './setSelectionRange.js';
+export { setSelection } from './setSelection.js';
+export { updateSelectionOnFocus } from './updateSelectionOnFocus.js';

frontend/node_modules/@testing-library/user-event/dist/esm/event/selection/modifySelection.js

@@ -0,0 +1,19 @@
+import { setUISelection } from '../../document/UI.js';
+import '../../utils/dataTransfer/Clipboard.js';
+import { getTargetTypeAndSelection } from './getTargetTypeAndSelection.js';
+
+/**
+ * Extend/shrink the selection like with Shift+Arrows or Shift+Mouse
+ */ function modifySelection({ focusNode, focusOffset }) {
+    var _focusNode_ownerDocument_getSelection, _focusNode_ownerDocument;
+    const typeAndSelection = getTargetTypeAndSelection(focusNode);
+    if (typeAndSelection.type === 'input') {
+        return setUISelection(focusNode, {
+            anchorOffset: typeAndSelection.selection.anchorOffset,
+            focusOffset
+        }, 'modify');
+    }
+    (_focusNode_ownerDocument = focusNode.ownerDocument) === null || _focusNode_ownerDocument === undefined ? undefined : (_focusNode_ownerDocument_getSelection = _focusNode_ownerDocument.getSelection()) === null || _focusNode_ownerDocument_getSelection === undefined ? undefined : _focusNode_ownerDocument_getSelection.extend(focusNode, focusOffset);
+}
+
+export { modifySelection };

frontend/node_modules/@testing-library/user-event/dist/esm/event/selection/modifySelectionPerMouse.js

@@ -0,0 +1,38 @@
+import { setUISelection } from '../../document/UI.js';
+import '../../utils/dataTransfer/Clipboard.js';
+import { resolveCaretPosition } from './resolveCaretPosition.js';
+
+function modifySelectionPerMouseMove(selectionRange, { document, target, node, offset }) {
+    const selectionFocus = resolveCaretPosition({
+        target,
+        node,
+        offset
+    });
+    if ('node' in selectionRange) {
+        // When the mouse is dragged outside of an input/textarea,
+        // the selection is extended to the beginning or end of the input
+        // depending on pointer position.
+        // TODO: extend selection according to pointer position
+        /* istanbul ignore else */ if (selectionFocus.node === selectionRange.node) {
+            const anchorOffset = selectionFocus.offset < selectionRange.start ? selectionRange.end : selectionRange.start;
+            const focusOffset = selectionFocus.offset > selectionRange.end || selectionFocus.offset < selectionRange.start ? selectionFocus.offset : selectionRange.end;
+            setUISelection(selectionRange.node, {
+                anchorOffset,
+                focusOffset
+            });
+        }
+    } else {
+        const range = selectionRange.cloneRange();
+        const cmp = range.comparePoint(selectionFocus.node, selectionFocus.offset);
+        if (cmp < 0) {
+            range.setStart(selectionFocus.node, selectionFocus.offset);
+        } else if (cmp > 0) {
+            range.setEnd(selectionFocus.node, selectionFocus.offset);
+        }
+        const selection = document.getSelection();
+        selection === null || selection === undefined ? undefined : selection.removeAllRanges();
+        selection === null || selection === undefined ? undefined : selection.addRange(range.cloneRange());
+    }
+}
+
+export { modifySelectionPerMouseMove };

frontend/node_modules/@testing-library/user-event/dist/esm/event/selection/moveSelection.js

@@ -0,0 +1,36 @@
+import { getUISelection } from '../../document/UI.js';
+import '../../utils/dataTransfer/Clipboard.js';
+import { getNextCursorPosition } from '../../utils/focus/cursor.js';
+import { hasOwnSelection } from '../../utils/focus/selection.js';
+import { setSelection } from './setSelection.js';
+
+/**
+ * Move the selection
+ */ function moveSelection(node, direction) {
+    // TODO: implement shift
+    if (hasOwnSelection(node)) {
+        const selection = getUISelection(node);
+        setSelection({
+            focusNode: node,
+            focusOffset: selection.startOffset === selection.endOffset ? selection.focusOffset + direction : direction < 0 ? selection.startOffset : selection.endOffset
+        });
+    } else {
+        const selection = node.ownerDocument.getSelection();
+        if (!(selection === null || selection === undefined ? undefined : selection.focusNode)) {
+            return;
+        }
+        if (selection.isCollapsed) {
+            const nextPosition = getNextCursorPosition(selection.focusNode, selection.focusOffset, direction);
+            if (nextPosition) {
+                setSelection({
+                    focusNode: nextPosition.node,
+                    focusOffset: nextPosition.offset
+                });
+            }
+        } else {
+            selection[direction < 0 ? 'collapseToStart' : 'collapseToEnd']();
+        }
+    }
+}
+
+export { moveSelection };

frontend/node_modules/@testing-library/user-event/dist/esm/event/selection/resolveCaretPosition.js

@@ -0,0 +1,59 @@
+import { getUIValue } from '../../document/UI.js';
+import '../../utils/dataTransfer/Clipboard.js';
+import { hasOwnSelection } from '../../utils/focus/selection.js';
+
+function resolveCaretPosition({ target, node, offset }) {
+    if (hasOwnSelection(target)) {
+        return {
+            node: target,
+            offset: offset !== null && offset !== undefined ? offset : getUIValue(target).length
+        };
+    } else if (node) {
+        return {
+            node,
+            offset: offset !== null && offset !== undefined ? offset : node.nodeType === 3 ? node.nodeValue.length : node.childNodes.length
+        };
+    }
+    return findNodeAtTextOffset(target, offset);
+}
+function findNodeAtTextOffset(node, offset, isRoot = true) {
+    // When clicking after the content the browser behavior can be complicated:
+    // 1. If there is textContent after the last element child,
+    // the cursor is moved there.
+    // 2. If there is textContent in the last element child,
+    // the browser moves the cursor to the last non-empty text node inside this element.
+    // 3. Otherwise the cursor is moved to the end of the target.
+    let i = offset === undefined ? node.childNodes.length - 1 : 0;
+    const step = offset === undefined ? -1 : 1;
+    while(offset === undefined ? i >= (isRoot ? Math.max(node.childNodes.length - 1, 0) : 0) : i <= node.childNodes.length){
+        if (offset && i === node.childNodes.length) {
+            throw new Error('The given offset is out of bounds.');
+        }
+        const c = node.childNodes.item(i);
+        const text = String(c.textContent);
+        if (text.length) {
+            if (offset !== undefined && text.length < offset) {
+                offset -= text.length;
+            } else if (c.nodeType === 1) {
+                return findNodeAtTextOffset(c, offset, false);
+            } else {
+                // The pre-commit hooks keeps changing this
+                // See https://github.com/kentcdodds/kcd-scripts/issues/218
+                /* istanbul ignore else */ // eslint-disable-next-line no-lonely-if
+                if (c.nodeType === 3) {
+                    return {
+                        node: c,
+                        offset: offset !== null && offset !== undefined ? offset : c.nodeValue.length
+                    };
+                }
+            }
+        }
+        i += step;
+    }
+    return {
+        node,
+        offset: node.childNodes.length
+    };
+}
+
+export { resolveCaretPosition };

frontend/node_modules/@testing-library/user-event/dist/esm/event/selection/selectAll.js

@@ -0,0 +1,35 @@
+import { getUIValue, getUISelection } from '../../document/UI.js';
+import '../../utils/dataTransfer/Clipboard.js';
+import { getContentEditable } from '../../utils/edit/isContentEditable.js';
+import { hasOwnSelection } from '../../utils/focus/selection.js';
+import { setSelection } from './setSelection.js';
+
+/**
+ * Expand a selection like the browser does when pressing Ctrl+A.
+ */ function selectAll(target) {
+    if (hasOwnSelection(target)) {
+        return setSelection({
+            focusNode: target,
+            anchorOffset: 0,
+            focusOffset: getUIValue(target).length
+        });
+    }
+    var _getContentEditable;
+    const focusNode = (_getContentEditable = getContentEditable(target)) !== null && _getContentEditable !== undefined ? _getContentEditable : target.ownerDocument.body;
+    setSelection({
+        focusNode,
+        anchorOffset: 0,
+        focusOffset: focusNode.childNodes.length
+    });
+}
+function isAllSelected(target) {
+    if (hasOwnSelection(target)) {
+        return getUISelection(target).startOffset === 0 && getUISelection(target).endOffset === getUIValue(target).length;
+    }
+    var _getContentEditable;
+    const focusNode = (_getContentEditable = getContentEditable(target)) !== null && _getContentEditable !== undefined ? _getContentEditable : target.ownerDocument.body;
+    const selection = target.ownerDocument.getSelection();
+    return (selection === null || selection === undefined ? undefined : selection.anchorNode) === focusNode && selection.focusNode === focusNode && selection.anchorOffset === 0 && selection.focusOffset === focusNode.childNodes.length;
+}
+
+export { isAllSelected, selectAll };

frontend/node_modules/@testing-library/user-event/dist/esm/event/selection/setSelection.js

@@ -0,0 +1,19 @@
+import { setUISelection } from '../../document/UI.js';
+import '../../utils/dataTransfer/Clipboard.js';
+import { getTargetTypeAndSelection } from './getTargetTypeAndSelection.js';
+
+/**
+ * Set the selection
+ */ function setSelection({ focusNode, focusOffset, anchorNode = focusNode, anchorOffset = focusOffset }) {
+    var _anchorNode_ownerDocument_getSelection, _anchorNode_ownerDocument;
+    const typeAndSelection = getTargetTypeAndSelection(focusNode);
+    if (typeAndSelection.type === 'input') {
+        return setUISelection(focusNode, {
+            anchorOffset,
+            focusOffset
+        });
+    }
+    (_anchorNode_ownerDocument = anchorNode.ownerDocument) === null || _anchorNode_ownerDocument === undefined ? undefined : (_anchorNode_ownerDocument_getSelection = _anchorNode_ownerDocument.getSelection()) === null || _anchorNode_ownerDocument_getSelection === undefined ? undefined : _anchorNode_ownerDocument_getSelection.setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset);
+}
+
+export { setSelection };

frontend/node_modules/@testing-library/user-event/dist/esm/event/selection/setSelectionPerMouse.js

@@ -0,0 +1,79 @@
+import { getUIValue, setUISelection } from '../../document/UI.js';
+import '../../utils/dataTransfer/Clipboard.js';
+import { hasNoSelection, hasOwnSelection } from '../../utils/focus/selection.js';
+import { resolveCaretPosition } from './resolveCaretPosition.js';
+
+function setSelectionPerMouseDown({ document, target, clickCount, node, offset }) {
+    if (hasNoSelection(target)) {
+        return;
+    }
+    const targetHasOwnSelection = hasOwnSelection(target);
+    // On non-input elements the text selection per multiple click
+    // can extend beyond the target boundaries.
+    // The exact mechanism what is considered in the same line is unclear.
+    // Looks it might be every inline element.
+    // TODO: Check what might be considered part of the same line of text.
+    const text = String(targetHasOwnSelection ? getUIValue(target) : target.textContent);
+    const [start, end] = node ? // which elements might be considered in the same line of text.
+    // TODO: support expanding initial range on multiple clicks if node is given
+    [
+        offset,
+        offset
+    ] : getTextRange(text, offset, clickCount);
+    // TODO: implement modifying selection per shift/ctrl+mouse
+    if (targetHasOwnSelection) {
+        setUISelection(target, {
+            anchorOffset: start !== null && start !== undefined ? start : text.length,
+            focusOffset: end !== null && end !== undefined ? end : text.length
+        });
+        return {
+            node: target,
+            start: start !== null && start !== undefined ? start : 0,
+            end: end !== null && end !== undefined ? end : text.length
+        };
+    } else {
+        const { node: startNode, offset: startOffset } = resolveCaretPosition({
+            target,
+            node,
+            offset: start
+        });
+        const { node: endNode, offset: endOffset } = resolveCaretPosition({
+            target,
+            node,
+            offset: end
+        });
+        const range = target.ownerDocument.createRange();
+        try {
+            range.setStart(startNode, startOffset);
+            range.setEnd(endNode, endOffset);
+        } catch (e) {
+            throw new Error('The given offset is out of bounds.');
+        }
+        const selection = document.getSelection();
+        selection === null || selection === undefined ? undefined : selection.removeAllRanges();
+        selection === null || selection === undefined ? undefined : selection.addRange(range.cloneRange());
+        return range;
+    }
+}
+function getTextRange(text, pos, clickCount) {
+    if (clickCount % 3 === 1 || text.length === 0) {
+        return [
+            pos,
+            pos
+        ];
+    }
+    const textPos = pos !== null && pos !== undefined ? pos : text.length;
+    if (clickCount % 3 === 2) {
+        return [
+            textPos - text.substr(0, pos).match(/(\w+|\s+|\W)?$/)[0].length,
+            pos === undefined ? pos : pos + text.substr(pos).match(/^(\w+|\s+|\W)?/)[0].length
+        ];
+    }
+    // triple click
+    return [
+        textPos - text.substr(0, pos).match(/[^\r\n]*$/)[0].length,
+        pos === undefined ? pos : pos + text.substr(pos).match(/^[^\r\n]*/)[0].length
+    ];
+}
+
+export { setSelectionPerMouseDown };

frontend/node_modules/@testing-library/user-event/dist/esm/event/selection/setSelectionRange.js

@@ -0,0 +1,29 @@
+import '../../utils/dataTransfer/Clipboard.js';
+import { isContentEditable } from '../../utils/edit/isContentEditable.js';
+import { hasOwnSelection } from '../../utils/focus/selection.js';
+import { setSelection } from './setSelection.js';
+
+/**
+ * Backward-compatible selection.
+ *
+ * Handles input elements and contenteditable if it only contains a single text node.
+ */ function setSelectionRange(element, anchorOffset, focusOffset) {
+    var _element_firstChild;
+    if (hasOwnSelection(element)) {
+        return setSelection({
+            focusNode: element,
+            anchorOffset,
+            focusOffset
+        });
+    }
+    /* istanbul ignore else */ if (isContentEditable(element) && ((_element_firstChild = element.firstChild) === null || _element_firstChild === undefined ? undefined : _element_firstChild.nodeType) === 3) {
+        return setSelection({
+            focusNode: element.firstChild,
+            anchorOffset,
+            focusOffset
+        });
+    }
+    /* istanbul ignore next */ throw new Error('Not implemented. The result of this interaction is unreliable.');
+}
+
+export { setSelectionRange };

frontend/node_modules/@testing-library/user-event/dist/esm/event/selection/updateSelectionOnFocus.js

@@ -0,0 +1,38 @@
+import '../../utils/dataTransfer/Clipboard.js';
+import { getContentEditable } from '../../utils/edit/isContentEditable.js';
+import { hasOwnSelection } from '../../utils/focus/selection.js';
+
+// The browser implementation seems to have changed.
+// When focus is inside <input type="text"/>,
+// Chrome updates Selection to be collapsed at the position of the input element.
+// TODO: update implementation to match that of current browsers
+/**
+ * Reset the Document Selection when moving focus into an element
+ * with own selection implementation.
+ */ function updateSelectionOnFocus(element) {
+    const selection = element.ownerDocument.getSelection();
+    /* istanbul ignore if */ if (!(selection === null || selection === undefined ? undefined : selection.focusNode)) {
+        return;
+    }
+    // If the focus moves inside an element with own selection implementation,
+    // the document selection will be this element.
+    // But if the focused element is inside a contenteditable,
+    // 1) a collapsed selection will be retained.
+    // 2) other selections will be replaced by a cursor
+    //  2.a) at the start of the first child if it is a text node
+    //  2.b) at the start of the contenteditable.
+    if (hasOwnSelection(element)) {
+        const contenteditable = getContentEditable(selection.focusNode);
+        if (contenteditable) {
+            if (!selection.isCollapsed) {
+                var _contenteditable_firstChild;
+                const focusNode = ((_contenteditable_firstChild = contenteditable.firstChild) === null || _contenteditable_firstChild === undefined ? undefined : _contenteditable_firstChild.nodeType) === 3 ? contenteditable.firstChild : contenteditable;
+                selection.setBaseAndExtent(focusNode, 0, focusNode, 0);
+            }
+        } else {
+            selection.setBaseAndExtent(element, 0, element, 0);
+        }
+    }
+}
+
+export { updateSelectionOnFocus };