Mobile device (#11)

* list of devices * add option to choose device where should run a flow * update message for env variable * update readme * rollback to the default file * remove console.log * update dependencies * update text mentioned in CR * update readme
logzio · Feb 26, 2023 · 3326c48 · 3326c48
1 parent c9f4bfa
commit 3326c48
Show file tree

Hide file tree

Showing 19 changed files with 399 additions and 54 deletions.
diff --git a/README.md b/README.md
@@ -73,6 +73,14 @@ and then open [Logz.io](https://app.logz.io/#/dashboard/metrics).
 
 ## Changelong
 
+1.1.9:
+
+-   Add support to run a tests on different mobile devices
+
+1.1.8:
+
+-   Add Option to choose device where need to run user flow
+
 1.1.7:
 
 -   Add first invocation after cloud function was uploaded

diff --git a/client/src/containers/EditCodeContainer/index.tsx b/client/src/containers/EditCodeContainer/index.tsx
@@ -2,11 +2,14 @@ import React, { FunctionComponent, useState } from 'react';
 import styled from 'styled-components';
 
 import CodeEditor from '../../components/CodeEditor';
-import EnvVariableWrapper from '../EnvVariableContainer';
+import EnvVariableContainer from '../EnvVariableContainer';
 import Text from '../../components/Text';
 import Select from '../../components/Select';
 
-import { availableCodeLanguages } from '../../utils/selectOptions';
+import {
+    availableCodeLanguages,
+    platformDevice,
+} from '../../utils/selectOptions';
 import Button from '../../components/Button';
 
 import api from '../../utils/api';
@@ -19,7 +22,10 @@ const ContainerDiv = styled.div`
     max-width: 1280px;
     padding-bottom: 24px;
 `;
-
+const SideWrapper = styled.div`
+    width: 27%;
+    margin-right: 0;
+`;
 const TopWrapper = styled.div`
     margin-bottom: 24px;
     display: flex;
@@ -46,7 +52,12 @@ const SelectWrapper = styled.div`
     max-width: 215px;
     width: 100%;
 `;
-
+const SelectWrapperDevice = styled.div`
+    position: relative;
+    width: 100%;
+    margin-top: 10px;
+    margin-bottom: 30px;
+`;
 const MainWrapper = styled.div`
     display: flex;
     justify-content: space-between;
@@ -85,15 +96,19 @@ type EnvVariable = {
 interface IProps {
     uniqueKey: (isUnique: boolean) => void;
     codeSnippet: string;
+    testDevice: string;
     setCodeSnippet: (val: string) => void;
     setEnvVariable: (envVariable: EnvVariable[]) => void;
+    setTestDevice: (val: string) => void;
 }
 
 const EditCodeContainer: FunctionComponent<IProps> = ({
     uniqueKey,
     codeSnippet,
+    testDevice,
     setCodeSnippet,
     setEnvVariable,
+    setTestDevice,
 }) => {
     const [codeLanguage, setCodeLanguage] = useState<string>('Playwright');
     const [loading, setLoading] = useState<boolean>(false);
@@ -102,7 +117,9 @@ const EditCodeContainer: FunctionComponent<IProps> = ({
     const onChangeSelect = (option: string) => {
         setCodeLanguage(option);
     };
-
+    const onChangeSelectDevice = (option: string) => {
+        setTestDevice(option);
+    };
     const startTestLocally = async () => {
         setTestStatus('');
         if (!isCodeValid) {
@@ -111,7 +128,7 @@ const EditCodeContainer: FunctionComponent<IProps> = ({
         }
 
         setLoading(true);
-        const response = await api.testLocal(codeSnippet);
+        const response = await api.testLocal(codeSnippet, testDevice);
 
         if (response!.error && response!.errorData) {
             setTestStatus(response!.errorData);
@@ -157,10 +174,24 @@ const EditCodeContainer: FunctionComponent<IProps> = ({
                         setCodeSnippet={setCodeSnippet}
                         codeSnippet={codeSnippet}
                     />
-                    <EnvVariableWrapper
-                        uniqueKey={uniqueKey}
-                        onSetListEnvVariable={setEnvVariable}
-                    />
+                    <SideWrapper>
+                        <Text tag='h2'>Select Device</Text>
+                        <Text tag={'p'}>
+                            Select the device on which you would like to execute
+                            the test.
+                        </Text>
+                        <SelectWrapperDevice>
+                            <Select
+                                options={platformDevice}
+                                onChangeSelect={onChangeSelectDevice}
+                                currentValue={testDevice}
+                            />
+                        </SelectWrapperDevice>
+                        <EnvVariableContainer
+                            uniqueKey={uniqueKey}
+                            onSetListEnvVariable={setEnvVariable}
+                        />
+                    </SideWrapper>
                 </MainWrapper>
                 <BottomWrapper>
                     <Text tag={'p'}>

diff --git a/client/src/containers/EnvVariableContainer/index.tsx b/client/src/containers/EnvVariableContainer/index.tsx
@@ -11,7 +11,7 @@ import { containsKeys } from '../../utils/validate';
 import { findObjectInArray } from '../../utils/helper';
 
 const EnvVariableWrapper = styled.div`
-    width: 27%;
+    width: 100%;
     margin-right: 0;
 `;
 
@@ -101,10 +101,10 @@ const EnvVariableContainer: FunctionComponent<IProps> = ({
     };
     return (
         <EnvVariableWrapper>
-            <Text tag='h2'>Enviroment Variable</Text>
+            <Text tag='h2'>Secrets Management</Text>
             <Text tag={'p'}>
-                Add key-value pairs for the environment variables that you use
-                in the script.
+                Include key-value pairs for your confidential information, which
+                you can then employ as environment variables in your script.
             </Text>
             <EnvVariableDisplay>
                 {renderEnvVariableHandler()}

diff --git a/client/src/page/Home/index.tsx b/client/src/page/Home/index.tsx
@@ -79,6 +79,8 @@ const Home: FunctionComponent = () => {
         errorTitle: '',
     });
     const [codeSnippet, setCodeSnippet] = useState<string>(DEFAULT_CODE);
+    const [testDevice, setTestDevice] = useState<string>('Desktop Chrome');
+
     const [activeStep, setActiveStep] = useState<string>('edit_code');
     const [stageDeploy, setStageDeploy] = useState<StatusProps>({
         message: 'Function creating...',
@@ -156,6 +158,7 @@ const Home: FunctionComponent = () => {
 
             response = await api.downloadCFTemplate(
                 codeSnippet,
+                testDevice,
                 envList,
                 configs.name.value,
                 rangeTimeVariable[
@@ -195,6 +198,7 @@ const Home: FunctionComponent = () => {
                 rangeTimeVariable[
                     activeRangeTime.split(' ').reverse().join('_')
                 ],
+                testDevice,
                 codeSnippet,
                 configs.name.value,
                 configs.accessKey.value,
@@ -285,9 +289,11 @@ const Home: FunctionComponent = () => {
                 {activeStep === 'edit_code' ? (
                     <EditCodeContainer
                         uniqueKey={uniqueEnvVariableHandler}
+                        testDevice={testDevice}
                         codeSnippet={codeSnippet}
                         setCodeSnippet={onSetCodeSnippetHandler}
                         setEnvVariable={onSetEnvVariableHandler}
+                        setTestDevice={setTestDevice}
                     />
                 ) : (
                     <ExportDeploy

diff --git a/client/src/utils/api.ts b/client/src/utils/api.ts
@@ -65,10 +65,11 @@ class Api {
 	};
 
 
-	testLocal = async (codeSnippet: string) => {
+	testLocal = async (codeSnippet: string, testDevice: string) => {
 		const responseLocal = await this.customFetch(
 			{
 				code: codeSnippet,
+				testDevice
 
 			},
 			settings.endPointUrls.modifyFileLocalUrl,
@@ -83,10 +84,10 @@ class Api {
 		}
 	};
 
-	initPage = async (rangeTime: number, codeSnippet: string, name: string, accessKey: string, secretKey: string, bucketName: string, token: string, listenerUrl: string, region: string, listEnvVariables: object, onStage: (stage: StatusProps) => void, description?: string) => {
+	initPage = async (rangeTime: number, testDevice: string, codeSnippet: string, name: string, accessKey: string, secretKey: string, bucketName: string, token: string, listenerUrl: string, region: string, listEnvVariables: object, onStage: (stage: StatusProps) => void, description?: string) => {
 
 		const responseModify = await this.customFetch(
-			{ code: codeSnippet },
+			{ code: codeSnippet, testDevice },
 			settings.endPointUrls.modifyFileUrl,
 		);
 
@@ -164,6 +165,7 @@ class Api {
 		const response = await this.customFetch(
 			{
 				name,
+				testDevice,
 				description,
 				accessKey,
 				secretKey,
@@ -172,6 +174,7 @@ class Api {
 				region,
 				listEnvVariables,
 				listenerUrl,
+
 			},
 			settings.endPointUrls.createLambdaUrl,
 		);
@@ -223,11 +226,11 @@ class Api {
 			return cloudBridgeEventResp;
 		}
 	};
-	downloadCFTemplate = async (codeSnippet: string, envList: object, name: string, rangeTime: number, bucket: string, token: string, region: string, listener: string, onDownload: (step: boolean) => void, description?: string) => {
+	downloadCFTemplate = async (codeSnippet: string, testDevice: string, envList: object, name: string, rangeTime: number, bucket: string, token: string, region: string, listener: string, onDownload: (step: boolean) => void, description?: string) => {
 		onDownload(true)
 
 		const responseModify = await this.customFetch(
-			{ code: codeSnippet },
+			{ code: codeSnippet, testDevice },
 			settings.endPointUrls.modifyFileUrl,
 		);
 		if (!responseModify.error) {

diff --git a/client/src/utils/constants.ts b/client/src/utils/constants.ts
@@ -8,7 +8,7 @@ export const DEFAULT_CODE = `const playwright = require('playwright-aws-lambda')
 		browser = await playwright.launchChromium(false);
 		context = await browser.newContext({
 			recordHar: {
-				path: './capture-hars/example.har',
+				path: './capture-hars/page.har',
 				mode: 'full',
 				content: 'omit',
 			},

diff --git a/client/src/utils/selectOptions.ts b/client/src/utils/selectOptions.ts
@@ -68,4 +68,115 @@ export const awsRegions = [
 	{ name: 'af-south-1', default: false, isDisabled: false },
 	{ name: 'us-gov-west-1', default: false, isDisabled: false },
 	{ name: 'us-gov-east-1', default: false, isDisabled: false },
+]
+
+export const platformDevice = [
+	{ name: 'Desktop Chrome', default: true, isDisabled: false },
+	{ name: 'Blackberry PlayBook', default: false, isDisabled: false },
+	{ name: 'Blackberry PlayBook landscape', default: false, isDisabled: false },
+	{ name: 'BlackBerry Z30', default: false, isDisabled: false },
+	{ name: 'BlackBerry Z30 landscape', default: false, isDisabled: false },
+	{ name: 'Galaxy Note 3', default: false, isDisabled: false },
+	{ name: 'Galaxy Note 3 landscape', default: false, isDisabled: false },
+	{ name: 'Galaxy Note II', default: false, isDisabled: false },
+	{ name: 'Galaxy Note II landscape', default: false, isDisabled: false },
+	{ name: 'Galaxy S III', default: false, isDisabled: false },
+	{ name: 'Galaxy S III landscape', default: false, isDisabled: false },
+	{ name: 'Galaxy S5', default: false, isDisabled: false },
+	{ name: 'Galaxy S5 landscape', default: false, isDisabled: false },
+	{ name: 'Galaxy S8', default: false, isDisabled: false },
+	{ name: 'Galaxy S8 landscape', default: false, isDisabled: false },
+	{ name: 'Galaxy S9+', default: false, isDisabled: false },
+	{ name: 'Galaxy S9+ landscape', default: false, isDisabled: false },
+	{ name: 'Galaxy Tab S4', default: false, isDisabled: false },
+	{ name: 'Galaxy Tab S4 landscape', default: false, isDisabled: false },
+	{ name: 'iPad (gen 6)', default: false, isDisabled: false },
+	{ name: 'iPad (gen 6) landscape', default: false, isDisabled: false },
+	{ name: 'iPad (gen 7)', default: false, isDisabled: false },
+	{ name: 'iPad (gen 7) landscape', default: false, isDisabled: false },
+	{ name: 'iPad Mini', default: false, isDisabled: false },
+	{ name: 'iPad Mini landscape', default: false, isDisabled: false },
+	{ name: 'iPad Pro 11', default: false, isDisabled: false },
+	{ name: 'iPad Pro 11 landscape', default: false, isDisabled: false },
+	{ name: 'iPhone 6', default: false, isDisabled: false },
+	{ name: 'iPhone 6 landscape', default: false, isDisabled: false },
+	{ name: 'iPhone 6 Plus', default: false, isDisabled: false },
+	{ name: 'iPhone 6 Plus landscape', default: false, isDisabled: false },
+	{ name: 'iPhone 7', default: false, isDisabled: false },
+	{ name: 'iPhone 7 landscape', default: false, isDisabled: false },
+	{ name: 'iPhone 7 Plus', default: false, isDisabled: false },
+	{ name: 'iPhone 7 Plus landscape', default: false, isDisabled: false },
+	{ name: 'iPhone 8', default: false, isDisabled: false },
+	{ name: 'iPhone 8 landscape', default: false, isDisabled: false },
+	{ name: 'iPhone 8 Plus', default: false, isDisabled: false },
+	{ name: 'iPhone 8 Plus landscape', default: false, isDisabled: false },
+	{ name: 'iPhone SE', default: false, isDisabled: false },
+	{ name: 'iPhone SE landscape', default: false, isDisabled: false },
+	{ name: 'iPhone X', default: false, isDisabled: false },
+	{ name: 'iPhone X landscape', default: false, isDisabled: false },
+	{ name: 'iPhone XR', default: false, isDisabled: false },
+	{ name: 'iPhone XR landscape', default: false, isDisabled: false },
+	{ name: 'iPhone 11', default: false, isDisabled: false },
+	{ name: 'iPhone 11 landscape', default: false, isDisabled: false },
+	{ name: 'iPhone 11 Pro', default: false, isDisabled: false },
+	{ name: 'iPhone 11 Pro landscape', default: false, isDisabled: false },
+	{ name: 'iPhone 11 Pro Max', default: false, isDisabled: false },
+	{ name: 'iPhone 11 Pro Max landscape', default: false, isDisabled: false },
+	{ name: 'iPhone 12', default: false, isDisabled: false },
+	{ name: 'iPhone 12 landscape', default: false, isDisabled: false },
+	{ name: 'iPhone 12 Pro', default: false, isDisabled: false },
+	{ name: 'iPhone 12 Pro landscape', default: false, isDisabled: false },
+	{ name: 'iPhone 12 Pro Max', default: false, isDisabled: false },
+	{ name: 'iPhone 12 Pro Max landscape', default: false, isDisabled: false },
+	{ name: 'iPhone 12 Mini', default: false, isDisabled: false },
+	{ name: 'iPhone 12 Mini landscape', default: false, isDisabled: false },
+	{ name: 'iPhone 13', default: false, isDisabled: false },
+	{ name: 'iPhone 13 landscape', default: false, isDisabled: false },
+	{ name: 'iPhone 13 Pro', default: false, isDisabled: false },
+	{ name: 'iPhone 13 Pro landscape', default: false, isDisabled: false },
+	{ name: 'iPhone 13 Pro Max', default: false, isDisabled: false },
+	{ name: 'iPhone 13 Pro Max landscape', default: false, isDisabled: false },
+	{ name: 'iPhone 13 Mini', default: false, isDisabled: false },
+	{ name: 'iPhone 13 Mini landscape', default: false, isDisabled: false },
+	{ name: 'Kindle Fire HDX', default: false, isDisabled: false },
+	{ name: 'Kindle Fire HDX landscape', default: false, isDisabled: false },
+	{ name: 'LG Optimus L70', default: false, isDisabled: false },
+	{ name: 'LG Optimus L70 landscape', default: false, isDisabled: false },
+	{ name: 'Microsoft Lumia 550', default: false, isDisabled: false },
+	{ name: 'Microsoft Lumia 550 landscape', default: false, isDisabled: false },
+	{ name: 'Microsoft Lumia 950', default: false, isDisabled: false },
+	{ name: 'Microsoft Lumia 950 landscape', default: false, isDisabled: false },
+	{ name: 'Nexus 10', default: false, isDisabled: false },
+	{ name: 'Nexus 10 landscape', default: false, isDisabled: false },
+	{ name: 'Nexus 4', default: false, isDisabled: false },
+	{ name: 'Nexus 4 landscape', default: false, isDisabled: false },
+	{ name: 'Nexus 5', default: false, isDisabled: false },
+	{ name: 'Nexus 5 landscape', default: false, isDisabled: false },
+	{ name: 'Nexus 5X', default: false, isDisabled: false },
+	{ name: 'Nexus 5X landscape', default: false, isDisabled: false },
+	{ name: 'Nexus 6', default: false, isDisabled: false },
+	{ name: 'Nexus 6 landscape', default: false, isDisabled: false },
+	{ name: 'Nexus 6P', default: false, isDisabled: false },
+	{ name: 'Nexus 6P landscape', default: false, isDisabled: false },
+	{ name: 'Nexus 7', default: false, isDisabled: false },
+	{ name: 'Nexus 7 landscape', default: false, isDisabled: false },
+	{ name: 'Nokia Lumia 520', default: false, isDisabled: false },
+	{ name: 'Nokia Lumia 520 landscape', default: false, isDisabled: false },
+	{ name: 'Nokia N9', default: false, isDisabled: false },
+	{ name: 'Nokia N9 landscape', default: false, isDisabled: false },
+	{ name: 'Pixel 2', default: false, isDisabled: false },
+	{ name: 'Pixel 2 landscape', default: false, isDisabled: false },
+	{ name: 'Pixel 2 XL', default: false, isDisabled: false },
+	{ name: 'Pixel 2 XL landscape', default: false, isDisabled: false },
+	{ name: 'Pixel 3', default: false, isDisabled: false },
+	{ name: 'Pixel 3 landscape', default: false, isDisabled: false },
+	{ name: 'Pixel 4', default: false, isDisabled: false },
+	{ name: 'Pixel 4 landscape', default: false, isDisabled: false },
+	{ name: 'Pixel 4a (5G)', default: false, isDisabled: false },
+	{ name: 'Pixel 4a (5G) landscape', default: false, isDisabled: false },
+	{ name: 'Pixel 5', default: false, isDisabled: false },
+	{ name: 'Pixel 5 landscape', default: false, isDisabled: false },
+	{ name: 'Moto G4', default: false, isDisabled: false },
+	{ name: 'Moto G4 landscape', default: false, isDisabled: false },
+
 ]