Skip to content

Commit

Permalink
test(core): add tests for getInputProps when Ctrl+Enter or Shift+Ente…
Browse files Browse the repository at this point in the history 
…r are pressed (#405)
  • Loading branch information
Yannick Croissant authored Jan 25, 2021
1 parent 3b223bd commit 76ae584
Show file tree
Hide file tree
Showing 4 changed files with 297 additions and 46 deletions.
303 changes: 275 additions & 28 deletions packages/autocomplete-core/src/__tests__/getInputProps.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import userEvent from '@testing-library/user-event';

import {
createCollection,
createNavigator,
createPlayground,
createSource,
runAllMicroTasks,
Expand Down Expand Up @@ -908,11 +909,7 @@ describe('getInputProps', () => {
describe('Plain Enter', () => {
test('calls onSelect with item URL', () => {
const onSelect = jest.fn();
const navigator = {
navigate: jest.fn(),
navigateNewTab: jest.fn(),
navigateNewWindow: jest.fn(),
};
const navigator = createNavigator();
const {
inputElement,
refresh,
Expand Down Expand Up @@ -987,11 +984,7 @@ describe('getInputProps', () => {

test('calls navigate with item URL', () => {
const onSelect = jest.fn();
const navigator = {
navigate: jest.fn(),
navigateNewTab: jest.fn(),
navigateNewWindow: jest.fn(),
};
const navigator = createNavigator();
const { inputElement } = createPlayground(createAutocomplete, {
navigator,
defaultActiveItemId: 0,
Expand Down Expand Up @@ -1045,11 +1038,7 @@ describe('getInputProps', () => {
test('calls onInput and onSelect without item URL', async () => {
const onSelect = jest.fn();
const onInput = jest.fn();
const navigator = {
navigate: jest.fn(),
navigateNewTab: jest.fn(),
navigateNewWindow: jest.fn(),
};
const navigator = createNavigator();
const {
inputElement,
refresh,
Expand Down Expand Up @@ -1112,33 +1101,291 @@ describe('getInputProps', () => {
});

describe('Meta+Enter / Ctrl+Enter', () => {
test.todo('skips onSelect without item URL');
test('skips onSelect without item URL', () => {
const onSelect = jest.fn();
const navigator = createNavigator();
const { inputElement } = createPlayground(createAutocomplete, {
navigator,
defaultActiveItemId: 0,
initialState: {
isOpen: true,
collections: [
createCollection({
source: { onSelect },
items: [
{ label: '1', url: '#1' },
{ label: '2', url: '#2' },
],
}),
],
},
});

inputElement.focus();
userEvent.type(inputElement, '{ctrl}{enter}');

expect(onSelect).toHaveBeenCalledTimes(0);
});

test('skips navigateNewTab without item URL', () => {
const onSelect = jest.fn();
const navigator = createNavigator();
const { inputElement } = createPlayground(createAutocomplete, {
navigator,
defaultActiveItemId: 0,
initialState: {
isOpen: true,
collections: [
createCollection({
source: { onSelect },
items: [
{ label: '1', url: '#1' },
{ label: '2', url: '#2' },
],
}),
],
},
});

inputElement.focus();
userEvent.type(inputElement, '{ctrl}{enter}');

expect(navigator.navigateNewTab).toHaveBeenCalledTimes(0);
});

test('calls onSelect with item URL', () => {
const onSelect = jest.fn();
const navigator = createNavigator();
const {
inputElement,
refresh,
setCollections,
setContext,
setIsOpen,
setQuery,
setActiveItemId,
setStatus,
} = createPlayground(createAutocomplete, {
navigator,
defaultActiveItemId: 0,
initialState: {
isOpen: true,
collections: [
createCollection({
source: { onSelect, getItemUrl: ({ item }) => item.url },
items: [
{ label: '1', url: '#1' },
{ label: '2', url: '#2' },
],
}),
],
},
});

inputElement.focus();
userEvent.type(inputElement, '{ctrl}{enter}');

expect(onSelect).toHaveBeenCalledTimes(1);
expect(onSelect).toHaveBeenCalledWith({
event: expect.any(KeyboardEvent),
item: {
label: '1',
url: '#1',
},
itemInputValue: '',
itemUrl: '#1',
refresh,
setCollections,
setContext,
setIsOpen,
setQuery,
setActiveItemId,
setStatus,
source: expect.any(Object),
state: expect.any(Object),
});
});

test.todo('skips navigateNewTab without item URL');
test('calls navigateNewTab with item URL', () => {
const onSelect = jest.fn();
const navigator = createNavigator();
const { inputElement } = createPlayground(createAutocomplete, {
navigator,
defaultActiveItemId: 0,
initialState: {
isOpen: true,
collections: [
createCollection({
source: { onSelect, getItemUrl: ({ item }) => item.url },
items: [
{ label: '1', url: '#1' },
{ label: '2', url: '#2' },
],
}),
],
},
});

test.todo('calls onSelect with item URL');
inputElement.focus();
userEvent.type(inputElement, '{ctrl}{enter}');

test.todo('calls navigateNewTab with item URL');
expect(navigator.navigateNewTab).toHaveBeenCalledTimes(1);
expect(navigator.navigateNewTab).toHaveBeenCalledWith({
item: {
label: '1',
url: '#1',
},
itemUrl: '#1',
state: expect.any(Object),
});
});
});

describe('Shift+Enter', () => {
test.todo('skips onSelect without item URL');
test('skips onSelect without item URL', () => {
const onSelect = jest.fn();
const navigator = createNavigator();
const { inputElement } = createPlayground(createAutocomplete, {
navigator,
defaultActiveItemId: 0,
initialState: {
isOpen: true,
collections: [
createCollection({
source: { onSelect },
items: [
{ label: '1', url: '#1' },
{ label: '2', url: '#2' },
],
}),
],
},
});

inputElement.focus();
userEvent.type(inputElement, '{shift}{enter}');

expect(onSelect).toHaveBeenCalledTimes(0);
});

test('skips navigateNewWindow without item URL', () => {
const onSelect = jest.fn();
const navigator = createNavigator();
const { inputElement } = createPlayground(createAutocomplete, {
navigator,
defaultActiveItemId: 0,
initialState: {
isOpen: true,
collections: [
createCollection({
source: { onSelect },
items: [
{ label: '1', url: '#1' },
{ label: '2', url: '#2' },
],
}),
],
},
});

inputElement.focus();
userEvent.type(inputElement, '{shift}{enter}');

expect(navigator.navigateNewWindow).toHaveBeenCalledTimes(0);
});

test('calls onSelect with item URL', () => {
const onSelect = jest.fn();
const navigator = createNavigator();
const {
inputElement,
refresh,
setCollections,
setContext,
setIsOpen,
setQuery,
setActiveItemId,
setStatus,
} = createPlayground(createAutocomplete, {
navigator,
defaultActiveItemId: 0,
initialState: {
isOpen: true,
collections: [
createCollection({
source: { onSelect, getItemUrl: ({ item }) => item.url },
items: [
{ label: '1', url: '#1' },
{ label: '2', url: '#2' },
],
}),
],
},
});

inputElement.focus();
userEvent.type(inputElement, '{shift}{enter}');

expect(onSelect).toHaveBeenCalledTimes(1);
expect(onSelect).toHaveBeenCalledWith({
event: expect.any(KeyboardEvent),
item: {
label: '1',
url: '#1',
},
itemInputValue: '',
itemUrl: '#1',
refresh,
setCollections,
setContext,
setIsOpen,
setQuery,
setActiveItemId,
setStatus,
source: expect.any(Object),
state: expect.any(Object),
});
});

test.todo('skips navigateNewWindow without item URL');
test('calls navigateNewWindow with item URL', () => {
const onSelect = jest.fn();
const navigator = createNavigator();
const { inputElement } = createPlayground(createAutocomplete, {
navigator,
defaultActiveItemId: 0,
initialState: {
isOpen: true,
collections: [
createCollection({
source: { onSelect, getItemUrl: ({ item }) => item.url },
items: [
{ label: '1', url: '#1' },
{ label: '2', url: '#2' },
],
}),
],
},
});

test.todo('calls onSelect with item URL');
inputElement.focus();
userEvent.type(inputElement, '{shift}{enter}');

test.todo('calls navigateNewWindow with item URL');
expect(navigator.navigateNewWindow).toHaveBeenCalledTimes(1);
expect(navigator.navigateNewWindow).toHaveBeenCalledWith({
item: {
label: '1',
url: '#1',
},
itemUrl: '#1',
state: expect.any(Object),
});
});
});

describe('Alt+Enter', () => {
test('triggers default browser behavior', () => {
const onSelect = jest.fn();
const navigator = {
navigate: jest.fn(),
navigateNewTab: jest.fn(),
navigateNewWindow: jest.fn(),
};
const navigator = createNavigator();
const { inputElement } = createPlayground(createAutocomplete, {
navigator,
defaultActiveItemId: 0,
Expand Down
23 changes: 5 additions & 18 deletions packages/autocomplete-core/src/__tests__/navigator.test.ts
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,12 @@
import userEvent from '@testing-library/user-event';

import { createCollection, createPlayground } from '../../../../test/utils';
import {
createCollection,
createNavigator,
createPlayground,
} from '../../../../test/utils';
import { createAutocomplete } from '../createAutocomplete';

type AutocompleteNavigator = {
navigate(...args: any[]): void;
navigateNewTab(...args: any[]): void;
navigateNewWindow(...args: any[]): void;
};

function createNavigator(
navigator?: AutocompleteNavigator
): AutocompleteNavigator {
return {
navigate: jest.fn(),
navigateNewTab: jest.fn(),
navigateNewWindow: jest.fn(),
...navigator,
};
}

describe('navigator', () => {
describe('default navigator', () => {
let focusNewTab;
Expand Down
16 changes: 16 additions & 0 deletions test/utils/createNavigator.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
type AutocompleteNavigator = {
navigate(...args: any[]): void;
navigateNewTab(...args: any[]): void;
navigateNewWindow(...args: any[]): void;
};

export function createNavigator(
navigator?: Partial<AutocompleteNavigator>
): AutocompleteNavigator {
return {
navigate: jest.fn(),
navigateNewTab: jest.fn(),
navigateNewWindow: jest.fn(),
...navigator,
};
}
Loading

0 comments on commit 76ae584

Please sign in to comment.