if/SymphonyElectron
1
0
Fork 0
mirror of https://github.com/finos/SymphonyElectron.git synced 2024-12-26 00:41:11 -06:00
Code Issues Packages Projects Releases Wiki Activity

SDA-4443_4444: Adding A11Y to Close and Prevent enter while pod is disabled

Browse Source
This commit is contained in:
nguyen.tranhoang 2024-01-08 14:29:47 +07:00
parent dee181592f
commit e58b654b61
3 changed files with 115 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
spec/__snapshots__/aboutApp.spec.ts.snap
View File

@ -49,6 +49,7 @@ exports[`about app should render correctly 1`] = `
className="AboutApp-close-button"
data-testid="CLOSE_BUTTON"
disabled={false}
onKeyDown={[Function]}
onMouseDown={[Function]}
title="Close"
>

89
spec/aboutApp.spec.ts
View File

@ -184,4 +184,93 @@ describe('about app', () => {
.hasClass('AboutApp-button-save-restart-text'),
).toBe(true);
});
it('should restore to global config url on cancelling after enter pressed', () => {
const cloneAboutDataMock = {
...aboutDataMockState,
finalConfig: { url: 'bcd.symphony.com' },
};
cloneAboutDataMock.globalConfig = { isPodUrlEditable: true };
cloneAboutDataMock.userConfig = { isPodUrlEditable: false };
const wrapper = shallow(React.createElement(AboutApp));
ipcRenderer.send('about-app-data', cloneAboutDataMock);
const pod = wrapper.find(`[data-testid="POD_INFO"]`);
pod.simulate('click', { detail: 1 });
pod.simulate('click', { detail: 2 });
pod.simulate('click', { detail: 3 });
const inputPod = wrapper.find(`[data-testid="POD_INFO_INPUT"]`);
inputPod.simulate('change', {
target: { value: 'pod.symphony.com123' },
});
inputPod.simulate('keydown', {
target: { value: 'pod.symphony.com123' },
keyCode: 13,
});
wrapper.find(`[data-testid="CANCEL_BUTTON"]`).simulate('click');
expect(pod.text()).toBe('abcxyz.symphony.com');
});
it('should work with A11Y Cancel button', () => {
const cloneAboutDataMock = {
...aboutDataMockState,
finalConfig: { url: 'bcd.symphony.com' },
};
cloneAboutDataMock.globalConfig = { isPodUrlEditable: true };
cloneAboutDataMock.userConfig = { isPodUrlEditable: false };
const wrapper = shallow(React.createElement(AboutApp));
ipcRenderer.send('about-app-data', cloneAboutDataMock);
const pod = wrapper.find(`[data-testid="POD_INFO"]`);
pod.simulate('click', { detail: 1 });
pod.simulate('click', { detail: 2 });
pod.simulate('click', { detail: 3 });
wrapper.find(`[data-testid="CANCEL_BUTTON"]`).simulate('keydown', {
target: { value: 'pod.symphony.com123' },
keyCode: 13,
});
expect(wrapper.find(`[data-testid="CANCEL_BUTTON"]`).exists()).toBe(false);
});
it('should work with A11Y Close button', () => {
const cloneAboutDataMock = {
...aboutDataMockState,
finalConfig: { url: 'bcd.symphony.com' },
};
cloneAboutDataMock.globalConfig = { isPodUrlEditable: true };
cloneAboutDataMock.userConfig = { isPodUrlEditable: false };
const wrapper = shallow(React.createElement(AboutApp));
ipcRenderer.send('about-app-data', cloneAboutDataMock);
const pod = wrapper.find(`[data-testid="POD_INFO"]`);
pod.simulate('click', { detail: 1 });
pod.simulate('click', { detail: 2 });
pod.simulate('click', { detail: 3 });
const inputPod = wrapper.find(`[data-testid="POD_INFO_INPUT"]`);
inputPod.simulate('change', {
target: { value: 'pod.symphony.com' },
});
inputPod.simulate('keydown', {
target: { value: 'pod.symphony.com' },
keyCode: 13,
});
wrapper.find(`[data-testid="CLOSE_BUTTON"]`).simulate('keydown', {
keyCode: 13,
});
expect(ipcRenderer.send).toHaveBeenNthCalledWith(
12,
'user-pod-updated',
'pod.symphony.com',
);
});
});

25
src/renderer/components/about-app.tsx
View File

@ -47,6 +47,7 @@ const SFE_CLIENT_TYPE_NAME = 'SFE-Lite';
const KEY_CODE = {
ENTER: 13,
ESCAPE: 27,
SPACE: 32,
};
/**
@ -202,6 +203,7 @@ export default class AboutApp extends React.Component<{}, IState> {
onMouseDown={this.eventHandlers.onCancel}
title={cancelText}
data-testid={'CANCEL_BUTTON'}
onKeyDown={this.onCancelKeyDown}
>
{cancelText}
</button>
@ -219,6 +221,7 @@ export default class AboutApp extends React.Component<{}, IState> {
data-testid={'CLOSE_BUTTON'}
ref={this.closeButtonRef}
disabled={!isValidHostname}
onKeyDown={this.onCloseKeyDown}
>
<span
className={classNames({
@ -334,6 +337,9 @@ export default class AboutApp extends React.Component<{}, IState> {
*/
public onKeyDown = (e) => {
if (e.keyCode === KEY_CODE.ENTER) {
if (!this.state.isValidHostname) {
return;
}
const { value } = e.target;
this.setState({ updatedHostname: value });
this.handlePodInputBlur(e);
@ -348,6 +354,25 @@ export default class AboutApp extends React.Component<{}, IState> {
});
}
};
/**
* Handles handle keydown on Close
* @param e
*/
public onCloseKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
if (e.keyCode === KEY_CODE.ENTER || e.keyCode === KEY_CODE.SPACE) {
this.close();
}
};
/**
* Handles key down on Cancel
* @param e
*/
public onCancelKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
if (e.keyCode === KEY_CODE.ENTER || e.keyCode === KEY_CODE.SPACE) {
this.cancel();
}
};
/**
* Validates and sets new hostname