Port preferences dialog to React. Fixes #7149

web/regression/javascript/components/KeyboardShortcuts.spec.js

@@ -0,0 +1,100 @@
+/////////////////////////////////////////////////////////////
+//
+// pgAdmin 4 - PostgreSQL Tools
+//
+// Copyright (C) 2013 - 2022, The pgAdmin Development Team
+// This software is released under the PostgreSQL Licence
+//
+//////////////////////////////////////////////////////////////
+
+import jasmineEnzyme from 'jasmine-enzyme';
+import React from 'react';
+import '../helper/enzyme.helper';
+import { withTheme } from '../fake_theme';
+import { createMount } from '@material-ui/core/test-utils';
+import {
+  OutlinedInput,
+} from '@material-ui/core';
+import KeyboardShortcuts from '../../../pgadmin/static/js/components/KeyboardShortcuts';
+
+/* MUI Components need to be wrapped in Theme for theme vars */
+describe('KeyboardShortcuts', () => {
+  let mount;
+  let defult_value = {
+    'ctrl': true,
+    'alt': true,
+    'key': {
+      'char': 'a',
+      'key_code': 97
+    }
+  };
+  let fields = [{
+    type: 'keyCode',
+    label: 'Key'
+  }, {
+    name: 'shift',
+    label: 'Shift',
+    type: 'checkbox'
+  },
+  {
+    name: 'control',
+    label: 'Control',
+    type: 'checkbox'
+  },
+  {
+    name: 'alt',
+    label: 'Alt/Option',
+    type: 'checkbox'
+  }];
+
+  /* Use createMount so that material ui components gets the required context */
+  /* https://material-ui.com/guides/testing/#api */
+  beforeAll(() => {
+    mount = createMount();
+  });
+
+  afterAll(() => {
+    mount.cleanUp();
+  });
+
+  beforeEach(() => {
+    jasmineEnzyme();
+  });
+
+  describe('KeyboardShortcuts', () => {
+    let ThemedFormInputKeyboardShortcuts = withTheme(KeyboardShortcuts), ctrl;
+
+    beforeEach(() => {
+      ctrl = mount(
+        <ThemedFormInputKeyboardShortcuts
+          testcid="inpCid"
+          helpMessage="some help message"
+          /* InputText */
+          readonly={false}
+          disabled={false}
+          maxlength={1}
+          value={defult_value}
+          fields={fields}
+          controlProps={{
+            extraprop: 'test'
+          }}
+        />);
+    });
+
+    it('init', () => {
+      expect(ctrl.find(OutlinedInput).prop('value')).toBe('a');
+    });
+
+    it('Key change', () => {
+      let onChange = () => {/*This is intentional (SonarQube)*/ };
+      ctrl.setProps({
+        controlProps: {
+          onKeyDown: onChange
+        }
+      });
+
+      expect(ctrl.find(OutlinedInput).prop('value')).toBe('a');
+    });
+
+  });
+});

web/regression/javascript/components/QueryThreshold.spec.js

@@ -0,0 +1,86 @@
+/////////////////////////////////////////////////////////////
+//
+// pgAdmin 4 - PostgreSQL Tools
+//
+// Copyright (C) 2013 - 2022, The pgAdmin Development Team
+// This software is released under the PostgreSQL Licence
+//
+//////////////////////////////////////////////////////////////
+
+import jasmineEnzyme from 'jasmine-enzyme';
+import React from 'react';
+import '../helper/enzyme.helper';
+import { withTheme } from '../fake_theme';
+import { createMount } from '@material-ui/core/test-utils';
+import {
+  OutlinedInput,
+} from '@material-ui/core';
+import QueryThresholds from '../../../pgadmin/static/js/components/QueryThresholds';
+
+/* MUI Components need to be wrapped in Theme for theme vars */
+describe('QueryThresholds', () => {
+  let mount;
+  let defult_value = {
+    'warning': 5,
+    'alert': 6
+  };
+
+  /* Use createMount so that material ui components gets the required context */
+  /* https://material-ui.com/guides/testing/#api */
+  beforeAll(() => {
+    mount = createMount();
+  });
+
+  afterAll(() => {
+    mount.cleanUp();
+  });
+
+  beforeEach(() => {
+    jasmineEnzyme();
+  });
+
+  describe('QueryThresholds', () => {
+    let ThemedFormInputQueryThresholds = withTheme(QueryThresholds), ctrl;
+
+    beforeEach(() => {
+      ctrl = mount(
+        <ThemedFormInputQueryThresholds
+          testcid="inpCid"
+          helpMessage="some help message"
+          /* InputText */
+          readonly={false}
+          disabled={false}
+          maxlength={1}
+          value={defult_value}
+          controlProps={{
+            extraprop: 'test'
+          }}
+        />);
+    });
+
+    it('init Warning', () => {
+      expect(ctrl.find(OutlinedInput).at(0).prop('value')).toBe(5);
+    });
+
+    it('init Alert', () => {
+      expect(ctrl.find(OutlinedInput).at(1).prop('value')).toBe(6);
+    });
+
+    it('warning change', () => {
+      let onChange = () => {/*This is intentional (SonarQube)*/ };
+      ctrl.setProps({
+        onChange: onChange
+      });
+      expect(ctrl.find(OutlinedInput).at(0).prop('value')).toBe(5);
+    });
+
+    it('Alert change', () => {
+      let onChange = () => {/*This is intentional (SonarQube)*/ };
+      ctrl.setProps({
+        onChange: onChange
+      });
+      expect(ctrl.find(OutlinedInput).at(1).prop('value')).toBe(6);
+    });
+  });
+
+});

web/regression/javascript/components/Themes.spec.js

@@ -0,0 +1,96 @@
+/////////////////////////////////////////////////////////////
+//
+// pgAdmin 4 - PostgreSQL Tools
+//
+// Copyright (C) 2013 - 2022, The pgAdmin Development Team
+// This software is released under the PostgreSQL Licence
+//
+//////////////////////////////////////////////////////////////
+
+import jasmineEnzyme from 'jasmine-enzyme';
+import React from 'react';
+import '../helper/enzyme.helper';
+import { withTheme } from '../fake_theme';
+import { createMount } from '@material-ui/core/test-utils';
+import Themes from '../../../pgadmin/static/js/components/Themes';
+import { InputSelect } from '../../../pgadmin/static/js/components/FormComponents';
+
+/* MUI Components need to be wrapped in Theme for theme vars */
+describe('Themes', () => {
+  let mount;
+  let options = [{
+    value: 'standard',
+    preview_src: 'sd',
+    selected: true,
+    label: 'Standard'
+  }, {
+    value: 'dark',
+    preview_src: 'test',
+    selected: false,
+    label: 'Dark'
+  },
+  {
+    value: 'high_contrast',
+    preview_src: 'hc',
+    selected: false,
+    label: 'High Contrast',
+  }
+  ];
+
+  /* Use createMount so that material ui components gets the required context */
+  /* https://material-ui.com/guides/testing/#api */
+  beforeAll(() => {
+    mount = createMount();
+  });
+
+  afterAll(() => {
+    mount.cleanUp();
+  });
+
+  beforeEach(() => {
+    jasmineEnzyme();
+  });
+
+  describe('Themes', () => {
+    let ThemedFormInputThemes = withTheme(Themes), ctrl, onChange = jasmine.createSpy('onChange');
+
+    beforeEach(() => {
+      ctrl = mount(
+        <ThemedFormInputThemes
+          testcid="inpCid"
+          helpMessage="some help message"
+          options={options}
+          onChange={onChange}
+          value={'standard'}
+        />);
+    });
+
+    it('init options', () => {
+      expect(ctrl.find(InputSelect).at(0).prop('options').length).toBe(3);
+    });
+
+    it('change value', () => {
+      ctrl.setProps({
+        value: 'dark',
+        onChange: onChange,
+      });
+      expect(ctrl.find(InputSelect).at(0).prop('value')).toBe('dark');
+    });
+
+
+    it('onChange', () => {
+      let select = ctrl.find(InputSelect).at(0);
+      const input = select.find('input');
+      input.simulate('keyDown', { key: 'ArrowDown', keyCode: 40 });
+
+      input.simulate('keyDown', { key: 'Enter', keyCode: 13 });
+      
+      ctrl.setProps({
+        value: 'dark',
+        onChange: onChange,
+      });
+      expect(ctrl.find(InputSelect).at(0).prop('value')).toBe('dark');
+    });
+  });
+
+});