Skip to content
This repository has been archived by the owner on Dec 6, 2024. It is now read-only.

Commit

Permalink
fix: UI properly sorts Projects with Detail button (#1085)
Browse files Browse the repository at this point in the history
* fix: UI properly sorts Projects with Detail button

* chore: cleanup code

* chore: fix eslint issue
  • Loading branch information
kpark277 authored Dec 16, 2022
1 parent 62452c5 commit a267305
Show file tree
Hide file tree
Showing 4 changed files with 93 additions and 10 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@ class ProjectConfigure extends React.Component {
indexId,
projectAdmins,
};
this.currentProject = this.updateProject;
this.formProcessing = false;
this.modalOpen = false;
this.view = 'detail';
Expand Down Expand Up @@ -121,8 +122,9 @@ class ProjectConfigure extends React.Component {
}

renderTrigger() {
const testid = `${this.props.project.id}-detail-button`;
return (
<Button size="mini" compact color="blue" onClick={this.handleModalOpen}>
<Button size="mini" compact color="blue" onClick={this.handleModalOpen} data-testid={testid}>
Detail
</Button>
);
Expand Down Expand Up @@ -169,13 +171,13 @@ class ProjectConfigure extends React.Component {
const toEditableInput = (attributeName, type = 'text') => {
const handleChange = action(event => {
event.preventDefault();
this.updateProject[attributeName] = event.target.value;
this.currentProject[attributeName] = event.target.value;
});
return (
<div className="ui focus input">
<input
type={type}
defaultValue={this.currentProject[attributeName]}
defaultValue={this.updateProject[attributeName]}
placeholder={fields[attributeName].placeholder || ''}
onChange={handleChange}
/>
Expand Down Expand Up @@ -248,7 +250,7 @@ class ProjectConfigure extends React.Component {

const makeButton = ({ label = '', color = 'blue', floated = 'left', ...props }) => {
return (
<Button color={color} floated={floated} disabled={processing} className="ml2" {...props}>
<Button color={color} floated={floated} disabled={processing} className="ml2" data-testid={label} {...props}>
{label}
</Button>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ class ProjectsList extends React.Component {
const pageSize = projectsData.length;
const pagination = projectsData.length > pageSize;
return (
<div>
<div data-testid="projects-table">
<ReactTable
data={projectsData}
showPagination={pagination}
Expand Down
9 changes: 4 additions & 5 deletions main/end-to-end-tests/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,14 @@ To run the E2E tests, you will need the following items:
- A Service Workbench environment setup with Service Catalog
- Username and password of an admin for the Service Workbench environment
- Username and password of a researcher for the Service Workbench environment
- A project set up for that researcher that can launch workspaces
- Within that project, a study where the researcher is admin
- Within that project, a study where the researcher is not an admin
- A project set up for that researcher that can launch workspaces - Within that project, a study where the researcher is admin - Within that project, a study where the researcher is not an admin
- A second project
- A configured EC2 Linux workspace
- A configured Sagemaker workspace
- A configured EC2 Windows workspace
- A configured EMR workspace
- A configured RStudio Server workspace
- An SSH Key pair created *by the researcher user*
- An SSH Key pair created _by the researcher user_

Once you've confirmed that you have the items above setup, you can create a `cypress.dev.json` and a `cypress.local.json` file with the configurations needed for your tests. You can use `cypress.json` as a template for your new configuration files. An example file is included as `cypress.local.example.json`

Expand Down Expand Up @@ -54,4 +53,4 @@ To run the E2E tests against your hosted dev environment, make sure that you hav

Run this command: `pnpm run cypress:run-tests:dev`

You can also see the tests live by running: `pnpm run cypress:open:dev`
You can also see the tests live by running: `pnpm run cypress:open:dev`
82 changes: 82 additions & 0 deletions main/end-to-end-tests/cypress/integration/common/projects.spec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
/*
* Copyright 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://aws.amazon.com/apache2.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.
*/
describe('projects', () => {
const NUMBER_OF_COLUMNS = 5;

const navigateToAccounts = () => {
cy.get('.left.menu')
.contains('Accounts')
.click();
};

const verifyProjectDetails = () => {
let project = {};
cy.get("div[data-testid='projects-table']")
.find('.rt-td')
.each(($el, $index) => {
cy.wrap($el)
.invoke('text')
.then(text => {
if ($index % NUMBER_OF_COLUMNS == 0) {
project['id'] = text;
} else if ($index % NUMBER_OF_COLUMNS == 1) {
project['index'] = text;
} else if ($index % NUMBER_OF_COLUMNS == 2) {
project['description'] = text;
} else if ($index % NUMBER_OF_COLUMNS == 4) {
cy.get(`Button[data-testid='${project.id}-detail-button']`).click();
cy.get('tbody')
.find('td')
.each(($el, $index) => {
cy.wrap($el)
.invoke('text')
.then(text => {
if ($index == 1) {
// Index 1 belongs to Project Name
if (project.id != text) {
throw new Error(`Expected Project Name ${project.id}; found ${text}`);
}
} else if ($index == 3) {
// Index 3 belongs to Description
if (project.description != text) {
throw new Error(`Expected Description ${project.description}; found ${text}`);
}
}
});
});
cy.get(`Button[data-testid='Cancel']`).click();
}
});
});
return true;
};

const clickOnProjectNameColHeader = () => {
cy.get("div[data-testid='projects-table']")
.contains('Project Name')
.click();
};

it('should allow researcher to see and sort projects', () => {
cy.login('researcher');
navigateToAccounts();

verifyProjectDetails();

clickOnProjectNameColHeader();

verifyProjectDetails();
});
});

0 comments on commit a267305

Please sign in to comment.