djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add tc tags for e2e tests

Browse source
This commit is contained in:
dominik-zeglen 2019-08-27 15:29:00 +02:00
parent 4ec7508b97
commit 6eb3e6d2dd
16 changed files with 72 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/auth/components/LoginPage/LoginPage.tsx
View file

@ -154,6 +154,9 @@ const LoginCard = withStyles(styles, { name: "LoginCard" })(
name="email"
onChange={handleChange}
value={data.email}
inputProps={{
"data-tc": "email"
}}
/>
<FormSpacer />
<TextField
@ -164,6 +167,7 @@ const LoginCard = withStyles(styles, { name: "LoginCard" })(
onChange={handleChange}
type="password"
value={data.password}
data-tc="password"
/>
<FormSpacer />
<div className={classes.buttonContainer}>
@ -181,6 +185,7 @@ const LoginCard = withStyles(styles, { name: "LoginCard" })(
variant="contained"
onClick={handleSubmit}
type="submit"
data-tc="submit"
>
{i18n.t("Login")}
</Button>

1
src/components/AppLayout/MenuList.tsx
View file

@ -233,6 +233,7 @@ const MenuList = withStyles(styles, { name: "MenuList" })(
menuItem.ariaLabel === activeSubMenu.label &&
activeSubMenu.isActive
})}
data-tc={menuItem.label}
onClick={() => handleSubMenu(menuItem.ariaLabel)}
>
<SVG

2
src/components/AppLayout/MenuNested.tsx
View file

@ -162,6 +162,7 @@ const MenuNested = withStyles(styles, { name: "MenuNested" })(
className={classNames(classes.menuListNestedClose, {
[classes.menuListNestedCloseDark]: isDark
})}
data-tc={ariaLabel}
onClick={() =>
closeSubMenu({
isActive: false,
@ -178,6 +179,7 @@ const MenuNested = withStyles(styles, { name: "MenuNested" })(
<a
className={classNames(classes.menuListNestedItem)}
href={createHref(item.url)}
data-tc={ariaLabel}
onClick={event => closeMenu(item.url, event)}
key={item.label}
>

2
src/components/ImageTile/ImageTile.tsx
View file

@ -60,7 +60,7 @@ interface ImageTileProps extends WithStyles<typeof styles> {
const ImageTile = withStyles(styles, { name: "ImageTile" })(
({ classes, onImageDelete, onImageEdit, image }: ImageTileProps) => (
<div className={classes.imageContainer}>
<div className={classes.imageContainer} data-tc="product-image">
<div className={classes.imageOverlay}>
<div className={classes.imageOverlayToolbar}>
{onImageEdit && (

14
src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx
View file

@ -123,7 +123,8 @@ export const MultiAutocompleteSelectFieldComponent = withStyles(styles, {
placeholder,
value,
fetchChoices,
onChange
onChange,
...props
}: MultiAutocompleteSelectFieldProps & WithStyles<typeof styles>) => {
const handleSelect = (
item: string,
@ -153,7 +154,7 @@ export const MultiAutocompleteSelectFieldComponent = withStyles(styles, {
highlightedIndex,
inputValue
}) => (
<div className={classes.container}>
<div className={classes.container} {...props}>
<TextField
InputProps={{
...getInputProps({
@ -190,6 +191,7 @@ export const MultiAutocompleteSelectFieldComponent = withStyles(styles, {
{...getItemProps({
item: value.value
})}
data-tc="multiautocomplete-select-option"
>
<Checkbox
className={classes.checkbox}
@ -213,6 +215,7 @@ export const MultiAutocompleteSelectFieldComponent = withStyles(styles, {
{...getItemProps({
item: suggestion.value
})}
data-tc="multiautocomplete-select-option"
>
<Checkbox
checked={value.includes(suggestion.value)}
@ -238,6 +241,7 @@ export const MultiAutocompleteSelectFieldComponent = withStyles(styles, {
{...getItemProps({
item: inputValue
})}
data-tc="multiautocomplete-select-option"
>
<span className={classes.menuItemLabel}>
{i18n.t("Add new value: {{ value }}", {
@ -250,7 +254,11 @@ export const MultiAutocompleteSelectFieldComponent = withStyles(styles, {
</>
) : (
!loading && (
<MenuItem disabled={true} component="div">
<MenuItem
disabled={true}
component="div"
data-tc="multiautocomplete-select-no-options"
>
{i18n.t("No results found")}
</MenuItem>
)

1
src/components/ProductList/ProductList.tsx
View file

@ -173,6 +173,7 @@ export const ProductList = withStyles(styles, { name: "ProductList" })(
key={product ? product.id : "skeleton"}
onClick={product && onRowClick(product.id)}
className={classes.link}
data-tc={product ? `product-${product.id}` : undefined}
>
<TableCell padding="checkbox">
<Checkbox

3
src/components/SaveButtonBar/SaveButtonBar.tsx
View file

@ -103,6 +103,7 @@ export const SaveButtonBar = withStyles(styles, { name: "SaveButtonBar" })(
variant="contained"
onClick={onDelete}
className={classes.deleteButton}
data-tc="button-bar-delete"
>
{labels && labels.delete
? labels.delete
@ -114,6 +115,7 @@ export const SaveButtonBar = withStyles(styles, { name: "SaveButtonBar" })(
className={classes.cancelButton}
variant="text"
onClick={onCancel}
data-tc="button-bar-cancel"
>
{maybe(
() => labels.cancel,
@ -126,6 +128,7 @@ export const SaveButtonBar = withStyles(styles, { name: "SaveButtonBar" })(
disabled={disabled}
onClick={onSave}
transitionState={state}
data-tc="button-bar-confirm"
>
{maybe(
() => labels.save,

14
src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx
View file

@ -93,7 +93,8 @@ const SingleAutocompleteSelectFieldComponent = withStyles(styles, {
value,
InputProps,
fetchChoices,
onChange
onChange,
...props
}: SingleAutocompleteSelectFieldProps & WithStyles<typeof styles>) => {
const [prevDisplayValue] = useStateFromProps(displayValue);
const handleChange = item =>
@ -136,7 +137,7 @@ const SingleAutocompleteSelectFieldComponent = withStyles(styles, {
}
return (
<div className={classes.container}>
<div className={classes.container} {...props}>
<TextField
InputProps={{
...InputProps,
@ -173,6 +174,7 @@ const SingleAutocompleteSelectFieldComponent = withStyles(styles, {
{...getItemProps({
item: ""
})}
data-tc="singleautocomplete-select-option"
>
<Typography color="textSecondary">
{i18n.t("None")}
@ -195,6 +197,7 @@ const SingleAutocompleteSelectFieldComponent = withStyles(styles, {
index: choiceIndex,
item: suggestion.value
})}
data-tc="singleautocomplete-select-option"
>
{suggestion.label}
</MenuItem>
@ -215,6 +218,7 @@ const SingleAutocompleteSelectFieldComponent = withStyles(styles, {
{...getItemProps({
item: inputValue
})}
data-tc="singleautocomplete-select-option"
>
{i18n.t("Add new value: {{ value }}", {
context: "add custom option",
@ -224,7 +228,11 @@ const SingleAutocompleteSelectFieldComponent = withStyles(styles, {
)}
</>
) : (
<MenuItem disabled={true} component="div">
<MenuItem
disabled={true}
component="div"
data-tc="singleautocomplete-select-no-options"
>
{i18n.t("No results found")}
</MenuItem>
)}

2
src/components/TablePagination/TablePaginationActions.tsx
View file

@ -88,6 +88,7 @@ export const TablePaginationActions = withStyles(styles, {
})}
onClick={onPreviousPage}
disabled={!hasPreviousPage}
data-tc="button-pagination-back"
{...backIconButtonProps}
>
{theme.direction === "rtl" ? <ArrowRight /> : <ArrowLeft />}
@ -99,6 +100,7 @@ export const TablePaginationActions = withStyles(styles, {
})}
onClick={onNextPage}
disabled={!hasNextPage}
data-tc="button-pagination-next"
{...nextIconButtonProps}
>
{theme.direction === "rtl" ? <ArrowLeft /> : <ArrowRight />}

7
src/components/messages/MessageManager.tsx
View file

@ -71,7 +71,11 @@ export class MessageManager extends React.Component<{}, MessageManagerState> {
ContentProps={{
"aria-describedby": "message-id"
}}
message={<span id="message-id">{text}</span>}
message={
<span id="message-id" data-tc="notification">
{text}
</span>
}
action={[
!!onUndo ? (
<Button
@ -79,6 +83,7 @@ export class MessageManager extends React.Component<{}, MessageManagerState> {
color="secondary"
size="small"
onClick={this.handleClose as any}
data-tc="button-undo"
>
UNDO
</Button>

8
src/products/components/ProductAttributes/ProductAttributes.tsx
View file

@ -147,6 +147,7 @@ const ProductAttributes: React.FC<ProductAttributesProps> = ({
<IconButton
className={classes.expansionBarButton}
onClick={toggleExpansion}
data-tc="product-attributes-expand"
>
<ArrowDropDownIcon
className={classNames(classes.expansionBarButtonIcon, {
@ -162,10 +163,13 @@ const ProductAttributes: React.FC<ProductAttributesProps> = ({
<React.Fragment key={attribute.id}>
{attributeIndex > 0 && <Hr />}
<Grid className={classes.attributeSection} variant="uniform">
<div className={classes.attributeSectionLabel}>
<div
className={classes.attributeSectionLabel}
data-tc="product-attribute-label"
>
<Typography>{attribute.label}</Typography>
</div>
<div>
<div data-tc="product-attribute-value">
{attribute.data.inputType ===
AttributeInputTypeEnum.DROPDOWN ? (
<SingleAutocompleteSelectField

1
src/products/components/ProductImages/ProductImages.tsx
View file

@ -192,6 +192,7 @@ const ProductImages = withStyles(styles, { name: "ProductImages" })(
disabled={loading}
variant="text"
color="primary"
data-tc="button-upload-image"
>
{i18n.t("Upload image")}
</Button>

7
src/products/components/ProductListPage/ProductListPage.tsx
View file

@ -99,7 +99,12 @@ export const ProductListPage: React.FC<ProductListPageProps> = props => {
onReset={handleReset}
onSave={handleSave}
/>
<Button onClick={onAdd} color="primary" variant="contained">
<Button
onClick={onAdd}
color="primary"
variant="contained"
data-tc="add-product"
>
{i18n.t("Add product")} <AddIcon />
</Button>
</PageHeader>

3
src/products/components/ProductOrganization/ProductOrganization.tsx
View file

@ -101,6 +101,7 @@ const ProductOrganization = withStyles(styles, { name: "ProductOrganization" })(
choices={productTypes}
value={data.productType}
onChange={onProductTypeChange}
data-tc="product-type"
/>
) : (
<>
@ -137,6 +138,7 @@ const ProductOrganization = withStyles(styles, { name: "ProductOrganization" })(
value={data.category}
onChange={onCategoryChange}
fetchChoices={fetchCategories}
data-tc="category"
/>
<FormSpacer />
<Hr />
@ -152,6 +154,7 @@ const ProductOrganization = withStyles(styles, { name: "ProductOrganization" })(
)}
onChange={onCollectionChange}
fetchChoices={fetchCollections}
data-tc="collections"
/>
</CardContent>
</Card>

1
src/products/components/ProductVariantAttributes/ProductVariantAttributes.tsx
View file

@ -93,6 +93,7 @@ const ProductVariantAttributes: React.FC<ProductVariantAttributesProps> = ({
value={getAttributeValue(attribute.id, attributes)}
choices={getAttributeValueChoices(attribute.id, attributes)}
allowCustomValues
data-tc="variant-attribute-input"
/>
);
})

14
src/products/components/ProductVariants/ProductVariants.tsx
View file

@ -94,10 +94,20 @@ export const ProductVariants = withStyles(styles, { name: "ProductVariants" })(
title={i18n.t("Variants")}
toolbar={
<>
<Button onClick={onAttributesEdit} variant="text" color="primary">
<Button
onClick={onAttributesEdit}
variant="text"
color="primary"
data-tc="button-edit-attributes"
>
{i18n.t("Edit attributes")}
</Button>
<Button onClick={onVariantAdd} variant="text" color="primary">
<Button
onClick={onVariantAdd}
variant="text"
color="primary"
data-tc="button-add-variant"
>
{i18n.t("Add variant")}
</Button>
</>