e2e testing

.github/workflows/test.yml

@@ -0,0 +1,25 @@
+name: Test
+on: pull_request
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+
+      - name: prerequisites
+        run: |
+          yarn install
+
+      - name: lint
+        run: |
+          yarn lint
+
+      - name: tests
+        run: |
+          yarn run e2e

package.json

@@ -15,7 +15,9 @@
     "build-web": "lerna run build-web",
     "build-desktop": "lerna run build-web && rm -rf packages/008desktop/app && mv packages/008/web-build packages/008desktop/app && lerna run build --scope 008desktop",
     "clean": "lerna clean",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "lint": "lerna run lint",
+    "e2e": "lerna run e2e --scope @kunzite/008"
   },
   "lint-staged": {
     "**/*.{js}": [

packages/008/.eslintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-  extends: ['universe/native', 'universe/web'],
+  extends: ['universe/native', 'universe/web', 'plugin:cypress/recommended'],
   env: {
     browser: true,
     node: true

packages/008/cypress.config.js

@@ -0,0 +1,7 @@
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:19006'
+  }
+});

packages/008/cypress/e2e/spec.cy.js

@@ -0,0 +1,47 @@
+/* eslint-disable cypress/no-unnecessary-waiting */
+
+const TEST_NUMBER = '007';
+const TRANSFER_NUMBER = '008';
+
+beforeEach(() => {
+  cy.visit('/');
+
+  cy.get('[data-testid="Settings"]').type('cfgDemo008.json');
+  cy.get('[data-testid="settingsAccept"]').click();
+  cy.wait(2000);
+});
+
+describe('Outbound Call test', () => {
+  it('no input does nothing', () => {
+    cy.get('[data-testid="callButton"]').click();
+  });
+
+  it('Calls number and hangs', () => {
+    cy.get('[data-testid="dialerTextInput"]').type(TEST_NUMBER);
+    cy.get('[data-testid="callButton"]').click();
+
+    cy.wait(1000);
+    cy.get('[data-testid="hangupButton"]').click();
+  });
+
+  it('Call number and blind transfer', () => {
+    cy.get('[data-testid="dialerTextInput"]').type(TEST_NUMBER);
+    cy.get('[data-testid="callButton"]').click();
+
+    cy.wait(1000);
+    cy.get('[data-testid="blindTransferButton"]').click();
+
+    cy.get('[data-testid="transferDialerdialerTextInput"]').type(
+      TRANSFER_NUMBER
+    );
+    cy.get('[data-testid="transferButton"]').click();
+  });
+
+  it('VideoCall number and hangs', () => {
+    cy.get('[data-testid="dialerTextInput"]').type(TEST_NUMBER);
+    cy.get('[data-testid="videoCallButton"]').click();
+
+    cy.wait(1000);
+    cy.get('[data-testid="hangupButton"]').click();
+  });
+});

packages/008/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

packages/008/cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

packages/008/cypress/support/e2e.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

packages/008/package.json

@@ -22,7 +22,8 @@
     "storybook-watch": "sb-rn-watcher",
     "storybook-web": "start-storybook -p 6006 -c .storybook-web",
     "build-storybook": "build-storybook -c .storybook-web",
-    "lint": "eslint ./"
+    "lint": "eslint ./",
+    "e2e": "yarn web & cypress run"
   },
   "dependencies": {
     "008Q": "*",
@@ -69,8 +70,10 @@
     "@storybook/react-native": "^6.5.6",
     "babel-loader": "^8.3.0",
     "babel-plugin-react-native-web": "^0.19.8",
+    "cypress": "^13.6.0",
     "eslint": "^8.49.0",
     "eslint-config-universe": "^12.0.0",
+    "eslint-plugin-cypress": "^2.15.1",
     "prettier": "^3.0.3",
     "prop-types": "^15.8.1",
     "react-native-safe-area-context": "^4.7.1"

packages/008/src/Sip.js

@@ -10,14 +10,18 @@ import {
 } from 'sip.js';
 
 Session.prototype.getStream = function () {
-  const stream = new MediaStream();
-  this.sessionDescriptionHandler?.peerConnection
-    ?.getReceivers()
-    .forEach(({ track }) => {
-      if (track) stream.addTrack(track);
-    });
+  try {
+    const stream = new MediaStream();
+    this.sessionDescriptionHandler?.peerConnection
+      ?.getReceivers()
+      .forEach(({ track }) => {
+        if (track) stream.addTrack(track);
+      });
 
-  return stream;
+    return stream;
+  } catch (err) {
+    console.error(err);
+  }
 };
 
 Session.prototype.setMuted = function (muted) {

packages/008/src/components/Basics.jsx

@@ -73,7 +73,8 @@ export const Text = ({ children, style, ...props }) => (
 
 export const TextInput = ({ style, ...props }) =>
   <RNTextInput 
-    style={[{ fontFamily, color: COLORS.textPrimary, outlineStyle: 'none' }, props.disabled ? { backgroundColor: BACKCOLOR } : {}, style ]} {...props} 
+    style={[{ fontFamily, color: COLORS.textPrimary, outlineStyle: 'none' }, props.disabled ? { backgroundColor: BACKCOLOR } : {}, style ]} 
+      {...props} 
   />
 
 export const TextField = ({
@@ -138,14 +139,17 @@ export const Select = ({
   )
 }
 
-export const Button = ({ children, color, style, onClick, fullWidth }) => {
+export const Switch = (props) =>  <RNSwitch activeTrackColor={COLORS.borderColor} activeThumbColor={COLORS.primary} {...props} />;
+
+export const Button = ({ children, color, style, onClick, fullWidth, testID }) => {
   const calculatedColor = COLORS[color] || color;
 
   let stylex = { minWidth: 100, height: 40, borderRadius: 5, backgroundColor: calculatedColor, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', color: 'white' }
   if ( fullWidth ) stylex = { ...stylex, flex:1 }
 
   return (
     <TouchableOpacity 
+      testID={testID}
       style={[ stylex, style ]}
       onPress={onClick} 
     >
@@ -181,9 +185,10 @@ export const Icon = ({ icon, size, color = COLORS.textPrimary }) => {
   if (icon === 'q') return <QIcon { ...styling } />;
 }
 
-export const ButtonIcon = ({ children, icon, onClick, style, size = 18, color }) => {
+export const ButtonIcon = ({ children, icon, onClick, style, color, testID, size = 18 }) => {
   return (
     <TouchableOpacity
+      testID={testID}
       onPress={onClick}
       style={[
         { flexDirection: 'row', alignItems: 'center', justifyContent: 'center' },
@@ -193,18 +198,15 @@ export const ButtonIcon = ({ children, icon, onClick, style, size = 18, color })
       { icon && <Icon {...{icon, size, color }} />}
       {children}
     </TouchableOpacity>
-
   )
 };
 
-export const Switch = (props) =>  <RNSwitch activeTrackColor={COLORS.borderColor} activeThumbColor={COLORS.primary} {...props} />;
-
-export const RoundIconButton = ({ size = 30, color, icon, iconSize, iconColor, onClick, style }) => {
+export const RoundIconButton = ({ size = 30, color, iconSize, iconColor, style, ...props }) => {
   return (
     <ButtonIcon 
-      icon={icon} 
+      {...props}
       color={iconColor} 
-      size={iconSize} onClick={onClick} 
+      size={iconSize} 
       style={[{ 
         width: size,
         height: size,
@@ -245,7 +247,7 @@ export const HRule = ({ color = BORDERCOLOR }) => (
   />
 );
 
-export const CancelAccept = ({ onCancel, onAccept }) => {
+export const CancelAccept = ({ onCancel, onAccept, acceptTestID, cancelTestID, }) => {
   return (
     <View
       style={{
@@ -255,21 +257,21 @@ export const CancelAccept = ({ onCancel, onAccept }) => {
       }}
     >
       {onCancel && (
-        <Button color="danger" onClick={onCancel} fullWidth={!onAccept}>
+        <Button testID={cancelTestID} color="danger" onClick={onCancel} fullWidth={!onAccept}>
           <XIcon />
         </Button>
       )}
 
       {onAccept && (
-        <Button color="secondary" onClick={onAccept} fullWidth={!onCancel}>
+        <Button testID={acceptTestID} color="secondary" onClick={onAccept} fullWidth={!onCancel}>
           <CheckIcon />
         </Button>
       )}
     </View>
   );
 };
 
-export const CancelAcceptCall = ({ onCancel, onAccept }) => {
+export const CancelAcceptCall = ({ onCancel, onAccept, cancelTestID, acceptTestID }) => {
   const size = 50;
   return (
     <View
@@ -282,6 +284,7 @@ export const CancelAcceptCall = ({ onCancel, onAccept }) => {
     >
       {onCancel && (
         <RoundIconButton
+          testID={cancelTestID}
           size={size}
           color={COLORS.danger}
           iconColor="white" 
@@ -292,6 +295,7 @@ export const CancelAcceptCall = ({ onCancel, onAccept }) => {
 
       {onAccept && (
         <RoundIconButton
+          testID={acceptTestID}
           size={size}
           color={COLORS.secondary}
           iconColor="white" 

packages/008/src/components/Dialer.jsx

@@ -66,7 +66,7 @@ export const DialGrid = ({ style, buttonStyle, ...events }) => (
   </View>
 );
 
-export const DialPad = ({ number = '', onClick, onClickVideo, isTransfer, style }) => {
+export const DialPad = ({ number = '', onClick, onClickVideo, isTransfer, style, testID }) => {
   const [value, setValue] = useState(number);
 
   useEffect(() => {
@@ -90,6 +90,7 @@ export const DialPad = ({ number = '', onClick, onClickVideo, isTransfer, style
           style={{ flex: 1, fontSize: 18, textAlign: 'center' }}
           value={value}
           onChangeText={text => setValue(text)}
+          testID={`${testID? testID : ''}dialerTextInput`}
         />
         <ButtonIcon icon="delete" onClick={onPressDelete} color='textSecondary' />
       </View>
@@ -101,6 +102,7 @@ export const DialPad = ({ number = '', onClick, onClickVideo, isTransfer, style
           {!isTransfer &&
             <View>
               <RoundIconButton
+                testID="callButton"
                 size={buttonCallSize}
                 color={COLORS.secondary}
                 iconColor="white"
@@ -112,6 +114,7 @@ export const DialPad = ({ number = '', onClick, onClickVideo, isTransfer, style
               {onClickVideo &&
                <View style={{ alignItems: 'center', justifyContent: 'center', height: buttonCallSize, borderRadius: buttonCallSize / 2, position: 'absolute',  width: buttonCallSize - 5, left: buttonCallSize - 5, backgroundColor: appColor }}>
                   <RoundIconButton
+                    testID="videoCallButton"
                     size={cameraCallSize}
                     color={COLORS.primary}
                     iconColor="white"
@@ -126,6 +129,7 @@ export const DialPad = ({ number = '', onClick, onClickVideo, isTransfer, style
 
           {isTransfer &&
             <ButtonIcon
+              testID="transferButton"
               icon="phoneForwarded"
               size={iconSize}
               style={{ backgroundColor: COLORS.secondary, width: 50, height: 50, borderRadius: 30 }}
@@ -157,7 +161,8 @@ export const Dialer = ({
   onContactClick,
   onContactsFilterChange,
   style,
-  isTransfer
+  isTransfer,
+  testID
 }) => {
   const [tab, setTab] = useState('dialer');
   const [contactsFilter, setContactsFilter] = useState('');
@@ -171,6 +176,7 @@ export const Dialer = ({
     <View style={[{ flex: 1 }, style]}>
       {tab === 'dialer' && (
         <DialPad
+          testID={testID}
           style={{ marginHorizontal: 40 }}
           onClick={onDialClick} 
           onClickVideo={onDialClickVideo} 

packages/008/src/components/Forms.jsx

@@ -15,6 +15,6 @@ export const FormRow = ({ children, label, style = {} }) => (
 
 export const InputRow = ({ label, ...rest }) => (
   <FormRow label={label}>
-    <TextField {...rest} />
+    <TextField testID={label} {...rest} />
   </FormRow>
 );

packages/008/src/components/Phone/index.js

@@ -774,6 +774,7 @@ class Phone extends React.Component {
           style={{ paddingTop: 30 }}
         >
           <Dialer
+            testID="transferDialer"
             isTransfer={true}
             onDialClick={transferHandler}
             onCdrClick={transferHandler}

packages/008/src/components/Player.jsx

@@ -7,7 +7,7 @@ export const Player = ({ stream, speaker, isvideo }) => {
   useEffect(() => {
     const elem = ref.current;
     elem.srcObject = stream;
-    elem.setSinkId(speaker)
+    elem.setSinkId(speaker);
   }, [stream, speaker]);
 
   if (isvideo)