diff --git a/src/VehicleSelector/VehicleSelector.test.tsx b/src/VehicleSelector/VehicleSelector.test.tsx index b830fd7b..1142fe17 100644 --- a/src/VehicleSelector/VehicleSelector.test.tsx +++ b/src/VehicleSelector/VehicleSelector.test.tsx @@ -1,6 +1,6 @@ import React, { useState } from "react"; import { Vehicle, VehicleSelectorProps } from "./VehicleSelector.types"; -import { render, screen } from "@testing-library/react"; +import { render, screen, waitFor } from "@testing-library/react"; import VehicleSelector from "./VehicleSelector"; @@ -235,4 +235,48 @@ describe("VehicleSelector", () => { expect(screen.getByRole("combobox", { name: /variant/i })).toBeDisabled(); expect(screen.getByRole("combobox", { name: /gate/i })).toBeDisabled(); }); + + it("removes clear button when variant is deselected in single selection mode", async () => { + const value = [ + { + _id: "64c8c4cccc8d6f00130b366b", + gate: "Gate 1", + modelYear: "2015", + projectCode: "911", + variant: "NN" + } + ]; + + render( + + ); + + // check the variant is initially selected + expect(screen.getByRole("combobox", { name: /variant/i })).toHaveValue( + "NN" + ); + + // find and click the clear button + const variantField = screen.getByRole("combobox", { name: /variant/i }); + const clearButton = variantField.parentElement?.querySelector( + '[aria-label="Clear"]' + ); + + expect(clearButton).toBeInTheDocument(); + clearButton?.click(); + + // wait until the clear button disappears + await waitFor(() => + expect( + variantField.parentElement?.querySelector('[aria-label="Clear"]') + ).not.toBeInTheDocument() + ); + + // Ensure the variant field is empty + expect(variantField).toHaveValue(""); + }); }); diff --git a/src/VehicleSelector/VehicleSelector.tsx b/src/VehicleSelector/VehicleSelector.tsx index 91e3e38b..9421c7fe 100644 --- a/src/VehicleSelector/VehicleSelector.tsx +++ b/src/VehicleSelector/VehicleSelector.tsx @@ -223,7 +223,7 @@ function VehicleSelector({ } }} size={size} - // if array is empty set to null to avoid rendereing the clear button + // if array is empty, set value to null to avoid rendering the clear button value={ multipleSelection ? selectedVariants : selectedVariants[0] || null }