Skip to content

N
nexpie-grafana-theme
Commit 2d65845b by Johannes Schill
Options

Update (js-) tests and snapshots for react-select 2 #13425

parent 7e7c7fe6
Showing with 134 additions and 140 deletions
public/app/core/components/Picker/DescriptionPicker.tsx
......@@ -42,7 +42,6 @@ class DescriptionPicker extends Component<Props, any> {
onChange={onSelected}
getOptionValue={i => i.value}
getOptionLabel={i => i.label}
// menuIsOpen={true} // debug
/>
</div>
);
......
public/app/core/components/Picker/PickerOption.test.tsx
......@@ -3,10 +3,12 @@ import renderer from 'react-test-renderer';
import PickerOption from './PickerOption';
const model = {
onSelect: () => {},
onFocus: () => {},
isFocused: () => {},
option: {
cx: jest.fn(),
clearValue: jest.fn(),
onSelect: jest.fn(),
getStyles: jest.fn(),
children: 'Model title',
data: {
title: 'Model title',
avatarUrl: 'url/to/avatar',
label: 'User picker label',
......
public/app/core/components/Picker/PickerOption.tsx
......@@ -2,15 +2,12 @@ import React from 'react';
import { components } from 'react-select';
import { OptionProps } from 'react-select/lib/components/Option';
export interface Props {
children: Element;
isSelected: boolean;
// https://github.com/JedWatson/react-select/issues/3038
interface ExtendedOptionProps extends OptionProps<any> {
data: any;
getStyles: any;
className?: string;
}
export const PickerOption = (props: OptionProps<any>) => {
export const PickerOption = (props: ExtendedOptionProps) => {
const { children, data } = props;
return (
<components.Option {...props}>
......
public/app/core/components/Picker/TeamPicker.tsx
......@@ -80,7 +80,6 @@ export class TeamPicker extends Component<Props, State> {
noOptionsMessage={() => 'No teams found'}
getOptionValue={i => i.id}
getOptionLabel={i => i.label}
// menuIsOpen={true}
/>
</div>
);
......
public/app/core/components/Picker/UserPicker.tsx
......@@ -36,7 +36,7 @@ export class UserPicker extends Component<Props, State> {
this.setState({ isLoading: true });
return backendSrv
.get(`/api/org/users?query=${query}&limit=1`)
.get(`/api/org/users?query=${query}&limit=10`)
.then(result => {
return result.map(user => ({
id: user.userId,
......@@ -75,7 +75,6 @@ export class UserPicker extends Component<Props, State> {
noOptionsMessage={() => 'No users found'}
getOptionValue={i => i.id}
getOptionLabel={i => i.label}
// menuIsOpen={true}
/>
</div>
);
......
public/app/core/components/Picker/__snapshots__/PickerOption.test.tsx.snap
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`PickerOption renders correctly 1`] = `
<button
className="user-picker-option__button btn btn-link class-for-user-picker"
onMouseDown={[Function]}
onMouseEnter={[Function]}
onMouseMove={[Function]}
title="Model title"
>
<img
alt="User picker label"
className="user-picker-option__avatar"
src="url/to/avatar"
/>
</button>
<div>
<div
className="description-picker-option__button btn btn-link width-19"
>
<img
alt="User picker label"
className="user-picker-option__avatar"
src="url/to/avatar"
/>
Model title
</div>
</div>
`;
public/app/core/components/Picker/__snapshots__/TeamPicker.test.tsx.snap
......@@ -5,85 +5,86 @@ exports[`TeamPicker renders correctly 1`] = `
className="user-picker"
>
<div
className="Select gf-form-input gf-form-input--form-dropdown is-clearable is-loading is-searchable Select--single"
className="css-0 gf-form-input gf-form-input--form-dropdown"
onKeyDown={[Function]}
>
<div
className="Select-control"
onKeyDown={[Function]}
className="css-0 gf-form-select2__control"
onMouseDown={[Function]}
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
>
<div
className="Select-multi-value-wrapper"
id="react-select-2--value"
className="css-0 gf-form-select2__value-container"
>
<div
className="Select-placeholder"
className="css-0 gf-form-select2__placeholder"
>
Loading...
Select a team
</div>
<div
className="Select-input"
style={
Object {
"display": "inline-block",
}
}
className="css-0"
>
<input
aria-activedescendant="react-select-2--value"
aria-expanded="false"
aria-haspopup="false"
aria-owns=""
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
required={false}
role="combobox"
style={
Object {
"boxSizing": "content-box",
"width": "5px",
}
}
value=""
/>
<div
className="gf-form-select2__input"
style={
Object {
"height": 0,
"left": 0,
"overflow": "scroll",
"position": "absolute",
"top": 0,
"visibility": "hidden",
"whiteSpace": "pre",
"display": "inline-block",
}
}
>
<input
aria-autocomplete="list"
autoCapitalize="none"
autoComplete="off"
autoCorrect="off"
disabled={false}
id="react-select-2-input"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
spellCheck="false"
style={
Object {
"background": 0,
"border": 0,
"boxSizing": "content-box",
"color": "inherit",
"fontSize": "inherit",
"opacity": 1,
"outline": 0,
"padding": 0,
"width": "1px",
}
}
tabIndex="0"
type="text"
value=""
/>
<div
style={
Object {
"height": 0,
"left": 0,
"overflow": "scroll",
"position": "absolute",
"top": 0,
"visibility": "hidden",
"whiteSpace": "pre",
}
}
>
</div>
</div>
</div>
</div>
<span
aria-hidden="true"
className="Select-loading-zone"
>
<span
className="Select-loading"
/>
</span>
<span
className="Select-arrow-zone"
onMouseDown={[Function]}
<div
className="css-0 gf-form-select2__indicators"
>
<span
className="Select-arrow"
onMouseDown={[Function]}
className="gf-form-select2__select-arrow "
/>
</span>
</div>
</div>
</div>
</div>
......
public/app/core/components/Picker/__snapshots__/UserPicker.test.tsx.snap
......@@ -5,85 +5,86 @@ exports[`UserPicker renders correctly 1`] = `
className="user-picker"
>
<div
className="Select gf-form-input gf-form-input--form-dropdown is-clearable is-loading is-searchable Select--single"
className="css-0 gf-form-input gf-form-input--form-dropdown"
onKeyDown={[Function]}
>
<div
className="Select-control"
onKeyDown={[Function]}
className="css-0 gf-form-select2__control"
onMouseDown={[Function]}
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
>
<div
className="Select-multi-value-wrapper"
id="react-select-2--value"
className="css-0 gf-form-select2__value-container"
>
<div
className="Select-placeholder"
className="css-0 gf-form-select2__placeholder"
>
Loading...
Select user
</div>
<div
className="Select-input"
style={
Object {
"display": "inline-block",
}
}
className="css-0"
>
<input
aria-activedescendant="react-select-2--value"
aria-expanded="false"
aria-haspopup="false"
aria-owns=""
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
required={false}
role="combobox"
style={
Object {
"boxSizing": "content-box",
"width": "5px",
}
}
value=""
/>
<div
className="gf-form-select2__input"
style={
Object {
"height": 0,
"left": 0,
"overflow": "scroll",
"position": "absolute",
"top": 0,
"visibility": "hidden",
"whiteSpace": "pre",
"display": "inline-block",
}
}
>
<input
aria-autocomplete="list"
autoCapitalize="none"
autoComplete="off"
autoCorrect="off"
disabled={false}
id="react-select-2-input"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
spellCheck="false"
style={
Object {
"background": 0,
"border": 0,
"boxSizing": "content-box",
"color": "inherit",
"fontSize": "inherit",
"opacity": 1,
"outline": 0,
"padding": 0,
"width": "1px",
}
}
tabIndex="0"
type="text"
value=""
/>
<div
style={
Object {
"height": 0,
"left": 0,
"overflow": "scroll",
"position": "absolute",
"top": 0,
"visibility": "hidden",
"whiteSpace": "pre",
}
}
>
</div>
</div>
</div>
</div>
<span
aria-hidden="true"
className="Select-loading-zone"
>
<span
className="Select-loading"
/>
</span>
<span
className="Select-arrow-zone"
onMouseDown={[Function]}
<div
className="css-0 gf-form-select2__indicators"
>
<span
className="Select-arrow"
onMouseDown={[Function]}
className="gf-form-select2__select-arrow "
/>
</span>
</div>
</div>
</div>
</div>
......
public/app/features/teams/__snapshots__/TeamMembers.test.tsx.snap
......@@ -60,7 +60,6 @@ exports[`Render should render component 1`] = `
<UserPicker
className="width-30"
onSelected={[Function]}
value={null}
/>
</div>
</div>
......@@ -155,7 +154,6 @@ exports[`Render should render team members 1`] = `
<UserPicker
className="width-30"
onSelected={[Function]}
value={null}
/>
</div>
</div>
......@@ -376,7 +374,6 @@ exports[`Render should render team members when sync enabled 1`] = `
<UserPicker
className="width-30"
onSelected={[Function]}
value={null}
/>
</div>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment