remove completion actions/reducer

jh-changes
Shin'ya Ueoka 7 years ago
parent 4cb17031d1
commit 45368384d1
  1. 22
      src/actions/completion.js
  2. 26
      src/actions/console.js
  3. 10
      src/actions/index.js
  4. 6
      src/components/completion.js
  5. 20
      src/components/console.js
  6. 14
      src/pages/console.js
  7. 68
      src/reducers/completion.js
  8. 60
      src/reducers/console.js
  9. 3
      src/reducers/index.js
  10. 27
      test/actions/completion.test.js
  11. 30
      test/actions/console.test.js
  12. 90
      test/reducers/completion.test.js
  13. 87
      test/reducers/console.test.js

@ -1,22 +0,0 @@
import actions from 'actions';
const setItems = (groups) => {
return {
type: actions.COMPLETION_SET_ITEMS,
groups,
};
};
const selectNext = () => {
return {
type: actions.COMPLETION_SELECT_NEXT
};
};
const selectPrev = () => {
return {
type: actions.COMPLETION_SELECT_PREV
};
};
export { setItems, selectNext, selectPrev };

@ -7,6 +7,19 @@ const showCommand = (text) => {
}; };
}; };
const showError = (text) => {
return {
type: actions.CONSOLE_SHOW_ERROR,
text: text
};
};
const hide = () => {
return {
type: actions.CONSOLE_HIDE
};
};
const setCompletions = (completions) => { const setCompletions = (completions) => {
return { return {
type: actions.CONSOLE_SET_COMPLETIONS, type: actions.CONSOLE_SET_COMPLETIONS,
@ -14,17 +27,18 @@ const setCompletions = (completions) => {
}; };
}; };
const showError = (text) => { const completionNext = () => {
return { return {
type: actions.CONSOLE_SHOW_ERROR, type: actions.CONSOLE_COMPLETION_NEXT,
text: text
}; };
}; };
const hide = () => { const completionPrev = () => {
return { return {
type: actions.CONSOLE_HIDE type: actions.CONSOLE_COMPLETION_PREV,
}; };
}; };
export { showCommand, setCompletions, showError, hide }; export {
showCommand, showError, hide, setCompletions, completionNext, completionPrev
};

@ -1,9 +1,11 @@
export default { export default {
// console commands // console commands
CONSOLE_SHOW_COMMAND: 'vimvixen.console.show.command', CONSOLE_SHOW_COMMAND: 'console.show.command',
CONSOLE_SET_COMPLETIONS: 'vimvixen.console.set.completions', CONSOLE_SET_COMPLETIONS: 'console.set.completions',
CONSOLE_SHOW_ERROR: 'vimvixen.console.show.error', CONSOLE_SHOW_ERROR: 'console.show.error',
CONSOLE_HIDE: 'vimvixen.console.hide', CONSOLE_HIDE: 'console.hide',
CONSOLE_COMPLETION_NEXT: 'console.completion.next',
CONSOLE_COMPLETION_PREV: 'console.completion.prev',
// User input // User input
INPUT_KEY_PRESS: 'input.key,press', INPUT_KEY_PRESS: 'input.key,press',

@ -6,15 +6,15 @@ export default class Completion {
} }
update() { update() {
let state = this.store.getState().completion; let state = this.store.getState().console;
if (JSON.stringify(this.prevState) === JSON.stringify(state)) { if (JSON.stringify(this.prevState) === JSON.stringify(state)) {
return; return;
} }
this.wrapper.innerHTML = ''; this.wrapper.innerHTML = '';
for (let i = 0; i < state.groups.length; ++i) { for (let i = 0; i < state.completions.length; ++i) {
let group = state.groups[i]; let group = state.completions[i];
let title = this.createCompletionTitle(group.name); let title = this.createCompletionTitle(group.name);
this.wrapper.append(title); this.wrapper.append(title);

@ -1,5 +1,5 @@
import messages from 'content/messages'; import messages from 'content/messages';
import * as completionActions from 'actions/completion'; import * as consoleActions from 'actions/console';
export default class ConsoleComponent { export default class ConsoleComponent {
constructor(wrapper, store) { constructor(wrapper, store) {
@ -39,9 +39,9 @@ export default class ConsoleComponent {
}).then(this.onBlur); }).then(this.onBlur);
case KeyboardEvent.DOM_VK_TAB: case KeyboardEvent.DOM_VK_TAB:
if (e.shiftKey) { if (e.shiftKey) {
this.store.dispatch(completionActions.selectPrev()); this.store.dispatch(consoleActions.completionPrev());
} else { } else {
this.store.dispatch(completionActions.selectNext()); this.store.dispatch(consoleActions.completionNext());
} }
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
@ -66,7 +66,7 @@ export default class ConsoleComponent {
type: messages.CONSOLE_QUERY_COMPLETIONS, type: messages.CONSOLE_QUERY_COMPLETIONS,
text: e.target.value text: e.target.value
}).then((completions) => { }).then((completions) => {
this.store.dispatch(completionActions.setItems(completions)); this.store.dispatch(consoleActions.setCompletions(completions));
}); });
} }
@ -85,6 +85,18 @@ export default class ConsoleComponent {
this.hideError(); this.hideError();
} }
if (state.groupSelection >= 0 && state.itemSelection >= 0) {
let group = state.completions[state.groupSelection];
let item = group.items[state.itemSelection];
this.setCommandValue(item.content);
} else if (state.completions.length > 0 &&
JSON.stringify(this.prevState.completions) ===
JSON.stringify(state.completions)) {
// Reset input only completion groups not changed (unselected an item in
// completion) in order to avoid to override previous input
this.setCommandCompletionOrigin();
}
this.prevState = state; this.prevState = state;
} }

@ -9,7 +9,6 @@ import * as consoleActions from 'actions/console';
const store = createStore(reducers); const store = createStore(reducers);
let completionComponent = null; let completionComponent = null;
let consoleComponent = null; let consoleComponent = null;
let prevState = {};
window.addEventListener('load', () => { window.addEventListener('load', () => {
let wrapper = document.querySelector('#vimvixen-console-completion'); let wrapper = document.querySelector('#vimvixen-console-completion');
@ -21,19 +20,6 @@ window.addEventListener('load', () => {
store.subscribe(() => { store.subscribe(() => {
completionComponent.update(); completionComponent.update();
consoleComponent.update(); consoleComponent.update();
let state = store.getState().completion;
if (state.groupSelection >= 0) {
let item = state.groups[state.groupSelection].items[state.itemSelection];
consoleComponent.setCommandValue(item.content);
} else if (state.groups.length > 0 &&
JSON.stringify(prevState.groups) === JSON.stringify(state.groups)) {
// Reset input only completion groups not changed (unselected an item in
// completion) in order to avoid to override previous input
consoleComponent.setCommandCompletionOrigin();
}
prevState = state;
}); });
browser.runtime.onMessage.addListener((action) => { browser.runtime.onMessage.addListener((action) => {

@ -1,68 +0,0 @@
import actions from 'actions';
const defaultState = {
groupSelection: -1,
itemSelection: -1,
groups: [],
};
const nextSelection = (state) => {
if (state.groupSelection < 0) {
return [0, 0];
}
let group = state.groups[state.groupSelection];
if (state.groupSelection + 1 >= state.groups.length &&
state.itemSelection + 1 >= group.items.length) {
return [-1, -1];
}
if (state.itemSelection + 1 >= group.items.length) {
return [state.groupSelection + 1, 0];
}
return [state.groupSelection, state.itemSelection + 1];
};
const prevSelection = (state) => {
if (state.groupSelection < 0) {
return [
state.groups.length - 1,
state.groups[state.groups.length - 1].items.length - 1
];
}
if (state.groupSelection === 0 && state.itemSelection === 0) {
return [-1, -1];
} else if (state.itemSelection === 0) {
return [
state.groupSelection - 1,
state.groups[state.groupSelection - 1].items.length - 1
];
}
return [state.groupSelection, state.itemSelection - 1];
};
export default function reducer(state = defaultState, action = {}) {
switch (action.type) {
case actions.COMPLETION_SET_ITEMS:
return Object.assign({}, state, {
groups: action.groups,
groupSelection: -1,
itemSelection: -1,
});
case actions.COMPLETION_SELECT_NEXT: {
let next = nextSelection(state);
return Object.assign({}, state, {
groupSelection: next[0],
itemSelection: next[1],
});
}
case actions.COMPLETION_SELECT_PREV: {
let next = prevSelection(state);
return Object.assign({}, state, {
groupSelection: next[0],
itemSelection: next[1],
});
}
default:
return state;
}
}

@ -6,6 +6,42 @@ const defaultState = {
commandShown: false, commandShown: false,
commandText: '', commandText: '',
completions: [], completions: [],
groupSelection: -1,
itemSelection: -1,
};
const nextSelection = (state) => {
if (state.groupSelection < 0) {
return [0, 0];
}
let group = state.completions[state.groupSelection];
if (state.groupSelection + 1 >= state.completions.length &&
state.itemSelection + 1 >= group.items.length) {
return [-1, -1];
}
if (state.itemSelection + 1 >= group.items.length) {
return [state.groupSelection + 1, 0];
}
return [state.groupSelection, state.itemSelection + 1];
};
const prevSelection = (state) => {
if (state.groupSelection < 0) {
return [
state.completions.length - 1,
state.completions[state.completions.length - 1].items.length - 1
];
}
if (state.groupSelection === 0 && state.itemSelection === 0) {
return [-1, -1];
} else if (state.itemSelection === 0) {
return [
state.groupSelection - 1,
state.completions[state.groupSelection - 1].items.length - 1
];
}
return [state.groupSelection, state.itemSelection - 1];
}; };
export default function reducer(state = defaultState, action = {}) { export default function reducer(state = defaultState, action = {}) {
@ -17,10 +53,6 @@ export default function reducer(state = defaultState, action = {}) {
errorShown: false, errorShown: false,
completions: [] completions: []
}); });
case actions.CONSOLE_SET_COMPLETIONS:
return Object.assign({}, state, {
completions: action.completions
});
case actions.CONSOLE_SHOW_ERROR: case actions.CONSOLE_SHOW_ERROR:
return Object.assign({}, state, { return Object.assign({}, state, {
errorText: action.text, errorText: action.text,
@ -36,6 +68,26 @@ export default function reducer(state = defaultState, action = {}) {
errorShown: false, errorShown: false,
commandShown: false commandShown: false
}); });
case actions.CONSOLE_SET_COMPLETIONS:
return Object.assign({}, state, {
completions: action.completions,
groupSelection: -1,
itemSelection: -1,
});
case actions.CONSOLE_COMPLETION_NEXT: {
let next = nextSelection(state);
return Object.assign({}, state, {
groupSelection: next[0],
itemSelection: next[1],
});
}
case actions.CONSOLE_COMPLETION_PREV: {
let next = prevSelection(state);
return Object.assign({}, state, {
groupSelection: next[0],
itemSelection: next[1],
});
}
default: default:
return state; return state;
} }

@ -2,14 +2,12 @@ import inputReducer from 'reducers/input';
import consoleReducer from 'reducers/console'; import consoleReducer from 'reducers/console';
import settingReducer from 'reducers/setting'; import settingReducer from 'reducers/setting';
import followReducer from 'reducers/follow'; import followReducer from 'reducers/follow';
import completionReducer from 'reducers/completion';
const defaultState = { const defaultState = {
input: inputReducer(undefined, {}), input: inputReducer(undefined, {}),
console: consoleReducer(undefined, {}), console: consoleReducer(undefined, {}),
setting: settingReducer(undefined, {}), setting: settingReducer(undefined, {}),
follow: followReducer(undefined, {}), follow: followReducer(undefined, {}),
completion: completionReducer(undefined, {}),
}; };
export default function reducer(state = defaultState, action = {}) { export default function reducer(state = defaultState, action = {}) {
@ -18,6 +16,5 @@ export default function reducer(state = defaultState, action = {}) {
console: consoleReducer(state.console, action), console: consoleReducer(state.console, action),
setting: settingReducer(state.setting, action), setting: settingReducer(state.setting, action),
follow: followReducer(state.follow, action), follow: followReducer(state.follow, action),
completion: completionReducer(state.completion, action),
}); });
} }

@ -1,27 +0,0 @@
import { expect } from "chai";
import actions from 'actions';
import * as completionActions from 'actions/completion';
describe("completion actions", () => {
describe('setItems', () => {
it('create COMPLETION_SET_ITEMS action', () => {
let action = completionActions.setItems([1, 2, 3]);
expect(action.type).to.equal(actions.COMPLETION_SET_ITEMS);
expect(action.groups).to.deep.equal([1, 2, 3]);
});
});
describe('selectNext', () => {
it('create COMPLETION_SELECT_NEXT action', () => {
let action = completionActions.selectNext();
expect(action.type).to.equal(actions.COMPLETION_SELECT_NEXT);
});
});
describe('selectPrev', () => {
it('create COMPLETION_SELECT_PREV action', () => {
let action = completionActions.selectPrev();
expect(action.type).to.equal(actions.COMPLETION_SELECT_PREV);
});
});
});

@ -11,14 +11,6 @@ describe("console actions", () => {
}); });
}); });
describe("setCompletions", () => {
it('create CONSOLE_SET_COMPLETIONS action', () => {
let action = consoleActions.setCompletions([1,2,3]);
expect(action.type).to.equal(actions.CONSOLE_SET_COMPLETIONS);
expect(action.completions).to.deep.equal([1, 2, 3]);
});
});
describe("showError", () => { describe("showError", () => {
it('create CONSOLE_SHOW_ERROR action', () => { it('create CONSOLE_SHOW_ERROR action', () => {
let action = consoleActions.showError('an error'); let action = consoleActions.showError('an error');
@ -33,5 +25,27 @@ describe("console actions", () => {
expect(action.type).to.equal(actions.CONSOLE_HIDE); expect(action.type).to.equal(actions.CONSOLE_HIDE);
}); });
}); });
describe("setCompletions", () => {
it('create CONSOLE_SET_COMPLETIONS action', () => {
let action = consoleActions.setCompletions([1,2,3]);
expect(action.type).to.equal(actions.CONSOLE_SET_COMPLETIONS);
expect(action.completions).to.deep.equal([1, 2, 3]);
});
});
describe("completionPrev", () => {
it('create CONSOLE_COMPLETION_PREV action', () => {
let action = consoleActions.completionPrev();
expect(action.type).to.equal(actions.CONSOLE_COMPLETION_PREV);
});
});
describe("completionNext", () => {
it('create CONSOLE_COMPLETION_NEXT action', () => {
let action = consoleActions.completionNext();
expect(action.type).to.equal(actions.CONSOLE_COMPLETION_NEXT);
});
});
}); });

@ -1,90 +0,0 @@
import { expect } from "chai";
import actions from 'actions';
import completionReducer from 'reducers/completion';
describe("completion reducer", () => {
it ('return the initial state', () => {
let state = completionReducer(undefined, {});
expect(state).to.have.property('groupSelection', -1);
expect(state).to.have.property('itemSelection', -1);
expect(state).to.have.deep.property('groups', []);
});
it ('return next state for COMPLETION_SET_ITEMS', () => {
let state = {
groupSelection: 0,
itemSelection: 0,
groups: [],
}
let action = {
type: actions.COMPLETION_SET_ITEMS,
groups: [{
name: 'Apple',
items: [1, 2, 3]
}, {
name: 'Banana',
items: [4, 5, 6]
}]
}
state = completionReducer(state, action);
expect(state).to.have.property('groups', action.groups);
expect(state).to.have.property('groupSelection', -1);
expect(state).to.have.property('itemSelection', -1);
});
it ('return next state for COMPLETION_SELECT_NEXT', () => {
let action = { type: actions.COMPLETION_SELECT_NEXT };
let state = {
groupSelection: -1,
itemSelection: -1,
groups: [{
name: 'Apple',
items: [1, 2]
}, {
name: 'Banana',
items: [3]
}]
};
state = completionReducer(state, action);
expect(state).to.have.property('groupSelection', 0);
expect(state).to.have.property('itemSelection', 0);
state = completionReducer(state, action);
expect(state).to.have.property('groupSelection', 0);
expect(state).to.have.property('itemSelection', 1);
state = completionReducer(state, action);
state = completionReducer(state, action);
expect(state).to.have.property('groupSelection', -1);
expect(state).to.have.property('itemSelection', -1);
});
it ('return next state for COMPLETION_SELECT_PREV', () => {
let action = { type: actions.COMPLETION_SELECT_PREV };
let state = {
groupSelection: -1,
itemSelection: -1,
groups: [{
name: 'Apple',
items: [1, 2]
}, {
name: 'Banana',
items: [3]
}]
};
state = completionReducer(state, action);
expect(state).to.have.property('groupSelection', 1);
expect(state).to.have.property('itemSelection', 0);
state = completionReducer(state, action);
expect(state).to.have.property('groupSelection', 0);
expect(state).to.have.property('itemSelection', 1);
state = completionReducer(state, action);
state = completionReducer(state, action);
expect(state).to.have.property('groupSelection', -1);
expect(state).to.have.property('itemSelection', -1);
});
});

@ -10,6 +10,8 @@ describe("console reducer", () => {
expect(state).to.have.property('commandShown', false); expect(state).to.have.property('commandShown', false);
expect(state).to.have.property('commandText', ''); expect(state).to.have.property('commandText', '');
expect(state).to.have.deep.property('completions', []); expect(state).to.have.deep.property('completions', []);
expect(state).to.have.property('groupSelection', -1);
expect(state).to.have.property('itemSelection', -1);
}); });
it('return next state for CONSOLE_SHOW_COMMAND', () => { it('return next state for CONSOLE_SHOW_COMMAND', () => {
@ -20,12 +22,6 @@ describe("console reducer", () => {
expect(state).to.have.property('errorShown', false); expect(state).to.have.property('errorShown', false);
}); });
it('return next state for CONSOLE_SET_COMPLETIONS', () => {
let action = { type: actions.CONSOLE_SET_COMPLETIONS, completions: [1, 2, 3] };
let state = consoleReducer({}, action);
expect(state).to.have.deep.property('completions', [1, 2, 3]);
});
it('return next state for CONSOLE_SHOW_ERROR', () => { it('return next state for CONSOLE_SHOW_ERROR', () => {
let action = { type: actions.CONSOLE_SHOW_ERROR, text: 'an error' }; let action = { type: actions.CONSOLE_SHOW_ERROR, text: 'an error' };
let state = consoleReducer({}, action); let state = consoleReducer({}, action);
@ -40,4 +36,83 @@ describe("console reducer", () => {
expect(state).to.have.property('errorShown', false); expect(state).to.have.property('errorShown', false);
expect(state).to.have.property('commandShown', false); expect(state).to.have.property('commandShown', false);
}); });
it ('return next state for CONSOLE_SET_COMPLETIONS', () => {
let state = {
groupSelection: 0,
itemSelection: 0,
completions: [],
}
let action = {
type: actions.CONSOLE_SET_COMPLETIONS,
completions: [{
name: 'Apple',
items: [1, 2, 3]
}, {
name: 'Banana',
items: [4, 5, 6]
}]
}
state = consoleReducer(state, action);
expect(state).to.have.property('completions', action.completions);
expect(state).to.have.property('groupSelection', -1);
expect(state).to.have.property('itemSelection', -1);
});
it ('return next state for CONSOLE_COMPLETION_NEXT', () => {
let action = { type: actions.CONSOLE_COMPLETION_NEXT };
let state = {
groupSelection: -1,
itemSelection: -1,
completions: [{
name: 'Apple',
items: [1, 2]
}, {
name: 'Banana',
items: [3]
}]
};
state = consoleReducer(state, action);
expect(state).to.have.property('groupSelection', 0);
expect(state).to.have.property('itemSelection', 0);
state = consoleReducer(state, action);
expect(state).to.have.property('groupSelection', 0);
expect(state).to.have.property('itemSelection', 1);
state = consoleReducer(state, action);
state = consoleReducer(state, action);
expect(state).to.have.property('groupSelection', -1);
expect(state).to.have.property('itemSelection', -1);
});
it ('return next state for CONSOLE_COMPLETION_PREV', () => {
let action = { type: actions.CONSOLE_COMPLETION_PREV };
let state = {
groupSelection: -1,
itemSelection: -1,
completions: [{
name: 'Apple',
items: [1, 2]
}, {
name: 'Banana',
items: [3]
}]
};
state = consoleReducer(state, action);
expect(state).to.have.property('groupSelection', 1);
expect(state).to.have.property('itemSelection', 0);
state = consoleReducer(state, action);
expect(state).to.have.property('groupSelection', 0);
expect(state).to.have.property('itemSelection', 1);
state = consoleReducer(state, action);
state = consoleReducer(state, action);
expect(state).to.have.property('groupSelection', -1);
expect(state).to.have.property('itemSelection', -1);
});
}); });