feat: [AH-667]: add unit test coverage for version details page of oss (#3438)

* feat: [AH-667]: fix flaky test
* feat: [AH-667]: add unit test coverage for version details page of oss

web/src/ar/pages/version-details/DockerVersion/DockerVersionOSSContent/DockerVersionOSSGeneralInfo.tsx

@@ -65,7 +65,7 @@ export default function DockerVersionOSSGeneralInfo({ className }: DockerVersion
   return (
     <Page.Body className={className} loading={loading || !digest} error={error?.message} retryOnError={() => refetch()}>
       {response && (
-        <Card className={css.cardContainer} title="General Information">
+        <Card data-testid="general-information-card" className={css.cardContainer} title="General Information">
           <Layout.Vertical spacing="medium">
             <Text font={{ variation: FontVariation.CARD_TITLE }}>
               {getString('versionDetails.overview.generalInformation.title')}

web/src/ar/pages/version-details/DockerVersion/__tests__/DockerVersionDetailsOSS.test.tsx

@@ -0,0 +1,136 @@
+/*
+ * Copyright 2024 Harness, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react'
+import userEvent from '@testing-library/user-event'
+import { getByTestId, getByText, render, waitFor } from '@testing-library/react'
+import { useGetDockerArtifactDetailsQuery } from '@harnessio/react-har-service-client'
+
+import '@ar/pages/version-details/VersionFactory'
+import '@ar/pages/repository-details/RepositoryFactory'
+
+import { Parent } from '@ar/common/types'
+import ArTestWrapper from '@ar/utils/testUtils/ArTestWrapper'
+
+import {
+  mockDockerArtifactDetails,
+  mockDockerArtifactLayers,
+  mockDockerArtifactManifest,
+  mockDockerManifestList,
+  mockDockerVersionList,
+  mockDockerVersionSummary
+} from './__mockData__'
+import OSSVersionDetailsPage from '../../OSSVersionDetailsPage'
+
+jest.mock('@harnessio/react-har-service-client', () => ({
+  useGetArtifactVersionSummaryQuery: jest.fn().mockImplementation(() => ({
+    data: { content: mockDockerVersionSummary },
+    error: null,
+    isLoading: false,
+    refetch: jest.fn()
+  })),
+  useGetDockerArtifactDetailsQuery: jest.fn().mockImplementation(() => ({
+    data: { content: mockDockerArtifactDetails },
+    error: null,
+    isLoading: false,
+    refetch: jest.fn()
+  })),
+  useGetDockerArtifactManifestsQuery: jest.fn().mockImplementation(() => ({
+    data: { content: mockDockerManifestList },
+    error: null,
+    isLoading: false,
+    refetch: jest.fn()
+  })),
+  getAllArtifactVersions: jest.fn().mockImplementation(
+    () =>
+      new Promise(success => {
+        success({ content: mockDockerVersionList })
+      })
+  ),
+  useGetDockerArtifactLayersQuery: jest.fn().mockImplementation(() => ({
+    data: { content: mockDockerArtifactLayers },
+    error: null,
+    isLoading: false,
+    refetch: jest.fn()
+  })),
+  useGetDockerArtifactManifestQuery: jest.fn().mockImplementation(() => ({
+    data: { content: mockDockerArtifactManifest },
+    error: null,
+    isLoading: false,
+    refetch: jest.fn()
+  }))
+}))
+
+describe('verify docker version details page for oss', () => {
+  test('Should render content without error', () => {
+    render(
+      <ArTestWrapper
+        parent={Parent.OSS}
+        path="/registries/:repositoryIdentifier/artifacts/:artifactIdentifier/versions/:versionIdentifier"
+        pathParams={{
+          repositoryIdentifier: '1',
+          artifactIdentifier: '1',
+          versionIdentifier: '1'
+        }}
+        queryParams={{
+          digest: 'sha256:144cdab68a435424250fe06e9a4f8a5f6b6b8a8a55d257bc6ee77476a6ec520d'
+        }}>
+        <OSSVersionDetailsPage />
+      </ArTestWrapper>
+    )
+    const versionDetailsPage = document.querySelector('[data-testid="version-details-page-oss"]') as HTMLElement
+    expect(versionDetailsPage).toBeInTheDocument()
+
+    const pageHeader = getByTestId(versionDetailsPage, 'page-header')
+    expect(pageHeader).toBeInTheDocument()
+
+    const generalInfoCard = getByTestId(versionDetailsPage, 'general-information-card')
+    expect(generalInfoCard).toBeInTheDocument()
+  })
+
+  test('Should render error message if failed to load general info', async () => {
+    const refetchFn = jest.fn()
+    ;(useGetDockerArtifactDetailsQuery as jest.Mock).mockImplementation(() => ({
+      data: null,
+      error: { message: 'Failed to load general info' },
+      isLoading: false,
+      refetch: refetchFn
+    }))
+    render(
+      <ArTestWrapper
+        parent={Parent.OSS}
+        path="/registries/:repositoryIdentifier/artifacts/:artifactIdentifier/versions/:versionIdentifier"
+        pathParams={{
+          repositoryIdentifier: '1',
+          artifactIdentifier: '1',
+          versionIdentifier: '1'
+        }}
+        queryParams={{
+          digest: 'sha256:144cdab68a435424250fe06e9a4f8a5f6b6b8a8a55d257bc6ee77476a6ec520d'
+        }}>
+        <OSSVersionDetailsPage />
+      </ArTestWrapper>
+    )
+    const versionDetailsPage = document.querySelector('[data-testid="version-details-page-oss"]') as HTMLElement
+    expect(getByText(versionDetailsPage, 'Failed to load general info')).toBeInTheDocument()
+    const retryBtn = versionDetailsPage.querySelector('button[aria-label=Retry]')
+    expect(retryBtn).toBeInTheDocument()
+    await userEvent.click(retryBtn!)
+    await waitFor(() => {
+      expect(refetchFn).toHaveBeenCalled()
+    })
+  })
+})

web/src/ar/pages/version-details/DockerVersion/__tests__/DockerVersionHeader.test.tsx

@@ -182,7 +182,7 @@ describe('Verify DockerVersionHeader component render', () => {
     await testSelectChange(archSelector, 'linux/amd64', 'linux/arm64')
 
     await waitFor(() => {
-      expect(mockHistoryPush).toHaveBeenLastCalledWith(
+      expect(mockHistoryPush).toHaveBeenCalledWith(
         '/?digest=sha256%3A112cdab68a435424250fe06e9a4f8a5f6b6b8a8a55d257bc6ee77476a6ec520d'
       )
     })

web/src/ar/pages/version-details/GenericVersion/__tests__/GenericVersionDetailsOSS.test.tsx

@@ -0,0 +1,120 @@
+/*
+ * Copyright 2024 Harness, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react'
+import userEvent from '@testing-library/user-event'
+import { getByTestId, getByText, render, waitFor } from '@testing-library/react'
+import { useGetArtifactDetailsQuery } from '@harnessio/react-har-service-client'
+
+import '@ar/pages/version-details/VersionFactory'
+import '@ar/pages/repository-details/RepositoryFactory'
+import { Parent } from '@ar/common/types'
+import ArTestWrapper from '@ar/utils/testUtils/ArTestWrapper'
+
+import {
+  mockGenericArtifactDetails,
+  mockGenericArtifactFiles,
+  mockGenericVersionList,
+  mockGenericVersionSummary
+} from './__mockData__'
+import OSSVersionDetailsPage from '../../OSSVersionDetailsPage'
+
+jest.mock('@harnessio/react-har-service-client', () => ({
+  useGetArtifactVersionSummaryQuery: jest.fn().mockImplementation(() => ({
+    data: { content: mockGenericVersionSummary },
+    error: null,
+    isLoading: false,
+    refetch: jest.fn()
+  })),
+  getAllArtifactVersions: jest.fn().mockImplementation(
+    () =>
+      new Promise(success => {
+        success({ content: mockGenericVersionList })
+      })
+  ),
+  useGetArtifactDetailsQuery: jest.fn().mockImplementation(() => ({
+    data: { content: mockGenericArtifactDetails },
+    error: null,
+    isLoading: false,
+    refetch: jest.fn()
+  })),
+  useGetArtifactFilesQuery: jest.fn().mockImplementation(() => ({
+    data: { content: mockGenericArtifactFiles },
+    error: null,
+    isLoading: false,
+    refetch: jest.fn()
+  }))
+}))
+
+describe('Verify generic version details page for oss', () => {
+  test('Should render content without error', () => {
+    render(
+      <ArTestWrapper
+        parent={Parent.OSS}
+        path="/registries/:repositoryIdentifier/artifacts/:artifactIdentifier/versions/:versionIdentifier"
+        pathParams={{
+          repositoryIdentifier: '1',
+          artifactIdentifier: '1',
+          versionIdentifier: '1'
+        }}>
+        <OSSVersionDetailsPage />
+      </ArTestWrapper>
+    )
+    const versionDetailsPage = document.querySelector('[data-testid="version-details-page-oss"]') as HTMLElement
+    expect(versionDetailsPage).toBeInTheDocument()
+
+    const pageHeader = getByTestId(versionDetailsPage, 'page-header')
+    expect(pageHeader).toBeInTheDocument()
+
+    const generalInfoCard = getByTestId(versionDetailsPage, 'general-information-card')
+    expect(generalInfoCard).toBeInTheDocument()
+
+    expect(versionDetailsPage).toHaveTextContent('versionDetails.tabs.artifactDetails')
+  })
+
+  test('Should render error message if failed to load general info', async () => {
+    const refetchFn = jest.fn()
+    ;(useGetArtifactDetailsQuery as jest.Mock).mockImplementation(() => ({
+      data: null,
+      error: { message: 'Failed to load general info' },
+      isLoading: false,
+      refetch: refetchFn
+    }))
+    render(
+      <ArTestWrapper
+        parent={Parent.OSS}
+        path="/registries/:repositoryIdentifier/artifacts/:artifactIdentifier/versions/:versionIdentifier"
+        pathParams={{
+          repositoryIdentifier: '1',
+          artifactIdentifier: '1',
+          versionIdentifier: '1'
+        }}
+        queryParams={{
+          digest: 'sha256:144cdab68a435424250fe06e9a4f8a5f6b6b8a8a55d257bc6ee77476a6ec520d'
+        }}>
+        <OSSVersionDetailsPage />
+      </ArTestWrapper>
+    )
+    const versionDetailsPage = document.querySelector('[data-testid="version-details-page-oss"]') as HTMLElement
+    expect(getByText(versionDetailsPage, 'Failed to load general info')).toBeInTheDocument()
+    const retryBtn = versionDetailsPage.querySelector('button[aria-label=Retry]')
+    expect(retryBtn).toBeInTheDocument()
+    await userEvent.click(retryBtn!)
+    await waitFor(() => {
+      expect(refetchFn).toHaveBeenCalled()
+    })
+  })
+})

web/src/ar/pages/version-details/HelmVersion/HelmVersionOSSContent/HelmVersionOSSGeneralInfo.tsx

@@ -55,7 +55,7 @@ export default function HelmVersionOSSGeneralInfo(props: HelmVersionOSSGeneralIn
   return (
     <Page.Body className={className} loading={loading} error={error?.message} retryOnError={() => refetch()}>
       {response && (
-        <Card className={css.cardContainer} title="General Information">
+        <Card data-testid="general-information-card" className={css.cardContainer} title="General Information">
           <Layout.Vertical spacing="medium">
             <Text font={{ variation: FontVariation.CARD_TITLE }}>
               {getString('versionDetails.overview.generalInformation.title')}

web/src/ar/pages/version-details/HelmVersion/__tests__/HelmVersionDetailsOSS.test.tsx

@@ -0,0 +1,120 @@
+/*
+ * Copyright 2024 Harness, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react'
+import userEvent from '@testing-library/user-event'
+import { getByTestId, getByText, render, waitFor } from '@testing-library/react'
+import { useGetHelmArtifactDetailsQuery } from '@harnessio/react-har-service-client'
+
+import '@ar/pages/version-details/VersionFactory'
+import '@ar/pages/repository-details/RepositoryFactory'
+import { Parent } from '@ar/common/types'
+import ArTestWrapper from '@ar/utils/testUtils/ArTestWrapper'
+
+import {
+  mockHelmArtifactDetails,
+  mockHelmArtifactManifest,
+  mockHelmVersionList,
+  mockHelmVersionSummary
+} from './__mockData__'
+import OSSVersionDetailsPage from '../../OSSVersionDetailsPage'
+
+jest.mock('@harnessio/react-har-service-client', () => ({
+  useGetArtifactVersionSummaryQuery: jest.fn().mockImplementation(() => ({
+    data: { content: mockHelmVersionSummary },
+    error: null,
+    isLoading: false,
+    refetch: jest.fn()
+  })),
+  getAllArtifactVersions: jest.fn().mockImplementation(
+    () =>
+      new Promise(success => {
+        success({ content: mockHelmVersionList })
+      })
+  ),
+  useGetHelmArtifactDetailsQuery: jest.fn().mockImplementation(() => ({
+    data: { content: mockHelmArtifactDetails },
+    error: null,
+    isLoading: false,
+    refetch: jest.fn()
+  })),
+  useGetHelmArtifactManifestQuery: jest.fn().mockImplementation(() => ({
+    data: { content: mockHelmArtifactManifest },
+    error: null,
+    isLoading: false,
+    refetch: jest.fn()
+  }))
+}))
+
+describe('verify helm version details page for oss', () => {
+  test('Should render content without error', () => {
+    render(
+      <ArTestWrapper
+        parent={Parent.OSS}
+        path="/registries/:repositoryIdentifier/artifacts/:artifactIdentifier/versions/:versionIdentifier"
+        pathParams={{
+          repositoryIdentifier: '1',
+          artifactIdentifier: '1',
+          versionIdentifier: '1'
+        }}>
+        <OSSVersionDetailsPage />
+      </ArTestWrapper>
+    )
+    const versionDetailsPage = document.querySelector('[data-testid="version-details-page-oss"]') as HTMLElement
+    expect(versionDetailsPage).toBeInTheDocument()
+
+    const pageHeader = getByTestId(versionDetailsPage, 'page-header')
+    expect(pageHeader).toBeInTheDocument()
+
+    const generalInfoCard = getByTestId(versionDetailsPage, 'general-information-card')
+    expect(generalInfoCard).toBeInTheDocument()
+
+    expect(versionDetailsPage).toHaveTextContent('versionDetails.artifactDetails.tabs.manifest')
+  })
+
+  test('Should render error message if failed to load general info', async () => {
+    const refetchFn = jest.fn()
+    ;(useGetHelmArtifactDetailsQuery as jest.Mock).mockImplementation(() => ({
+      data: null,
+      error: { message: 'Failed to load general info' },
+      isLoading: false,
+      refetch: refetchFn
+    }))
+    render(
+      <ArTestWrapper
+        parent={Parent.OSS}
+        path="/registries/:repositoryIdentifier/artifacts/:artifactIdentifier/versions/:versionIdentifier"
+        pathParams={{
+          repositoryIdentifier: '1',
+          artifactIdentifier: '1',
+          versionIdentifier: '1'
+        }}
+        queryParams={{
+          digest: 'sha256:144cdab68a435424250fe06e9a4f8a5f6b6b8a8a55d257bc6ee77476a6ec520d'
+        }}>
+        <OSSVersionDetailsPage />
+      </ArTestWrapper>
+    )
+    const versionDetailsPage = document.querySelector('[data-testid="version-details-page-oss"]') as HTMLElement
+    expect(getByText(versionDetailsPage, 'Failed to load general info')).toBeInTheDocument()
+    const retryBtn = versionDetailsPage.querySelector('button[aria-label=Retry]')
+    expect(retryBtn).toBeInTheDocument()
+    await userEvent.click(retryBtn!)
+    await waitFor(() => {
+      expect(refetchFn).toHaveBeenCalled()
+    })
+  })
+})

web/src/ar/pages/version-details/MavenVersion/__tests__/MavenVersionDetailsOSS.test.tsx

@@ -0,0 +1,120 @@
+/*
+ * Copyright 2024 Harness, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react'
+import userEvent from '@testing-library/user-event'
+import { getByTestId, getByText, render, waitFor } from '@testing-library/react'
+import { useGetArtifactDetailsQuery } from '@harnessio/react-har-service-client'
+
+import '@ar/pages/version-details/VersionFactory'
+import '@ar/pages/repository-details/RepositoryFactory'
+import { Parent } from '@ar/common/types'
+import ArTestWrapper from '@ar/utils/testUtils/ArTestWrapper'
+
+import {
+  mockMavenArtifactDetails,
+  mockMavenArtifactFiles,
+  mockMavenVersionList,
+  mockMavenVersionSummary
+} from './__mockData__'
+import OSSVersionDetailsPage from '../../OSSVersionDetailsPage'
+
+jest.mock('@harnessio/react-har-service-client', () => ({
+  useGetArtifactVersionSummaryQuery: jest.fn().mockImplementation(() => ({
+    data: { content: mockMavenVersionSummary },
+    error: null,
+    isLoading: false,
+    refetch: jest.fn()
+  })),
+  getAllArtifactVersions: jest.fn().mockImplementation(
+    () =>
+      new Promise(success => {
+        success({ content: mockMavenVersionList })
+      })
+  ),
+  useGetArtifactDetailsQuery: jest.fn().mockImplementation(() => ({
+    data: { content: mockMavenArtifactDetails },
+    error: null,
+    isLoading: false,
+    refetch: jest.fn()
+  })),
+  useGetArtifactFilesQuery: jest.fn().mockImplementation(() => ({
+    data: { content: mockMavenArtifactFiles },
+    error: null,
+    isLoading: false,
+    refetch: jest.fn()
+  }))
+}))
+
+describe('Verify maven version details page for oss', () => {
+  test('Should render content without error', () => {
+    render(
+      <ArTestWrapper
+        parent={Parent.OSS}
+        path="/registries/:repositoryIdentifier/artifacts/:artifactIdentifier/versions/:versionIdentifier"
+        pathParams={{
+          repositoryIdentifier: '1',
+          artifactIdentifier: '1',
+          versionIdentifier: '1'
+        }}>
+        <OSSVersionDetailsPage />
+      </ArTestWrapper>
+    )
+    const versionDetailsPage = document.querySelector('[data-testid="version-details-page-oss"]') as HTMLElement
+    expect(versionDetailsPage).toBeInTheDocument()
+
+    const pageHeader = getByTestId(versionDetailsPage, 'page-header')
+    expect(pageHeader).toBeInTheDocument()
+
+    const generalInfoCard = getByTestId(versionDetailsPage, 'general-information-card')
+    expect(generalInfoCard).toBeInTheDocument()
+
+    expect(versionDetailsPage).toHaveTextContent('versionDetails.tabs.artifactDetails')
+  })
+
+  test('Should render error message if failed to load general info', async () => {
+    const refetchFn = jest.fn()
+    ;(useGetArtifactDetailsQuery as jest.Mock).mockImplementation(() => ({
+      data: null,
+      error: { message: 'Failed to load general info' },
+      isLoading: false,
+      refetch: refetchFn
+    }))
+    render(
+      <ArTestWrapper
+        parent={Parent.OSS}
+        path="/registries/:repositoryIdentifier/artifacts/:artifactIdentifier/versions/:versionIdentifier"
+        pathParams={{
+          repositoryIdentifier: '1',
+          artifactIdentifier: '1',
+          versionIdentifier: '1'
+        }}
+        queryParams={{
+          digest: 'sha256:144cdab68a435424250fe06e9a4f8a5f6b6b8a8a55d257bc6ee77476a6ec520d'
+        }}>
+        <OSSVersionDetailsPage />
+      </ArTestWrapper>
+    )
+    const versionDetailsPage = document.querySelector('[data-testid="version-details-page-oss"]') as HTMLElement
+    expect(getByText(versionDetailsPage, 'Failed to load general info')).toBeInTheDocument()
+    const retryBtn = versionDetailsPage.querySelector('button[aria-label=Retry]')
+    expect(retryBtn).toBeInTheDocument()
+    await userEvent.click(retryBtn!)
+    await waitFor(() => {
+      expect(refetchFn).toHaveBeenCalled()
+    })
+  })
+})

web/src/ar/pages/version-details/OSSVersionDetailsPage.tsx

@@ -57,7 +57,7 @@ export default function OSSVersionDetailsPage() {
           repoKey={pathParams.repositoryIdentifier}
           artifactKey={pathParams.artifactIdentifier}
           versionKey={pathParams.versionIdentifier}>
-          <Container className={css.ossVersionDetailsModal}>
+          <Container data-testid="version-details-page-oss" className={css.ossVersionDetailsModal}>
             <Button minimal className={css.closeBtn} icon="cross" withoutBoxShadow onClick={hideModal} />
             <OSSVersionDetails />
           </Container>