fix test

atlassian · Dec 10, 2023 · de23e9c · de23e9c
1 parent d47f50e
commit de23e9c
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 69 deletions.
diff --git a/app/jenkins-for-jira-ui/src/components/ConnectionPanel/ConnectionPanel.styles.tsx b/app/jenkins-for-jira-ui/src/components/ConnectionPanel/ConnectionPanel.styles.tsx
@@ -265,6 +265,13 @@ export const setUpGuideUpdateAvailableContainer = css`
 	width: 55%;
 `;
 
+export const setUpGuideUpdateAvailableLoadingContainer = css`
+	margin-top: ${token('space.1000')};
+	padding: ${token('space.1000')};
+	min-height: 180px;
+	text-align: center;
+`;
+
 export const setUpGuideUpdateAvailableIconContainer = css`
 	margin: ${token('space.0')} auto;
 	text-align: center;

diff --git a/app/jenkins-for-jira-ui/src/components/ConnectionPanel/ConnectionPanel.test.tsx b/app/jenkins-for-jira-ui/src/components/ConnectionPanel/ConnectionPanel.test.tsx
@@ -1,16 +1,13 @@
 import React from 'react';
 import {
-	act,
-	fireEvent,
-	render,
-	screen,
-	waitFor
+	act, fireEvent, render, screen, waitFor
 } from '@testing-library/react';
 import { ConnectionPanelTop } from './ConnectionPanelTop';
 import { ConnectedState } from '../StatusLabel/StatusLabel';
 import { addConnectedState, ConnectionPanel } from './ConnectionPanel';
 import { EventType, JenkinsServer } from '../../../../src/common/types';
 import * as getAllJenkinsServersModule from '../../api/getAllJenkinsServers';
+import { ConnectionPanelMain } from './ConnectionPanelMain';
 
 const servers: JenkinsServer[] = [
 	{
@@ -151,7 +148,7 @@ describe('Connection Panel Suite', () => {
 			expect(result[2].connectedState).toEqual(ConnectedState.DUPLICATE);
 		});
 
-		it.only('should handle servers with no pluginConfig', () => {
+		it('should handle servers with no pluginConfig', () => {
 			const noPluginConfigButHasPipelines: JenkinsServer[] = [servers[4]];
 			const hasPluginConfigAndPipelines: JenkinsServer[] = [servers[0]];
 			const noPluginConfigButHasPipelinesResult = addConnectedState(noPluginConfigButHasPipelines);
@@ -327,10 +324,9 @@ describe('Connection Panel Suite', () => {
 		});
 	});
 
-	describe('Connection Panel Main', () => {
+	describe('ConnectionPanel', () => {
 		test('should render panel content for PENDING server', async () => {
 			jest.spyOn(getAllJenkinsServersModule, 'getAllJenkinsServers').mockResolvedValueOnce([servers[6]]);
-
 			render(<ConnectionPanel />);
 
 			await waitFor(() => {
@@ -341,7 +337,7 @@ describe('Connection Panel Suite', () => {
 		test('should render panel content for DUPLICATE server', async () => {
 			jest.spyOn(getAllJenkinsServersModule, 'getAllJenkinsServers').mockResolvedValueOnce([servers[5], servers[6]]);
 
-			render(<ConnectionPanel />);
+			render(<ConnectionPanel/>);
 
 			await waitFor(() => {
 				expect(screen.getByText('Duplicate server')).toBeInTheDocument();
@@ -352,8 +348,9 @@ describe('Connection Panel Suite', () => {
 		test.skip('should render panel content for CONNECTED server without pipeline data', async () => {
 			jest.spyOn(getAllJenkinsServersModule, 'getAllJenkinsServers').mockResolvedValueOnce([servers[1]]);
 
+			render(<ConnectionPanel />);
+
 			await act(async () => {
-				render(<ConnectionPanel />);
 				await waitFor(() => {
 					expect(screen.getByText('No data received')).toBeInTheDocument();
 					expect(screen.queryByText('Pipeline')).not.toBeInTheDocument();
@@ -435,40 +432,6 @@ describe('Connection Panel Suite', () => {
 				});
 			});
 
-			test('should handle refreshing the panel correctly', async () => {
-				jest.spyOn(getAllJenkinsServersModule, 'getAllJenkinsServers').mockResolvedValueOnce([servers[1]]);
-
-				render(<ConnectionPanel />);
-
-				expect(screen.getByText('Refresh')).toBeInTheDocument();
-				expect(screen.queryByText('Pipelines')).not.toBeInTheDocument();
-				expect(screen.queryByText('Event')).not.toBeInTheDocument();
-				expect(screen.queryByText('Received')).not.toBeInTheDocument();
-
-				const updatedServerData = {
-					...servers[1],
-					pipelines: [
-						{
-							name: '#5678',
-							lastEventType: EventType.DEPLOYMENT,
-							lastEventStatus: 'successful' as const,
-							lastEventDate: new Date()
-						}
-					]
-				};
-
-				jest.spyOn(getAllJenkinsServersModule, 'getAllJenkinsServers').mockResolvedValueOnce([updatedServerData]);
-
-				fireEvent.click(screen.getByText('Refresh'));
-
-				await act(async () => {
-					await waitFor(() => {
-						expect(screen.queryByText('Refresh')).not.toBeInTheDocument();
-						expect(screen.getByText('Your expected UI element')).toBeInTheDocument();
-					});
-				});
-			});
-
 			test('should render UpdateAvailable component when there is no pluginConfig data for a CONNECTED server', async () => {
 				const server = {
 					name: 'server with no plugin config',
@@ -499,6 +462,56 @@ describe('Connection Panel Suite', () => {
 					expect(updateAvailableText).toBeInTheDocument();
 				});
 			});
+
+			test('should handle refreshing the panel for a server CONNECTED with pipeline data but no plugin config', async () => {
+				jest.spyOn(getAllJenkinsServersModule, 'getAllJenkinsServers').mockResolvedValueOnce([servers[4]]);
+
+				const { rerender } = render(<ConnectionPanel />);
+
+				await waitFor(() => {
+					expect(screen.getByText('CONNECTED')).toBeInTheDocument();
+					expect(screen.getByText('Pipeline')).toBeInTheDocument();
+					expect(screen.getByText('Event')).toBeInTheDocument();
+					expect(screen.getByText('Received')).toBeInTheDocument();
+					expect(screen.queryByText('Refresh')).not.toBeInTheDocument();
+					expect(screen.queryByText('To receive build and deployment data from this server:')).not.toBeInTheDocument();
+				});
+
+				await waitFor(() => {
+					fireEvent.click(screen.getByText('Set up guide'));
+				});
+
+				await waitFor(() => {
+					expect(screen.getByText('Refresh')).toBeInTheDocument();
+					expect(screen.queryByText('To receive build and deployment data from this server:')).not.toBeInTheDocument();
+
+					const updatedServerData = {
+						...servers[1],
+						pluginConfig: {
+							ipAddress: '10.10.10.12',
+							lastUpdatedOn: new Date()
+						}
+					};
+
+					jest.spyOn(getAllJenkinsServersModule, 'getAllJenkinsServers').mockResolvedValueOnce([updatedServerData]);
+
+					// Rerender the component with the updated data
+					rerender(<ConnectionPanelMain
+						connectedState={ConnectedState.CONNECTED}
+						jenkinsServer={updatedServerData}
+						refreshServers={jest.fn()}
+					/>);
+				});
+
+				await waitFor(() => {
+					fireEvent.click(screen.getByText('Set up guide'));
+				});
+
+				await waitFor(() => {
+					fireEvent.click(screen.getByText('Refresh'));
+					expect(screen.getByText('To receive build and deployment data from this server:')).toBeInTheDocument();
+				});
+			});
 		});
 	});
 });
diff --git a/app/jenkins-for-jira-ui/src/components/ConnectionPanel/ConnectionPanelMain.tsx b/app/jenkins-for-jira-ui/src/components/ConnectionPanel/ConnectionPanelMain.tsx
@@ -1,12 +1,15 @@
 import React, { ReactNode, useState } from 'react';
 import { cx } from '@emotion/css';
 import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
+import Spinner from '@atlaskit/spinner';
 import {
 	connectionPanelMainContainer,
 	connectionPanelMainConnectedTabs,
 	connectionPanelMainNotConnectedTabs,
 	setUpGuideContainer,
-	setUpGuideUpdateAvailableContainer, connectionPanelMainConnectedPendingSetUp
+	setUpGuideUpdateAvailableContainer,
+	connectionPanelMainConnectedPendingSetUp,
+	setUpGuideUpdateAvailableLoadingContainer
 } from './ConnectionPanel.styles';
 import { ConnectedState } from '../StatusLabel/StatusLabel';
 import { NotConnectedState } from './NotConnectedState';
@@ -56,8 +59,7 @@ const ConnectionPanelMain = ({
 }: ConnectionPanelMainProps): JSX.Element => {
 	const [selectedTabIndex, setSelectedTabIndex] = useState(0);
 	const [isLoading, setIsLoading] = useState(false);
-	// const [serverName, setServerName] = useState('');
-	// const [secret, setSecret] = useState<string | undefined>('');
+	const [updatedServer, setUpdatedServer] = useState<JenkinsServer>();
 
 	const handleClickSetupGuide = () => {
 		setSelectedTabIndex(1);
@@ -70,16 +72,44 @@ const ConnectionPanelMain = ({
 	const handleRefreshPanel = async () => {
 		setIsLoading(true);
 		try {
-			const test = await getJenkinsServerWithSecret(jenkinsServer.uuid);
-			console.log('tesst: ', test);
+			const server = await getJenkinsServerWithSecret(jenkinsServer.uuid);
+			console.log(' Copy code:', server);
+			setUpdatedServer(server);
 		} catch (e) {
 			console.error('No Jenkins server found.');
 		}
 
 		setIsLoading(false);
 	};
 
-	console.log('jenkinsServer.pipelines: ', jenkinsServer.pipelines);
+	let setUpGuideUpdateAvailableContent;
+
+	if (isLoading) {
+		setUpGuideUpdateAvailableContent = (
+			<Panel data-testid="updateAvailable">
+				<div className={cx(setUpGuideUpdateAvailableLoadingContainer)}>
+					<Spinner size='large' />
+				</div>
+			</Panel>
+		);
+	} else if (jenkinsServer.pluginConfig || updatedServer?.pluginConfig) {
+		setUpGuideUpdateAvailableContent = (
+			<Panel data-testid="setUpGuidePanel">
+				<SetUpGuide pluginConfig={jenkinsServer.pluginConfig} />
+			</Panel>
+		);
+	} else {
+		setUpGuideUpdateAvailableContent = (
+			<Panel data-testid="updateAvailable">
+				<div className={cx(setUpGuideUpdateAvailableContainer)}>
+					<UpdateAvailable
+						handleRefreshPanel={handleRefreshPanel}
+						jenkinsServer={jenkinsServer}
+					/>
+				</div>
+			</Panel>
+		);
+	}
 
 	return (
 		<div className={cx(connectionPanelMainContainer)}>
@@ -112,7 +142,7 @@ const ConnectionPanelMain = ({
 								connectedState === ConnectedState.CONNECTED
 									?	<Panel connectedState={connectedState} data-testid="connectedServersPanel">
 										{
-											!jenkinsServer.pipelines.length
+											jenkinsServer.pipelines.length
 												? <ConnectedJenkinsServers connectedJenkinsServer={jenkinsServer} />
 												: <ConnectionPanelContent
 													connectedState={connectedState}
@@ -140,19 +170,7 @@ const ConnectionPanelMain = ({
 									</Panel>
 							}
 						</TabPanel>
-						<TabPanel>
-							{
-								jenkinsServer.pluginConfig
-									? <Panel data-testid="setUpGuidePanel">
-										<SetUpGuide pluginConfig={jenkinsServer.pluginConfig}/>
-									</Panel>
-									: <Panel data-testid="updateAvailable">
-										<div className={cx(setUpGuideUpdateAvailableContainer)}>
-											<UpdateAvailable />
-										</div>
-									</Panel>
-							}
-						</TabPanel>
+						<TabPanel>{setUpGuideUpdateAvailableContent}</TabPanel>
 					</Tabs>
 			}
 		</div>

diff --git a/app/jenkins-for-jira-ui/src/components/ConnectionPanel/NotConnectedState.tsx b/app/jenkins-for-jira-ui/src/components/ConnectionPanel/NotConnectedState.tsx
@@ -16,7 +16,7 @@ type NotConnectedStateProps = {
 	refreshServers(serverToRemove: JenkinsServer): void,
 	handleRefreshPanel(serverToRemove: JenkinsServer): void,
 	isLoading: boolean
-	setIsLoading(isLoading: boolean): void,
+	setIsLoading(isLoading: boolean): void
 };
 
 const NotConnectedState = ({

diff --git a/app/jenkins-for-jira-ui/src/components/ConnectionPanel/SetUpGuide.tsx b/app/jenkins-for-jira-ui/src/components/ConnectionPanel/SetUpGuide.tsx
@@ -17,7 +17,7 @@ import {
 	setUpGuideUpdateAvailableContent,
 	setUpGuideUpdateAvailableIconContainer
 } from './ConnectionPanel.styles';
-import { JenkinsPluginConfig } from '../../../../src/common/types';
+import { JenkinsPluginConfig, JenkinsServer } from '../../../../src/common/types';
 import { UpdateAvailableIcon } from '../icons/UpdateAvailableIcon';
 
 type SetUpGuideLinkProps = {
@@ -39,7 +39,12 @@ type SetUpGuidePipelineStepInstructionProps = {
 	pipelineStepLabel: string
 };
 
-export const UpdateAvailable = (): JSX.Element => {
+type UpdateAvailableProps = {
+	handleRefreshPanel(serverToRemove: JenkinsServer): void,
+	jenkinsServer: JenkinsServer
+};
+
+export const UpdateAvailable = ({ handleRefreshPanel, jenkinsServer }: UpdateAvailableProps): JSX.Element => {
 	return (
 		<>
 			<UpdateAvailableIcon containerClassName={setUpGuideUpdateAvailableIconContainer} />
@@ -51,8 +56,8 @@ export const UpdateAvailable = (): JSX.Element => {
 			<div className={cx(setUpGuideUpdateAvailableButtonContainer)}>
 				{/* TODO - implement link once the IPH mystery has been solved */}
 				<Button appearance="primary">Learn more</Button>
-				{/* TODO - uhh ummm when we figure out exactly how we intend this to work... :badpokerface: */}
-				<Button>Refresh</Button>
+
+				<Button onClick={() => handleRefreshPanel(jenkinsServer)}>Refresh</Button>
 			</div>
 		</>
 	);