From bd5e9ba10a56dce21c61fcfccd92df1edb5a13bb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yulia=20=C4=8Cech?= <6585477+yuliacech@users.noreply.github.com> Date: Tue, 20 Apr 2021 08:51:28 +0200 Subject: [PATCH] [Remote Clusters] Added a11y tests and fixed violations (#96989) * Added a11y tests for Remote Clusters plugin and fixed discovered violations * Added an a11y test for a delete modal * Updated payload type casting Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> --- .../common/lib/cluster_serialization.ts | 2 +- .../remote_clusters/common/lib/index.ts | 1 + .../remote_cluster_form.tsx | 4 +- .../remote_cluster_form/request_flyout.tsx | 2 +- .../connection_status/connection_status.js | 10 +- .../detail_panel/detail_panel.js | 162 +++++--------- .../accessibility/apps/remote_clusters.ts | 204 ++++++++++++++++++ x-pack/test/accessibility/config.ts | 1 + 8 files changed, 271 insertions(+), 115 deletions(-) create mode 100644 x-pack/test/accessibility/apps/remote_clusters.ts diff --git a/x-pack/plugins/remote_clusters/common/lib/cluster_serialization.ts b/x-pack/plugins/remote_clusters/common/lib/cluster_serialization.ts index 8d3b1b895651..bf0fc11e882c 100644 --- a/x-pack/plugins/remote_clusters/common/lib/cluster_serialization.ts +++ b/x-pack/plugins/remote_clusters/common/lib/cluster_serialization.ts @@ -45,7 +45,7 @@ export interface Cluster { hasDeprecatedProxySetting?: boolean; } -interface ClusterPayloadEs { +export interface ClusterPayloadEs { skip_unavailable?: boolean | null; mode?: 'sniff' | 'proxy' | null; proxy_address?: string | null; diff --git a/x-pack/plugins/remote_clusters/common/lib/index.ts b/x-pack/plugins/remote_clusters/common/lib/index.ts index 7afba67d3622..b17283511b8b 100644 --- a/x-pack/plugins/remote_clusters/common/lib/index.ts +++ b/x-pack/plugins/remote_clusters/common/lib/index.ts @@ -10,4 +10,5 @@ export { serializeCluster, Cluster, ClusterInfoEs, + ClusterPayloadEs, } from './cluster_serialization'; diff --git a/x-pack/plugins/remote_clusters/public/application/sections/components/remote_cluster_form/remote_cluster_form.tsx b/x-pack/plugins/remote_clusters/public/application/sections/components/remote_cluster_form/remote_cluster_form.tsx index 9f6eee757c75..766f12fedc81 100644 --- a/x-pack/plugins/remote_clusters/public/application/sections/components/remote_cluster_form/remote_cluster_form.tsx +++ b/x-pack/plugins/remote_clusters/public/application/sections/components/remote_cluster_form/remote_cluster_form.tsx @@ -47,8 +47,8 @@ import { convertCloudUrlToProxyConnection, convertProxyConnectionToCloudUrl, validateCluster, + isCloudUrlEnabled, } from './validators'; -import { isCloudUrlEnabled } from './validators/validate_cloud_url'; const defaultClusterValues: Cluster = { name: '', @@ -369,7 +369,7 @@ export class RemoteClusterForm extends Component { - + {isRequestVisible ? ( { return ( - +

{name ? ( - - {icon} + {icon} + - - {message} - - + + {message} {!isConnected && mode === SNIFF_MODE && ( diff --git a/x-pack/plugins/remote_clusters/public/application/sections/remote_cluster_list/detail_panel/detail_panel.js b/x-pack/plugins/remote_clusters/public/application/sections/remote_cluster_list/detail_panel/detail_panel.js index c25be664896c..6969f98e5f09 100644 --- a/x-pack/plugins/remote_clusters/public/application/sections/remote_cluster_list/detail_panel/detail_panel.js +++ b/x-pack/plugins/remote_clusters/public/application/sections/remote_cluster_list/detail_panel/detail_panel.js @@ -183,9 +183,9 @@ export class DetailPanel extends Component { mode, }) { return ( - - - + + + - - - - {connectedNodesCount} - - - - - - - {seeds.map((seed) => ( @@ -236,9 +225,11 @@ export class DetailPanel extends Component { ))} - + + - + + - {this.renderSkipUnavailableValue(skipUnavailable)} - - - - - - - {maxConnectionsPerCluster} - - - {initialConnectTimeout} - - - + + + ); } @@ -302,9 +282,9 @@ export class DetailPanel extends Component { serverName, }) { return ( - - - + + + - - - - {connectedSocketsCount ? connectedSocketsCount : '-'} - - - - - - - {proxyAddress} - - - - - - - - - - {this.renderSkipUnavailableValue(skipUnavailable)} - - - - - - - - - - - - - - - - {proxySocketConnections ? proxySocketConnections : '-'} - - - - - - - - - - - - {initialConnectTimeout} - - - - - - - - - {serverName ? serverName : '-'} - - - + + + + + + + + + + + {this.renderSkipUnavailableValue(skipUnavailable)} + + + + + + + + + {proxySocketConnections ? proxySocketConnections : '-'} + + + + + + + + + {initialConnectTimeout} + + + + ); } renderCluster(cluster) { return (
- +

+ ({ + persistent: { + cluster: { + remote: {}, + }, + }, + } as Payload); + +const getPayloadClusterProxyMode = (name: string): Payload => { + const payload = getEmptyPayload(); + payload.persistent.cluster.remote[name] = { + mode: 'proxy', + proxy_address: '127.0.0.1:9302', + server_name: 'test_server', + }; + return payload; +}; + +const getPayloadClusterSniffMode = (name: string): Payload => { + const payload = getEmptyPayload(); + payload.persistent.cluster.remote[name] = { + mode: 'sniff', + seeds: ['127.0.0.1:9301'], + }; + return payload; +}; + +const getDeleteClusterPayload = (name: string): Payload => { + const payload = getEmptyPayload(); + payload.persistent.cluster.remote[name] = { + skip_unavailable: null, + mode: null, + proxy_address: null, + proxy_socket_connections: null, + server_name: null, + seeds: null, + node_connections: null, + proxy: null, + }; + return payload; +}; + +export default function ({ getService, getPageObjects }: FtrProviderContext) { + const PageObjects = getPageObjects(['common', 'security']); + const testSubjects = getService('testSubjects'); + const esClient = getService('es'); + const a11y = getService('a11y'); + const retry = getService('retry'); + + describe('Remote Clusters', () => { + beforeEach(async () => { + await PageObjects.common.navigateToApp('remoteClusters'); + }); + + describe('Add remote cluster', () => { + it('renders the list view with empty prompt', async () => { + await retry.waitFor('empty prompt to be rendered', async () => { + return testSubjects.isDisplayed(emptyPrompt); + }); + await a11y.testAppSnapshot(); + }); + + it('renders add remote cluster form', async () => { + await retry.waitFor('add remote cluster button to be rendered', async () => { + return testSubjects.isDisplayed(createButton); + }); + + await testSubjects.click(createButton); + await retry.waitFor('add remote cluster form to be rendered', async () => { + return (await testSubjects.getVisibleText(pageTitle)) === 'Add remote cluster'; + }); + + await a11y.testAppSnapshot(); + }); + + it('renders request flyout', async () => { + await retry.waitFor('add remote cluster button to be rendered', async () => { + return testSubjects.isDisplayed(createButton); + }); + + await testSubjects.click(createButton); + await retry.waitFor('add remote cluster form to be rendered', async () => { + return (await testSubjects.getVisibleText(pageTitle)) === 'Add remote cluster'; + }); + + await testSubjects.click(requestButton); + await retry.waitFor('request flyout to be rendered', async () => { + return (await testSubjects.getVisibleText(requestTitle)) === 'Request'; + }); + + await a11y.testAppSnapshot(); + }); + }); + + const modes = ['sniff', 'proxy']; + + modes.forEach((mode: string) => { + describe(`Edit remote cluster (${mode} mode)`, () => { + const clusterName = mode === 'sniff' ? 'clusterSniffMode' : 'clusterProxyMode'; + const body = + mode === 'sniff' + ? getPayloadClusterSniffMode(clusterName) + : getPayloadClusterProxyMode(clusterName); + before(async () => { + await esClient.cluster.putSettings({ body }); + }); + + after(async () => { + await esClient.cluster.putSettings({ body: getDeleteClusterPayload(clusterName) }); + }); + + it('renders the list view with remote clusters', async () => { + await retry.waitFor('remote clusters list to be rendered', async () => { + return testSubjects.isDisplayed(nameLink); + }); + await a11y.testAppSnapshot(); + }); + + it(`renders remote cluster details flyout (${mode} mode)`, async () => { + await retry.waitFor('remote clusters list to be rendered', async () => { + return testSubjects.isDisplayed(nameLink); + }); + + await testSubjects.click(nameLink); + + await retry.waitFor('remote cluster details to be rendered', async () => { + return (await testSubjects.getVisibleText(detailsTitle)) === clusterName; + }); + + await a11y.testAppSnapshot(); + }); + + it(`renders delete cluster modal (${mode} mode)`, async () => { + await retry.waitFor('remote clusters list to be rendered', async () => { + return testSubjects.isDisplayed(nameLink); + }); + + await testSubjects.click(deleteButton); + + await retry.waitFor('delete cluster modal to be rendered', async () => { + return ( + (await testSubjects.getVisibleText(deleteModalTitle)) === + `Remove remote cluster '${clusterName}'?` + ); + }); + + await a11y.testAppSnapshot(); + }); + + it(`renders edit remote cluster form and request flyout (${mode} mode)`, async () => { + await retry.waitFor('edit remote cluster button to be rendered', async () => { + return testSubjects.isDisplayed(editButton); + }); + + await testSubjects.click(editButton); + await retry.waitFor('edit remote cluster form to be rendered', async () => { + return (await testSubjects.getVisibleText(pageTitle)) === 'Edit remote cluster'; + }); + + await testSubjects.click(requestButton); + await retry.waitFor('request flyout to be rendered', async () => { + return ( + (await testSubjects.getVisibleText(requestTitle)) === `Request for '${clusterName}'` + ); + }); + + await a11y.testAppSnapshot(); + }); + }); + }); + }); +} diff --git a/x-pack/test/accessibility/config.ts b/x-pack/test/accessibility/config.ts index 289247beb477..5b46e7de1efa 100644 --- a/x-pack/test/accessibility/config.ts +++ b/x-pack/test/accessibility/config.ts @@ -36,6 +36,7 @@ export default async function ({ readConfigFile }: FtrConfigProviderContext) { require.resolve('./apps/canvas'), require.resolve('./apps/security_solution'), require.resolve('./apps/ml_embeddables_in_dashboard'), + require.resolve('./apps/remote_clusters'), ], pageObjects,