mirror of
https://github.com/chanzuckerberg/cellxgene.git
synced 2026-09-30 17:38:11 +08:00
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:
@@ -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"
|
||||
|
||||
@@ -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";
|
||||
|
||||
Reference in New Issue
Block a user