diff --git a/src/components/excel/Excel.ts b/src/components/excel/Excel.ts
index 0c5caf4..7140ff8 100644
--- a/src/components/excel/Excel.ts
+++ b/src/components/excel/Excel.ts
@@ -1,9 +1,9 @@
import { $ } from 'core/dom';
import { Emitter } from 'core/Emitter';
import { ExcelComponent } from 'core/ExcelComponent';
-import { Store } from 'core/store/createStore';
+import { Store } from 'core/store/Store';
import { StoreSubscriber } from 'core/StoreSubscriber';
-import { updateOpenDate } from 'redux/actions';
+import { updateOpenDate } from 'redux/action-creators';
interface ExcelOptionsType {
components: any[],
@@ -48,7 +48,7 @@ export class Excel {
this.subscriber.subscribeComponents(this.components);
this.components.forEach(component => component.init());
- this.store.dispatch(updateOpenDate(Date.now().toString()));
+ this.store.dispatchToStore(updateOpenDate(Date.now().toString()));
}
destroy() {
diff --git a/src/components/formula/Formula.ts b/src/components/formula/Formula.ts
index 4b24f8b..12f5ecc 100644
--- a/src/components/formula/Formula.ts
+++ b/src/components/formula/Formula.ts
@@ -1,15 +1,18 @@
import { Dom } from 'core/dom';
-import { ExcelComponent } from 'core/ExcelComponent';
+import { ExcelComponent, ComponentOptionsType } from 'core/ExcelComponent';
export class Formula extends ExcelComponent {
static className = 'excel__formula';
private formulaInput: Dom;
- constructor($root: Dom, options: any) {
+ constructor($root: Dom, options: ComponentOptionsType) {
super($root, {
- listeners: ['input', 'keydown'],
+ // @ts-ignore next-line
+ eventListeners: ['input', 'keydown'],
+ // @ts-ignore next-line
name: 'Formula',
+ // @ts-ignore next-line
subscribe: ['currentText'],
...options,
});
@@ -27,8 +30,8 @@ export class Formula extends ExcelComponent {
this.formulaInput = this.$root.find('#formula-input');
- this.$on('table:select-cell', text => {
- this.formulaInput.text = text || '';
+ this.$on('table:select-cell', (cell: Dom) => {
+ this.formulaInput.text = cell.data.value || '';
});
}
diff --git a/src/components/header/Header.ts b/src/components/header/Header.ts
index 820a064..da01b26 100644
--- a/src/components/header/Header.ts
+++ b/src/components/header/Header.ts
@@ -1,16 +1,16 @@
-import * as actions from 'redux/actions';
+import * as actions from 'redux/action-creators';
import { $, Dom } from 'core/dom';
import { ActiveRoute } from 'core/routes/ActiveRoute';
-import { ExcelStateComponent } from 'core/ExcelStateComponent';
-import { deleteTable } from 'redux/actions';
+import { ExcelComponentState } from 'core/ExcelComponentState';
+import { deleteTable } from 'redux/action-creators';
-export class Header extends ExcelStateComponent {
+export class Header extends ExcelComponentState {
static className = 'excel__header';
constructor($root: Dom, options: any) {
super($root, {
name: 'Header',
- listeners: ['input', 'click'],
+ eventListeners: ['input', 'click'],
subscribe: ['title'],
...options,
});
@@ -35,7 +35,7 @@ export class Header extends ExcelStateComponent {
onInput(event: InputEvent) {
const $target = $(event.target as HTMLInputElement);
- this.$dispatch(actions.changeTitle($target.text));
+ this.dispatchToStore(actions.changeTitle($target.text));
}
onClick(event: MouseEvent) {
@@ -54,7 +54,7 @@ export class Header extends ExcelStateComponent {
}
case 'delete-table': {
- confirm('Действительно хочешь удалить ?') && this.$dispatch(deleteTable(this.store.getState().id));
+ confirm('Действительно хочешь удалить ?') && this.dispatchToStore(deleteTable(this.store.getState().id));
break;
}
diff --git a/src/components/table/Table.ts b/src/components/table/Table.ts
index 647df83..3283101 100644
--- a/src/components/table/Table.ts
+++ b/src/components/table/Table.ts
@@ -1,9 +1,9 @@
import { startCellId } from 'components/table/table.functions';
-import * as actions from 'redux/actions';
+import * as actions from 'redux/action-creators';
import { $, Dom } from 'core/dom';
import { ExcelComponent } from 'core/ExcelComponent';
import { TableSelection } from 'components/table/TableSelection';
-import { changeCurrentStyles } from 'redux/actions';
+import { changeCurrentStyles } from 'redux/action-creators';
import { createTable } from 'components/table/table.template';
import { initialStyleState } from 'src/constants';
import { parse } from 'core/utils';
@@ -18,7 +18,7 @@ export class Table extends ExcelComponent {
constructor($root: Dom, options: any) {
super($root, {
name: 'Table',
- listeners: ['mousedown', 'keydown', 'input'],
+ eventListeners: ['mousedown', 'keydown', 'input'],
...options,
});
}
@@ -34,36 +34,17 @@ export class Table extends ExcelComponent {
init() {
super.init();
- const $cell = this.$root.find(`[data-id="${startCellId}"]`);
- this.selection.select($cell);
-
- this.$emit('table:select-cell', $cell.data.value);
-
- this.$on('formula:input', (data) => {
- this.selection.current.attr('data-value', data);
- this.selection.current.text = parse(data);
- this.updateCurrentTextInStore(data);
- });
-
- this.$on('formula:enter-press', () => {
- this.selection.current.focus();
- });
-
- this.$on('toolbar:applyStyle', (value) => {
- this.selection.applyStyle(value);
-
- this.$dispatch(actions.applyStyle({
- value,
- ids: this.selection.selectedIds,
- }));
- });
-
this.initTable();
+
+ this.$on('formula:input', this.updateCurrentText);
+ this.$on('formula:enter-press', () => this.selection.current.focus());
+ this.$on('toolbar:applyStyle', this.updateCurrentStyles);
}
initTable() {
this.initTableSize();
this.initTableContentAndStyles();
+ this.initStartCellFocus();
}
initTableSize() {
@@ -87,6 +68,7 @@ export class Table extends ExcelComponent {
const tableState = this.store.getState();
const tableContent = tableState?.dataState;
const tableStyles = tableState?.stylesState;
+
Object.keys(tableContent).forEach(cellId => {
const $cell = this.$root.find(`[data-id="${cellId}"]`);
const styles = tableStyles[cellId];
@@ -97,28 +79,46 @@ export class Table extends ExcelComponent {
});
}
+ initStartCellFocus() {
+ const $cell = this.$root.find(`[data-id="${startCellId}"]`);
+ this.selection.select($cell);
+
+ this.$emit('table:select-cell', $cell);
+ }
+
emitSelectCallback() {
- this.$emit('table:select-cell', this.selection.current.data.value);
+ this.$emit('table:select-cell', this.selection.current);
const styles = this.selection.current?.getStyles(Object.keys(initialStyleState));
- this.$dispatch(changeCurrentStyles(styles));
+ this.dispatchToStore(changeCurrentStyles(styles));
}
async resizeTable(event: MouseEvent) {
try {
const resizeData = await resizeHandler(this.$root, event);
- this.$dispatch(actions.tableResize({ resizeData }));
+ this.dispatchToStore(actions.tableResize({ resizeData }));
} catch (e) {
console.warn('Resize error', e.message);
}
}
- updateCurrentTextInStore(text: string) {
- this.$dispatch(actions.changeText({
+ updateCurrentText = (text: string) => {
+ this.selection.current.attr('data-value', text);
+ this.selection.current.text = parse(text);
+
+ this.dispatchToStore(actions.changeText({
text,
id: this.selection.current.data.id || startCellId,
}));
- }
+ };
+
+ updateCurrentStyles = (style: CSSStyleRule) => {
+ this.selection.applyStyle(style);
+ this.dispatchToStore(actions.applyStyle({
+ value: style,
+ ids: this.selection.selectedIds,
+ }));
+ };
onMousedown(event: MouseEvent) {
selectHandler(event, this.selection, this.emitSelectCallback.bind(this));
@@ -130,6 +130,6 @@ export class Table extends ExcelComponent {
}
onInput(event: InputEvent) {
- this.updateCurrentTextInStore((event.target as HTMLElement).innerText.trim());
+ this.updateCurrentText((event.target as HTMLElement).innerText.trim());
}
}
diff --git a/src/components/toolbar/Toolbar.ts b/src/components/toolbar/Toolbar.ts
index a0d4b41..5ea39e2 100644
--- a/src/components/toolbar/Toolbar.ts
+++ b/src/components/toolbar/Toolbar.ts
@@ -1,17 +1,17 @@
import { startCellId } from 'components/table/table.functions';
import { $, Dom } from 'core/dom';
-import { ExcelStateComponent } from 'core/ExcelStateComponent';
-import { OptionsType } from 'core/ExcelComponent';
+import { ExcelComponentState } from 'core/ExcelComponentState';
+import { ComponentOptionsType } from 'core/ExcelComponent';
import { createToolbar } from 'components/toolbar/toolbar.template';
import { initialStyleState } from 'src/constants';
-export class Toolbar extends ExcelStateComponent {
+export class Toolbar extends ExcelComponentState {
static className = 'excel__toolbar';
- constructor($root: Dom, options: OptionsType) {
+ constructor($root: Dom, options: ComponentOptionsType) {
super($root, {
...options,
- listeners: ['click'],
+ eventListeners: ['click', 'change'],
name: 'Toolbar',
subscribe: ['currentStyles'],
});
@@ -20,7 +20,7 @@ export class Toolbar extends ExcelStateComponent {
prepare() {
const currentToolbarState = this.toolbarState;
- this.initState(currentToolbarState);
+ this.initComponentState(currentToolbarState);
}
get toolbarState() {
@@ -31,7 +31,7 @@ export class Toolbar extends ExcelStateComponent {
}
get template(): string {
- return createToolbar(this.state);
+ return createToolbar(this.componentState);
}
toHTML(): string {
@@ -39,7 +39,7 @@ export class Toolbar extends ExcelStateComponent {
}
storeChanged(args?: any) {
- this.setState(args.currentStyles);
+ this.setComponentState(args.currentStyles);
}
onClick(event: MouseEvent) {
@@ -51,7 +51,13 @@ export class Toolbar extends ExcelStateComponent {
const key = Object.keys(value)[0];
this.$emit('toolbar:applyStyle', value);
+ this.setComponentState({ [key]: value[key] });
+ }
- this.setState({ [key]: value[key] });
+ onChange(e: any) {
+ const value = `${e.target.value.toString()}px`;
+
+ this.$emit('toolbar:applyStyle', { fontSize: value });
+ this.setComponentState({ fontSize: value });
}
}
diff --git a/src/components/toolbar/toolbar-types.ts b/src/components/toolbar/toolbar-types.ts
index 554722f..ebc85e4 100644
--- a/src/components/toolbar/toolbar-types.ts
+++ b/src/components/toolbar/toolbar-types.ts
@@ -4,4 +4,5 @@ export type ToolbarStateType = {
textDecoration?: 'none' | 'underline';
justifyContent?: 'start' | 'center' | 'end';
alignItems?: 'start' | 'center' | 'end';
+ fontSize?: any;
};
diff --git a/src/components/toolbar/toolbar.template.ts b/src/components/toolbar/toolbar.template.ts
index 6f610b7..a088bf6 100644
--- a/src/components/toolbar/toolbar.template.ts
+++ b/src/components/toolbar/toolbar.template.ts
@@ -80,7 +80,25 @@ export function createToolbar(state: ToolbarStateType): string {
],
];
- return btns.map(btn => (Array.isArray(btn) ? toButtonGroup(btn) : toButton(btn))).join(' ');
+ const buttons = btns.map(btn => (Array.isArray(btn) ? toButtonGroup(btn) : toButton(btn)));
+ buttons.push(createFontSizeButton(state.fontSize));
+ return buttons.join(' ');
+}
+
+function createFontSizeButton(currentSize: string) {
+ const fontSizeInPixels = +currentSize.slice(0, -2);
+ const options = [];
+
+ for (let i = 8; i <= 24; i += 2) {
+ if (fontSizeInPixels === i) options.push(``);
+ else options.push(``);
+ }
+
+ return `
+
+ `;
}
function toButtonGroup(buttons: ButtonConfigType[]) {
diff --git a/src/constants.ts b/src/constants.ts
index d15b079..cc34f29 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -8,6 +8,7 @@ export const initialStyleState: ToolbarStateType = {
fontWeight: 'normal',
textDecoration: 'none',
fontStyle: 'normal',
+ fontSize: '12px',
};
export function getNormalizeInitialState(params: string): StateType {
@@ -15,12 +16,12 @@ export function getNormalizeInitialState(params: string): StateType {
colState: {},
rowState: {},
dataState: {},
- currentText: '',
stylesState: {},
title: 'New excel table',
id: params,
openDate: Date.now(),
...storage(`excel:${params}`),
currentStyles: { ...storage(`excel:${params}`)?.stylesState?.[startCellId] },
+ currentText: { ...storage(`excel:${params}`)?.dataState?.[startCellId] },
};
}
diff --git a/src/core/Clients.ts b/src/core/Clients.ts
index dafd38d..ff9ff4b 100644
--- a/src/core/Clients.ts
+++ b/src/core/Clients.ts
@@ -1,3 +1,4 @@
+import { startCellId } from 'components/table/table.functions';
import { storage } from 'core/utils';
import { storageName } from 'pages/ExcelPage';
import { StateType } from 'redux/types';
@@ -21,7 +22,7 @@ export class LocalStorageClient implements ClientDataType {
}
get() {
- const data = storage(storageName(this.name)) || getNormalizeInitialState(this.name);
+ const data = this.norm(storage(storageName(this.name))) || getNormalizeInitialState(this.name);
return new Promise(resolve => {
setTimeout(() => {
@@ -29,4 +30,12 @@ export class LocalStorageClient implements ClientDataType {
}, 1500);
});
}
+
+ norm(state) {
+ return {
+ ...state,
+ currentStyles: { ...state.stylesState?.[startCellId] },
+ currentText: state.dataState?.[startCellId],
+ };
+ }
}
diff --git a/src/core/DomListener.ts b/src/core/DomListener.ts
index 1d12548..812cdfa 100644
--- a/src/core/DomListener.ts
+++ b/src/core/DomListener.ts
@@ -3,19 +3,19 @@ import { capitalize } from 'core/utils';
export class DomListener {
$root: Dom;
- listeners: string[];
+ eventListeners: string[];
- constructor($root: Dom, listeners: string[]) {
+ constructor($root: Dom, eventNames: string[]) {
if (!$root) throw new Error('Не передали корневой элемент');
this.$root = $root;
- this.listeners = listeners;
+ this.eventListeners = eventNames;
}
initDOMListeners() {
- if (!this.listeners) return;
+ if (!this.eventListeners) return;
- this.listeners.forEach((listener: string) => {
+ this.eventListeners.forEach((listener: string) => {
const method: any = getMethodName(listener);
// @ts-ignore FIXME:
this[method] = this[method]?.bind(this);
@@ -27,7 +27,7 @@ export class DomListener {
}
removeDOMListeners() {
- this.listeners.forEach(listener => {
+ this.eventListeners.forEach(listener => {
// @ts-ignore FIXME:
const method: any = getMethodName(listener);
// @ts-ignore FIXME:
diff --git a/src/core/ExcelComponent.ts b/src/core/ExcelComponent.ts
index d6abb32..6e61f39 100644
--- a/src/core/ExcelComponent.ts
+++ b/src/core/ExcelComponent.ts
@@ -2,7 +2,7 @@ import { ActionType } from 'redux/types';
import { Dom } from 'core/dom';
import { DomListener } from 'core/DomListener';
import { Emitter } from 'core/Emitter';
-import { Store } from 'core/store/createStore';
+import { Store } from 'core/store/Store';
interface ExcelComponentClass {
toHTML: () => string;
@@ -10,8 +10,8 @@ interface ExcelComponentClass {
storeChanged?: (args: any) => void;
}
-export type OptionsType = {
- listeners: string[];
+export type ComponentOptionsType = {
+ eventListeners: string[];
name: string;
emitter: Emitter;
store: Store;
@@ -25,8 +25,8 @@ export abstract class ExcelComponent extends DomListener implements ExcelCompone
private subscribe: string[];
private unsubscribers: ((args?: any) => any)[];
- constructor($root: Dom, options: OptionsType) {
- super($root, options.listeners);
+ constructor($root: Dom, options: ComponentOptionsType) {
+ super($root, options.eventListeners);
this.name = options.name;
this.emitter = options.emitter;
this.store = options.store;
@@ -53,8 +53,8 @@ export abstract class ExcelComponent extends DomListener implements ExcelCompone
unsub && this.unsubscribers.push(unsub);
}
- $dispatch(action: ActionType) {
- this.store?.dispatch(action);
+ dispatchToStore(action: ActionType) {
+ this.store?.dispatchToStore(action);
}
storeChanged(args?: any) {
diff --git a/src/core/ExcelComponentState.ts b/src/core/ExcelComponentState.ts
new file mode 100644
index 0000000..9d8a187
--- /dev/null
+++ b/src/core/ExcelComponentState.ts
@@ -0,0 +1,27 @@
+import { Dom } from 'core/dom';
+import { ExcelComponent, ComponentOptionsType } from 'core/ExcelComponent';
+
+type ExcelComponentStateType = {
+ [k: string]: any;
+};
+
+export abstract class ExcelComponentState extends ExcelComponent {
+ componentState: ExcelComponentStateType;
+
+ protected constructor(root: Dom, options: ComponentOptionsType) {
+ super(root, options);
+ }
+
+ get template(): string {
+ return JSON.stringify(this.componentState, null, 2);
+ }
+
+ initComponentState(initialState = {}) {
+ this.componentState = { ...initialState };
+ }
+
+ setComponentState(newState: ExcelComponentStateType) {
+ this.componentState = { ...this.componentState, ...newState };
+ this.$root.html(this.template);
+ }
+}
diff --git a/src/core/ExcelStateComponent.ts b/src/core/ExcelStateComponent.ts
deleted file mode 100644
index b19185c..0000000
--- a/src/core/ExcelStateComponent.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Dom } from 'core/dom';
-import { ExcelComponent, OptionsType } from 'core/ExcelComponent';
-
-type ExcelComponentStateType = {
- [k: string]: any;
-};
-
-export abstract class ExcelStateComponent extends ExcelComponent {
- state: ExcelComponentStateType;
-
- protected constructor(root: Dom, options: OptionsType) {
- super(root, options);
- }
-
- get template(): string {
- return JSON.stringify(this.state, null, 2);
- }
-
- initState(initialState = {}) {
- this.state = { ...initialState };
- }
-
- setState(newState: ExcelComponentStateType) {
- this.state = { ...this.state, ...newState };
- this.$root.html(this.template);
- }
-}
diff --git a/src/core/StoreSubscriber.ts b/src/core/StoreSubscriber.ts
index f7a0e61..a5cb95e 100644
--- a/src/core/StoreSubscriber.ts
+++ b/src/core/StoreSubscriber.ts
@@ -1,5 +1,5 @@
import { StateType } from 'redux/types';
-import { Store } from 'core/store/createStore';
+import { Store } from 'core/store/Store';
import { isEqual } from 'core/utils';
export class StoreSubscriber {
@@ -14,7 +14,7 @@ export class StoreSubscriber {
subscribeComponents(components: any[]) {
this.prevState = this.store.getState();
- this.sub = this.store.subscribe((state: StateType) => {
+ this.sub = this.store.subscribeFromStore((state: StateType) => {
if (!state) return;
Object.keys(state).forEach(key => {
diff --git a/src/core/store/createStore.ts b/src/core/store/Store.ts
similarity index 86%
rename from src/core/store/createStore.ts
rename to src/core/store/Store.ts
index ff01a0d..e229fcf 100644
--- a/src/core/store/createStore.ts
+++ b/src/core/store/Store.ts
@@ -9,7 +9,7 @@ export class Store {
this.listeners = [];
}
- subscribe(fn: (state: StateType) => void): SubscribeType {
+ subscribeFromStore(fn: (state: StateType) => void): SubscribeType {
this.listeners.push(fn);
return {
unsubscribe: () => {
@@ -18,7 +18,7 @@ export class Store {
};
}
- dispatch(action: ActionType) {
+ dispatchToStore(action: ActionType) {
this.state = this.reducer(this.state, action);
this.listeners.forEach(listener => listener(this.state));
}
diff --git a/src/pages/ExcelPage.ts b/src/pages/ExcelPage.ts
index ce47669..e2f163e 100644
--- a/src/pages/ExcelPage.ts
+++ b/src/pages/ExcelPage.ts
@@ -4,7 +4,7 @@ import { Formula } from 'components/formula/Formula';
import { Header } from 'components/header/Header';
import { LocalStorageClient } from 'core/Clients';
import { StateProcessor } from 'core/StateProcessor';
-import { Store } from 'core/store/createStore';
+import { Store } from 'core/store/Store';
import { SubscribeType } from 'redux/types';
import { Table } from 'components/table/Table';
import { Toolbar } from 'components/toolbar/Toolbar';
@@ -32,7 +32,7 @@ export class ExcelPage extends AbstractPage {
const state = await this.processor.get();
const store = new Store(rootReducer, state);
- this.storeSub = store.subscribe(this.processor.listen);
+ this.storeSub = store.subscribeFromStore(this.processor.listen);
this.excel = new Excel({
components: [Header, Toolbar, Formula, Table],
diff --git a/src/redux/constants.ts b/src/redux/action-constants.ts
similarity index 100%
rename from src/redux/constants.ts
rename to src/redux/action-constants.ts
diff --git a/src/redux/actions.ts b/src/redux/action-creators.ts
similarity index 87%
rename from src/redux/actions.ts
rename to src/redux/action-creators.ts
index 0660ef9..cf15f20 100644
--- a/src/redux/actions.ts
+++ b/src/redux/action-creators.ts
@@ -7,7 +7,7 @@ import {
CHANGE_TITLE,
DELETE_TABLE,
UPDATE_DATE,
-} from 'redux/constants';
+} from 'redux/action-constants';
export function tableResize(resizeData: any) {
return {
@@ -30,7 +30,7 @@ export function changeCurrentStyles(data: any) {
};
}
-export function applyStyle(data: any) {
+export function applyStyle(data: { ids: (string | undefined)[], value: CSSStyleRule }) {
return {
type: APPLY_STYLES,
data,
diff --git a/src/redux/actions-types.d.ts b/src/redux/actions-types.d.ts
deleted file mode 100644
index eecb847..0000000
--- a/src/redux/actions-types.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export type ResizePayloadType = {
- colState: {
- [k in number]: number
- },
- rowState: {
- [k in number]: number
- },
-};
diff --git a/src/redux/rootReducer.ts b/src/redux/rootReducer.ts
index 93b5d2c..99ebbc9 100644
--- a/src/redux/rootReducer.ts
+++ b/src/redux/rootReducer.ts
@@ -9,7 +9,7 @@ import {
CHANGE_TITLE,
DELETE_TABLE,
UPDATE_DATE,
-} from 'redux/constants';
+} from 'redux/action-constants';
export function rootReducer(state: StateType, action: ActionType) {
switch (action.type) {
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index b1bb2b7..c2ff3d6 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -7,3 +7,4 @@ $info-cell-width: 40px;
$row-height: 25px;
$toolbar-height: 40px;
$primary-color: #3c74ff;
+$default-cell-font-size: 12px;
diff --git a/src/styles/components/table.scss b/src/styles/components/table.scss
index 7150acf..6ce27e2 100644
--- a/src/styles/components/table.scss
+++ b/src/styles/components/table.scss
@@ -7,6 +7,7 @@
right: 0;
top: $header-height + $toolbar-height + $formula-height;
overflow: auto;
+ font-size: $default-cell-font-size;
.row{
display: flex;
flex-direction: row;
diff --git a/src/styles/components/toolbar.scss b/src/styles/components/toolbar.scss
index 1cb6a7b..3ef0348 100644
--- a/src/styles/components/toolbar.scss
+++ b/src/styles/components/toolbar.scss
@@ -22,4 +22,8 @@
border: none;
}
}
+
+ .button__size {
+ width: 50px;
+ }
}
diff --git a/test/createStore.spec.js b/test/createStore.spec.js
index f98937e..8b5551e 100644
--- a/test/createStore.spec.js
+++ b/test/createStore.spec.js
@@ -23,8 +23,8 @@ describe('Create store', () => {
test('should return store object', () => {
expect(store).toBeDefined();
- expect(store.dispatch).toBeDefined();
- expect(store.subscribe).toBeDefined();
+ expect(store.dispatchToStore).toBeDefined();
+ expect(store.subscribeFromStore).toBeDefined();
expect(store.getState).not.toBeUndefined();
});
@@ -37,27 +37,27 @@ describe('Create store', () => {
});
test('should change state if actions exist', () => {
- store.dispatch({ type: 'ADD' });
+ store.dispatchToStore({ type: 'ADD' });
expect(store.getState().count).toBe(1);
});
test("should NOT change state if actions don't exist", () => {
- store.dispatch({ type: 'NOT_EXISTING_TYPE' });
+ store.dispatchToStore({ type: 'NOT_EXISTING_TYPE' });
expect(store.getState().count).toBe(0);
});
test('should call subscriber', () => {
- store.subscribe(handler);
- store.dispatch({ type: 'ADD' });
+ store.subscribeFromStore(handler);
+ store.dispatchToStore({ type: 'ADD' });
expect(handler).toHaveBeenCalled();
expect(handler).toHaveBeenCalledWith(store.getState());
});
test('should NOT call sub if unsubscribe', () => {
- const unsub = store.subscribe(handler);
+ const unsub = store.subscribeFromStore(handler);
unsub.unsubscribe();
- store.dispatch({ type: 'ADD' });
+ store.dispatchToStore({ type: 'ADD' });
expect(handler).not.toHaveBeenCalled();
});
@@ -65,7 +65,7 @@ describe('Create store', () => {
test('should dispatch in async way', () => {
return new Promise(resolve => {
setTimeout(() => {
- store.dispatch({ type: 'ADD' });
+ store.dispatchToStore({ type: 'ADD' });
}, 500);
setTimeout(() => {