Added GlobalSchemaSelector tests (#1376)

* Added GlobalSchemaSelector tests

* fix schema selection assertion

Co-authored-by: Ekaterina Petrova <epetrova@provectus.com>

kafka-ui-react-app/src/components/Schemas/List/GlobalSchemaSelector/GlobalSchemaSelector.tsx

@@ -63,6 +63,9 @@ const GlobalSchemaSelector: React.FC = () => {
           compatibilityLevel: { compatibility: nextCompatibilityLevel },
         });
         dispatch(fetchSchemas(clusterName));
+        setCurrentCompatibilityLevel(nextCompatibilityLevel);
+        setNextCompatibilityLevel(undefined);
+        setIsConfirmationVisible(false);
       } catch (e) {
         const err = await getResponse(e as Response);
         dispatch(serverErrorAlertAdded(err));
@@ -78,7 +81,7 @@ const GlobalSchemaSelector: React.FC = () => {
       <div>Global Compatibility Level: </div>
       <Select
         selectSize="M"
-        defaultValue={currentCompatibilityLevel}
+        value={currentCompatibilityLevel}
         onChange={handleChangeCompatibilityLevel}
         disabled={isFetching || isUpdating || isConfirmationVisible}
       >

kafka-ui-react-app/src/components/Schemas/List/GlobalSchemaSelector/__test__/GlobalSchemaSelector.spec.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import { render } from 'lib/testHelpers';
+import { CompatibilityLevelCompatibilityEnum } from 'generated-sources';
+import GlobalSchemaSelector from 'components/Schemas/List/GlobalSchemaSelector/GlobalSchemaSelector';
+import userEvent from '@testing-library/user-event';
+import { clusterSchemasPath } from 'lib/paths';
+import { Route } from 'react-router';
+import fetchMock from 'fetch-mock';
+
+const clusterName = 'testClusterName';
+
+const selectForwardOption = () =>
+  userEvent.selectOptions(
+    screen.getByRole('listbox'),
+    CompatibilityLevelCompatibilityEnum.FORWARD
+  );
+
+const expectOptionIsSelected = (option: string) => {
+  const optionElement: HTMLOptionElement = screen.getByText(option);
+  expect(optionElement.selected).toBeTruthy();
+};
+
+describe('GlobalSchemaSelector', () => {
+  const renderComponent = () =>
+    render(
+      <Route path={clusterSchemasPath(':clusterName')}>
+        <GlobalSchemaSelector />
+      </Route>,
+      {
+        pathname: clusterSchemasPath(clusterName),
+      }
+    );
+
+  beforeEach(async () => {
+    const fetchGlobalCompatibilityLevelMock = fetchMock.getOnce(
+      `api/clusters/${clusterName}/schemas/compatibility`,
+      { compatibility: CompatibilityLevelCompatibilityEnum.FULL }
+    );
+    renderComponent();
+    await waitFor(() =>
+      expect(fetchGlobalCompatibilityLevelMock.called()).toBeTruthy()
+    );
+  });
+
+  afterEach(() => {
+    fetchMock.reset();
+  });
+
+  it('renders with initial prop', () => {
+    expectOptionIsSelected(CompatibilityLevelCompatibilityEnum.FULL);
+  });
+
+  it('shows popup when select value is changed', async () => {
+    expectOptionIsSelected(CompatibilityLevelCompatibilityEnum.FULL);
+    selectForwardOption();
+    expect(screen.getByText('Confirm the action')).toBeInTheDocument();
+  });
+
+  it('resets select value when cancel is clicked', () => {
+    selectForwardOption();
+    userEvent.click(screen.getByText('Cancel'));
+    expect(screen.queryByText('Confirm the action')).not.toBeInTheDocument();
+    expectOptionIsSelected(CompatibilityLevelCompatibilityEnum.FULL);
+  });
+
+  it('sets new schema when confirm is clicked', async () => {
+    selectForwardOption();
+    const putNewCompatibilityMock = fetchMock.putOnce(
+      `api/clusters/${clusterName}/schemas/compatibility`,
+      200,
+      {
+        body: {
+          compatibility: CompatibilityLevelCompatibilityEnum.FORWARD,
+        },
+      }
+    );
+    const getSchemasMock = fetchMock.getOnce(
+      `api/clusters/${clusterName}/schemas`,
+      200
+    );
+    await waitFor(() => {
+      userEvent.click(screen.getByText('Submit'));
+    });
+    await waitFor(() => expect(putNewCompatibilityMock.called()).toBeTruthy());
+    await waitFor(() => expect(getSchemasMock.called()).toBeTruthy());
+    expect(screen.queryByText('Confirm the action')).not.toBeInTheDocument();
+    expectOptionIsSelected(CompatibilityLevelCompatibilityEnum.FORWARD);
+  });
+});

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/__tests__/__snapshots__/Filters.spec.tsx.snap

@@ -464,6 +464,7 @@ exports[`Filters component matches the snapshot 1`] = `
               <select
                 class="c7"
                 id="selectSeekType"
+                role="listbox"
               >
                 <option
                   value="OFFSET"
@@ -562,6 +563,7 @@ exports[`Filters component matches the snapshot 1`] = `
         >
           <select
             class="c11"
+            role="listbox"
           >
             <option
               value="FORWARD"
@@ -1098,6 +1100,7 @@ exports[`Filters component when fetching matches the snapshot 1`] = `
               <select
                 class="c7"
                 id="selectSeekType"
+                role="listbox"
               >
                 <option
                   value="OFFSET"
@@ -1196,6 +1199,7 @@ exports[`Filters component when fetching matches the snapshot 1`] = `
         >
           <select
             class="c11"
+            role="listbox"
           >
             <option
               value="FORWARD"

kafka-ui-react-app/src/components/common/Select/Select.tsx

@@ -38,7 +38,12 @@ const Select: React.FC<SelectProps> = ({
           {children}
         </S.Select>
       ) : (
-        <S.Select selectSize={selectSize} isLive={isLive} {...props}>
+        <S.Select
+          role="listbox"
+          selectSize={selectSize}
+          isLive={isLive}
+          {...props}
+        >
           {children}
         </S.Select>
       )}