feat: update stories and tests

kiwicom · Jul 25, 2024 · 53cdd7c · 53cdd7c
1 parent 1184799
commit 53cdd7c
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 11 deletions.
diff --git a/packages/orbit-components/src/InputSelect/InputSelect.ct-story.tsx b/packages/orbit-components/src/InputSelect/InputSelect.ct-story.tsx
@@ -60,55 +60,73 @@ const advancedOptions = [
 export function InputSelectStory() {
   return (
     <div className="gap-md p-md flex flex-col">
-      <InputSelect options={simpleOptions} />
-      <InputSelect options={simpleOptions} label="Custom label" placeholder="Custom placeholder" />
+      <InputSelect options={simpleOptions} readOnly />
+      <InputSelect
+        options={simpleOptions}
+        label="Custom label"
+        placeholder="Custom placeholder"
+        readOnly
+      />
       <InputSelect
         options={simpleOptions}
         label="Custom label"
         placeholder="Custom Placeholder"
         disabled
+        readOnly
       />
-      <InputSelect options={simpleOptions} label="Custom label" required />
-      <InputSelect options={simpleOptions} defaultSelected={simpleOptions[0]} />
+      <InputSelect options={simpleOptions} label="Custom label" required readOnly />
+      <InputSelect options={simpleOptions} defaultSelected={simpleOptions[0]} readOnly />
       <InputSelect
         options={simpleOptions}
         label="Custom label"
         help="Do or do not. There is no try."
+        readOnly
       />
-      <InputSelect options={simpleOptions} label="Custom label" error="You shall not pass!" />
-      <InputSelect options={simpleOptions} width="100px" />
+      <InputSelect
+        options={simpleOptions}
+        label="Custom label"
+        error="You shall not pass!"
+        readOnly
+      />
+      <InputSelect options={simpleOptions} width="100px" readOnly />
     </div>
   );
 }
 
 export function InputSelectDropdownStory() {
   return (
     <div className="p-md min-h-[600px]">
-      <InputSelect options={simpleOptions} dataTest="Dropdown" />
+      <InputSelect options={simpleOptions} dataTest="Dropdown" readOnly />
     </div>
   );
 }
 
 export function InputSelectDropdownSizesStory() {
   return (
     <div className="p-md min-h-[600px]">
-      <InputSelect options={simpleOptions} dataTest="Dropdown" maxWidth="200px" maxHeight="200px" />
+      <InputSelect
+        options={simpleOptions}
+        dataTest="Dropdown"
+        maxWidth="200px"
+        maxHeight="200px"
+        readOnly
+      />
     </div>
   );
 }
 
 export function InputSelectDropdownEmptyStory() {
   return (
     <div className="p-md min-h-[600px]">
-      <InputSelect options={[]} dataTest="Dropdown" emptyState="I ain't no Pokémon" />
+      <InputSelect options={[]} dataTest="Dropdown" emptyState="I ain't no Pokémon" readOnly />
     </div>
   );
 }
 
 export function InputSelectDropdownGroupsStory() {
   return (
     <div className="p-md min-h-[600px]">
-      <InputSelect options={advancedOptions} dataTest="Dropdown" />
+      <InputSelect options={advancedOptions} dataTest="Dropdown" readOnly />
     </div>
   );
 }
diff --git a/packages/orbit-components/src/InputSelect/InputSelect.stories.tsx b/packages/orbit-components/src/InputSelect/InputSelect.stories.tsx
@@ -58,6 +58,7 @@ export const Grouped = () => {
         onChange={action("onChange")}
         onOptionSelect={action("onOptionSelect")}
         showAll={showAll}
+        readOnly
       />
     </div>
   );
@@ -116,6 +117,7 @@ export const PreviouslySelected = () => {
         prevSelected={currencyOptions[2]}
         prevSelectedLabel={prevSelectedLabel}
         defaultSelected={currencyOptions[2]}
+        readOnly
       />
     </div>
   );
@@ -236,6 +238,7 @@ export const Playground = () => {
         emptyState={emptyStateMessage}
         showAll={showAll}
         showAllLabel={showAllLabel}
+        readOnly
       />
     </div>
   );

diff --git a/packages/orbit-components/src/InputSelect/__tests__/index.test.tsx b/packages/orbit-components/src/InputSelect/__tests__/index.test.tsx
@@ -62,6 +62,7 @@ describe("InputSelect", () => {
         onOptionSelect={onOptionSelect}
         onChange={onChange}
         onClose={onClose}
+        readOnly
       />,
     );
 
@@ -148,6 +149,7 @@ describe("InputSelect", () => {
         defaultSelected={jetLiOption}
         onClose={onClose}
         onOptionSelect={onOptionSelect}
+        readOnly
       />,
     );
 
@@ -182,6 +184,7 @@ describe("InputSelect", () => {
         defaultSelected={jetLiOption}
         onClose={onClose}
         onOptionSelect={onOptionSelect}
+        readOnly
       />,
     );
 
@@ -206,6 +209,7 @@ describe("InputSelect", () => {
         name={name}
         prevSelected={jetLiOption}
         prevSelectedLabel={prevSelectedLabel}
+        readOnly
       />,
     );
 
@@ -219,7 +223,9 @@ describe("InputSelect", () => {
   describe("when showAll is false", () => {
     it("should not render repeated options", async () => {
       const showAllLabel = "Those without a group";
-      render(<InputSelect options={options} showAll={false} showAllLabel={showAllLabel} />);
+      render(
+        <InputSelect options={options} showAll={false} showAllLabel={showAllLabel} readOnly />,
+      );
       await user.tab();
 
       // after focus dropdown should have all options grouped and then show only the ones without a group