diff --git a/packages/dashboard-frontend/src/components/ImportFromGit/RepoOptionsAccordion/AdvancedOptions/__mocks__/index.tsx b/packages/dashboard-frontend/src/components/ImportFromGit/RepoOptionsAccordion/AdvancedOptions/__mocks__/index.tsx new file mode 100644 index 000000000..5be051171 --- /dev/null +++ b/packages/dashboard-frontend/src/components/ImportFromGit/RepoOptionsAccordion/AdvancedOptions/__mocks__/index.tsx @@ -0,0 +1,42 @@ +/* + * Copyright (c) 2018-2024 Red Hat, Inc. + * This program and the accompanying materials are made + * available under the terms of the Eclipse Public License 2.0 + * which is available at https://www.eclipse.org/legal/epl-2.0/ + * + * SPDX-License-Identifier: EPL-2.0 + * + * Contributors: + * Red Hat, Inc. - initial API and implementation + */ + +import React from 'react'; + +import { Props } from '@/components/ImportFromGit/RepoOptionsAccordion/AdvancedOptions'; + +export class AdvancedOptions extends React.PureComponent { + public render() { + const { + containerImage, + temporaryStorage, + createNewIfExisting, + memoryLimit, + cpuLimit, + onChange, + } = this.props; + + return ( +
+
Advanced Options
+
{`${containerImage}, ${temporaryStorage}, ${createNewIfExisting}, ${memoryLimit}, ${cpuLimit}`}
+ +
+ ); + } +} diff --git a/packages/dashboard-frontend/src/components/ImportFromGit/RepoOptionsAccordion/GitRepoOptions/__mocks__/index.tsx b/packages/dashboard-frontend/src/components/ImportFromGit/RepoOptionsAccordion/GitRepoOptions/__mocks__/index.tsx new file mode 100644 index 000000000..325d1c298 --- /dev/null +++ b/packages/dashboard-frontend/src/components/ImportFromGit/RepoOptionsAccordion/GitRepoOptions/__mocks__/index.tsx @@ -0,0 +1,40 @@ +/* + * Copyright (c) 2018-2024 Red Hat, Inc. + * This program and the accompanying materials are made + * available under the terms of the Eclipse Public License 2.0 + * which is available at https://www.eclipse.org/legal/epl-2.0/ + * + * SPDX-License-Identifier: EPL-2.0 + * + * Contributors: + * Red Hat, Inc. - initial API and implementation + */ + +import React from 'react'; + +import { Props } from '@/components/ImportFromGit/RepoOptionsAccordion/GitRepoOptions'; + +export class GitRepoOptions extends React.PureComponent { + public render() { + const { gitBranch, remotes, devfilePath, hasSupportedGitService, onChange } = this.props; + + return ( +
+
Git Repo Options
+
{`${gitBranch}, ${JSON.stringify(remotes)}, ${devfilePath}, ${hasSupportedGitService}`}
+ +
+ ); + } +} diff --git a/packages/dashboard-frontend/src/components/ImportFromGit/RepoOptionsAccordion/__tests__/__snapshots__/index.spec.tsx.snap b/packages/dashboard-frontend/src/components/ImportFromGit/RepoOptionsAccordion/__tests__/__snapshots__/index.spec.tsx.snap new file mode 100644 index 000000000..d47880bc8 --- /dev/null +++ b/packages/dashboard-frontend/src/components/ImportFromGit/RepoOptionsAccordion/__tests__/__snapshots__/index.spec.tsx.snap @@ -0,0 +1,171 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`RepoOptionsAccordion snapshot with default values 1`] = ` +
+

+ +

+ +

+ +

+ +
+`; diff --git a/packages/dashboard-frontend/src/components/ImportFromGit/RepoOptionsAccordion/__tests__/index.spec.tsx b/packages/dashboard-frontend/src/components/ImportFromGit/RepoOptionsAccordion/__tests__/index.spec.tsx new file mode 100644 index 000000000..9c55c0eca --- /dev/null +++ b/packages/dashboard-frontend/src/components/ImportFromGit/RepoOptionsAccordion/__tests__/index.spec.tsx @@ -0,0 +1,159 @@ +/* + * Copyright (c) 2018-2024 Red Hat, Inc. + * This program and the accompanying materials are made + * available under the terms of the Eclipse Public License 2.0 + * which is available at https://www.eclipse.org/legal/epl-2.0/ + * + * SPDX-License-Identifier: EPL-2.0 + * + * Contributors: + * Red Hat, Inc. - initial API and implementation + */ + +import userEvent from '@testing-library/user-event'; +import { createMemoryHistory } from 'history'; +import React from 'react'; +import { Provider } from 'react-redux'; +import { Store } from 'redux'; + +import RepoOptionsAccordion from '@/components/ImportFromGit/RepoOptionsAccordion'; +import getComponentRenderer, { screen } from '@/services/__mocks__/getComponentRenderer'; +import { FakeStoreBuilder } from '@/store/__mocks__/storeBuilder'; + +const { createSnapshot, renderComponent } = getComponentRenderer(getComponent); + +const history = createMemoryHistory({ + initialEntries: ['/'], +}); + +jest.mock('@/components/ImportFromGit/RepoOptionsAccordion/AdvancedOptions'); +jest.mock('@/components/ImportFromGit/RepoOptionsAccordion/GitRepoOptions'); + +const mockOnChange = jest.fn(); + +describe('RepoOptionsAccordion', () => { + let store: Store; + + beforeEach(() => { + store = new FakeStoreBuilder() + .withSshKeys({ + keys: [{ name: 'key1', keyPub: 'ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQD' }], + }) + .build(); + }); + + afterEach(() => { + jest.clearAllMocks(); + }); + + test('snapshot with default values', () => { + const snapshot = createSnapshot(store, 'testlocation'); + expect(snapshot.toJSON()).toMatchSnapshot(); + }); + + test('update Advanced Options', () => { + renderComponent(store, 'https://testlocation'); + + let updateAdvancedOptions = screen.queryByRole('button', { + name: 'Advanced Options Change', + }); + + expect(updateAdvancedOptions).toBeNull(); + + const accordionItemAdvancedOptions = screen.getByTestId('accordion-item-advanced-options'); + + userEvent.click(accordionItemAdvancedOptions); + + const advancedOptions = screen.queryByTestId('advanced-options'); + + expect(advancedOptions).not.toBeNull(); + expect(advancedOptions).toHaveTextContent( + 'undefined, undefined, undefined, undefined, undefined', + ); + + updateAdvancedOptions = screen.queryByRole('button', { + name: 'Advanced Options Change', + }); + + expect(updateAdvancedOptions).not.toBeNull(); + + userEvent.click(updateAdvancedOptions as HTMLElement); + + expect(mockOnChange).toHaveBeenCalledWith( + 'https://testlocation?image=newContainerImage&storageType=ephemeral&policies.create=perclick&memoryLimit=1Gi&cpuLimit=1', + undefined, + ); + }); + + test('update Git Repo Options without a supported git service', () => { + renderComponent(store, 'https://testlocation'); + + let updateGitRepoOptions = screen.queryByRole('button', { + name: 'Git Repo Options Change', + }); + + expect(updateGitRepoOptions).toBeNull(); + + const accordionItemGitRepoOptions = screen.getByTestId('accordion-item-git-repo-options'); + + userEvent.click(accordionItemGitRepoOptions); + + const gitRepoOptions = screen.queryByTestId('git-repo-options'); + + expect(gitRepoOptions).not.toBeNull(); + expect(gitRepoOptions).toHaveTextContent('undefined, [], undefined, false'); + + updateGitRepoOptions = screen.queryByRole('button', { + name: 'Git Repo Options Change', + }); + + expect(updateGitRepoOptions).not.toBeNull(); + + userEvent.click(updateGitRepoOptions as HTMLElement); + + expect(mockOnChange).toHaveBeenCalledWith( + 'https://testlocation?remotes={{test-updated,http://test}}&devfilePath=newDevfilePath', + 'success', + ); + }); + + test('update Git Repo Options wit a supported git service', () => { + renderComponent(store, 'https://github.com/testlocation'); + + let updateGitRepoOptions = screen.queryByRole('button', { + name: 'Git Repo Options Change', + }); + + expect(updateGitRepoOptions).toBeNull(); + + const accordionItemGitRepoOptions = screen.getByTestId('accordion-item-git-repo-options'); + + userEvent.click(accordionItemGitRepoOptions); + + const gitRepoOptions = screen.queryByTestId('git-repo-options'); + + expect(gitRepoOptions).not.toBeNull(); + expect(gitRepoOptions).toHaveTextContent('undefined, [], undefined, true'); + + updateGitRepoOptions = screen.queryByRole('button', { + name: 'Git Repo Options Change', + }); + + expect(updateGitRepoOptions).not.toBeNull(); + + userEvent.click(updateGitRepoOptions as HTMLElement); + + expect(mockOnChange).toHaveBeenCalledWith( + 'https://github.com/testlocation/undefined/tree/newBranch?remotes={{test-updated,http://test}}&devfilePath=newDevfilePath', + 'success', + ); + }); +}); + +function getComponent(store: Store, location: string) { + return ( + + + + ); +} diff --git a/packages/dashboard-frontend/src/components/ImportFromGit/RepoOptionsAccordion/index.tsx b/packages/dashboard-frontend/src/components/ImportFromGit/RepoOptionsAccordion/index.tsx index 3975eef51..e236279b3 100644 --- a/packages/dashboard-frontend/src/components/ImportFromGit/RepoOptionsAccordion/index.tsx +++ b/packages/dashboard-frontend/src/components/ImportFromGit/RepoOptionsAccordion/index.tsx @@ -189,6 +189,7 @@ class RepoOptionsAccordion extends React.PureComponent { }} isExpanded={expanded.includes('git-repo-options')} id="accordion-item-git-repo-options" + data-testid="accordion-item-git-repo-options" > Git Repo Options @@ -221,6 +222,7 @@ class RepoOptionsAccordion extends React.PureComponent { }} isExpanded={expanded.includes('advanced-options')} id="accordion-item-advanced-options" + data-testid="accordion-item-advanced-options" > Advanced Options diff --git a/packages/dashboard-frontend/src/components/ImportFromGit/helpers.ts b/packages/dashboard-frontend/src/components/ImportFromGit/helpers.ts index 49e3a2404..eba0b23d1 100644 --- a/packages/dashboard-frontend/src/components/ImportFromGit/helpers.ts +++ b/packages/dashboard-frontend/src/components/ImportFromGit/helpers.ts @@ -98,6 +98,9 @@ export function getBranchFromLocation(location: string): string | undefined { return branch; } +/** + * Returns git branch from the encoded Azure DevOps repo location. + */ function getBranchFromAzureDevOpsLocation(location: string): string | undefined { const url = new URL(location); @@ -113,6 +116,9 @@ function getBranchFromAzureDevOpsLocation(location: string): string | undefined return version.replace(/^GB/, ''); } +/** + * Returns updated location which includes Azure DevOps repo location with an encoded version as a param. + */ function setBranchToAzureDevOpsLocation(location: string, branch: string | undefined): string { const url = new URL(location); const searchParams = new URLSearchParams(url.search);