Fix search field visibility on space selector screen (#54115)

This commit is contained in:
Larry Gregory 2020-01-07 13:05:40 -05:00 committed by GitHub
parent dc8ff0d270
commit 4f9bf11620
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 47 additions and 2 deletions

View file

@ -5,10 +5,16 @@
*/
import React from 'react';
import { renderWithIntl, shallowWithIntl } from 'test_utils/enzyme_helpers';
import {
renderWithIntl,
shallowWithIntl,
mountWithIntl,
nextTick,
} from 'test_utils/enzyme_helpers';
import { Space } from '../../../common/model/space';
import { spacesManagerMock } from '../../lib/mocks';
import { SpaceSelector } from './space_selector';
import { findTestSubject } from 'test_utils/find_test_subject';
function getSpacesManager(spaces: Space[] = []) {
const manager = spacesManagerMock.create();
@ -74,3 +80,41 @@ test('it queries for spaces when not provided on props', () => {
expect(spacesManager.getSpaces).toHaveBeenCalledTimes(1);
});
});
test('it renders the search bar when there are 8 or more spaces', async () => {
const spaces = [1, 2, 3, 4, 5, 6, 7, 8].map(num => ({
id: `space-${num}`,
name: `Space ${num}`,
disabledFeatures: [],
}));
const spacesManager = getSpacesManager(spaces);
const wrapper = mountWithIntl(
<SpaceSelector.WrappedComponent spacesManager={spacesManager as any} intl={null as any} />
);
await nextTick();
wrapper.update();
expect(findTestSubject(wrapper, 'spaceSelectorSearchField')).toHaveLength(1);
});
test('it does not render the search bar when there are fewer than 8 spaces', async () => {
const spaces = [1, 2, 3, 4, 5, 6, 7].map(num => ({
id: `space-${num}`,
name: `Space ${num}`,
disabledFeatures: [],
}));
const spacesManager = getSpacesManager(spaces);
const wrapper = mountWithIntl(
<SpaceSelector.WrappedComponent spacesManager={spacesManager as any} intl={null as any} />
);
await nextTick();
wrapper.update();
expect(findTestSubject(wrapper, 'spaceSelectorSearchField')).toHaveLength(0);
});

View file

@ -155,7 +155,7 @@ class SpaceSelectorUI extends Component<Props, State> {
public getSearchField = () => {
const { intl } = this.props;
if (!this.props.spaces || this.props.spaces.length < SPACE_SEARCH_COUNT_THRESHOLD) {
if (!this.state.spaces || this.state.spaces.length < SPACE_SEARCH_COUNT_THRESHOLD) {
return null;
}
return (
@ -163,6 +163,7 @@ class SpaceSelectorUI extends Component<Props, State> {
{
// @ts-ignore onSearch doesn't exist on EuiFieldSearch
<EuiFieldSearch
data-test-subj="spaceSelectorSearchField"
className="spcSpaceSelector__searchField"
placeholder={intl.formatMessage({
id: 'xpack.spaces.spaceSelector.findSpacePlaceholder',