Skip to content
This repository has been archived by the owner on Jun 14, 2019. It is now read-only.

Commit

Permalink
Merge pull request #361 from elvisisking/304-3
Browse files Browse the repository at this point in the history
  • Loading branch information
pure-bot[bot] authored May 29, 2019
2 parents 014a633 + efd7e6d commit facd166
Show file tree
Hide file tree
Showing 99 changed files with 425 additions and 755 deletions.
27 changes: 9 additions & 18 deletions app/ui-react/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -636,28 +636,19 @@ We now have a page that is resilient to page refreshes, can be shared with other
#### Adding test identifiers
UI components that have user interaction should define a `data-testid` attribute. Here are a few components that might need a test identifier: `ButtonLink`, `button`, `a`, `input`, `Link`, `PfVerticalNavItem`, `PfNavLink`, `li` used in menus, and `DropdownItem`.
UI components that have user interaction should define a `data-testid` attribute. Here are a few components that might need a test identifier: `a`, `button`, `Button`, `ButtonLink`, `Card`, `DropdownItem`, `FormControl`, `Grid.Row`, `input`, `Label`, `li`, `Link`, `ListViewItem`, `PfNavLink`, `PfVerticalNavItem`, and `Title`.
The `toTestId` utilitity function, which is found in the `testIdGenerator.ts` file in the `utils` folder of the `@syndesis/ui` package, should be used to generate **all** test identifiers. This function ensures the identifier is formatted correctly and only contains valid characters. It also provides a way to separate segments of the identifier if segments are desired.
Test identifiers that do not contain any user-defined text should be a hardcoded string. **Only alphanumeric characters and hyphens should be used.** A common convention, though not mandatory, is to format the identifier using the file component name and the widget whose ID is being set. For example, a `data-testid` value of `api-connector-details-form-cancel-button` might be found on a button in the `ApiConnectorDetailsForm` component.
The `toTestId` function accepts one or more strings and inserts a dash (`-`) character between them. It is recommended to have the first string be the name of the component. Here is an example of how to use the `toTestId` function:
When a test identifier needs to contain some user-defined text, like for a card, list item, or row, the `toValidHtmlId` utility function, found in the `@syndesis/ui/helpers.ts` file, should be used to format the user-defined text. This function ensures the identifier only contains valid characters. Here is an example:
```tsx
export class ExtensionListItem extends React.Component<
...
<Button
data-testid={`${toTestId(
'ExtensionListItem',
this.props.extensionName,
'delete-button'
)}`}
...
>
{this.props.i18nDelete}
</Button>
```
The above code produces this test ID for an extension with the name of "My Extension": `extensionlistitem-my-extension-delete-button`.
data-testid={`integrations-list-item-${toValidHtmlId(
this.props.integrationName
)}-list-item`}
```
The above code produces this test ID an integration with the name of "My Integration": `integrations-list-item-my-integration-list-item`.
#### Unit testing
Expand Down
47 changes: 14 additions & 33 deletions app/ui-react/packages/ui/src/Connection/ConnectionCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,12 @@ import * as H from '@syndesis/history';
import { Card, DropdownKebab, Icon } from 'patternfly-react';
import * as React from 'react';
import { Link } from 'react-router-dom';
import { toValidHtmlId } from '../helpers';
import {
ConfirmationButtonStyle,
ConfirmationDialog,
ConfirmationIconType,
} from '../Shared';
import { toTestId } from '../utils';
import './ConnectionCard.css';

export interface IConnectionCardMenuProps {
Expand Down Expand Up @@ -108,7 +108,11 @@ export class ConnectionCard extends React.PureComponent<
onConfirm={this.doDelete}
/>
)}
<Card matchHeight={true} className={'connection-card'}>
<Card
data-testid={`connection-card-${toValidHtmlId(this.props.name)}-card`}
matchHeight={true}
className={'connection-card'}
>
<Card.Heading
className={
this.props.techPreview
Expand All @@ -119,7 +123,7 @@ export class ConnectionCard extends React.PureComponent<
{this.props.techPreview ? (
<Level gutter={'md'}>
<LevelItem>&nbsp;</LevelItem>
<LevelItem>
<LevelItem data-testid={'connection-card-tech-preview-heading'}>
{this.props.i18nTechPreview!}
{' '}
<Popover
Expand Down Expand Up @@ -147,11 +151,7 @@ export class ConnectionCard extends React.PureComponent<
>
<li role={'presentation'} key={0}>
<Link
data-testid={`${toTestId(
'ConnectionCard',
this.props.name,
'view-action'
)}`}
data-testid={'connection-card-view-action'}
to={this.props.href}
role={'menuitem'}
tabIndex={1}
Expand All @@ -161,11 +161,7 @@ export class ConnectionCard extends React.PureComponent<
</li>
<li role={'presentation'} key={1}>
<Link
data-testid={`${toTestId(
'ConnectionCard',
this.props.name,
'edit-action'
)}`}
data-testid={'connection-card-edit-action'}
to={this.props.menuProps.editHref}
role={'menuitem'}
tabIndex={2}
Expand All @@ -186,11 +182,7 @@ export class ConnectionCard extends React.PureComponent<
position={'bottom'}
>
<a
data-testid={`${toTestId(
'ConnectionCard',
this.props.name,
'delete-action'
)}`}
data-testid={'connection-card-delete-action'}
href={'javascript:void(0)'}
onClick={this.showDeleteDialog}
role={'menuitem'}
Expand All @@ -201,11 +193,7 @@ export class ConnectionCard extends React.PureComponent<
</Tooltip>
) : (
<a
data-testid={`${toTestId(
'ConnectionCard',
this.props.name,
'delete-action'
)}`}
data-testid={'connection-card-delete-action'}
href={'javascript:void(0)'}
onClick={this.showDeleteDialog}
role={'menuitem'}
Expand All @@ -220,11 +208,7 @@ export class ConnectionCard extends React.PureComponent<
)}
</Card.Heading>
<Link
data-testid={`${toTestId(
'ConnectionCard',
this.props.name,
'details-link'
)}`}
data-testid={'connection-card-details-link'}
to={this.props.href}
className={'connection-card__content'}
>
Expand All @@ -236,11 +220,7 @@ export class ConnectionCard extends React.PureComponent<
<Title
size="lg"
className="connection-card__title h2"
data-testid={`${toTestId(
'ConnectionCard',
this.props.name,
'title'
)}`}
data-testid={'connection-card-title'}
>
{this.props.name}
</Title>
Expand All @@ -254,6 +234,7 @@ export class ConnectionCard extends React.PureComponent<
className={
'connection-card__footer--config-required alert alert-warning'
}
data-testid={'connection-card-config-required-footer'}
>
<Icon type={'pf'} name={'warning-triangle-o'} size={'2x'} />
{this.props.i18nConfigurationRequired}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import * as H from '@syndesis/history';
import classnames from 'classnames';
import * as React from 'react';
import { ButtonLink, Loader } from '../Layout';
import { toTestId } from '../utils';

/**
* @param header - a PatternFly Wizard Steps component.
Expand Down Expand Up @@ -95,7 +94,7 @@ export const ConnectionCreatorLayout: React.FunctionComponent<
</div>
<div className="wizard-pf-footer integration-editor-layout__footer">
<ButtonLink
data-testid={`${toTestId('ConnectionCreatorLayout', 'back-button')}`}
data-testid={'connection-creator-layout-back-button'}
onClick={onBack}
href={backHref}
className={'wizard-pf-back'}
Expand All @@ -106,7 +105,7 @@ export const ConnectionCreatorLayout: React.FunctionComponent<
<div className={'wizard-pf-extrabuttons'}>{extraButtons}</div>
)}
<ButtonLink
data-testid={`${toTestId('ConnectionCreatorLayout', 'next-button')}`}
data-testid={'connection-creator-layout-next-button'}
onClick={onNext}
href={nextHref}
as={'primary'}
Expand All @@ -123,10 +122,7 @@ export const ConnectionCreatorLayout: React.FunctionComponent<
)}
</ButtonLink>
<ButtonLink
data-testid={`${toTestId(
'ConnectionCreatorLayout',
'cancel-button'
)}`}
data-testid={'connection-creator-layout-cancel-button'}
onClick={onCancel}
href={cancelHref}
className={'wizard-pf-cancel'}
Expand Down
21 changes: 4 additions & 17 deletions app/ui-react/packages/ui/src/Connection/ConnectionDetailsForm.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { Alert, Button, Card } from 'patternfly-react';
import * as React from 'react';
import { Container, Loader, PageSection } from '../Layout';
import { toTestId } from '../utils';
import './ConnectionDetailsForm.css';

export interface IConnectionDetailsValidationResult {
Expand Down Expand Up @@ -108,10 +107,7 @@ export class ConnectionDetailsForm extends React.Component<
<div>
{this.props.isEditing ? (
<Button
data-testid={`${toTestId(
'ConnectionDetailsForm',
'validate-button'
)}`}
data-testid={'connection-details-form-validate-button'}
bsStyle="default"
disabled={this.props.isWorking || !this.props.isValid}
onClick={this.props.onValidate}
Expand All @@ -123,10 +119,7 @@ export class ConnectionDetailsForm extends React.Component<
</Button>
) : (
<Button
data-testid={`${toTestId(
'ConnectionDetailsForm',
'edit-button'
)}`}
data-testid={'connection-details-form-edit-button'}
bsStyle="primary"
onClick={this.props.onStartEditing}
>
Expand All @@ -138,10 +131,7 @@ export class ConnectionDetailsForm extends React.Component<
</Card.Body>
<Card.Footer>
<Button
data-testid={`${toTestId(
'ConnectionDetailsForm',
'cancel-button'
)}`}
data-testid={'connection-details-form-cancel-button'}
bsStyle="default"
className="connection-details-form__editButton"
disabled={this.props.isWorking}
Expand All @@ -150,10 +140,7 @@ export class ConnectionDetailsForm extends React.Component<
{this.props.i18nCancelLabel}
</Button>
<Button
data-testid={`${toTestId(
'ConnectionDetailsForm',
'save-button'
)}`}
data-testid={'connection-details-form-save-button'}
bsStyle="primary"
className="connection-details-form__editButton"
disabled={this.props.isWorking || !this.props.isValid}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import * as H from '@syndesis/history';
import * as React from 'react';
import { ButtonLink, PageSection } from '../Layout';
import { IListViewToolbarProps, ListViewToolbar } from '../Shared';
import { toTestId } from '../utils';

export interface IConnectionsListViewProps extends IListViewToolbarProps {
createConnectionButtonStyle?: 'primary' | 'default';
Expand All @@ -20,10 +19,7 @@ export class ConnectionsListView extends React.Component<
<ListViewToolbar {...this.props}>
<div className="form-group">
<ButtonLink
data-testid={`${toTestId(
'ConnectionsListView',
'create-connection-button'
)}`}
data-testid={'connections-list-view-create-connection-button'}
href={this.props.linkToConnectionCreate}
as={this.props.createConnectionButtonStyle || 'primary'}
>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { Text } from '@patternfly/react-core';
import { Card, CardBody } from 'patternfly-react';
import * as React from 'react';
import { toTestId } from '../../utils';
import './ApiConnectorDetailCard.css';

export interface IApiConnectorDetailCardProps {
Expand All @@ -23,7 +22,7 @@ export class ApiConnectorDetailCard extends React.Component<
</div>
<div
className="api-connector__title h2"
data-testid={`${toTestId('ApiConnectorDetailCard', 'title')}`}
data-testid={'api-connector-detail-card-title'}
>
{this.props.name}
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { Button, Card } from 'patternfly-react';
import * as React from 'react';
import { Loader } from '../../Layout';
import { toTestId } from '../../utils';
import './ApiConnectorDetailsForm.css';

export interface IApiConnectorDetailsFormProps {
Expand Down Expand Up @@ -97,10 +96,7 @@ export class ApiConnectorDetailsForm extends React.Component<
src={this.props.apiConnectorIcon}
/>
<input
data-testid={`${toTestId(
'ApiConnectorDetailsForm',
'icon-file-input'
)}`}
data-testid={'api-connector-details-form-icon-file-input'}
type="file"
id="iconFileInput"
onChange={this.props.onUploadImage}
Expand All @@ -113,10 +109,7 @@ export class ApiConnectorDetailsForm extends React.Component<
{this.props.isEditing ? (
<>
<Button
data-testid={`${toTestId(
'ApiConnectorDetailsForm',
'cancel-button'
)}`}
data-testid={'api-connector-details-form-cancel-button'}
bsStyle="default"
className="api-connector-details-form__editButton"
disabled={this.props.isWorking}
Expand All @@ -125,10 +118,7 @@ export class ApiConnectorDetailsForm extends React.Component<
{this.props.i18nCancelLabel}
</Button>
<Button
data-testid={`${toTestId(
'ApiConnectorDetailsForm',
'save-button'
)}`}
data-testid={'api-connector-details-form-save-button'}
bsStyle="primary"
className="api-connector-details-form__editButton"
disabled={this.props.isWorking}
Expand All @@ -140,10 +130,7 @@ export class ApiConnectorDetailsForm extends React.Component<
</>
) : (
<Button
data-testid={`${toTestId(
'ApiConnectorDetailsForm',
'edit-button'
)}`}
data-testid={'api-connector-details-form-edit-button'}
bsStyle="primary"
onClick={this.props.onStartEditing}
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,13 @@ import {
Tooltip,
} from 'patternfly-react';
import * as React from 'react';
import { toValidHtmlId } from '../../helpers';
import { ButtonLink } from '../../Layout';
import {
ConfirmationButtonStyle,
ConfirmationDialog,
ConfirmationIconType,
} from '../../Shared';
import { toTestId } from '../../utils';

export interface IApiConnectorListItemProps {
apiConnectorDescription?: string;
Expand Down Expand Up @@ -109,18 +109,17 @@ export class ApiConnectorListItem extends React.Component<
onConfirm={this.doDelete}
/>
<ListViewItem
data-testid={`api-connector-list-item-${toValidHtmlId(
this.props.apiConnectorName
)}-list-item`}
actions={
<div className="form-group">
<OverlayTrigger
overlay={this.getDetailsTooltip()}
placement="top"
>
<ButtonLink
data-testid={`${toTestId(
'ApiConnectorListItem',
this.props.apiConnectorName,
'details-button'
)}`}
data-testid={'api-connector-list-item-details-button'}
href={this.props.detailsPageLink}
as={'default'}
>
Expand All @@ -129,11 +128,7 @@ export class ApiConnectorListItem extends React.Component<
</OverlayTrigger>
<OverlayTrigger overlay={this.getDeleteTooltip()} placement="top">
<Button
data-testid={`${toTestId(
'ApiConnectorListItem',
this.props.apiConnectorName,
'delete-button'
)}`}
data-testid={'api-connector-list-item-delete-button'}
bsStyle="default"
disabled={this.props.usedBy !== 0}
onClick={this.showDeleteDialog}
Expand Down
Loading

0 comments on commit facd166

Please sign in to comment.