Add frontend smoke tests for annotations (#1154)

* Add smoke test for annotations features

* Do not save during annotations tests

* Fix botched rebase in dev guidelines

* Revert "Do not save during annotations tests"

This reverts commit f0bd970bb2.

* Respond to feedback from @bkmartinjr
This commit is contained in:
Matt Weiden
2020-02-14 17:23:45 -08:00
committed by GitHub
parent ac13b31e13
commit d30087ca63
20 changed files with 2941 additions and 76 deletions
@@ -32,7 +32,8 @@ class AnnoDialog extends React.Component {
handleSubmit,
primaryButtonText,
secondaryButtonText,
handleSecondaryButtonSubmit
handleSecondaryButtonSubmit,
primaryButtonProps
} = this.props;
return (
@@ -75,6 +76,7 @@ class AnnoDialog extends React.Component {
</Button>
) : null}
<Button
{...primaryButtonProps}
onClick={handleSubmit}
disabled={!text || validationError}
intent="primary"
@@ -101,6 +101,8 @@ class Category extends React.Component {
annotations.isAddingNewLabel &&
annotations.categoryAddingNewLabel === metadataField
}
inputProps={{ "data-testid": `${metadataField}:create-label-dialog` }}
primaryButtonProps={{ "data-testid": `${metadataField}:submit-label` }}
title="Add new label to category"
instruction="New, unique label name:"
cancelTooltipContent="Close this dialog without adding a label."
@@ -116,6 +118,7 @@ class Category extends React.Component {
<AnnoInputs
useSuggest={ontologyEnabled}
text={newLabelText}
inputProps={{ "data-testid": `${metadataField}:new-label-name` }}
handleCreateArbitraryLabel={this.handleCreateArbitraryLabel}
handleItemChange={this.handleSuggestActiveItemChange}
handleChoice={this.handleChoice}
@@ -121,6 +121,8 @@ class AnnoDialogEditCategoryName extends React.Component {
annotations.isEditingCategoryName &&
annotations.categoryBeingEdited === metadataField
}
inputProps={{ "data-testid": `${metadataField}:edit-category-name-dialog` }}
primaryButtonProps={{ "data-testid": `${metadataField}:submit-category-edit` }}
title="Edit category name"
instruction="New, unique category name:"
cancelTooltipContent="Close this dialog without editing this category."
@@ -132,6 +134,7 @@ class AnnoDialogEditCategoryName extends React.Component {
handleCancel={this.disableEditCategoryMode}
annoInput={
<AnnoInputs
inputProps={{ "data-testid": `${metadataField}:edit-category-name-text`}}
useSuggest={false}
text={newCategoryText}
handleTextChange={this.handleCategoryEditTextChange}
@@ -3,9 +3,10 @@ import { connect } from "react-redux";
import { InputGroup } from "@blueprintjs/core";
const VanillaInput = props => {
const { text, handleTextChange } = props;
const { text, handleTextChange, inputProps } = props;
return (
<InputGroup
{...inputProps}
autoFocus
value={text}
intent="none"
@@ -31,10 +32,14 @@ class AnnoInputs extends React.Component {
}
render() {
const { handleTextChange, text } = this.props;
const { handleTextChange, text, ...restProps } = this.props;
return (
<div>
<VanillaInput text={text} handleTextChange={handleTextChange} />
<VanillaInput
{...restProps}
text={text}
handleTextChange={handleTextChange}
/>
</div>
);
}
@@ -76,7 +76,7 @@ class AnnoMenuCategory extends React.Component {
<MenuItem
icon="tag"
data-testclass="handleAddNewLabelToCategory"
data-testid={`handleAddNewLabelToCategory-${metadataField}`}
data-testid={`${metadataField}:add-new-label-to-category`}
onClick={this.activateAddNewLabelMode}
text={createText}
/>
@@ -84,7 +84,7 @@ class AnnoMenuCategory extends React.Component {
<MenuItem
icon="book"
data-testclass="activateAddNewOntologyLabelMode"
data-testid={`activateAddNewOntologyLabelMode-${metadataField}`}
data-testid={`${metadataField}:add-new-ontology-label-mode`}
onClick={this.activateAddNewOntologyLabelMode}
text={createFromOntologyText}
/>
@@ -93,7 +93,7 @@ class AnnoMenuCategory extends React.Component {
icon="edit"
disabled={annotations.isEditingCategoryName}
data-testclass="activateEditCategoryMode"
data-testid={`activateEditCategoryMode-${metadataField}`}
data-testid={`${metadataField}:edit-category-mode`}
onClick={this.activateEditCategoryMode}
text={editText}
/>
@@ -101,7 +101,7 @@ class AnnoMenuCategory extends React.Component {
icon="delete"
intent="danger"
data-testclass="handleDeleteCategory"
data-testid={`handleDeleteCategory-${metadataField}`}
data-testid={`${metadataField}:delete-category`}
onClick={this.handleDeleteCategory}
text={deleteText}
/>
@@ -111,7 +111,7 @@ class AnnoMenuCategory extends React.Component {
<Button
style={{ marginLeft: 0 }}
data-testclass="seeActions"
data-testid={`seeActions-${metadataField}`}
data-testid={`${metadataField}:see-actions`}
icon="more"
minimal
/>
@@ -145,6 +145,7 @@ class Categories extends React.Component {
instruction="New, unique category name:"
cancelTooltipContent="Close this dialog without creating a category."
primaryButtonText="Create new category"
primaryButtonProps={{ "data-testid": "submit-category" }}
text={newCategoryText}
validationError={this.categoryNameError(newCategoryText)}
errorMessage={this.categoryNameErrorMessage(newCategoryText)}
@@ -153,6 +154,7 @@ class Categories extends React.Component {
annoInput={
<AnnoInputs
text={newCategoryText}
inputProps={{ "data-testid": "new-category-name" }}
handleItemChange={this.handleSuggestActiveItemChange}
handleChoice={this.handleChoice}
handleTextChange={this.handleNewCategoryText}
@@ -194,7 +196,11 @@ class Categories extends React.Component {
)}
{writableCategoriesEnabled ? (
<div>
<Button onClick={this.handleEnableAnnoMode} intent="primary">
<Button
data-testid="open-annotation-dialog"
onClick={this.handleEnableAnnoMode}
intent="primary"
>
Create new category
</Button>
</div>
@@ -175,7 +175,7 @@ class Category extends React.Component {
<label className="bp3-control bp3-checkbox">
<input
data-testclass="category-select"
data-testid={`category-select-${metadataField}`}
data-testid={`${metadataField}:category-select`}
onChange={this.handleToggleAllClick.bind(this)}
ref={el => {
this.checkbox = el;
@@ -187,7 +187,7 @@ class Category extends React.Component {
<span className="bp3-control-indicator" />
</label>
<span
data-testid={`category-expand-${metadataField}`}
data-testid={`${metadataField}:category-expand`}
style={{
cursor: "pointer",
display: "inline-block"
+7 -4
View File
@@ -433,6 +433,8 @@ class CategoryValue extends React.Component {
<div>
<AnnoDialog
isActive={editModeActive}
inputProps={{ "data-testid": `${metadataField}:edit-label-name-dialog` }}
primaryButtonProps={{ "data-testid": `${metadataField}:${displayString}:submit-label-edit` }}
title="Edit label"
instruction={`New label text must be unique within category ${metadataField}:`}
cancelTooltipContent="Close this dialog without editing label text."
@@ -447,6 +449,7 @@ class CategoryValue extends React.Component {
<AnnoInputs
useSuggest={ontologyEnabled}
text={editedLabelText}
inputProps={{ "data-testid": `${metadataField}:${displayString}:edit-label-name` }}
handleCreateArbitraryLabel={
this.handleCreateArbitraryLabel
}
@@ -513,7 +516,7 @@ class CategoryValue extends React.Component {
<MenuItem
icon="plus"
data-testclass="handleAddCurrentSelectionToThisLabel"
data-testid={`handleAddCurrentSelectionToThisLabel-${metadataField}`}
data-testid={`${metadataField}:${displayString}:add-current-selection-to-this-label`}
onClick={this.handleAddCurrentSelectionToThisLabel}
text={
<span>
@@ -541,7 +544,7 @@ class CategoryValue extends React.Component {
icon="edit"
text="Edit this label's name"
data-testclass="handleEditValue"
data-testid={`handleEditValue-${metadataField}`}
data-testid={`${metadataField}:${displayString}:edit-label`}
onClick={this.activateEditLabelMode}
disabled={annotations.isEditingLabelName}
/>
@@ -551,7 +554,7 @@ class CategoryValue extends React.Component {
icon="delete"
intent="danger"
data-testclass="handleDeleteValue"
data-testid={`handleDeleteValue-${metadataField}`}
data-testid={`${metadataField}:${displayString}:delete-label`}
onClick={this.handleDeleteValue}
text={`Delete this label, and reassign all cells to type '${globals.unassignedCategoryLabel}'`}
/>
@@ -567,7 +570,7 @@ class CategoryValue extends React.Component {
minHeight: 16
}}
data-testclass="seeActions"
data-testid={`seeActions-${metadataField}`}
data-testid={`${metadataField}:${displayString}:see-actions`}
icon="more"
small
minimal
@@ -1,5 +1,5 @@
/*
Helper functions for user-editable nnotations state management.
Helper functions for user-editable annotations state management.
See also reducers/annotations.js
*/
import { unassignedCategoryLabel } from "../../globals";