FE(UI):Channels test (#417)

* bug(UI): default tab over setting is resolved

* feat(UI): channels test is updated

frontend/cypress/fixtures/defaultAllChannels.json

@@ -0,0 +1,21 @@
+{
+	"data": [
+		{
+			"created_at": 1638083159246,
+			"data": "{}",
+			"id": 1,
+			"name": "First Channels",
+			"type": "slack",
+			"updated_at": 1638083159246
+		},
+		{
+			"created_at": 1638083159246,
+			"data": "{}",
+			"id": 2,
+			"name": "Second Channels",
+			"type": "Slack",
+			"updated_at": 1638083159246
+		}
+	],
+	"message": "Success"
+}

frontend/cypress/integration/channels/index.spec.ts

@@ -0,0 +1,52 @@
+/// <reference types="cypress" />
+
+import ROUTES from 'constants/routes';
+
+import defaultAllChannels from '../../fixtures/defaultAllChannels.json';
+
+describe('Channels', () => {
+	beforeEach(() => {
+		window.localStorage.setItem('isLoggedIn', 'yes');
+
+		cy.visit(Cypress.env('baseUrl') + ROUTES.ALL_CHANNELS);
+	});
+
+	it('Channels', () => {
+		cy
+			.intercept('**channels**', {
+				statusCode: 200,
+				fixture: 'defaultAllChannels',
+			})
+			.as('All Channels');
+
+		cy.wait('@All Channels');
+
+		cy
+			.get('.ant-tabs-tab')
+			.children()
+			.then((e) => {
+				const child = e.get();
+
+				const secondChild = child[1];
+
+				expect(secondChild.outerText).to.be.equals('Alert Channels');
+
+				expect(secondChild.ariaSelected).to.be.equals('true');
+			});
+
+		cy
+			.get('tbody')
+			.should('be.visible')
+			.then((e) => {
+				const allChildren = e.children().get();
+				expect(allChildren.length).to.be.equals(defaultAllChannels.data.length);
+
+				allChildren.forEach((e, index) => {
+					expect(e.firstChild?.textContent).not.null;
+					expect(e.firstChild?.textContent).to.be.equals(
+						defaultAllChannels.data[index].name,
+					);
+				});
+			});
+	});
+});

frontend/src/container/SettingsWrapper/index.tsx

@@ -15,6 +15,7 @@ const SettingsWrapper = ({
 	AlertChannels,
 	General,
 	toggleSettingsTab,
+	defaultRoute,
 }: SettingsWrapperProps): JSX.Element => {
 	const { settingsActiveTab } = useSelector<AppState, AppReducer>(
 		(state) => state.app,
@@ -38,7 +39,7 @@ const SettingsWrapper = ({
 		<Tabs
 			destroyInactiveTabPane
 			onChange={(value): void => onChangeHandler(value as SettingTab)}
-			activeKey={settingsActiveTab}
+			activeKey={defaultRoute || settingsActiveTab}
 		>
 			<TabPane tab="General" key="General">
 				<General />
@@ -63,6 +64,7 @@ const mapDispatchToProps = (
 interface SettingsWrapperProps extends DispatchProps {
 	General: () => JSX.Element;
 	AlertChannels: () => JSX.Element;
+	defaultRoute?: SettingTab;
 }
 
 export default connect(null, mapDispatchToProps)(SettingsWrapper);

frontend/src/pages/AllAlertChannels/index.tsx

@@ -3,15 +3,14 @@ import GeneralSettings from 'container/GeneralSettings';
 import SettingsWrapper from 'container/SettingsWrapper';
 import React from 'react';
 
-const AllAlertChannels = (): JSX.Element => {
-	return (
+const AllAlertChannels = (): JSX.Element => (
 	<SettingsWrapper
 		{...{
 			AlertChannels,
 			General: GeneralSettings,
+			defaultRoute: 'Alert Channels',
 		}}
 	/>
 );
-};
 
 export default AllAlertChannels;