Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unit Tests for Editor Positioning Fix #1279

Merged
merged 1 commit into from
Sep 19, 2018
Merged

Unit Tests for Editor Positioning Fix #1279

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
249 changes: 127 additions & 122 deletions packages/common/editors/__tests__/EditorContainer.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,83 +1,107 @@

const React = require('react');
const ReactDOM = require('react-dom');
const rewire = require('rewire');
const EditorContainer = rewire('../EditorContainer.js');
const TestUtils = require('react-dom/test-utils');
const SimpleTextEditor = require('../SimpleTextEditor');
const EditorBase = require('../EditorBase');
import { shallow } from 'enzyme';
import { mount, shallow } from 'enzyme';

describe('Editor Container Tests', () => {
let component;
let container;

let fakeColumn = {
name: 'col1',
key: 'col1',
width: 100
};
const fakeColumn = {
name: 'col1',
key: 'col1',
width: 100
};

let rowData = {
const defaultProps = {
rowData: {
col1: 'I',
col2: 'love',
col3: 'Testing'
};
},
column: fakeColumn,
value: 'Adwolf',
height: 50
};

const getComponent = (props) => {
const shallowWrapper = shallow(<EditorContainer { ...defaultProps } { ...props } />);
const mountedWrapper = mount(<EditorContainer { ...defaultProps } { ...props } />);

return { shallowWrapper, mountedWrapper };
};

describe('Editor Container Tests', () => {
let component;

describe('Basic render tests', () => {
beforeEach(() => {
component = TestUtils.renderIntoDocument(<EditorContainer
rowData={rowData}
value={'Adwolf'}
column={fakeColumn}
height={50}/>);
({ mountedWrapper: component } = getComponent());
});

it('should create a new EditorContainer instance', () => {
expect(component).toBeDefined();
});

it('should render a simpleTextEditor if no column.editor property', () => {
let editor = TestUtils.findRenderedComponentWithType(component, SimpleTextEditor);
const editor = component.find(SimpleTextEditor);

expect(editor).toBeDefined();
});

it('should select the text of the default input when the editor is rendered', () => {
function isTextSelected(input) {
const isTextSelected = (input) => {
if (typeof input.selectionStart === 'number') {
return input.selectionStart === 0 && input.selectionEnd === input.value.length;
} else if (typeof document.selection !== 'undefined') {
input.focus();
return document.selection.createRange().text === input.value;
}
}
};
const editorNode = component.find(SimpleTextEditor).instance().getInputNode();

let editor = TestUtils.findRenderedComponentWithType(component, SimpleTextEditor);
expect(isTextSelected(editor.getInputNode())).toBeDefined();
expect(isTextSelected(editorNode)).toBeDefined();
});

it('should render the editor with the correct properties', () => {
let editor = TestUtils.findRenderedComponentWithType(component, SimpleTextEditor);
expect(editor.props.value).toEqual('Adwolf');
expect(editor.props.column).toEqual(fakeColumn);
const editor = component.find(SimpleTextEditor);

expect(editor.props().value).toEqual('Adwolf');
expect(editor.props().column).toEqual(fakeColumn);
});

it('should render the editor container div with correct properties', () => {
const renderComponent = (props) => {
const wrapper = shallow(<EditorContainer {...props} />);
return wrapper;
};
const props = {
rowData: rowData,
value: 'Adwolf',
column: fakeColumn,
height: 50
};
let editorDiv = renderComponent(props).find('div').at(0);
const editorDiv = component.find('div').at(0);

expect(editorDiv.props().className).toBeDefined();
expect(editorDiv.props().onBlur).toBeDefined();
expect(editorDiv.props().onKeyDown).toBeDefined();
expect(editorDiv.props().children).toBeDefined();
});

describe('Frozen columns', () => {
const frozenProps = {
column: { ...fakeColumn, frozen: true },
left: 60,
top: 0,
scrollTop: 0,
scrollLeft: 250
};

it('should not subtract scrollLeft value from editors left position when column is frozen', () => {
const { shallowWrapper } = getComponent(frozenProps);
const editorDiv = shallowWrapper.find('div').at(0);
expect(editorDiv.props().style.transform).toBe('translate(60px, 0px)');
});

it('should subtract scrollLeft value from editors left position when column is not frozen', () => {
const unfrozenProps = { ...frozenProps };
unfrozenProps.column.frozen = false;

const { shallowWrapper } = getComponent(unfrozenProps);
const editorDiv = shallowWrapper.find('div').at(0);
expect(editorDiv.props().style.transform).toBe('translate(-190px, 0px)');
});
});
});

describe('Custom Editors', () => {
Expand All @@ -87,141 +111,122 @@ describe('Editor Container Tests', () => {
}
}

let column;
beforeEach(() => {
column = {
key: 'col1',
name: 'col1',
width: 100
};
component = getComponent({
value: 'SupernaviX',
column: { ...fakeColumn, editor: <TestEditor /> }
}).mountedWrapper;
});

it('should render element custom editors', () => {
column.editor = <TestEditor />;
component = TestUtils.renderIntoDocument(<EditorContainer
rowData={rowData}
value={'SupernaviX'}
column={column}
height={50}/>);
let editor = TestUtils.findRenderedComponentWithType(component, TestEditor);
const editor = component.find(TestEditor);

expect(editor).toBeDefined();
expect(editor.props.value).toBeDefined();
expect(editor.props.onCommit).toBeDefined();
expect(editor.props.onCommitCancel).toBeDefined();
expect(editor.props().value).toBeDefined();
expect(editor.props().onCommit).toBeDefined();
expect(editor.props().onCommitCancel).toBeDefined();
});

it('should render component custom editors', () => {
column.editor = TestEditor;
component = TestUtils.renderIntoDocument(<EditorContainer
rowData={rowData}
value={'SupernaviX'}
column={column}
height={50}/>);
let editor = TestUtils.findRenderedComponentWithType(component, TestEditor);
component.setProps({ column: { ...fakeColumn, editor: TestEditor } });
const editor = component.find(TestEditor);

expect(editor).toBeDefined();
expect(editor.props.value).toBeDefined();
expect(editor.props.onCommit).toBeDefined();
expect(editor.props().value).toBeDefined();
expect(editor.props().onCommit).toBeDefined();
});

it('should commit if any element outside the editor is clicked', () => {
column.editor = <TestEditor />;
component = TestUtils.renderIntoDocument(<EditorContainer
rowData={rowData}
value={'SupernaviX'}
column={column}
height={50}/>);
spyOn(component, 'commit');
TestUtils.Simulate.blur(ReactDOM.findDOMNode(component), {relatedTarget: document.body, currentTarget: ReactDOM.findDOMNode(component)});
expect(component.commit).toHaveBeenCalled();
const instance = component.instance();

spyOn(instance, 'commit');
component.simulate('blur', {
relatedTarget: document.body,
currentTarget: instance.getInputNode()
});

expect(instance.commit).toHaveBeenCalled();
});

it('should not commit if any element inside the editor is clicked', () => {
column.editor = <TestEditor />;
component = TestUtils.renderIntoDocument(<EditorContainer
rowData={rowData}
value={'SupernaviX'}
column={column}
height={50}/>);
let editor = TestUtils.findRenderedComponentWithType(component, TestEditor);
spyOn(component, 'commit');
TestUtils.Simulate.click(ReactDOM.findDOMNode(editor));
expect(component.commit.calls.count()).toEqual(0);
const editor = component.find(TestEditor);
const instance = component.instance();

spyOn(instance, 'commit');
editor.simulate('click');

expect(instance.commit.calls.count()).toEqual(0);
});

it('should call onCommitCancel when editor cancels editing', () => {
column.editor = <TestEditor />;
const onCommit = jasmine.createSpy();
const onCommitCancel = jasmine.createSpy();
component = TestUtils.renderIntoDocument(<EditorContainer
rowData={rowData}
value={'SupernaviX'}
column={column}
onCommitCancel={onCommitCancel}
onCommit={onCommit}
height={50}/>
);
let editor = TestUtils.findRenderedComponentWithType(component, TestEditor);
editor.props.onCommitCancel();

component.setProps({ onCommit, onCommitCancel });
const editor = component.find(TestEditor);

editor.props().onCommitCancel();

expect(onCommitCancel).toHaveBeenCalled();
expect(onCommitCancel.calls.count()).toEqual(1);
expect(onCommit).not.toHaveBeenCalled();
});

it('should not commit changes on componentWillUnmount if editor cancels editing', () => {
column.editor = <TestEditor />;
const onCommit = jasmine.createSpy();
const onCommitCancel = jasmine.createSpy();
component = TestUtils.renderIntoDocument(<EditorContainer
rowData={rowData}
value={'SupernaviX'}
column={column}
onCommitCancel={onCommitCancel}
onCommit={onCommit}
height={50}/>);
let editor = TestUtils.findRenderedComponentWithType(component, TestEditor);
editor.props.onCommitCancel();
component.componentWillUnmount();

component.setProps({ onCommit, onCommitCancel });
const editor = component.find(TestEditor);

editor.props().onCommitCancel();
component.instance().componentWillUnmount();

expect(onCommit).not.toHaveBeenCalled();
});
});

describe('Events', () => {
let container;

beforeEach(() => {
container = document.createElement('div');
document.body.appendChild(container);
component = ReactDOM.render(<EditorContainer
rowData={rowData}
value={'Adwolf'}
component = mount(<EditorContainer
onCommit={jasmine.createSpy()}
onCommitCancel={jasmine.createSpy()}
column={fakeColumn}
height={50}/>, container);
{ ...defaultProps }/>, { attachTo: container });
});

afterEach(() => {
// remove our container
document.body.removeChild(container);
});

xit('hitting enter should call commit only once', () => {
let editor = TestUtils.findRenderedComponentWithType(component, SimpleTextEditor);
TestUtils.Simulate.keyDown(editor.getInputNode(), {key: 'Enter'});
expect(onCommit).toHaveBeenCalled();
expect(onCommit.calls.count()).toEqual(1);
const editor = component.find(SimpleTextEditor);

editor.simulate('keydown', { key: 'Enter' });

expect(component.props().onCommit).toHaveBeenCalled();
expect(component.props().onCommit.calls.count()).toEqual(1);
});

it('hitting escape should call commitCancel only once', () => {
let editor = TestUtils.findRenderedComponentWithType(component, SimpleTextEditor);
TestUtils.Simulate.keyDown(editor.getInputNode(), {key: 'Escape'});
expect(component.props.onCommitCancel).toHaveBeenCalled();
expect(component.props.onCommitCancel.calls.count()).toEqual(1);
const editor = component.find(SimpleTextEditor);

editor.simulate('keydown', { key: 'Escape' });

expect(component.props().onCommitCancel).toHaveBeenCalled();
expect(component.props().onCommitCancel.calls.count()).toEqual(1);
});

it('hitting escape should not call commit changes on componentWillUnmount', () => {
let editor = TestUtils.findRenderedComponentWithType(component, SimpleTextEditor);
TestUtils.Simulate.keyDown(editor.getInputNode(), {key: 'Escape'});
ReactDOM.unmountComponentAtNode(container);
expect(component.props.onCommit).not.toHaveBeenCalled();
const editor = component.find(SimpleTextEditor);

editor.simulate('keydown', { key: 'Escape' });
component.detach();

expect(component.props().onCommit).not.toHaveBeenCalled();
});
});
});