mirror of
https://github.com/pgadmin-org/pgadmin4.git
synced 2025-02-25 18:55:31 -06:00
Significant changes to use ReactJS extensively.
1. Replace the current layout library wcDocker with ReactJS based rc-dock. #6479 2. Have close buttons on individual panel tabs instead of common. #2821 3. Changes in the context menu on panel tabs - Add close, close all and close others menu items. #5394 4. Allow closing all the tabs, including SQL and Properties. #4733 5. Changes in docking behaviour of different tabs based on user requests and remove lock layout menu. 6. Fix an issue where the scroll position of panels was not remembered on Firefox. #2986 7. Reset layout now will not require page refresh and is done spontaneously. 8. Use the zustand store for storing preferences instead of plain JS objects. This will help reflecting preferences immediately. 9. The above fix incorrect format (no indent) of SQL stored functions/procedures. #6720 10. New version check is moved to an async request now instead of app start to improve startup performance. 11. Remove jQuery and Bootstrap completely. 12. Replace jasmine and karma test runner with jest. Migrate all the JS test cases to jest. This will save time in writing and debugging JS tests. 13. Other important code improvements and cleanup.
This commit is contained in:
Aditya Toshniwal
GitHub
@@ -7,62 +7,39 @@
|
||||
//
|
||||
//////////////////////////////////////////////////////////////
|
||||
|
||||
import jasmineEnzyme from 'jasmine-enzyme';
|
||||
import React from 'react';
|
||||
import '../helper/enzyme.helper';
|
||||
|
||||
import {default as OrigCodeMirror} from 'bundled_codemirror';
|
||||
import { withTheme } from '../fake_theme';
|
||||
|
||||
import pgWindow from 'sources/window';
|
||||
import CodeMirror from 'sources/components/CodeMirror';
|
||||
import { mount } from 'enzyme';
|
||||
import { FindDialog } from '../../../pgadmin/static/js/components/CodeMirror';
|
||||
import fakePgAdmin from '../fake_pgadmin';
|
||||
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
|
||||
|
||||
describe('CodeMirror', ()=>{
|
||||
const ThemedCM = withTheme(CodeMirror);
|
||||
let cmInstance, options={
|
||||
lineNumbers: true,
|
||||
mode: 'text/x-pgsql',
|
||||
},
|
||||
cmObj = jasmine.createSpyObj('cmObj', {
|
||||
'getValue':()=>'',
|
||||
'setValue': ()=>{/*This is intentional (SonarQube)*/},
|
||||
'refresh': ()=>{/*This is intentional (SonarQube)*/},
|
||||
'setOption': ()=>{/*This is intentional (SonarQube)*/},
|
||||
'removeKeyMap': ()=>{/*This is intentional (SonarQube)*/},
|
||||
'addKeyMap': ()=>{/*This is intentional (SonarQube)*/},
|
||||
'getSelection': () => {/*This is intentional (SonarQube)*/},
|
||||
'getSearchCursor': {
|
||||
_from: 3,
|
||||
_to: 14,
|
||||
find: function(_rev) {
|
||||
if(_rev){
|
||||
this._from = 1;
|
||||
this._to = 10;
|
||||
} else {
|
||||
this._from = 3;
|
||||
this._to = 14;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
from: function() {return this._from;},
|
||||
to: function() {return this._to;},
|
||||
replace: jasmine.createSpy('replace'),
|
||||
},
|
||||
'getCursor': ()=>{/*This is intentional (SonarQube)*/},
|
||||
'removeOverlay': ()=>{/*This is intentional (SonarQube)*/},
|
||||
'addOverlay': ()=>{/*This is intentional (SonarQube)*/},
|
||||
'setSelection': ()=>{/*This is intentional (SonarQube)*/},
|
||||
'scrollIntoView': ()=>{/*This is intentional (SonarQube)*/},
|
||||
'getWrapperElement': document.createElement('div'),
|
||||
'on': ()=>{/*This is intentional (SonarQube)*/},
|
||||
});
|
||||
cmObj = OrigCodeMirror.fromTextArea();
|
||||
|
||||
const cmRerender = (props)=>{
|
||||
cmInstance.rerender(
|
||||
<ThemedCM
|
||||
value={'Init text'}
|
||||
options={options}
|
||||
className="testClass"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
};
|
||||
beforeEach(()=>{
|
||||
jasmineEnzyme();
|
||||
pgWindow.pgAdmin = fakePgAdmin;
|
||||
spyOn(OrigCodeMirror, 'fromTextArea').and.returnValue(cmObj);
|
||||
const ThemedCM = withTheme(CodeMirror);
|
||||
cmInstance = mount(
|
||||
// jest.spyOn(OrigCodeMirror, 'fromTextArea').mockReturnValue(cmObj);
|
||||
cmInstance = render(
|
||||
<ThemedCM
|
||||
value={'Init text'}
|
||||
options={options}
|
||||
@@ -74,28 +51,27 @@ describe('CodeMirror', ()=>{
|
||||
pgWindow.pgAdmin = undefined;
|
||||
});
|
||||
|
||||
it('init', ()=>{
|
||||
it('init', async ()=>{
|
||||
/* textarea ref passed to fromTextArea */
|
||||
expect(OrigCodeMirror.fromTextArea).toHaveBeenCalledWith(cmInstance.find('textarea').getDOMNode(), jasmine.objectContaining(options));
|
||||
expect(cmObj.setValue).toHaveBeenCalledWith('Init text');
|
||||
expect(OrigCodeMirror.fromTextArea).toHaveBeenCalledWith(cmInstance.container.querySelector('textarea'), expect.objectContaining(options));
|
||||
await waitFor(() => expect(cmObj.setValue).toHaveBeenCalledWith('Init text'));
|
||||
});
|
||||
|
||||
it('change value', ()=>{
|
||||
cmInstance.setProps({value: 'the new text'});
|
||||
cmRerender({value: 'the new text'});
|
||||
expect(cmObj.setValue).toHaveBeenCalledWith('the new text');
|
||||
|
||||
cmInstance.setProps({value: null});
|
||||
cmRerender({value: null});
|
||||
expect(cmObj.setValue).toHaveBeenCalledWith('');
|
||||
});
|
||||
|
||||
|
||||
describe('FindDialog', ()=>{
|
||||
let ctrl;
|
||||
const onClose = jasmine.createSpy('onClose');
|
||||
const onClose = jest.fn();
|
||||
const ThemedFindDialog = withTheme(FindDialog);
|
||||
const ctrlMount = (props, callback)=>{
|
||||
ctrl?.unmount();
|
||||
ctrl = mount(
|
||||
const ctrlMount = (props)=>{
|
||||
ctrl = render(
|
||||
<ThemedFindDialog
|
||||
editor={cmObj}
|
||||
show={true}
|
||||
@@ -103,115 +79,72 @@ describe('CodeMirror', ()=>{
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
setTimeout(()=>{
|
||||
ctrl.update();
|
||||
callback();
|
||||
}, 0);
|
||||
};
|
||||
|
||||
it('init', (done)=>{
|
||||
ctrlMount({}, ()=>{
|
||||
cmObj.removeOverlay.calls.reset();
|
||||
cmObj.addOverlay.calls.reset();
|
||||
ctrl.find('InputText').find('input').simulate('change', {
|
||||
target: {value: '\n\r\t\A'},
|
||||
});
|
||||
setTimeout(()=>{
|
||||
expect(cmObj.removeOverlay).toHaveBeenCalled();
|
||||
expect(cmObj.addOverlay).toHaveBeenCalled();
|
||||
expect(cmObj.setSelection).toHaveBeenCalledWith(3, 14);
|
||||
expect(cmObj.scrollIntoView).toHaveBeenCalled();
|
||||
done();
|
||||
}, 0);
|
||||
it('init', ()=>{
|
||||
ctrlMount({});
|
||||
|
||||
cmObj.removeOverlay.mockClear();
|
||||
cmObj.addOverlay.mockClear();
|
||||
const input = ctrl.container.querySelector('input');
|
||||
|
||||
fireEvent.change(input, {
|
||||
target: {value: '\n\r\tA'},
|
||||
});
|
||||
|
||||
expect(cmObj.removeOverlay).toHaveBeenCalled();
|
||||
expect(cmObj.addOverlay).toHaveBeenCalled();
|
||||
expect(cmObj.setSelection).toHaveBeenCalledWith(3, 14);
|
||||
expect(cmObj.scrollIntoView).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('reverse forward', (done)=>{
|
||||
ctrlMount({}, ()=>{
|
||||
ctrl.find('InputText').find('input').simulate('change', {
|
||||
target: {value: 'A'},
|
||||
});
|
||||
cmObj.setSelection.calls.reset();
|
||||
cmObj.addOverlay.calls.reset();
|
||||
ctrl.find('InputText').find('input').simulate('keypress', {
|
||||
key: 'Enter', shiftKey: true,
|
||||
});
|
||||
ctrl.find('InputText').find('input').simulate('keypress', {
|
||||
key: 'Enter', shiftKey: false,
|
||||
});
|
||||
setTimeout(()=>{
|
||||
expect(cmObj.setSelection).toHaveBeenCalledWith(1, 10);
|
||||
expect(cmObj.setSelection).toHaveBeenCalledWith(3, 14);
|
||||
done();
|
||||
}, 0);
|
||||
it('escape', ()=>{
|
||||
ctrlMount({});
|
||||
cmObj.removeOverlay.mockClear();
|
||||
|
||||
fireEvent.keyDown(ctrl.container.querySelector('input'), {
|
||||
key: 'Escape',
|
||||
});
|
||||
|
||||
expect(cmObj.removeOverlay).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('toggle match case', ()=>{
|
||||
ctrlMount({});
|
||||
const btn = screen.getAllByRole('button').at(0);
|
||||
expect(btn.className.includes('makeStyles-defaultButton')).toBe(true);
|
||||
fireEvent.click(btn);
|
||||
|
||||
it('escape', (done)=>{
|
||||
ctrlMount({}, ()=>{
|
||||
cmObj.removeOverlay.calls.reset();
|
||||
ctrl.find('InputText').find('input').simulate('keydown', {
|
||||
key: 'Escape',
|
||||
});
|
||||
setTimeout(()=>{
|
||||
expect(cmObj.removeOverlay).toHaveBeenCalled();
|
||||
done();
|
||||
}, 0);
|
||||
});
|
||||
expect(screen.getAllByRole('button').at(0).className.includes('makeStyles-primaryButton')).toBe(true);
|
||||
});
|
||||
|
||||
it('toggle match case', (done)=>{
|
||||
ctrlMount({}, ()=>{
|
||||
expect(ctrl.find('PgIconButton[data-test="case"]').props()).toEqual(jasmine.objectContaining({
|
||||
color: 'default'
|
||||
}));
|
||||
ctrl.find('PgIconButton[data-test="case"]').find('button').simulate('click');
|
||||
setTimeout(()=>{
|
||||
expect(ctrl.find('PgIconButton[data-test="case"]').props()).toEqual(jasmine.objectContaining({
|
||||
color: 'primary'
|
||||
}));
|
||||
done();
|
||||
}, 0);
|
||||
it('toggle regex', ()=>{
|
||||
ctrlMount({});
|
||||
|
||||
fireEvent.change(ctrl.container.querySelector('input'), {
|
||||
target: {value: 'A'},
|
||||
});
|
||||
|
||||
const btn = screen.getAllByRole('button').at(1);
|
||||
expect(btn.className.includes('makeStyles-defaultButton')).toBe(true);
|
||||
fireEvent.click(btn);
|
||||
});
|
||||
|
||||
it('toggle regex', (done)=>{
|
||||
ctrlMount({}, ()=>{
|
||||
ctrl.find('InputText').find('input').simulate('change', {
|
||||
target: {value: 'A'},
|
||||
});
|
||||
expect(ctrl.find('PgIconButton[data-test="regex"]').props()).toEqual(jasmine.objectContaining({
|
||||
color: 'default'
|
||||
}));
|
||||
ctrl.find('PgIconButton[data-test="regex"]').find('button').simulate('click');
|
||||
setTimeout(()=>{
|
||||
expect(ctrl.find('PgIconButton[data-test="regex"]').props()).toEqual(jasmine.objectContaining({
|
||||
color: 'primary'
|
||||
}));
|
||||
done();
|
||||
}, 0);
|
||||
it('replace', async ()=>{
|
||||
ctrlMount({replace: true});
|
||||
cmObj.getSearchCursor().replace.mockClear();
|
||||
fireEvent.change(ctrl.container.querySelectorAll('input')[0], {
|
||||
target: {value: 'A'},
|
||||
});
|
||||
fireEvent.change(ctrl.container.querySelectorAll('input')[1], {
|
||||
target: {value: 'B'},
|
||||
});
|
||||
fireEvent.keyPress(ctrl.container.querySelectorAll('input')[1], {
|
||||
key: 'Enter', shiftKey: true, code: 13, charCode: 13
|
||||
});
|
||||
await waitFor(()=>{
|
||||
expect(cmObj.getSearchCursor().replace).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
it('replace', (done)=>{
|
||||
ctrlMount({replace: true}, ()=>{
|
||||
cmObj.getSearchCursor().replace.calls.reset();
|
||||
ctrl.find('InputText').at(0).find('input').simulate('change', {
|
||||
target: {value: 'A'},
|
||||
});
|
||||
ctrl.find('InputText').at(1).find('input').simulate('change', {
|
||||
target: {value: 'B'},
|
||||
});
|
||||
ctrl.find('InputText').at(1).find('input').simulate('keypress', {
|
||||
key: 'Enter', shiftKey: true,
|
||||
});
|
||||
setTimeout(()=>{
|
||||
expect(cmObj.getSearchCursor().replace).toHaveBeenCalled();
|
||||
done();
|
||||
}, 0);
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user