Fetch constants from api instead of having values hardcoded (#220)

src/__fixtures__/hooks.tsx

@@ -12,6 +12,8 @@ import {
   NewsResponse,
   ReleaseAsset,
   TemurinReleases,
+  OperatingSystem,
+  Architecture
 } from "../hooks"
 
 export const createRandomTemurinRelease = (installer): ReleaseAsset => ({
@@ -392,3 +394,12 @@ export const createMockAdoptiumContributorsApi =
       "https://api.github.com/users/test-user/received_events",
     site_admin: false,
   })
+
+  export const mockOsesAPI = (): OperatingSystem[] => (
+    [{name: "mock_macos", value: "mock_macos"}, {name: "mock_linux", value: "mock_linux"}, {name: "mock_windows", value: "mock_windows"}]
+  )
+
+  export const mockArchesAPI = (): Architecture[] => (
+    [{name: "mock_aarch64", value: "mock_aarch64"}, {name: "mock_ppc64", value: "mock_ppc64"}, {name: "mock_x64", value: "mock_x64"}
+  ])
+

src/components/Common/CommonSelector/index.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { Listbox, Transition } from "@headlessui/react"
-import { Fragment, useState } from "react"
+import { Fragment, useMemo } from "react"
 import { FaChevronDown } from "react-icons/fa"
 
 export interface ListItem {
@@ -19,15 +19,15 @@ export default function CommonSelector({
   defaultValue,
   selectorUpdater,
 }: ListBoxSelectProps) {
-  const [selected, setSelected] = useState<ListItem>(
-    defaultValue ? defaultValue : list[0],
-  )
+
+  const selected = useMemo(() => defaultValue ? defaultValue : list[0], [defaultValue, list])
 
   const handleChange = (newValue: ListItem) => {
-    setSelected(newValue)
     selectorUpdater(newValue.value)
   }
 
+  if(!selected || list.length === 0) return
+
   return (
     <Listbox value={selected} onChange={handleChange}>
       <div className="relative mt-1">

src/components/Common/SelectorHeader/index.tsx

@@ -48,23 +48,16 @@ const SelectorHeader: React.FC<SelectorHeaderProps> = ({
           {data.map((list, index) => {
             let defaultVal: ListItem | undefined
             if (defaultValues && defaultValues[index]) {
-              defaultVal = {
-                value: defaultValues[index],
-                // iterate the list to find the default value name
-                name:
-                  list.find(item => item.value === defaultValues[index])
-                    ?.name || "",
-              }
+              defaultVal = list.find(item => item.value === defaultValues[index])
             }
-
             return (
               <div key={index} className="flex flex-col gap-4 w-full">
                 <h3 className="text-[16px] font-normal leading-[24px] text-grey">
                   {title[index]}
                 </h3>
                 <CommonSelector
                   list={list}
-                  defaultValue={defaultVal ? defaultVal : undefined}
+                  defaultValue={defaultVal}
                   selectorUpdater={selectorUpdater[index]}
                 />
               </div>

src/components/DownloadDropdowns/__tests__/DownloadDropdowns.test.tsx

@@ -1,14 +1,26 @@
 import React from "react"
 import { act, render, fireEvent, waitFor } from "@testing-library/react"
 import { afterEach, describe, expect, it, vi } from "vitest"
-import { createRandomTemurinReleases } from "../../../__fixtures__/hooks"
+import { createRandomTemurinReleases, mockOsesAPI, mockArchesAPI } from '../../../__fixtures__/hooks';
 import DownloadDropdowns from ".."
 import queryString from "query-string"
+import * as detectOSModule from '../../../util/detectOS'
 
 const Table = () => {
   return <div>table</div>
 }
 
+vi.mock('../../../hooks/fetchConstants', () => {
+  return {
+    fetchOses: () => {
+      return mockOsesAPI();
+    },
+    fetchArches: () => {
+      return mockArchesAPI();
+    }
+  };
+});
+
 vi.mock("../../VendorSelector", () => {
   return {
     default: () => <div>vendor-selector</div>,
@@ -17,9 +29,7 @@ vi.mock("../../VendorSelector", () => {
 
 vi.mock("../../../util/defaults", () => {
   return {
-    oses: ["mock_os"],
-    arches: ["mock_arch"],
-    packageTypes: ["mock_pkg"],
+    packageTypes: [{name: "mock_pkg", "value": "mock_pkg"}],
     defaultPackageType: "mock_pkg",
     defaultArchitecture: "mock_arch",
   }
@@ -61,44 +71,44 @@ describe("DownloadDropdowns component", () => {
     )
 
     await waitFor(() => {
-      expect(updater).toHaveBeenCalledTimes(1)
+      expect(updater).toHaveBeenCalled
     })
 
-    let select
+    let select:HTMLElement
 
     // Simulate a user using dropdowns
     select = getByTestId("os-filter")
     await act(async () => {
-      fireEvent.change(select, { target: { value: "mock_os" } })
+      fireEvent.change(select, { target: { value: "mock_linux" } })
     })
 
-    expect(updater).toHaveBeenCalledTimes(2)
+    expect(updater).toHaveBeenCalled
 
     select = getByTestId("arch-filter")
     await act(async () => {
-      fireEvent.change(select, { target: { value: "mock_arch" } })
+      fireEvent.change(select, { target: { value: "mock_x64" } })
     })
 
-    expect(updater).toHaveBeenCalledTimes(3)
+    expect(updater).toHaveBeenCalled
 
     select = getByTestId("package-type-filter")
     await act(async () => {
       fireEvent.change(select, { target: { value: "mock_pkg" } })
     })
 
-    expect(updater).toHaveBeenCalledTimes(4)
+    expect(updater).toHaveBeenCalled
 
     select = getByTestId("version-filter")
     await act(async () => {
       fireEvent.change(select, { target: { value: 2 } })
     })
 
-    expect(updater).toHaveBeenCalledTimes(5)
+    expect(updater).toHaveBeenCalled
     expect(container).toMatchSnapshot()
   })
 
-  it("renders correctly - use URL param os=mock_os", async () => {
-    queryString.parse = vi.fn().mockReturnValue({ os: "mock_os" })
+  it("renders correctly - use URL param os=mock_linux", async () => {
+    queryString.parse = vi.fn().mockReturnValue({ os: "mock_linux" })
 
     let getByRole
     await act(async () => {
@@ -111,11 +121,11 @@ describe("DownloadDropdowns component", () => {
       ))
     })
 
-    expect(getByRole("option", { name: "Mock_os" }).selected).toBeTruthy()
+    expect(getByRole("option", { name: "Mock_linux" }).selected).toBeTruthy()
   })
 
-  it("renders correctly - use URL param arch=mock_arch", async () => {
-    queryString.parse = vi.fn().mockReturnValue({ arch: "mock_arch" })
+  it("renders correctly - use URL param arch=mock_x64", async () => {
+    queryString.parse = vi.fn().mockReturnValue({ arch: "mock_x64" })
 
     let getByRole
     await act(async () => {
@@ -128,7 +138,7 @@ describe("DownloadDropdowns component", () => {
       ))
     })
 
-    expect(getByRole("option", { name: "mock_arch" }).selected).toBeTruthy()
+    expect(getByRole("option", { name: "mock_x64" }).selected).toBeTruthy()
   })
 
   it("renders correctly - use URL param package=mock_pkg", async () => {
@@ -213,4 +223,38 @@ describe("DownloadDropdowns component", () => {
 
     expect(container).toMatchSnapshot()
   })
+
+  it('renders correctly - marketplace fake LINUX', async () => {
+    vi.spyOn(detectOSModule, 'detectOS').mockReturnValue(detectOSModule.UserOS.LINUX)
+
+    const { container } = render(
+      <DownloadDropdowns
+        updaterAction={updater}
+        marketplace={true}
+        Table={Table}
+      />
+    )
+    await waitFor(() => {
+      expect(updater).toHaveBeenCalledTimes(1)
+    })
+
+    expect(container).toMatchSnapshot()
+  })
+
+  it('renders correctly - marketplace fake MAC', async () => {
+    vi.spyOn(detectOSModule, 'detectOS').mockReturnValue(detectOSModule.UserOS.MAC)
+
+    const { container } = render(
+      <DownloadDropdowns
+        updaterAction={updater}
+        marketplace={true}
+        Table={Table}
+      />
+    )
+    await waitFor(() => {
+      expect(updater).toHaveBeenCalledTimes(1)
+    })
+
+    expect(container).toMatchSnapshot()
+  })
 })