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

Saleor 2078/create cypress test ids (#958)

Browse source 
* Add first id

* Add more ids

* Add more test ids

* Fix typing

* Remove unnecessary import

* Update snapshots
This commit is contained in:
mmarkusik 2021-01-26 11:21:54 +01:00 committed by GitHub
parent b894487c63
commit 9a694071ce
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 67 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/channels/components/ChannelForm/ChannelForm.tsx
View file

@ -20,6 +20,7 @@ import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import { useStyles } from "../styles";
import { ExtendedFormHelperTextProps } from "./types";
export interface FormData {
name: string;
@ -80,6 +81,11 @@ export const ChannelForm: React.FC<ChannelFormProps> = ({
helperText={getChannelsErrorMessage(formErrors?.slug, intl)}
disabled={disabled}
fullWidth
FormHelperTextProps={
{
"data-testid": "slug-text-input-helper-text"
} as ExtendedFormHelperTextProps
}
label={intl.formatMessage({
defaultMessage: "Slug",
description: "channel slug"
@ -124,8 +130,14 @@ export const ChannelForm: React.FC<ChannelFormProps> = ({
<CardContent>
{!!currencyCodes ? (
<SingleAutocompleteSelectField
data-test-id="channel-currency-select-input"
allowCustomValues
error={!!formErrors.currencyCode}
FormHelperTextProps={
{
"data-testid": "currency-text-input-helper-text"
} as ExtendedFormHelperTextProps
}
helperText={getChannelsErrorMessage(
formErrors?.currencyCode,
intl

5
src/channels/components/ChannelForm/types.ts Normal file
View file

@ -0,0 +1,5 @@
import { FormHelperTextProps } from "@material-ui/core/FormHelperText";
export type ExtendedFormHelperTextProps = FormHelperTextProps & {
"data-testid": string;
};

6
src/components/AppHeader/AppHeader.tsx
View file

@ -61,7 +61,11 @@ const AppHeader: React.FC<AppHeaderProps> = props => {
{anchor =>
anchor ? (
<Portal container={anchor.current}>
<div className={classes.root} onClick={onBack}>
<div
className={classes.root}
onClick={onBack}
data-test-id="app-header-back-button"
>
<ArrowBackIcon className={classes.backArrow} />
{children ? (
<Typography className={classes.title}>{children}</Typography>

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

@ -38,6 +38,7 @@ const AppChannelSelect: React.FC<AppChannelSelectProps> = ({
return (
<div className={classes.root}>
<SingleSelectField
testId="app-channel-select"
choices={mapNodeToChoice(channels)}
disabled={disabled}
value={selectedChannelId}

6
src/components/ChannelsAvailability/ChannelsAvailability.tsx
View file

@ -417,7 +417,11 @@ export const ChannelsAvailability: React.FC<ChannelsAvailabilityProps> = props =
userPermissions={user?.userPermissions || []}
requiredPermissions={[PermissionEnum.MANAGE_CHANNELS]}
>
<Button color="primary" onClick={openModal}>
<Button
color="primary"
onClick={openModal}
data-test-id="channels-availiability-manage-button"
>
{intl.formatMessage({
defaultMessage: "Manage",
description: "section header button"

5
src/components/ChannelsAvailabilityContent/ChannelsAvailabilityContent.tsx
View file

@ -77,7 +77,10 @@ export const ChannelsAvailabilityContent: React.FC<ChannelsAvailabilityContentPr
<Typography className={classes.contentTitle}>
<FormattedMessage defaultMessage="Channels A to Z" />
</Typography>
<div className={classes.scrollArea}>
<div
className={classes.scrollArea}
data-test-id="manage-products-channels-availiability-list"
>
{filteredChannels?.length ? (
filteredChannels.map(option => (
<div key={option.id} className={classes.option}>

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

@ -1,6 +1,7 @@
import { InputProps } from "@material-ui/core/Input";
import { makeStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import { ExtendedFormHelperTextProps } from "@saleor/channels/components/ChannelForm/types";
import { FetchMoreProps } from "@saleor/types";
import classNames from "classnames";
import Downshift, { ControllerStateAndHelpers } from "downshift";
@ -42,6 +43,7 @@ export interface SingleAutocompleteSelectFieldProps
InputProps?: InputProps;
fetchChoices?: (value: string) => void;
onChange: (event: React.ChangeEvent<any>) => void;
FormHelperTextProps?: ExtendedFormHelperTextProps;
}
const DebounceAutocomplete: React.ComponentType<DebounceProps<
@ -69,6 +71,7 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
fetchChoices,
onChange,
onFetchMore,
FormHelperTextProps,
...rest
} = props;
const classes = useStyles(props);
@ -178,6 +181,7 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
error={error}
disabled={disabled}
helperText={helperText}
FormHelperTextProps={FormHelperTextProps}
label={label}
fullWidth={true}
/>

5
src/components/SingleSelectField/SingleSelectField.tsx
View file

@ -35,6 +35,7 @@ export interface Choice {
export type Choices = Choice[];
interface SingleSelectFieldProps {
testId?: string;
choices: Choices;
className?: string;
disabled?: boolean;
@ -62,7 +63,8 @@ export const SingleSelectField: React.FC<SingleSelectFieldProps> = props => {
hint,
selectProps,
placeholder,
InputProps
InputProps,
testId
} = props;
const classes = useStyles(props);
@ -84,6 +86,7 @@ export const SingleSelectField: React.FC<SingleSelectFieldProps> = props => {
{label}
</InputLabel>
<Select
data-test-id={testId}
variant="outlined"
fullWidth
renderValue={choiceValue =>

7
src/orders/components/OrderDraftDetails/OrderDraftDetails.tsx
View file

@ -44,7 +44,12 @@ const OrderDraftDetails: React.FC<OrderDraftDetailsProps> = ({
toolbar={
!disabled &&
order?.channel?.isActive && (
<Button color="primary" variant="text" onClick={onOrderLineAdd}>
<Button
color="primary"
variant="text"
onClick={onOrderLineAdd}
data-test-id="add-products-button"
>
<FormattedMessage
defaultMessage="Add products"
description="button"

7
src/orders/components/OrderListPage/OrderListPage.tsx
View file

@ -72,7 +72,12 @@ const OrderListPage: React.FC<OrderListPageProps> = ({
]}
/>
)}
<Button color="primary" variant="contained" onClick={onAdd}>
<Button
color="primary"
variant="contained"
onClick={onAdd}
data-test-id="create-order-button"
>
<FormattedMessage
defaultMessage="Create order"
description="button"

15
src/storybook/__snapshots__/Stories.test.ts.snap
View file

@ -2688,6 +2688,7 @@ exports[`Storyshots Generics / ChannelsAvailability default 1`] = `
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
data-test-id="channels-availiability-manage-button"
tabindex="0"
type="button"
>
@ -2773,6 +2774,7 @@ exports[`Storyshots Generics / ChannelsAvailability with onChange 1`] = `
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
data-test-id="channels-availiability-manage-button"
tabindex="0"
type="button"
>
@ -46366,6 +46368,7 @@ exports[`Storyshots Views / Channels / Channel details default 1`] = `
>
<div
class="SingleAutocompleteSelectField-container-id"
data-test-id="channel-currency-select-input"
>
<div
class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@ -46627,6 +46630,7 @@ exports[`Storyshots Views / Channels / Channel details disabled 1`] = `
>
<div
class="SingleAutocompleteSelectField-container-id"
data-test-id="channel-currency-select-input"
>
<div
class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@ -46887,6 +46891,7 @@ exports[`Storyshots Views / Channels / Channel details loading 1`] = `
>
<div
class="SingleAutocompleteSelectField-container-id"
data-test-id="channel-currency-select-input"
>
<div
class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@ -47146,6 +47151,7 @@ exports[`Storyshots Views / Channels / Channel details with data 1`] = `
>
<div
class="SingleAutocompleteSelectField-container-id"
data-test-id="channel-currency-select-input"
>
<div
class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@ -47372,6 +47378,7 @@ exports[`Storyshots Views / Channels / Channel details with errors 1`] = `
</div>
<p
class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
data-testid="slug-text-input-helper-text"
>
Slug must be unique
</p>
@ -47410,6 +47417,7 @@ exports[`Storyshots Views / Channels / Channel details with errors 1`] = `
>
<div
class="SingleAutocompleteSelectField-container-id"
data-test-id="channel-currency-select-input"
>
<div
class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@ -48149,6 +48157,7 @@ exports[`Storyshots Views / Channels / Channel form with errors 1`] = `
</div>
<p
class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
data-testid="slug-text-input-helper-text"
>
Slug must be unique
</p>
@ -125137,6 +125146,7 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
data-test-id="add-products-button"
tabindex="0"
type="button"
>
@ -126212,6 +126222,7 @@ exports[`Storyshots Views / Orders / Order draft no user permissions 1`] = `
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
data-test-id="add-products-button"
tabindex="0"
type="button"
>
@ -126855,6 +126866,7 @@ exports[`Storyshots Views / Orders / Order draft without lines 1`] = `
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
data-test-id="add-products-button"
tabindex="0"
type="button"
>
@ -127191,6 +127203,7 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
</div>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
data-test-id="create-order-button"
tabindex="0"
type="button"
>
@ -128539,6 +128552,7 @@ exports[`Storyshots Views / Orders / Order list loading 1`] = `
</div>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
data-test-id="create-order-button"
tabindex="0"
type="button"
>
@ -128997,6 +129011,7 @@ exports[`Storyshots Views / Orders / Order list when no data 1`] = `
</div>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
data-test-id="create-order-button"
tabindex="0"
type="button"
>