@intility/bifrost-react-select 4.0.0-alpha.8 → 4.0.0-beta.0

package/src/Select.test.tsx

@@ -1,118 +1,118 @@
-import Select from './Select'
-import { render } from '@testing-library/react'
+import Select from "./Select";
+import { render } from "@testing-library/react";
 
-let getByTestId, getByText, queryByText, element, customInput, rerender
+let getByTestId, getByText, queryByText, element, customInput, rerender;
 
 beforeEach(() => {
   const options = [
-    { value: 'Norway', label: 'Norway' },
-    { value: 'Sweden', label: 'Sweden' },
-    { value: 'Denmark', label: 'Denmark' },
-    { value: 'Germany', label: 'Germany' }
-  ]
+    { value: "Norway", label: "Norway" },
+    { value: "Sweden", label: "Sweden" },
+    { value: "Denmark", label: "Denmark" },
+    { value: "Germany", label: "Germany" },
+  ];
 
   const select = render(
     <Select
-      label='Select country'
-      placeholder='Select country here'
+      label="Select country"
+      placeholder="Select country here"
       options={options}
-    />
-  )
-
-  getByTestId = select.getByTestId
-  getByText = select.getByText
-  queryByText = select.queryByText
-  element = getByTestId('bf-select-container')
-  customInput = getByTestId('bf-select-input')
-  rerender = select.rerender
+    />,
+  );
+
+  getByTestId = select.getByTestId;
+  getByText = select.getByText;
+  queryByText = select.queryByText;
+  element = getByTestId("bf-select-container");
+  customInput = getByTestId("bf-select-input");
+  rerender = select.rerender;
   // debug = select.debug
-})
-
-describe('select component', () => {
-  it('renders select component', () => {
-    expect(element)
-  })
-})
-
-describe('select with required label prop', () => {
-  it('renders label text', () => {
-    expect(getByText('Select country'))
-  })
-})
-
-describe('select with className and style', () => {
-  it('renders with custom classname and custom styles', () => {
+});
+
+describe("select component", () => {
+  it("renders select component", () => {
+    expect(element);
+  });
+});
+
+describe("select with required label prop", () => {
+  it("renders label text", () => {
+    expect(getByText("Select country"));
+  });
+});
+
+describe("select with className and style", () => {
+  it("renders with custom classname and custom styles", () => {
     rerender(
       <Select
-        label='Custom classname'
-        className='custom-classname'
-        style={{ width: '100%' }}
-      />
-    )
-
-    expect(element).toHaveClass('custom-classname')
-    expect(element).toHaveStyle('width: 100%')
-  })
-})
-
-describe('select with description prop', () => {
-  it('renders with text as description', () => {
+        label="Custom classname"
+        className="custom-classname"
+        style={{ width: "100%" }}
+      />,
+    );
+
+    expect(element).toHaveClass("custom-classname");
+    expect(element).toHaveStyle("width: 100%");
+  });
+});
+
+describe("select with description prop", () => {
+  it("renders with text as description", () => {
     rerender(
-      <Select label='Select country' description='Please select one country' />
-    )
+      <Select label="Select country" description="Please select one country" />,
+    );
 
-    expect(getByText('Please select one country'))
-  })
-})
+    expect(getByText("Please select one country"));
+  });
+});
 
-describe('select with state and feedback props', () => {
-  it('renders with alert state ', () => {
+describe("select with state and feedback props", () => {
+  it("renders with alert state ", () => {
     rerender(
-      <Select label='Select country' state='alert' feedback='Missing value ' />
-    )
+      <Select label="Select country" state="alert" feedback="Missing value " />,
+    );
 
-    expect(element).toHaveClass('bf-select-alert')
-  })
+    expect(element).toHaveClass("bf-select-alert");
+  });
 
-  it('renders with feedback text', () => {
+  it("renders with feedback text", () => {
     rerender(
-      <Select label='Select country' state='alert' feedback='Missing value ' />
-    )
-    const feedback = getByText('Missing value')
-
-    expect(feedback)
-    expect(feedback).toHaveClass('bf-label-feedback')
-    expect(feedback.tagName.toLowerCase()).toBe('div')
-  })
-})
-
-describe('select disabled', () => {
-  it('renders as disabled', () => {
-    rerender(<Select label='Disabled' isDisabled />)
+      <Select label="Select country" state="alert" feedback="Missing value " />,
+    );
+    const feedback = getByText("Missing value");
+
+    expect(feedback);
+    expect(feedback).toHaveClass("bf-label-feedback");
+    expect(feedback.tagName.toLowerCase()).toBe("div");
+  });
+});
+
+describe("select disabled", () => {
+  it("renders as disabled", () => {
+    rerender(<Select label="Disabled" isDisabled />);
     // can only test classname, hence isDisabled is a prop for react-select
-    expect(element).toHaveClass('bf-select-disabled')
-  })
-})
+    expect(element).toHaveClass("bf-select-disabled");
+  });
+});
 
-describe('select with required/optional props', () => {
-  it('renders as required', () => {
-    rerender(<Select label='This is required' required />)
+describe("select with required/optional props", () => {
+  it("renders as required", () => {
+    rerender(<Select label="This is required" required />);
 
-    expect(customInput).toBeRequired()
-    expect(getByText('(required)'))
-  })
+    expect(customInput).toBeRequired();
+    expect(getByText("(required)"));
+  });
 
-  it('renders as required, but hiding the (required) text', () => {
-    rerender(<Select label='This is required' requiredNoLabel />)
+  it("renders as required, but hiding the (required) text", () => {
+    rerender(<Select label="This is required" requiredNoLabel />);
 
-    expect(customInput).toBeRequired()
-    expect(queryByText('(required)')).toBeNull()
-  })
+    expect(customInput).toBeRequired();
+    expect(queryByText("(required)")).toBeNull();
+  });
 
-  it('renders as optional with (optional) text', () => {
-    rerender(<Select label='This is optional' optional />)
+  it("renders as optional with (optional) text", () => {
+    rerender(<Select label="This is optional" optional />);
 
-    expect(customInput).not.toBeRequired()
-    expect(getByText('(optional)'))
-  })
-})
+    expect(customInput).not.toBeRequired();
+    expect(getByText("(optional)"));
+  });
+});