How to use onSettingsUpdate method in Appium Xcuitest Driver

Best JavaScript code snippet using appium-xcuitest-driver

Run Appium Xcuitest Driver automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

Sign up Free
_

Settings.js

Source: Settings.js Github

copy
1import React, { Component } from 'react';
2import titleize from '../utils/titleize';
3
4class Settings extends Component {
5
6  constructor(props) {
7    super(props);
8    this.state = {
9      settings: props.settings,
10    };
11  }
12
13  onSettingsUpdate() {
14    const newSettings = Object.assign({}, this.props.settings);
15    this.props.onSettingsUpdate(newSettings);
16  }
17
18  onSettingChange(cat, option, e) {
19    const tmp = Object.assign({}, this.state.settings);
20    tmp[cat][option] = e.currentTarget.value;
21    this.setState({ settings: tmp });
22  }
23
24  getEditor(cat, option, value) {
25    let editor = (<input type="text" value={value} onChange={this.onSettingChange.bind(this, cat, option)} />);
26
27    if (Array.isArray(value)) {
28      editor = (<select onChange={this.onSettingChange.bind(this, cat, option)}>
29        {value.map((o, i) => <option key={i}>{o}</option>)}
30      </select>);
31    }
32    return editor;
33  }
34
35  render() {
36    const { settings } = this.state;
37    return (<div className="settings">
38        {Object.keys(settings).map(cat => (
39          <div className="settings-category" key={cat}>
40            <h4>{titleize(cat)}</h4>
41            <ul className="settings-list">
42              {Object.keys(settings[cat]).map((option, i) => (
43                <li key={i}>
44                  <label>{option}:</label>
45                  {this.getEditor(cat, option, settings[cat][option])}
46                </li>)
47              )}
48            </ul>
49          </div>
50        ))}
51      <button onClick={this.onSettingsUpdate.bind(this)}>Save settings</button>
52    </div>);
53  }
54}
55
56export default Settings;
57
Full Screen

app.js

Source: app.js Github

copy
1'use strict'
2
3const React = require('react')
4const { PureComponent } = React
5const { array, arrayOf, bool, func, shape, string } = require('prop-types')
6const { TemplateSelect } = require('../template/select')
7const { ipcRenderer: ipc } = require('electron')
8const { ESPER } = require('../../constants')
9
10const {
11  FormElement,
12  FormSelect,
13  FormToggle,
14  FormToggleGroup,
15  Toggle
16} = require('../form')
17
18
19class AppPrefs extends PureComponent {
20  handleDebugChange() {
21    ipc.send('cmd', 'app:toggle-debug-flag')
22  }
23
24  handleThemeChange = ({ theme }) => {
25    ipc.send('cmd', 'app:switch-theme', theme)
26  }
27
28  handleLocaleChange = ({ locale }) => {
29    ipc.send('cmd', 'app:switch-locale', locale)
30  }
31
32  handleTemplateChange = (template) => {
33    this.props.onSettingsUpdate({ template: template.id })
34  }
35
36  render() {
37    return (
38      <div className="scroll-container">
39        <div className="form-horizontal">
40          {/*<FormElement id="prefs.app.template">*/}
41            {/*<TemplateSelect*/}
42              {/*isRequired*/}
43              {/*options={this.props.templates}*/}
44              {/*value={this.props.settings.template}*/}
45              {/*tabIndex={0}*/}
46              {/*onChange={this.handleTemplateChange}/>*/}
47          {/*</FormElement>*/}
48          {/*<hr/>*/}
49          <FormToggleGroup
50            id="prefs.app.dup"
51            name="dup"
52            value={this.props.settings.dup}
53            options={this.props.dupOptions}
54            onChange={this.props.onSettingsUpdate}/>
55          <hr/>
56          {/*<FormSelect*/}
57          {/*  id="prefs.app.style.theme"*/}
58          {/*  name="theme"*/}
59          {/*  isRequired*/}
60          {/*  isSelectionHidden*/}
61          {/*  value={this.props.settings.theme}*/}
62          {/*  options={this.props.themes}*/}
63          {/*  onChange={this.handleThemeChange}/>*/}
64          {/*<hr/>*/}
65          <FormSelect
66            id="prefs.app.locale.locale"
67            name="locale"
68            isRequired
69            isSelectionHidden
70            value={this.props.settings.locale}
71            options={this.props.locales}
72            tabIndex={0}
73            onChange={this.handleLocaleChange}/>
74          <hr/>
75          <FormElement
76            id="prefs.app.ui.label"
77            isCompact>
78            <Toggle
79              id="prefs.app.ui.option.invertScroll"
80              name="invertScroll"
81              value={this.props.settings.invertScroll}
82              onChange={this.props.onSettingsUpdate}/>
83            <Toggle
84              id="prefs.app.ui.option.invertZoom"
85              name="invertZoom"
86              value={this.props.settings.invertZoom}
87              onChange={this.props.onSettingsUpdate}/>
88            {/*<Toggle*/}
89            {/*  id="prefs.app.ui.option.overlayToolbars"*/}
90            {/*  name="overlayToolbars"*/}
91            {/*  value={this.props.settings.overlayToolbars}*/}
92            {/*  onChange={this.props.onSettingsUpdate}/>*/}
93          </FormElement>
94          <FormToggleGroup
95            id="prefs.app.zoomMode"
96            name="zoomMode"
97            value={this.props.settings.zoomMode}
98            options={this.props.zoomModes}
99            onChange={this.props.onSettingsUpdate}/>
100          <hr/>
101          {/*<FormToggle*/}
102          {/*  id="prefs.app.debug"*/}
103          {/*  name="debug"*/}
104          {/*  isDisabled={ARGS.dev}*/}
105          {/*  value={this.props.settings.debug || ARGS.dev}*/}
106          {/*  onChange={this.handleDebugChange}/>*/}
107        </div>
108      </div>
109    )
110  }
111
112  static propTypes = {
113    templates: array.isRequired,
114    settings: shape({
115      debug: bool.isRequired,
116      locale: string.isRequired,
117      theme: string.isRequired,
118    }).isRequired,
119    locales: arrayOf(string).isRequired,
120    themes: arrayOf(string).isRequired,
121    dupOptions: arrayOf(string).isRequired,
122    zoomModes: arrayOf(string).isRequired,
123    onSettingsUpdate: func.isRequired
124  }
125
126  static defaultProps = {
127    themes: ['light', 'dark'],
128    locales: ['de', 'en'],
129    dupOptions: ['skip', 'import', 'prompt'],
130    zoomModes: [ESPER.MODE.FIT, ESPER.MODE.FILL]
131  }
132}
133
134
135module.exports = {
136  AppPrefs
137}
138
Full Screen

ReactPerfTool.js

Source: ReactPerfTool.js Github

copy
1import React, { Component } from 'react';
2import keymaster from 'keymaster';
3
4import defaultSettings from '../constants/defaultSettings';
5import getUserSettings from '../utils/getUserSettings';
6import setUserSettings from '../utils/setUserSettings';
7
8import TimeWasted from './TimeWasted';
9import TabManager from './TabManager';
10import Tab from './Tab';
11
12import Settings from './Settings';
13
14class ReactPerfTool extends Component {
15  constructor(props) {
16    super(props);
17
18    const userSettings = getUserSettings(window.localStorage);
19
20    this.state = {
21      showing: true,
22      recording: false,
23      toolHeight: 400,
24      settings: Object.assign({}, defaultSettings, userSettings),
25    };
26
27    window.Perf = props.perf;
28  }
29
30  componentDidMount() {
31    this.enableKeyBindings();
32  }
33
34  componentWillUnmount() {
35    this.unbindKeys();
36  }
37
38  onSettingsUpdate(settings) {
39    setUserSettings(settings, window.localStorage);
40    this.setState({ settings });
41    this.reloadSettings();
42  }
43
44  enableKeyBindings() {
45    const { settings } = this.state;
46    Object.keys(settings.keybindings).forEach(func => {
47      keymaster(settings.keybindings[func], this[func].bind(this));
48    });
49  }
50
51  unbindKeys() {
52    const { settings } = this.state;
53    Object.keys(settings.keybindings).forEach(func => {
54      keymaster.unbind(settings.keybindings[func]);
55    });
56  }
57
58  handleResize(e) {
59    const windowHeight = window.innerHeight;
60    const toolHeight = windowHeight - e.screenY;
61    if (toolHeight < windowHeight && toolHeight > 300) this.setState({ toolHeight });
62  }
63
64  reloadSettings() {
65    this.unbindKeys();
66    this.enableKeyBindings();
67  }
68
69  toggleVisibility() {
70    this.setState({ showing: !this.state.showing });
71  }
72
73  render() {
74    return (<div className="perf-app-shell">
75      <div
76        className={`perf-tool container bottom ${this.state.showing ? null : 'hidden'}`}
77        style={{
78          height: `${this.state.toolHeight}px`,
79          bottom: `${this.state.showing ? 0 : -this.state.toolHeight}px`,
80        }}
81      >
82        <div className="resize-handler" onDrag={this.handleResize.bind(this)} />
83        <button
84          onClick={this.toggleVisibility.bind(this)}
85          className="toggleButton x-button"
86        >
87        ×
88        </button>
89        <TabManager>
90          <Tab
91            key="wastedChart"
92            align="left"
93          >
94            <TimeWasted perf={this.props.perf} />
95          </Tab>
96          <Tab
97            key="settings"
98            align="right"
99          >
100            <Settings
101              settings={this.state.settings}
102              onSettingsUpdate={this.onSettingsUpdate.bind(this)}
103            />
104          </Tab>
105        </TabManager>
106      </div>
107    </div>);
108  }
109}
110
111export default ReactPerfTool;
112
Full Screen

Accelerate Your Automation Test Cycles With LambdaTest

Leverage LambdaTest’s cloud-based platform to execute your automation tests in parallel and trim down your test execution time significantly. Your first 100 automation testing minutes are on us.

Try LambdaTest

Run JavaScript Tests on LambdaTest Cloud Grid

Execute automation tests with Appium Xcuitest Driver on a cloud-based Grid of 3000+ real browsers and operating systems for both web and mobile applications.

Test now for Free
LambdaTestX

We use cookies to give you the best experience. Cookies help to provide a more personalized experience and relevant advertising for you, and web analytics for us. Learn More in our Cookies policy, Privacy & Terms of service

Allow Cookie
Sarah

I hope you find the best code examples for your project.

If you want to accelerate automated browser testing, try LambdaTest. Your first 100 automation testing minutes are FREE.

Sarah Elson (Product & Growth Lead)