add e2e test

apps/vyper/src/app/app.tsx

@@ -88,10 +88,10 @@ const App: React.FC = () => {
           type="radio"
           value={state.environment}
         >
-          <ToggleButton variant="secondary" name="remote" value="remote">
+          <ToggleButton data-id="remote-compiler" variant="secondary" name="remote" value="remote">
             Remote Compiler
           </ToggleButton>
-          <ToggleButton variant="secondary" name="local" value="local">
+          <ToggleButton data-id="local-compiler" variant="secondary" name="local" value="local">
             Local Compiler
           </ToggleButton>
         </ToggleButtonGroup>

apps/vyper/src/app/components/CompilerButton.tsx

@@ -103,7 +103,7 @@ function CompilerButton({ contract, setOutput, compilerUrl }: Props) {
   }
 
   return (
-    <Button onClick={compileContract} variant="primary">
+    <Button data-id="compile" onClick={compileContract} variant="primary">
       Compile {contract}
     </Button>
   )

apps/vyper/src/app/components/VyperResult.tsx

@@ -28,7 +28,7 @@ function VyperResult({ output }: VyperResultProps) {
 
     <div id="result">
       <p>No contract compiled yet.</p>
-      <Button variant="info" onClick={() => remixClient.loadContract(Ballot)}>
+      <Button data-id="add-ballot" variant="info" onClick={() => remixClient.loadContract(Ballot)}>
         Create Ballot.vy example
       </Button>
     </div>
@@ -38,7 +38,7 @@ function VyperResult({ output }: VyperResultProps) {
     return (
     <div id="result" className="error">
       <i className="fas fa-exclamation-circle text-danger"></i>
-      <p className="alert alert-danger">{output.message}</p>
+      <p data-id="error-message" className="alert alert-danger">{output.message}</p>
     </div>)
   }