feat(connect-form): Add tls tab form options COMPASS-5232

packages/compass-components/package.json

@@ -52,6 +52,7 @@
     "@leafygreen-ui/palette": "^3.2.2",
     "@leafygreen-ui/portal": "^3.1.3",
     "@leafygreen-ui/radio-box-group": "^6.1.4",
+    "@leafygreen-ui/radio-group": "^7.0.6",
     "@leafygreen-ui/segmented-control": "^0.9.1",
     "@leafygreen-ui/select": "^3.0.8",
     "@leafygreen-ui/table": "^2.0.5",

packages/compass-components/src/components/file-input.spec.tsx

@@ -2,7 +2,13 @@ import React from 'react';
 import sinon from 'sinon';
 import { expect } from 'chai';
 
-import { render, screen, cleanup } from '@testing-library/react';
+import {
+  render,
+  screen,
+  cleanup,
+  fireEvent,
+  waitFor,
+} from '@testing-library/react';
 
 import FileInput, { Variant } from './file-input';
 
@@ -182,4 +188,126 @@ describe('FileInput', function () {
     const errorMessage = screen.getByTestId('file-input-error');
     expect(errorMessage).to.exist;
   });
+
+  it('does not show optional if not specified', function () {
+    render(
+      <FileInput
+        id="file-input"
+        label="Select something"
+        onChange={spy}
+        error={true}
+        errorMessage={'Error'}
+      />
+    );
+
+    expect(screen.queryByText('Optional')).to.equal(null);
+  });
+
+  it('renders the optional when specified', function () {
+    render(
+      <FileInput
+        id="file-input"
+        label="Select something"
+        onChange={spy}
+        error={true}
+        errorMessage={'Error'}
+        optional
+      />
+    );
+
+    expect(screen.getByText('Optional')).to.be.visible;
+  });
+
+  it('renders the optional message when specified', function () {
+    render(
+      <FileInput
+        id="file-input"
+        label="Select something"
+        onChange={spy}
+        error={true}
+        errorMessage={'Error'}
+        optional
+        optionalMessage="pineapples"
+      />
+    );
+
+    expect(screen.getByText('pineapples')).to.be.visible;
+  });
+
+  describe('when a file is chosen', function () {
+    beforeEach(async function () {
+      render(
+        <FileInput
+          id="file-input"
+          label="Select something"
+          dataTestId="test-file-input"
+          onChange={spy}
+          error={true}
+          errorMessage={'Error'}
+        />
+      );
+
+      const fileInput = screen.getByTestId('test-file-input');
+
+      await waitFor(() =>
+        fireEvent.change(fileInput, {
+          target: {
+            files: [
+              {
+                path: 'new/file/path',
+              },
+            ],
+          },
+        })
+      );
+    });
+
+    it('calls onChange with the chosen file', function () {
+      expect(spy.callCount).to.equal(1);
+      expect(spy.firstCall.args[0]).to.deep.equal(['new/file/path']);
+    });
+  });
+
+  it('renders the file name with close button when showFileOnNewLine=true', function () {
+    render(
+      <FileInput
+        id="file-input"
+        label="Select something"
+        dataTestId="test-file-input"
+        onChange={spy}
+        showFileOnNewLine
+        values={['new/file/nice', 'another/file/path']}
+      />
+    );
+
+    expect(screen.getByText('new/file/nice')).to.be.visible;
+    expect(screen.getByText('another/file/path')).to.be.visible;
+    expect(screen.getAllByLabelText('Remove file').length).to.equal(2);
+  });
+
+  describe('when a file is clicked to remove on multi line', function () {
+    beforeEach(async function () {
+      render(
+        <FileInput
+          id="file-input"
+          label="Select something"
+          dataTestId="test-file-input"
+          onChange={spy}
+          error={true}
+          errorMessage={'Error'}
+          showFileOnNewLine
+          values={['new/file/path', 'another/file/path']}
+        />
+      );
+
+      const removeButton = screen.getAllByLabelText('Remove file')[0];
+
+      await waitFor(() => fireEvent.click(removeButton));
+    });
+
+    it('calls onChange with the file removed', function () {
+      expect(spy.callCount).to.equal(1);
+      expect(spy.firstCall.args[0]).to.deep.equal(['another/file/path']);
+    });
+  });
 });