Implement Selenium tests for ACLs

Author: Jacob Peddicord

browser/components/projects/acl/ProjectAclEditor.tsx

@@ -17,6 +17,7 @@ import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 
 import { AccessLevel, AccessLevelStrength, WebProject } from '../../../../server/api/projects/interfaces';
+import history from '../../../history';
 import * as ProjectActions from '../../../modules/projects';
 import GroupSelect from './GroupSelect';
 
@@ -72,7 +73,7 @@ class ProjectAclEditor extends React.Component<Props, State> {
     });
   }
 
-  save = (e) => {
+  save = async (e) => {
     e.preventDefault();
     const { dispatch, project: { projectId } } = this.props;
     const { sortedAcl } = this.state;
@@ -82,18 +83,19 @@ class ProjectAclEditor extends React.Component<Props, State> {
       return acc;
     }, {});
 
-    dispatch(ProjectActions.patchProject(projectId, {
+    await dispatch(ProjectActions.patchProject(projectId, {
       acl: newAcl,
     }));
+    history.push(`/projects/${projectId}`);
   }
 
   render() {
     const { groups } = this.props;
     const { sortedAcl } = this.state;
 
-    return <div>
+    return <form onSubmit={this.save}>
       <h2>Manage project access</h2>
-      <table className="table table-bordered">
+      <table className="table table-bordered" id="project-acl-editor">
         <thead>
           <tr>
             <th style={{ width: '20%' }}>Permissions</th>
@@ -114,17 +116,17 @@ class ProjectAclEditor extends React.Component<Props, State> {
         </tbody>
         <tr>
           <td colSpan={3}>
-            <button className="btn btn-secondary" onClick={this.addEntry}>
+            <button type="button" id="acl-add" className="btn btn-secondary" onClick={this.addEntry}>
               <i className="fa fa-plus" /> Add
             </button>
           </td>
         </tr>
       </table>
 
-      <button className="btn btn-primary" onClick={this.save}>
+      <button type="submit" className="btn btn-primary">
         Save
       </button>
-    </div>;
+    </form>;
   }
 
 }
@@ -152,7 +154,7 @@ function AclRow(props: AclRowProps) {
       />
     </td>
     <td>
-      <button className="btn btn-secondary" onClick={props.onDelete}>
+      <button type="button" className="btn btn-secondary" onClick={props.onDelete}>
         <i className="fa fa-times" />
       </button>
     </td>

browser/components/projects/editor/ProjectView.tsx

@@ -112,11 +112,11 @@ class ProjectView extends Component<Props, State> {
     return (
       <div className="pb-5">
         {project.access.level === 'owner' ?
-          <div className="float-right text-muted small EditableText">
+          <div id="acl-owner-info" className="float-right text-muted small EditableText">
             <Link to={`/projects/${project.projectId}/acl`}>owned by {this.getOwners()}</Link>
           </div>
         :
-          <div className="float-right text-muted small">
+          <div id="acl-owner-info" className="float-right text-muted small">
             owned by {this.getOwners()}
           </div>
         }

selenium/projects-auth.spec.ts

@@ -0,0 +1,120 @@
+/* Copyright 2017 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License").
+ * You may not use this file except in compliance with the License.
+ * A copy of the License is located at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * or in the "license" file accompanying this file. This file 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 {By, Key, until} from 'selenium-webdriver';
+import build, { CustomDriver } from './driver';
+
+const projectName = 'ACL Test ' + new Date().getTime();
+
+describe('project authentication', function () {
+  let driver: CustomDriver;
+  beforeAll(async function () {
+    driver = await build();
+    await driver.manage().timeouts().implicitlyWait(1000);
+  });
+  afterAll(async function () {
+    await driver.quit();
+  });
+
+  it('bootstraps a project', async function () {
+    driver.getRelative('/projects/new');
+    driver.wait(until.elementLocated(By.id('onboarding-form')));
+
+    driver.findElement(By.id('title')).sendKeys(projectName);
+    driver.findElement(By.id('version')).sendKeys('x');
+    driver.findElement(By.id('description')).sendKeys('x');
+    driver.findElement(By.css('input[name="openSourcing"][value="false"]')).click();
+    driver.findElement(By.id('legalContact')).sendKeys('a-real-person');
+    driver.findElement(By.id('plannedRelease')).sendKeys('1111-11-11');
+    driver.findElement(By.css('#ownerGroup-container .Select-placeholder')).click();
+    driver.findElement(
+      By.xpath('//*[@id="ownerGroup-container"]//div[@class="Select-menu"]//div[text()="everyone"]')).click();
+
+    driver.findElement(By.css('form#onboarding-form button[type="submit"]')).click();
+
+    const headerText = await driver.findElement(By.id('project-heading')).getText();
+    expect(headerText).toContain(projectName);
+  });
+
+  it('can load the acl editor', async function () {
+    driver.findElement(By.css('a[href$="/acl"]')).click();
+    await driver.wait(until.elementLocated(By.id('project-acl-editor')));
+  });
+
+  it('wont let a person disown a project', async function () {
+    const input = driver.findElement(By.xpath('//form//tbody/tr[1]//input[@type="text"]'));
+    input.clear();
+    input.sendKeys('blah');
+    driver.findElement(By.css('button[type="submit"]')).click();
+
+    driver.sleep(1000); // modal animation
+    const errorText = await driver.findElement(By.css('#error-modal .modal-body')).getText();
+    expect(errorText).toContain('cannot remove yourself');
+    driver.findElement(By.css('#error-modal button.btn-primary')).click(); // close button
+    driver.wait(until.elementIsNotVisible(driver.findElement(By.css('#error-modal'))));
+    driver.sleep(1000); // modal animation
+
+    input.clear();
+    await input.sendKeys('self:selenium');
+  });
+
+  it('can add some friends to the list', async function () {
+    driver.findElement(By.id('acl-add')).click();
+    const select2 = driver.findElement(By.xpath('//form//tbody/tr[2]//select'));
+    const input2 = driver.findElement(By.xpath('//form//tbody/tr[2]//input[@type="text"]'));
+    select2.click();
+    const select2editor = driver.findElement(By.xpath('//form//tbody/tr[2]//select/option[@value="editor"]'));
+    select2editor.click();
+    input2.sendKeys('self:fake-editor');
+
+    driver.findElement(By.id('acl-add')).click();
+    const select3 = driver.findElement(By.xpath('//form//tbody/tr[3]//select'));
+    const input3 = driver.findElement(By.xpath('//form//tbody/tr[3]//input[@type="text"]'));
+    select3.click();
+    const select3viewer = driver.findElement(By.xpath('//form//tbody/tr[3]//select/option[@value="viewer"]'));
+    select3viewer.click();
+    input3.sendKeys('self:fake-viewer');
+
+    await driver.findElement(By.css('button[type="submit"]')).click();
+  });
+
+  it('cannot edit acl as editor', async function () {
+    // switch users and return
+    driver.wait(until.elementLocated(By.id('project-heading')));
+    const projectUrl = await driver.getCurrentUrl();
+    driver.setUser('fake-editor');
+    await driver.get(projectUrl);
+
+    // ensure the acl link isn't clickable
+    const info = driver.findElement(By.id('acl-owner-info'));
+    const classes = await info.getAttribute('class');
+    const text = await info.getText();
+    expect(classes).not.toContain('EditableText');
+    expect(text).toContain('owned by');
+
+    // but that main project details still are
+    await driver.findElement(By.css('#project-heading .EditableText'));
+  });
+
+  it('cannot edit project as viewer', async function () {
+    const projectUrl = await driver.getCurrentUrl();
+    driver.setUser('fake-viewer');
+    await driver.get(projectUrl);
+
+    // nothing should be editable
+    const numEditable = await driver.findElements(By.className('EditableText'));
+    expect(numEditable.length).toEqual(0);
+  });
+
+});