mirror of
https://github.com/pgadmin-org/pgadmin4.git
synced 2024-11-25 18:20:20 -06:00
862f101772
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.
601 lines
17 KiB
JavaScript
601 lines
17 KiB
JavaScript
/////////////////////////////////////////////////////////////
|
|
//
|
|
// pgAdmin 4 - PostgreSQL Tools
|
|
//
|
|
// Copyright (C) 2013 - 2023, The pgAdmin Development Team
|
|
// This software is released under the PostgreSQL Licence
|
|
//
|
|
//////////////////////////////////////////////////////////////
|
|
|
|
import React from 'react';
|
|
|
|
import { withTheme } from '../fake_theme';
|
|
import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
|
|
|
|
|
|
import {FormInputText, FormInputFileSelect, FormInputSQL,
|
|
FormInputSwitch, FormInputCheckbox, FormInputToggle, FormInputSelect,
|
|
FormInputColor,
|
|
FormFooterMessage,
|
|
MESSAGE_TYPE} from '../../../pgadmin/static/js/components/FormComponents';
|
|
import * as showFileManager from '../../../pgadmin/static/js/helpers/showFileManager';
|
|
|
|
/* MUI Components need to be wrapped in Theme for theme vars */
|
|
describe('FormComponents', ()=>{
|
|
let onAccessibility = ()=> {
|
|
const input = screen.getByTestId('input-text');
|
|
expect(input.getAttribute('id')).toBe('inpCid');
|
|
expect(input.getAttribute('aria-describedby')).toBe('hinpCid');
|
|
};
|
|
|
|
describe('FormInputText', ()=>{
|
|
let ThemedFormInputText = withTheme(FormInputText), ctrl;
|
|
const ctrlRerender = (props)=>{
|
|
ctrl.rerender(
|
|
<ThemedFormInputText
|
|
label="First"
|
|
className="someClass"
|
|
testcid="inpCid"
|
|
helpMessage="some help message"
|
|
/* InputText */
|
|
readonly={false}
|
|
disabled={false}
|
|
|
|
value={'thevalue'}
|
|
controlProps={{
|
|
extraprop: 'test',
|
|
maxLength: 50,
|
|
}}
|
|
{...props}
|
|
/>);
|
|
};
|
|
|
|
beforeEach(()=>{
|
|
ctrl = render(
|
|
<ThemedFormInputText
|
|
label="First"
|
|
className="someClass"
|
|
testcid="inpCid"
|
|
helpMessage="some help message"
|
|
/* InputText */
|
|
readonly={false}
|
|
disabled={false}
|
|
|
|
value={'thevalue'}
|
|
controlProps={{
|
|
extraprop: 'test',
|
|
maxLength: 50,
|
|
}}
|
|
/>);
|
|
});
|
|
|
|
it('init', ()=>{
|
|
expect(screen.getByLabelText('First')).toBeInTheDocument();
|
|
const input = screen.getByDisplayValue('thevalue');
|
|
expect(input).toBeInTheDocument();
|
|
expect(input.hasAttribute('readonly')).toBe(false);
|
|
expect(input.hasAttribute('disabled')).toBe(false);
|
|
expect(screen.getByText('some help message')).toBeInTheDocument();
|
|
});
|
|
|
|
it('props change', ()=>{
|
|
let onChange = ()=>{/*This is intentional (SonarQube)*/};
|
|
ctrlRerender({
|
|
readonly: true,
|
|
disabled: true,
|
|
value: 'new value',
|
|
onChange: onChange,
|
|
});
|
|
const input = screen.getByDisplayValue('new value');
|
|
expect(input).toBeInTheDocument();
|
|
expect(input.hasAttribute('readonly')).toBe(true);
|
|
expect(input.hasAttribute('disabled')).toBe(true);
|
|
});
|
|
|
|
it('accessibility', ()=>{
|
|
onAccessibility();
|
|
});
|
|
});
|
|
|
|
describe('FormInputFileSelect', ()=>{
|
|
let ThemedFormInputFileSelect = withTheme(FormInputFileSelect), ctrl;
|
|
const ctrlRerender = (props)=>{
|
|
ctrl.rerender(
|
|
<ThemedFormInputFileSelect
|
|
label="First"
|
|
className="someClass"
|
|
testcid="inpCid"
|
|
helpMessage="some help message"
|
|
/* InputText */
|
|
readonly={false}
|
|
disabled={false}
|
|
value={'thevalue'}
|
|
controlProps={{
|
|
dialogType: 'select_file', supportedTypes: ['*'],
|
|
}}
|
|
{...props}
|
|
/>);
|
|
};
|
|
|
|
beforeEach(()=>{
|
|
jest.spyOn(showFileManager, 'showFileManager').mockImplementation((controlProps, onFileSelect)=>{
|
|
onFileSelect('selected/file');
|
|
});
|
|
ctrl = render(
|
|
<ThemedFormInputFileSelect
|
|
label="First"
|
|
className="someClass"
|
|
testcid="inpCid"
|
|
helpMessage="some help message"
|
|
/* InputText */
|
|
readonly={false}
|
|
disabled={false}
|
|
value={'thevalue'}
|
|
controlProps={{
|
|
dialogType: 'select_file', supportedTypes: ['*'],
|
|
}}
|
|
/>);
|
|
});
|
|
|
|
it('init', ()=>{
|
|
expect(screen.getByLabelText('First')).toBeInTheDocument();
|
|
const input = screen.getByDisplayValue('thevalue');
|
|
expect(input).toBeInTheDocument();
|
|
expect(input.hasAttribute('readonly')).toBe(false);
|
|
expect(input.hasAttribute('disabled')).toBe(false);
|
|
expect(screen.getByText('some help message')).toBeInTheDocument();
|
|
});
|
|
|
|
it('props change', ()=>{
|
|
ctrlRerender({
|
|
readonly: true,
|
|
disabled: true,
|
|
value: 'new value',
|
|
});
|
|
|
|
const input = screen.getByDisplayValue('new value');
|
|
expect(input).toBeInTheDocument();
|
|
expect(input.hasAttribute('readonly')).toBe(true);
|
|
expect(input.hasAttribute('disabled')).toBe(true);
|
|
});
|
|
|
|
|
|
it('file select', ()=>{
|
|
let onChange = jest.fn();
|
|
ctrlRerender({
|
|
onChange: onChange,
|
|
});
|
|
fireEvent.click(screen.getByRole('button'));
|
|
expect(onChange).toHaveBeenCalledWith('selected/file');
|
|
});
|
|
|
|
it('accessibility', ()=>{
|
|
onAccessibility();
|
|
});
|
|
});
|
|
|
|
describe('FormInputSQL', ()=>{
|
|
let ThemedFormInputSQL = withTheme(FormInputSQL);
|
|
|
|
beforeEach(()=>{
|
|
render(
|
|
<ThemedFormInputSQL
|
|
label="First"
|
|
className="someClass"
|
|
testcid="inpCid"
|
|
helpMessage="some help message"
|
|
/* InputSQL */
|
|
value={'thevalue'}
|
|
controlProps={{
|
|
op1: 'test'
|
|
}}
|
|
/>);
|
|
});
|
|
|
|
it('init', ()=>{
|
|
expect(screen.getByLabelText('First')).toBeInTheDocument();
|
|
expect(screen.getByText('thevalue')).toBeInTheDocument();
|
|
expect(screen.getByText('some help message')).toBeInTheDocument();
|
|
});
|
|
});
|
|
|
|
describe('FormInputSwitch', ()=>{
|
|
let ThemedFormInputSwitch = withTheme(FormInputSwitch), ctrl, onChange=()=>{return 1;};
|
|
const ctrlRerender = (props)=>{
|
|
ctrl.rerender(
|
|
<ThemedFormInputSwitch
|
|
label="First"
|
|
className="someClass"
|
|
testcid="inpCid"
|
|
helpMessage="some help message"
|
|
/* InputSwitch */
|
|
readonly={false}
|
|
value={false}
|
|
onChange={onChange}
|
|
{...props}
|
|
/>);
|
|
};
|
|
|
|
beforeEach(()=>{
|
|
ctrl = render(
|
|
<ThemedFormInputSwitch
|
|
label="First"
|
|
className="someClass"
|
|
testcid="inpCid"
|
|
helpMessage="some help message"
|
|
/* InputSwitch */
|
|
readonly={false}
|
|
value={false}
|
|
onChange={onChange}
|
|
/>);
|
|
});
|
|
|
|
it('init', ()=>{
|
|
expect(screen.getByLabelText('First')).toBeInTheDocument();
|
|
const input = ctrl.container.querySelector('.MuiSwitch-switchBase');
|
|
expect(input).toBeInTheDocument();
|
|
expect(input.className.includes('Mui-checked')).toBe(false);
|
|
expect(screen.getByText('some help message')).toBeInTheDocument();
|
|
});
|
|
|
|
it('props change', ()=>{
|
|
ctrlRerender({
|
|
readonly: true,
|
|
value: true,
|
|
});
|
|
|
|
const input = ctrl.container.querySelector('.MuiSwitch-switchBase');
|
|
expect(input.className.includes('Mui-checked')).toBe(true);
|
|
});
|
|
|
|
it('accessibility', ()=>{
|
|
const input = ctrl.container.querySelector('input');
|
|
expect(input.getAttribute('id')).toBe('inpCid');
|
|
expect(input.getAttribute('aria-describedby')).toBe('hinpCid');
|
|
});
|
|
});
|
|
|
|
describe('FormInputCheckbox', ()=>{
|
|
let ThemedFormInputCheckbox = withTheme(FormInputCheckbox), ctrl, onChange=()=>{return 1;};
|
|
const ctrlRerender = (props)=>{
|
|
ctrl.rerender(
|
|
<ThemedFormInputCheckbox
|
|
label="First"
|
|
className="someClass"
|
|
testcid="inpCid"
|
|
helpMessage="some help message"
|
|
/* InputCheckbox */
|
|
disabled={false}
|
|
value={false}
|
|
onChange={onChange}
|
|
controlProps={{
|
|
label: 'Second'
|
|
}}
|
|
{...props}
|
|
/>);
|
|
};
|
|
|
|
beforeEach(()=>{
|
|
ctrl = render(
|
|
<ThemedFormInputCheckbox
|
|
label="First"
|
|
className="someClass"
|
|
testcid="inpCid"
|
|
helpMessage="some help message"
|
|
/* InputCheckbox */
|
|
disabled={false}
|
|
value={false}
|
|
onChange={onChange}
|
|
controlProps={{
|
|
label: 'Second'
|
|
}}
|
|
/>);
|
|
});
|
|
|
|
it('init', ()=>{
|
|
expect(screen.getByLabelText('First')).toBeInTheDocument();
|
|
expect(screen.getByLabelText('Second')).toBeInTheDocument();
|
|
|
|
const input = ctrl.container.querySelector('.MuiCheckbox-root');
|
|
expect(input).toBeInTheDocument();
|
|
expect(input.className.includes('Mui-checked')).toBe(false);
|
|
expect(screen.getByText('some help message')).toBeInTheDocument();
|
|
});
|
|
|
|
it('props change', ()=>{
|
|
ctrlRerender({
|
|
readonly: true,
|
|
value: true,
|
|
});
|
|
const input = ctrl.container.querySelector('.MuiCheckbox-root');
|
|
expect(input).toBeInTheDocument();
|
|
expect(input.className.includes('Mui-checked')).toBe(true);
|
|
});
|
|
|
|
it('accessibility', ()=>{
|
|
const input = ctrl.container.querySelector('input');
|
|
expect(input.getAttribute('id')).toBe('inpCid');
|
|
expect(input.getAttribute('aria-describedby')).toBe('hinpCid');
|
|
});
|
|
});
|
|
|
|
describe('FormInputToggle', ()=>{
|
|
let ThemedFormInputToggle = withTheme(FormInputToggle), ctrl, onChange=()=>{return 1;};
|
|
const ctrlRerender = (props)=>{
|
|
ctrl.rerender(
|
|
<ThemedFormInputToggle
|
|
label="First"
|
|
className="someClass"
|
|
testcid="inpCid"
|
|
helpMessage="some help message"
|
|
/* InputToggle */
|
|
disabled={false}
|
|
options={[
|
|
{label: 'Op1', value: 1},
|
|
{label: 'Op2', value: 2},
|
|
{label: 'Op3', value: 3},
|
|
]}
|
|
value={2}
|
|
onChange={onChange}
|
|
{...props}
|
|
/>);
|
|
};
|
|
|
|
beforeEach(()=>{
|
|
ctrl = render(
|
|
<ThemedFormInputToggle
|
|
label="First"
|
|
className="someClass"
|
|
testcid="inpCid"
|
|
helpMessage="some help message"
|
|
/* InputToggle */
|
|
disabled={false}
|
|
options={[
|
|
{label: 'Op1', value: 1},
|
|
{label: 'Op2', value: 2},
|
|
{label: 'Op3', value: 3},
|
|
]}
|
|
value={2}
|
|
onChange={onChange}
|
|
/>);
|
|
});
|
|
|
|
it('init', ()=>{
|
|
expect(screen.getByLabelText('First')).toBeInTheDocument();
|
|
expect(screen.getAllByRole('button').length).toBe(3);
|
|
expect(screen.getAllByRole('button').at(0).className.includes('primaryButton')).toBe(false);
|
|
expect(screen.getAllByRole('button').at(1).className.includes('primaryButton')).toBe(true);
|
|
expect(screen.getAllByRole('button').at(2).className.includes('primaryButton')).toBe(false);
|
|
expect(screen.getByText('some help message')).toBeInTheDocument();
|
|
});
|
|
|
|
it('props change', ()=>{
|
|
ctrlRerender({
|
|
value: 1,
|
|
});
|
|
expect(screen.getAllByRole('button').at(0).className.includes('primaryButton')).toBe(true);
|
|
expect(screen.getAllByRole('button').at(1).className.includes('primaryButton')).toBe(false);
|
|
expect(screen.getAllByRole('button').at(2).className.includes('primaryButton')).toBe(false);
|
|
});
|
|
|
|
it('accessibility', ()=>{
|
|
const input = ctrl.container.querySelector('input');
|
|
expect(input.getAttribute('id')).toBe('inpCid');
|
|
expect(input.getAttribute('aria-describedby')).toBe('hinpCid');
|
|
});
|
|
});
|
|
|
|
describe('FormInputSelect', ()=>{
|
|
let ThemedFormInputSelect = withTheme(FormInputSelect), ctrl, onChange=jest.fn();
|
|
const ctrlRerender = (props)=>{
|
|
act(()=>{
|
|
ctrl.rerender(
|
|
<ThemedFormInputSelect
|
|
label="First"
|
|
className="someClass"
|
|
testcid="inpCid"
|
|
helpMessage="some help message"
|
|
/* InputSelect */
|
|
readonly={false}
|
|
disabled={false}
|
|
options={[
|
|
{label: 'Op1', value: 1},
|
|
{label: 'Op2', value: 2},
|
|
{label: 'Op3', value: 3},
|
|
]}
|
|
value={1}
|
|
onChange={onChange}
|
|
{...props}
|
|
/>);
|
|
});
|
|
};
|
|
|
|
beforeEach(async ()=>{
|
|
await act(async ()=>{
|
|
ctrl = await render(
|
|
<ThemedFormInputSelect
|
|
label="First"
|
|
className="someClass"
|
|
testcid="inpCid"
|
|
helpMessage="some help message"
|
|
/* InputSelect */
|
|
readonly={false}
|
|
disabled={false}
|
|
options={[
|
|
{label: 'Op1', value: 1},
|
|
{label: 'Op2', value: 2},
|
|
{label: 'Op3', value: 3},
|
|
]}
|
|
value={1}
|
|
onChange={onChange}
|
|
/>);
|
|
});
|
|
});
|
|
|
|
it('init', ()=>{
|
|
expect(screen.getByLabelText('First')).toBeInTheDocument();
|
|
expect(screen.getByText('Op1')).toBeInTheDocument();
|
|
expect(screen.getByText('some help message')).toBeInTheDocument();
|
|
});
|
|
|
|
it('no-clear with multi', ()=>{
|
|
ctrlRerender({
|
|
controlProps: {
|
|
allowClear: false,
|
|
multiple: true,
|
|
},
|
|
value: [2, 3],
|
|
});
|
|
expect(screen.getByText('Op2')).toBeInTheDocument();
|
|
expect(screen.getByText('Op3')).toBeInTheDocument();
|
|
});
|
|
|
|
it('creatable with multi', ()=>{
|
|
ctrlRerender({
|
|
controlProps: {
|
|
creatable: true,
|
|
multiple: true,
|
|
},
|
|
value: ['val1', 'val2'],
|
|
});
|
|
|
|
expect(screen.getByText('val1')).toBeInTheDocument();
|
|
expect(screen.getByText('val2')).toBeInTheDocument();
|
|
});
|
|
|
|
it('promise options', async ()=>{
|
|
let optionsLoaded = jest.fn();
|
|
let res = [
|
|
{label: 'PrOp1', value: 1},
|
|
{label: 'PrOp2', value: 2},
|
|
{label: 'PrOp3', value: 3},
|
|
];
|
|
/* For options change, remount needed */
|
|
ctrlRerender({
|
|
options: ()=>Promise.resolve(res),
|
|
optionsReloadBasis: 3,
|
|
value: 3,
|
|
optionsLoaded: optionsLoaded,
|
|
});
|
|
// expect(screen.getByText('PrOp3')).toBeInTheDocument()
|
|
|
|
await waitFor(()=>expect(screen.getByText('PrOp3')).toBeInTheDocument(), {timeout: 500});
|
|
});
|
|
|
|
it('accessibility', ()=>{
|
|
const input = ctrl.container.querySelectorAll('input')[1];
|
|
expect(input.getAttribute('id')).toBe('inpCid');
|
|
expect(input.getAttribute('aria-describedby')).toBe('hinpCid');
|
|
});
|
|
});
|
|
|
|
describe('FormInputColor', ()=>{
|
|
let pickrObj = React.createRef();
|
|
let ThemedFormInputColor = withTheme(FormInputColor), ctrl, onChange=jest.fn();
|
|
const ctrlRerender = (props)=>{
|
|
ctrl.rerender(
|
|
<ThemedFormInputColor
|
|
label="First"
|
|
className="someClass"
|
|
testcid="inpCid"
|
|
helpMessage="some help message"
|
|
/* InputColor */
|
|
disabled={false}
|
|
value="#f0f"
|
|
onChange={onChange}
|
|
currObj={(obj)=>pickrObj.current=obj}
|
|
{...props}
|
|
/>);
|
|
};
|
|
|
|
beforeEach(()=>{
|
|
ctrl = render(
|
|
<ThemedFormInputColor
|
|
label="First"
|
|
className="someClass"
|
|
testcid="inpCid"
|
|
helpMessage="some help message"
|
|
/* InputColor */
|
|
disabled={false}
|
|
value="#f0f"
|
|
onChange={onChange}
|
|
currObj={(obj)=>pickrObj.current=obj}
|
|
/>);
|
|
});
|
|
|
|
it('init', ()=>{
|
|
expect(screen.getAllByRole('button').at(0).style.backgroundColor).toEqual('rgb(255, 0, 255)');
|
|
});
|
|
|
|
it('no color', ()=>{
|
|
ctrlRerender({
|
|
value: null,
|
|
});
|
|
const btn = screen.getAllByRole('button').at(0);
|
|
expect(btn.style.backgroundColor).toBe('');
|
|
});
|
|
});
|
|
|
|
describe('FormFooterMessage', ()=>{
|
|
let ThemedFormFooterMessage = withTheme(FormFooterMessage), ctrl, onClose=jest.fn();
|
|
const ctrlRerender = (props)=>{
|
|
ctrl.rerender(
|
|
<ThemedFormFooterMessage
|
|
type={MESSAGE_TYPE.SUCCESS}
|
|
message="Some message"
|
|
closable={false}
|
|
onClose={onClose}
|
|
{...props}
|
|
/>);
|
|
};
|
|
beforeEach(()=>{
|
|
ctrl = render(
|
|
<ThemedFormFooterMessage
|
|
type={MESSAGE_TYPE.SUCCESS}
|
|
message="Some message"
|
|
closable={false}
|
|
onClose={onClose}
|
|
/>);
|
|
});
|
|
|
|
it('init', ()=>{
|
|
expect(screen.getByTestId(MESSAGE_TYPE.SUCCESS)).toBeInTheDocument();
|
|
expect(screen.getByText('Some message')).toBeInTheDocument();
|
|
});
|
|
|
|
it('change types', ()=>{
|
|
ctrlRerender({
|
|
type: MESSAGE_TYPE.ERROR,
|
|
});
|
|
expect(screen.getByTestId(MESSAGE_TYPE.ERROR)).toBeInTheDocument();
|
|
|
|
ctrlRerender({
|
|
type: MESSAGE_TYPE.INFO,
|
|
});
|
|
expect(screen.getByTestId(MESSAGE_TYPE.INFO)).toBeInTheDocument();
|
|
|
|
ctrlRerender({
|
|
type: MESSAGE_TYPE.WARNING,
|
|
});
|
|
expect(screen.getByTestId(MESSAGE_TYPE.WARNING)).toBeInTheDocument();
|
|
});
|
|
|
|
it('closable', ()=>{
|
|
ctrlRerender({
|
|
closable: true,
|
|
});
|
|
const btn = screen.getByTestId('Close');
|
|
expect(btn).toBeInTheDocument();
|
|
fireEvent.click(btn);
|
|
expect(onClose).toHaveBeenCalled();
|
|
});
|
|
|
|
it('no message', ()=>{
|
|
ctrlRerender({
|
|
message: '',
|
|
});
|
|
expect(ctrl.container).toBeEmptyDOMElement();
|
|
});
|
|
});
|
|
});
|