Add unit tests

x-pack/plugins/security_solution/public/common/components/ml/tables/job_id_filter.test.tsx

@@ -5,4 +5,48 @@
  * 2.0.
  */
 
-// TODO
+import { fireEvent, render } from '@testing-library/react';
+import React from 'react';
+import { JobIdFilter } from './job_id_filter';
+
+describe('JobIdFilter', () => {
+  it('is disabled when job id is empty', () => {
+    const { getByTestId } = render(
+      <JobIdFilter title="Job id" selectedJobIds={[]} jobIds={[]} onSelect={jest.fn()} />
+    );
+    expect(getByTestId('job-id-filter-button')).toBeDisabled();
+  });
+
+  it('calls onSelect when clicked', () => {
+    const onSelectCb = jest.fn();
+    const { getByText, getByTestId } = render(
+      <JobIdFilter
+        title="Job id"
+        selectedJobIds={[]}
+        jobIds={['test_job_1', 'test_job_2', 'test_job_3', 'test_job_4']}
+        onSelect={onSelectCb}
+      />
+    );
+    fireEvent.click(getByTestId('job-id-filter-button'));
+    fireEvent.click(getByText('test_job_2'));
+
+    expect(onSelectCb).toBeCalledWith(['test_job_2']);
+  });
+
+  it('displays job id as selected when it is present in selectedJobIds', () => {
+    const { getByTestId } = render(
+      <JobIdFilter
+        title="Job id"
+        selectedJobIds={['test_job_2']}
+        jobIds={['test_job_1', 'test_job_2', 'test_job_3', 'test_job_4']}
+        onSelect={jest.fn()}
+      />
+    );
+
+    fireEvent.click(getByTestId('job-id-filter-button'));
+
+    expect(
+      getByTestId('job-id-filter-item-test_job_2').querySelector('span[data-euiicon-type=check]')
+    ).toBeInTheDocument();
+  });
+});

x-pack/plugins/security_solution/public/common/components/ml/tables/job_id_filter.tsx

@@ -39,7 +39,7 @@ export const JobIdFilter: React.FC<{
     () => (
       <EuiFilterButton
         disabled={jobIds.length === 0}
-        data-test-subj="risk-filter-button"
+        data-test-subj="job-id-filter-button"
         hasActiveFilters={selectedJobIds.length > 0}
         iconType="arrowDown"
         isSelected={isPopoverOpen}
@@ -64,7 +64,7 @@ export const JobIdFilter: React.FC<{
         <div className="euiFilterSelect__items">
           {jobIds.map((id) => (
             <EuiFilterSelectItem
-              data-test-subj={`risk-filter-item-${id}`}
+              data-test-subj={`job-id-filter-item-${id}`}
               checked={selectedJobIds.includes(id) ? 'on' : undefined}
               key={id}
               onClick={() => updateSelection(id)}

x-pack/plugins/security_solution/public/common/components/ml/tables/select_interval.test.tsx

@@ -5,5 +5,24 @@
  * 2.0.
  */
 
-// TODO
-// it renders
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { SelectInterval } from './select_interval';
+
+describe('SelectInterval', () => {
+  it('selects the given interval', () => {
+    const { getByText } = render(<SelectInterval interval={'day'} onChange={jest.fn()} />);
+    expect((getByText('1 day') as HTMLOptionElement).selected).toBeTruthy();
+  });
+
+  it('calls onChange when clicked', () => {
+    const onChangeCb = jest.fn();
+    const { getByText, getByTestId } = render(
+      <SelectInterval interval={'day'} onChange={onChangeCb} />
+    );
+
+    userEvent.selectOptions(getByTestId('selectInterval'), getByText('1 hour'));
+    expect(onChangeCb).toBeCalledWith('hour');
+  });
+});

x-pack/plugins/security_solution/public/common/components/ml/tables/select_interval.tsx

@@ -37,8 +37,10 @@ export const SelectInterval: React.FC<{
     },
     [onChange]
   );
+
   return (
     <EuiSelect
+      data-test-subj="selectInterval"
       prepend={i18n.INTERVAL}
       append={
         <EuiToolTip content={i18n.INTERVAL_TOOLTIP}>