persist recorded targets alternatives, and show them in autocomplete, fixes #150

Author: corevo

packages/selenium-ide/src/neo/IO/SideeX/record.js

@@ -41,6 +41,8 @@ export function recordCommand(command, target, value, index, select = false) {
   if (select) {
     UiState.selectCommand(newCommand);
   }
+
+  return newCommand;
 }
 
 // for record module
@@ -65,7 +67,8 @@ export default function record(command, targets, value, insertBeforeLastCommand
       // double click removed the 2 clicks from before
       index -= 2;
     }
-    recordCommand(command, targets[0][0], value, index);
+    const newCommand = recordCommand(command, targets[0][0], value, index);
+    newCommand.setTargets(targets);
   }
 }
 

packages/selenium-ide/src/neo/__test__/models/Command.spec.js

@@ -55,10 +55,12 @@ describe("Command", () => {
     const command = new Command();
     command.setCommand();
     command.setTarget();
+    command.setTargets();
     command.setValue();
     command.setComment();
     expect(command.command).toEqual("");
     expect(command.target).toEqual("");
+    expect(command.targets.length).toBe(0);
     expect(command.value).toEqual("");
     expect(command.comment).toEqual("");
   });
@@ -67,6 +69,14 @@ describe("Command", () => {
     command.setTarget("a");
     expect(command.target).toBe("a");
   });
+  it("should set the targets", () => {
+    const command = new Command();
+    command.setTargets([
+      ["button", "xpath"]
+    ]);
+    expect(command.targets[0][0]).toBe("button");
+    expect(command.targets[0][1]).toBe("xpath");
+  });
   it("should set the value", () => {
     const command = new Command();
     command.setValue("123456");
@@ -95,6 +105,9 @@ describe("Command", () => {
     command.setComment("test");
     command.setCommand("open");
     command.setTarget("a");
+    command.setTargets([
+      ["button", "xpath"]
+    ]);
     command.setValue("submit");
     command.toggleBreakpoint();
     const clone = command.clone();
@@ -103,6 +116,7 @@ describe("Command", () => {
     expect(clone.comment).toBe(command.comment);
     expect(clone.command).toBe(command.command);
     expect(clone.target).toBe(command.target);
+    expect(clone.targets).toEqual(command.targets);
     expect(clone.value).toBe(command.value);
     expect(clone.isBreakpoint).toBeFalsy();
   });
@@ -113,13 +127,18 @@ describe("Command", () => {
       comment: "test",
       command: "open",
       target: "/",
+      targets: [
+        ["button", "xpath"]
+      ],
       value: "test"
     };
     const command = Command.fromJS(jsRepresentation);
     expect(command.id).toBe(jsRepresentation.id);
     expect(command.comment).toBe(jsRepresentation.comment);
     expect(command.command).toBe(jsRepresentation.command);
     expect(command.target).toBe(jsRepresentation.target);
+    expect(command.targets[0][0]).toBe("button");
+    expect(command.targets[0][1]).toBe("xpath");
     expect(command.value).toBe(jsRepresentation.value);
     expect(command.isBreakpoint).toBeFalsy();
     expect(command instanceof Command).toBeTruthy();

packages/selenium-ide/src/neo/components/CommandForm/index.jsx

@@ -23,6 +23,7 @@ import { Commands } from "../../models/Command";
 import Input from "../FormInput";
 import TextArea from "../FormTextArea";
 import CommandInput from "../CommandInput";
+import TargetInput from "../TargetInput";
 import FlatButton from "../FlatButton";
 import { find, select } from "../../IO/SideeX/find-select";
 import "./style.css";
@@ -61,11 +62,12 @@ import "./style.css";
             disabled={!this.props.command}
             onChange={this.props.command ? this.props.command.setCommand : null} />
           <div className="target">
-            <Input
+            <TargetInput
               id="target"
               name="target"
               label="Target"
               value={this.props.command ? this.props.command.target : ""}
+              targets={this.props.command.targets}
               disabled={!this.props.command}
               onChange={this.props.command ? this.props.command.setTarget : null} />
             <FlatButton

packages/selenium-ide/src/neo/components/TargetInput/index.jsx

@@ -0,0 +1,82 @@
+// Licensed to the Software Freedom Conservancy (SFC) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The SFC licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+import React from "react";
+import PropTypes from "prop-types";
+import { PropTypes as MobxPropTypes } from "mobx-react";
+import AutoComplete from "../AutoComplete";
+import Input from "../FormInput";
+
+export default class TargetInput extends React.Component {
+  static propTypes = {
+    name: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+    targets: MobxPropTypes.arrayOrObservableArray,
+    disabled: PropTypes.bool,
+    value: PropTypes.string,
+    onChange: PropTypes.func
+  };
+  render() {
+    return (this.props.targets && this.props.targets.length ?
+      <Input name={this.props.name} label={this.props.label}>
+        <AutoComplete
+          getItemValue={(item) => (
+            item[0]
+          )}
+          items={this.props.targets.peek()}
+          renderDefaultStyledItem={(item) =>
+            <TargetSuggestion locator={item[0]} strategy={item[1]} />
+          }
+          value={this.props.value}
+          inputProps={{ disabled: this.props.disabled }}
+          onChange={(e) => { if (this.props.onChange) this.props.onChange(e.target.value); }}
+          onSelect={(value) => { if (this.props.onChange) this.props.onChange(value); }}
+        />
+      </Input> :
+      <Input
+        name={this.props.name}
+        label={this.props.label}
+        value={this.props.value}
+        disabled={this.props.disabled}
+        onChange={(e) => { if (this.props.onChange) this.props.onChange(e.target.value); }} />
+    );
+  }
+}
+
+class TargetSuggestion extends React.Component {
+  static propTypes = {
+    locator: PropTypes.string.isRequired,
+    strategy: PropTypes.string
+  };
+  render() {
+    return (
+      <span style={{
+        display: "flex"
+      }}>
+        <span style={{
+          flexGrow: "1",
+          wordBreak: "break-word"
+        }}>{this.props.locator}</span>
+        {this.props.strategy && <span style={{
+          color: "#929292",
+          flexGrow: "initial",
+          paddingLeft: "10px"
+        }}>{this.props.strategy}</span>}
+      </span>
+    );
+  }
+}

packages/selenium-ide/src/neo/models/Command.js

@@ -15,14 +15,15 @@
 // specific language governing permissions and limitations
 // under the License.
 
-import { action, computed, observable } from "mobx";
+import { action, computed, observable, toJS } from "mobx";
 import uuidv4 from "uuid/v4";
 
 export default class Command {
   id = null;
   @observable comment = "";
   @observable command;
   @observable target;
+  @observable targets = [];
   @observable value;
   @observable isBreakpoint = false;
 
@@ -60,6 +61,10 @@ export default class Command {
     this.target = target || "";
   }
 
+  @action.bound setTargets(targets = []) {
+    this.targets.replace(targets);
+  }
+
   @action.bound setValue(value) {
     this.value = value ? value.replace(/\n/g, "\\n") : "";
   }
@@ -72,6 +77,7 @@ export default class Command {
     this.setComment(jsRep.comment);
     this.setCommand(jsRep.command);
     this.setTarget(jsRep.target);
+    this.setTargets(jsRep.targets);
     this.setValue(jsRep.value);
   }
 
@@ -81,6 +87,7 @@ export default class Command {
       comment: this.comment,
       command: this.command,
       target: this.target,
+      targets: toJS(this.targets),
       value: this.value
     };
   }

packages/selenium-ide/src/neo/stores/seed.js

@@ -60,6 +60,9 @@ export default function seed(store, numberOfSuites = 5) {
   const firstClick = playbackTest.createCommand();
   firstClick.setCommand("click");
   firstClick.setTarget("link=enacted");
+  firstClick.setTargets([
+    ["//div[@id='mw-content-text']/div/p[7]", "xpath:idRelative"]
+  ]);
   const secondClick = playbackTest.createCommand();
   secondClick.setCommand("clickAt");
   secondClick.setTarget("link=parliamentary systems");