Infra/test kit add props (#2619)

M-i-k-e-l · web-flow · commit c113114399d8 · 2023-06-20T15:07:55.000+03:00
* testkit - add props generics

* Fix some TS errors and accessibility bugs
diff --git a/src/components/button/Button.driver.ts b/src/components/button/Button.driver.ts
@@ -1,11 +1,12 @@
+import {ButtonProps} from './ButtonTypes';
 import {ImageDriver} from '../image/Image.driver';
 import {ComponentDriver, ComponentDriverArgs} from '../../testkit/Component.driver';
 import {TextDriver} from '../text/Text.driver';
 
 /**
  * Please run clear after each test
  */
-export class ButtonDriver extends ComponentDriver {
+export class ButtonDriver extends ComponentDriver<ButtonProps> {
   private readonly labelDriver: TextDriver;
   private readonly iconDriver: ImageDriver;
 
diff --git a/src/components/carousel/Carousel.driver.ts b/src/components/carousel/Carousel.driver.ts
@@ -1,6 +1,7 @@
+import {CarouselProps} from './types';
 import {ComponentDriver} from '../../testkit';
 
-export class CarouselDriver extends ComponentDriver {
+export class CarouselDriver extends ComponentDriver<CarouselProps> {
   getContentOffset = async () => (await this.getElementProps()).contentOffset;
   scroll = async (delta: number) => (await this.uniDriver.selectorByTestId(this.testID)).scrollX(delta);
 }
diff --git a/src/components/checkbox/Checkbox.driver.ts b/src/components/checkbox/Checkbox.driver.ts
@@ -1,5 +1,6 @@
+import {CheckboxProps} from './index';
 import {ComponentDriver} from '../../testkit';
 
-export class CheckboxDriver extends ComponentDriver {
+export class CheckboxDriver extends ComponentDriver<CheckboxProps> {
 
 }
diff --git a/src/components/hint/Hint.driver.ts b/src/components/hint/Hint.driver.ts
@@ -1,6 +1,7 @@
+import {HintProps} from './index';
 import {ComponentDriver} from '../../testkit';
 
-export class HintDriver extends ComponentDriver {
+export class HintDriver extends ComponentDriver<HintProps> {
 
   getHintContent = async () => this.getByTestId(`${this.testID}.message`);
 
diff --git a/src/components/image/Image.driver.ts b/src/components/image/Image.driver.ts
@@ -1,3 +1,4 @@
+import {ImageProps} from './index';
 import {ComponentDriver} from '../../testkit';
 
-export class ImageDriver extends ComponentDriver {}
+export class ImageDriver extends ComponentDriver<ImageProps> {}
diff --git a/src/components/picker/Picker.driver.ts b/src/components/picker/Picker.driver.ts
@@ -1,6 +1,7 @@
+import {PickerProps} from './types';
 import {ComponentDriver} from '../../testkit';
 
-export class PickerDriver extends ComponentDriver {
+export class PickerDriver extends ComponentDriver<PickerProps> {
   getPickerOverlay = async () => await this.getByTestId(`${this.testID}.overlay`);
   getPickerOverlayProps = async () => await this.getPropsByTestId(`${this.testID}.overlay`);
 }
diff --git a/src/components/radioButton/RadioButton.driver.ts b/src/components/radioButton/RadioButton.driver.ts
@@ -1,7 +1,8 @@
+import {RadioButtonProps} from './index';
 import {ComponentDriver, ImageDriver, TextDriver} from '../../testkit';
 import {ComponentDriverArgs} from '../../testkit/Component.driver';
 
-export class RadioButtonDriver extends ComponentDriver {
+export class RadioButtonDriver extends ComponentDriver<RadioButtonProps> {
   private readonly labelDriver: TextDriver;
   private readonly iconDriver: ImageDriver;
 
diff --git a/src/components/radioGroup/RadioGroup.driver.ts b/src/components/radioGroup/RadioGroup.driver.ts
@@ -1,10 +1,11 @@
+import {RadioGroupProps} from './index';
 import {ComponentDriver} from '../../testkit';
 import {RadioButtonDriver} from '../radioButton/RadioButton.driver';
 import {ComponentDriverArgs} from '../../testkit/Component.driver';
 
 type RadioGroupDriverArgs = ComponentDriverArgs & {testIDs: {[key: string]: string}}
 
-export class RadioGroupDriver extends ComponentDriver {
+export class RadioGroupDriver extends ComponentDriver<RadioGroupProps> {
   private readonly radioButtonDrivers: {[key: string]: RadioButtonDriver};
   constructor(radioGroupDriverArgs: RadioGroupDriverArgs) {
     super({...radioGroupDriverArgs});
diff --git a/src/components/slider/index.tsx b/src/components/slider/index.tsx
@@ -259,7 +259,7 @@ export default class Slider extends PureComponent<SliderProps, State> {
       accessibilityLabel: 'Slider',
       accessible: true,
       accessibilityRole: 'adjustable' as AccessibilityRole,
-      accessibilityStates: disabled ? ['disabled'] : [],
+      accessibilityState: disabled ? {disabled} : undefined,
       accessibilityActions: [
         {name: 'increment', label: 'increment'},
         {name: 'decrement', label: 'decrement'}
diff --git a/src/components/slider/slider.driver.ts b/src/components/slider/slider.driver.ts
@@ -1,5 +1,6 @@
+import {SliderProps} from './index';
 import {ComponentDriver} from '../../testkit';
 
-export class SliderDriver extends ComponentDriver {
-  isDisabled = async () => (await this.getElementProps()).accessibilityStates[0] === 'disabled';
+export class SliderDriver extends ComponentDriver<SliderProps> {
+  isDisabled = async () => (await this.getElementProps()).accessibilityState?.disabled === true;
 }
diff --git a/src/components/sortableList/SortableListItem.driver.ts b/src/components/sortableList/SortableListItem.driver.ts
@@ -1,10 +1,11 @@
 import _ from 'lodash';
+import {SortableListProps, SortableListItemProps} from './types';
 import {ComponentDriver} from '../../testkit/Component.driver';
 
 /**
  * Please run clear after each test
  */
-export class SortableListItemDriver extends ComponentDriver {
+export class SortableListItemDriver<ItemT extends SortableListItemProps> extends ComponentDriver<SortableListProps<ItemT>> {
   dragUp = async (indices: number) => {
     this.validateIndices(indices);
     const data = _.times(indices, index => {
diff --git a/src/components/switch/switch.driver.ts b/src/components/switch/switch.driver.ts
@@ -1,11 +1,13 @@
+import {SwitchProps} from './index';
 import {ComponentDriver} from '../../testkit';
 
-export class SwitchDriver extends ComponentDriver {
-  getAccessibilityValue = async () => (await this.getElementProps()).accessibilityValue.text === '1';
+export class SwitchDriver extends ComponentDriver<SwitchProps> {
+  getAccessibilityValue = async () => (await this.getElementProps()).accessibilityValue?.text === '1';
 
-  isDisabled = async () => (await this.getElementProps()).accessibilityState.disabled === true;
+  isDisabled = async () => (await this.getElementProps()).accessibilityState?.disabled === true;
 
-  isChecked = async () => (await this.getElementProps()).accessibilityState.checked === 'checked';
+  isChecked = async () => (await this.getElementProps()).accessibilityValue?.text === '1';
 
+  // @ts-ignore
   getColor = async () => (await this.getElementProps()).style.backgroundColor;
 }
diff --git a/src/components/text/Text.driver.ts b/src/components/text/Text.driver.ts
@@ -1,6 +1,7 @@
+import {TextProps} from './index';
 import {ComponentDriver} from '../../testkit';
 
-export class TextDriver extends ComponentDriver {
+export class TextDriver extends ComponentDriver<TextProps> {
   getTextContent = async () => {
     if (await this.exists()) {
       return (await this.getElementProps()).children;
diff --git a/src/incubator/Slider/index.tsx b/src/incubator/Slider/index.tsx
@@ -174,7 +174,7 @@ const Slider = React.memo((props: Props) => {
     disableActiveStyling,
     disabled,
     useGap = true,
-    accessible,
+    accessible = true,
     testID
   } = props;
 
@@ -184,7 +184,7 @@ const Slider = React.memo((props: Props) => {
         accessibilityLabel: 'Slider',
         accessible: true,
         accessibilityRole: 'adjustable' as AccessibilityRole,
-        accessibilityStates: disabled ? ['disabled'] : [],
+        accessibilityState: disabled ? {disabled} : undefined,
         accessibilityActions: [
           {name: 'increment', label: 'increment'},
           {name: 'decrement', label: 'decrement'}
diff --git a/src/incubator/TextField/TextField.driver.ts b/src/incubator/TextField/TextField.driver.ts
@@ -1,9 +1,10 @@
 import _ from 'lodash';
+import {TextFieldProps} from './types';
 import {ComponentDriver, ComponentDriverArgs} from '../../testkit/Component.driver';
 import {TextDriver} from '../../components/text/Text.driver';
 
 
-export class TextFieldDriver extends ComponentDriver {
+export class TextFieldDriver extends ComponentDriver<TextFieldProps> {
   private readonly labelDriver: TextDriver;
   private readonly validationMsgDriver: TextDriver;
   private readonly floatingPlaceholderDriver: TextDriver;
@@ -29,7 +30,7 @@ export class TextFieldDriver extends ComponentDriver {
 
   isDisabled = async () => {
     if (await this.exists()) {
-      return (await this.getElementProps()).accessibilityState.disabled;
+      return (await this.getElementProps()).accessibilityState?.disabled;
     } else {
       console.warn(`TextField component with testId:${this.testID}, is not found. So you can't get the disabled state`);
       return null;
@@ -57,15 +58,6 @@ export class TextFieldDriver extends ComponentDriver {
     }
   };
 
-  isPressable = async () => {
-    if (await this.exists()) {
-      return typeof (await this.getElementProps()).onPress === 'function';
-    } else {
-      console.warn(`TextDriver: cannot click because testID:${this.testID} were not found`);
-      return null;
-    }
-  };
-
   // label
   getLabelElement = () => this.labelDriver.getElement();
   isLabelExists = async () =>
diff --git a/src/testkit/Component.driver.ts b/src/testkit/Component.driver.ts
@@ -10,9 +10,9 @@ export type ComponentDriverArgs = {
 /**
  * Please run clear after each test
  */
-export class ComponentDriver {
+export class ComponentDriver<Props> {
   protected readonly testID: string;
-  protected readonly uniDriver: UniDriver;
+  protected readonly uniDriver: UniDriver<Props>;
   static uniDrivers: {[key: string]: UniDriver} = {};
 
   static clear() {
@@ -69,11 +69,11 @@ export class ComponentDriver {
       .then((driver) => driver.instance());
   };
 
-  getElementProps = () => {
+  getElementProps = (): Promise<Props> => {
     return this.getPropsByTestId(this.testID);
   };
 
-  getPropsByTestId = (testID: string) => {
+  getPropsByTestId = (testID: string): Promise<Props> => {
     return this.uniDriver
       .selectorByTestId(testID)
       .then((driver) => driver.getInstanceProps());
diff --git a/src/testkit/UniDriver.ts b/src/testkit/UniDriver.ts
@@ -9,14 +9,14 @@ export type DragData = {
   y?: number;
 };
 
-export interface UniDriver {
-  selectorByTestId(testId: string): Promise<UniDriver>;
-  selectorByText(text: string): Promise<UniDriver>;
-  getByDisplayValue(value: string): Promise<UniDriver>;
-  first(): Promise<UniDriver>;
-  at(index: number): Promise<UniDriver>;
+export interface UniDriver<Props = any> {
+  selectorByTestId(testId: string): Promise<UniDriver<Props>>;
+  selectorByText(text: string): Promise<UniDriver<Props>>;
+  getByDisplayValue(value: string): Promise<UniDriver<Props>>;
+  first(): Promise<UniDriver<Props>>;
+  at(index: number): Promise<UniDriver<Props>>;
   instance(): Promise<any>;
-  getInstanceProps(): Promise<any>;
+  getInstanceProps(): Promise<Props>;
   press(): void;
   drag(data: DragData | DragData[]): void;
   focus(): void;
diff --git a/src/testkit/drivers/TestingLibraryDriver.tsx b/src/testkit/drivers/TestingLibraryDriver.tsx
@@ -10,7 +10,7 @@ import {
   SelectorNotFoundException
 } from '../DriverException';
 
-export class TestingLibraryDriver implements UniDriver {
+export class TestingLibraryDriver<Props> implements UniDriver<Props> {
   private readonly renderAPI: RenderAPI | null;
   private readonly reactTestInstances: ReactTestInstance[];
 
@@ -29,7 +29,7 @@ export class TestingLibraryDriver implements UniDriver {
     }
   }
 
-  selectorByTestId = async (testId: string): Promise<UniDriver> => {
+  selectorByTestId = async (testId: string): Promise<UniDriver<Props>> => {
     if (!this.renderAPI) {
       throw new SelectorChainingException();
     }
@@ -41,25 +41,25 @@ export class TestingLibraryDriver implements UniDriver {
     }
   };
 
-  selectorByText = async (text: string): Promise<UniDriver> => {
+  selectorByText = async (text: string): Promise<UniDriver<Props>> => {
     if (!this.renderAPI) {
       throw new SelectorChainingException();
     }
     const instances = await this.renderAPI.findAllByText(text).catch(() => []);
     return new TestingLibraryDriver(instances);
   };
 
-  getByDisplayValue = async (value: string): Promise<UniDriver> => {
+  getByDisplayValue = async (value: string): Promise<UniDriver<Props>> => {
     if (!this.renderAPI) {
       throw new SelectorChainingException();
     }
     const instances = await this.renderAPI?.findAllByDisplayValue(value).catch(() => []);
     return new TestingLibraryDriver(instances);
   };
 
-  first = (): Promise<UniDriver> => this.at(0);
+  first = (): Promise<UniDriver<Props>> => this.at(0);
 
-  at = (index: number): Promise<UniDriver> => {
+  at = (index: number): Promise<UniDriver<Props>> => {
     return Promise.resolve(new TestingLibraryDriver([this.reactTestInstances[index]]));
   };
 
diff --git a/src/testkit/index.ts b/src/testkit/index.ts
@@ -11,3 +11,4 @@ export {HintDriver} from '../components/hint/Hint.driver';
 export {RadioButtonDriver} from '../components/radioButton/RadioButton.driver';
 export {RadioGroupDriver} from '../components/radioGroup/RadioGroup.driver';
 export {SortableListItemDriver} from '../components/sortableList/SortableListItem.driver';
+export {SliderDriver} from '../components/slider/slider.driver';

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,7 @@`
	`1`	`+import {CarouselProps} from './types';`
`1`	`2`	`import {ComponentDriver} from '../../testkit';`
`2`	`3`
`3`		`-export class CarouselDriver extends ComponentDriver {`
	`4`	`+export class CarouselDriver extends ComponentDriver<CarouselProps> {`
`4`	`5`	`getContentOffset = async () => (await this.getElementProps()).contentOffset;`
`5`	`6`	`scroll = async (delta: number) => (await this.uniDriver.selectorByTestId(this.testID)).scrollX(delta);`
`6`	`7`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,6 @@`
	`1`	`+import {CheckboxProps} from './index';`
`1`	`2`	`import {ComponentDriver} from '../../testkit';`
`2`	`3`
`3`		`-export class CheckboxDriver extends ComponentDriver {`
	`4`	`+export class CheckboxDriver extends ComponentDriver<CheckboxProps> {`
`4`	`5`
`5`	`6`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,7 @@`
	`1`	`+import {PickerProps} from './types';`
`1`	`2`	`import {ComponentDriver} from '../../testkit';`
`2`	`3`
`3`		`-export class PickerDriver extends ComponentDriver {`
	`4`	`+export class PickerDriver extends ComponentDriver<PickerProps> {`
`4`	`5`	getPickerOverlay = async () => await this.getByTestId(`${this.testID}.overlay`);
`5`	`6`	getPickerOverlayProps = async () => await this.getPropsByTestId(`${this.testID}.overlay`);
`6`	`7`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,6 @@`
	`1`	`+import {SliderProps} from './index';`
`1`	`2`	`import {ComponentDriver} from '../../testkit';`
`2`	`3`
`3`		`-export class SliderDriver extends ComponentDriver {`
`4`		`- isDisabled = async () => (await this.getElementProps()).accessibilityStates[0] === 'disabled';`
	`4`	`+export class SliderDriver extends ComponentDriver<SliderProps> {`
	`5`	`+ isDisabled = async () => (await this.getElementProps()).accessibilityState?.disabled === true;`
`5`	`6`	`}`