 aacb45156b
			
		
	
	aacb45156b
	
	
	
		
			
			- 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>
		
			
				
	
	
		
			115 lines
		
	
	
		
			5.1 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			115 lines
		
	
	
		
			5.1 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
| 'use strict';
 | |
| 
 | |
| var dom = require('@testing-library/dom');
 | |
| var isElementType = require('../utils/misc/isElementType.js');
 | |
| require('../utils/dataTransfer/Clipboard.js');
 | |
| var isDisabled = require('../utils/misc/isDisabled.js');
 | |
| var wait = require('../utils/misc/wait.js');
 | |
| var cssPointerEvents = require('../utils/pointer/cssPointerEvents.js');
 | |
| require('../event/behavior/click.js');
 | |
| require('../event/behavior/cut.js');
 | |
| require('../event/behavior/keydown.js');
 | |
| require('../event/behavior/keypress.js');
 | |
| require('../event/behavior/keyup.js');
 | |
| require('../event/behavior/paste.js');
 | |
| var focus = require('../event/focus.js');
 | |
| 
 | |
| async function selectOptions(select, values) {
 | |
|     return selectOptionsBase.call(this, true, select, values);
 | |
| }
 | |
| async function deselectOptions(select, values) {
 | |
|     return selectOptionsBase.call(this, false, select, values);
 | |
| }
 | |
| async function selectOptionsBase(newValue, select, values) {
 | |
|     if (!newValue && !select.multiple) {
 | |
|         throw dom.getConfig().getElementError(`Unable to deselect an option in a non-multiple select. Use selectOptions to change the selection instead.`, select);
 | |
|     }
 | |
|     const valArray = Array.isArray(values) ? values : [
 | |
|         values
 | |
|     ];
 | |
|     const allOptions = Array.from(select.querySelectorAll('option, [role="option"]'));
 | |
|     const selectedOptions = valArray.map((val)=>{
 | |
|         if (typeof val !== 'string' && allOptions.includes(val)) {
 | |
|             return val;
 | |
|         } else {
 | |
|             const matchingOption = allOptions.find((o)=>o.value === val || o.innerHTML === val);
 | |
|             if (matchingOption) {
 | |
|                 return matchingOption;
 | |
|             } else {
 | |
|                 throw dom.getConfig().getElementError(`Value "${String(val)}" not found in options`, select);
 | |
|             }
 | |
|         }
 | |
|     }).filter((option)=>!isDisabled.isDisabled(option));
 | |
|     if (isDisabled.isDisabled(select) || !selectedOptions.length) return;
 | |
|     const selectOption = (option)=>{
 | |
|         option.selected = newValue;
 | |
|         this.dispatchUIEvent(select, 'input', {
 | |
|             bubbles: true,
 | |
|             cancelable: false,
 | |
|             composed: true
 | |
|         });
 | |
|         this.dispatchUIEvent(select, 'change');
 | |
|     };
 | |
|     if (isElementType.isElementType(select, 'select')) {
 | |
|         if (select.multiple) {
 | |
|             for (const option of selectedOptions){
 | |
|                 const withPointerEvents = this.config.pointerEventsCheck === 0 ? true : cssPointerEvents.hasPointerEvents(this, option);
 | |
|                 // events fired for multiple select are weird. Can't use hover...
 | |
|                 if (withPointerEvents) {
 | |
|                     this.dispatchUIEvent(option, 'pointerover');
 | |
|                     this.dispatchUIEvent(select, 'pointerenter');
 | |
|                     this.dispatchUIEvent(option, 'mouseover');
 | |
|                     this.dispatchUIEvent(select, 'mouseenter');
 | |
|                     this.dispatchUIEvent(option, 'pointermove');
 | |
|                     this.dispatchUIEvent(option, 'mousemove');
 | |
|                     this.dispatchUIEvent(option, 'pointerdown');
 | |
|                     this.dispatchUIEvent(option, 'mousedown');
 | |
|                 }
 | |
|                 focus.focusElement(select);
 | |
|                 if (withPointerEvents) {
 | |
|                     this.dispatchUIEvent(option, 'pointerup');
 | |
|                     this.dispatchUIEvent(option, 'mouseup');
 | |
|                 }
 | |
|                 selectOption(option);
 | |
|                 if (withPointerEvents) {
 | |
|                     this.dispatchUIEvent(option, 'click');
 | |
|                 }
 | |
|                 await wait.wait(this.config);
 | |
|             }
 | |
|         } else if (selectedOptions.length === 1) {
 | |
|             const withPointerEvents = this.config.pointerEventsCheck === 0 ? true : cssPointerEvents.hasPointerEvents(this, select);
 | |
|             // the click to open the select options
 | |
|             if (withPointerEvents) {
 | |
|                 await this.click(select);
 | |
|             } else {
 | |
|                 focus.focusElement(select);
 | |
|             }
 | |
|             selectOption(selectedOptions[0]);
 | |
|             if (withPointerEvents) {
 | |
|                 // the browser triggers another click event on the select for the click on the option
 | |
|                 // this second click has no 'down' phase
 | |
|                 this.dispatchUIEvent(select, 'pointerover');
 | |
|                 this.dispatchUIEvent(select, 'pointerenter');
 | |
|                 this.dispatchUIEvent(select, 'mouseover');
 | |
|                 this.dispatchUIEvent(select, 'mouseenter');
 | |
|                 this.dispatchUIEvent(select, 'pointerup');
 | |
|                 this.dispatchUIEvent(select, 'mouseup');
 | |
|                 this.dispatchUIEvent(select, 'click');
 | |
|             }
 | |
|             await wait.wait(this.config);
 | |
|         } else {
 | |
|             throw dom.getConfig().getElementError(`Cannot select multiple options on a non-multiple select`, select);
 | |
|         }
 | |
|     } else if (select.getAttribute('role') === 'listbox') {
 | |
|         for (const option of selectedOptions){
 | |
|             await this.click(option);
 | |
|             await this.unhover(option);
 | |
|         }
 | |
|     } else {
 | |
|         throw dom.getConfig().getElementError(`Cannot select options on elements that are neither select nor listbox elements`, select);
 | |
|     }
 | |
| }
 | |
| 
 | |
| exports.deselectOptions = deselectOptions;
 | |
| exports.selectOptions = selectOptions;
 |