fixed tests connectors buttons with a sandwich menu #2403 (#2666)

* fixed tests connectors buttons with a sandwich menu #2403

* Changed color delete button and fixed tests #2403

* fix deleteConnector()

* fix deleteConnector()

Co-authored-by: davitbejanyan <dbejanyan@provectus.com>
Co-authored-by: Oleg Shur <workshur@gmail.com>
Co-authored-by: VladSenyuta <vlad.senyuta@gmail.com>

kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/pages/connector/ConnectorCreateView.java

@@ -7,7 +7,7 @@ import org.openqa.selenium.By;
 
 import static com.codeborne.selenide.Selenide.$;
 import static com.codeborne.selenide.Selenide.sleep;
-import static com.provectus.kafka.ui.utilities.WebUtils.javaExecutorClick;
+import static com.provectus.kafka.ui.utilities.WebUtils.clickByJavaScript;
 import static com.provectus.kafka.ui.utilities.screenshots.Screenshooter.log;
 
 public class ConnectorCreateView {
@@ -25,7 +25,7 @@ public class ConnectorCreateView {
         contentTextArea.setValue("");
         contentTextArea.setValue(String.valueOf(configJson.toCharArray()));
         nameField.click();
-        javaExecutorClick(submitButton);
+        clickByJavaScript(submitButton);
         sleep(4000);
         log.info("Connector config is submitted");
         return new ConnectorsView();

kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/pages/connector/ConnectorsList.java

@@ -11,7 +11,7 @@ import org.openqa.selenium.By;
 import static com.codeborne.selenide.Selenide.$;
 import static com.codeborne.selenide.Selenide.$x;
 import static com.provectus.kafka.ui.utilities.WebUtils.isVisible;
-import static com.provectus.kafka.ui.utilities.WebUtils.javaExecutorClick;
+import static com.provectus.kafka.ui.utilities.WebUtils.clickByJavaScript;
 
 @ExtensionMethod(WaitUtils.class)
 public class ConnectorsList {
@@ -32,7 +32,7 @@ public class ConnectorsList {
 
     @Step("Click on button 'Create Connector'")
     public ConnectorCreateView clickCreateConnectorButton() {
-        javaExecutorClick($x("//button[text()='Create Connector']"));
+        clickByJavaScript($x("//button[text()='Create Connector']"));
         return new ConnectorCreateView();
     }
 

kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/pages/connector/ConnectorsView.java

@@ -1,61 +1,74 @@
 package com.provectus.kafka.ui.pages.connector;
 
 import com.codeborne.selenide.Condition;
-import com.codeborne.selenide.Selenide;
 import com.codeborne.selenide.SelenideElement;
-import com.provectus.kafka.ui.settings.Source;
 import io.qameta.allure.Step;
 import org.openqa.selenium.By;
 import org.openqa.selenium.Keys;
 
-import static com.codeborne.selenide.Selenide.*;
-import static com.provectus.kafka.ui.utilities.WebUtils.javaExecutorClick;
+import static com.codeborne.selenide.Selenide.$;
+import static com.codeborne.selenide.Selenide.sleep;
+import static com.provectus.kafka.ui.utilities.WebUtils.clickByJavaScript;
 import static com.provectus.kafka.ui.utilities.screenshots.Screenshooter.log;
 
 public class ConnectorsView {
-    private static final String path = "/ui/clusters/%s/connects/first/connectors/%s";
-    protected SelenideElement submitButton = $(By.xpath("//button[@type='submit']"));
+    protected SelenideElement dotMenuBtn = $(By.xpath("//button[@aria-label='Dropdown Toggle']"));
+    protected SelenideElement deleteBtn = $(By.xpath("//li/div[text()='Delete']"));
+    protected SelenideElement confirmBtnMdl = $(By.xpath("//div[@role='dialog']//button[text()='Confirm']"));
+    protected SelenideElement submitBtn = $(By.xpath("//button[@type='submit']"));
     protected SelenideElement contentTextArea = $("[wrap]");
 
     @Step
-    public ConnectorsView goTo(String cluster, String connector) {
-        Selenide.open(String.format(Source.BASE_WEB_URL + path, cluster, connector));
+    public ConnectorsView waitUntilScreenReady() {
+        $(By.xpath("//a[text() ='Tasks']")).shouldBe(Condition.visible);
+        $(By.xpath("//a[text() ='Config']")).shouldBe(Condition.visible);
+        $(By.xpath("//a[text() ='Overview']")).shouldBe(Condition.visible);
         return this;
     }
 
     @Step()
     public ConnectorsView openConfigTab() {
-        javaExecutorClick($(By.xpath("//a[text() ='Config']")));
-        return new ConnectorsView();
+        clickByJavaScript($(By.xpath("//a[text() ='Config']")));
+        return this;
     }
 
-    @Step("Set connector config JSON")
+    @Step()
     public ConnectorsView setConfig(String configJson) {
         $("#config").click();
-        contentTextArea.sendKeys(Keys.LEFT_CONTROL+"a");
+        contentTextArea.sendKeys(Keys.LEFT_CONTROL + "a");
         contentTextArea.setValue("");
         contentTextArea.setValue(String.valueOf(configJson.toCharArray()));
         $("#config").click();
-        submitButton.shouldBe(Condition.enabled);
-        javaExecutorClick(submitButton);
+        clickByJavaScript(submitBtn);
         sleep(4000);
         log.info("Connector config is submitted");
-        return new ConnectorsView();
+        return this;
     }
 
-    @Step("Click 'Delete' button")
-    public void clickDeleteButton() {
-        javaExecutorClick($x("//button[text()='Delete']"));
-        SelenideElement confirmButton = $x("//div[@role=\"dialog\"]//button[text()='Confirm']");
-        confirmButton.shouldBe(Condition.enabled).click();
-        confirmButton.shouldBe(Condition.disappear);
+    @Step()
+    public ConnectorsView openDotMenu() {
+        clickByJavaScript(dotMenuBtn);
+        return this;
     }
 
-    @Step
-    public ConnectorsView waitUntilScreenReady() {
-        $(By.xpath("//a[text() ='Tasks']")).shouldBe(Condition.visible);
-        $(By.xpath("//a[text() ='Config']")).shouldBe(Condition.visible);
-        $(By.xpath("//a[text() ='Overview']")).shouldBe(Condition.visible);
+    @Step()
+    public ConnectorsView clickDeleteButton() {
+        clickByJavaScript(deleteBtn);
+        return this;
+    }
+
+    @Step()
+    public ConnectorsView clickConfirmButton() {
+        confirmBtnMdl.shouldBe(Condition.enabled).click();
+        confirmBtnMdl.shouldBe(Condition.disappear);
+        return this;
+    }
+
+    @Step()
+    public ConnectorsView deleteConnector() {
+        openDotMenu();
+        clickDeleteButton();
+        clickConfirmButton();
         return this;
     }
 }

kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/pages/schema/SchemaCreateView.java

@@ -7,7 +7,7 @@ import org.openqa.selenium.By;
 
 import static com.codeborne.selenide.Selenide.$;
 import static com.codeborne.selenide.Selenide.$x;
-import static com.provectus.kafka.ui.utilities.WebUtils.javaExecutorClick;
+import static com.provectus.kafka.ui.utilities.WebUtils.clickByJavaScript;
 
 public class SchemaCreateView {
 
@@ -22,7 +22,7 @@ public class SchemaCreateView {
     }
     @Step
     public SchemaView clickSubmit() {
-        javaExecutorClick(submitSchemaButton);
+        clickByJavaScript(submitSchemaButton);
         return new SchemaView();
     }
     @Step

kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/pages/schema/SchemaEditView.java

@@ -11,7 +11,7 @@ import org.openqa.selenium.Keys;
 
 import static com.codeborne.selenide.Selenide.$;
 import static com.codeborne.selenide.Selenide.$x;
-import static com.provectus.kafka.ui.utilities.WebUtils.javaExecutorClick;
+import static com.provectus.kafka.ui.utilities.WebUtils.clickByJavaScript;
 
 public class SchemaEditView {
 
@@ -32,7 +32,7 @@ public class SchemaEditView {
     }
     @Step
     public SchemaView clickSubmit() {
-        javaExecutorClick($(By.xpath("//button[@type='submit']")));
+        clickByJavaScript($(By.xpath("//button[@type='submit']")));
         return new SchemaView();
     }
 

kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/pages/schema/SchemaRegistryList.java

@@ -7,7 +7,7 @@ import org.openqa.selenium.By;
 
 import static com.codeborne.selenide.Selenide.*;
 import static com.provectus.kafka.ui.utilities.WebUtils.isVisible;
-import static com.provectus.kafka.ui.utilities.WebUtils.javaExecutorClick;
+import static com.provectus.kafka.ui.utilities.WebUtils.clickByJavaScript;
 
 public class SchemaRegistryList {
 
@@ -15,7 +15,7 @@ public class SchemaRegistryList {
 
     @Step
     public SchemaCreateView clickCreateSchema() {
-        javaExecutorClick(schemaButton);
+        clickByJavaScript(schemaButton);
         return new SchemaCreateView();
     }
 

kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/pages/schema/SchemaView.java

@@ -6,7 +6,7 @@ import io.qameta.allure.Step;
 import org.openqa.selenium.By;
 
 import static com.codeborne.selenide.Selenide.*;
-import static com.provectus.kafka.ui.utilities.WebUtils.javaExecutorClick;
+import static com.provectus.kafka.ui.utilities.WebUtils.clickByJavaScript;
 
 public class SchemaView {
 
@@ -30,7 +30,7 @@ public class SchemaView {
     }
     @Step
     public SchemaRegistryList removeSchema() {
-        javaExecutorClick(dotMenuBtn);
+        clickByJavaScript(dotMenuBtn);
         $(By.xpath("//*[contains(text(),'Remove')]")).click();
         SelenideElement confirmButton = $x("//div[@role=\"dialog\"]//button[text()='Confirm']");
         confirmButton.shouldBe(Condition.enabled).click();

kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/pages/topic/TopicCreateEditSettingsView.java

@@ -8,7 +8,7 @@ import io.qameta.allure.Step;
 import org.openqa.selenium.By;
 
 import static com.codeborne.selenide.Selenide.*;
-import static com.provectus.kafka.ui.utilities.WebUtils.javaExecutorClick;
+import static com.provectus.kafka.ui.utilities.WebUtils.clickByJavaScript;
 import static org.assertj.core.api.Assertions.assertThat;
 
 public class TopicCreateEditSettingsView {
@@ -83,7 +83,7 @@ public class TopicCreateEditSettingsView {
     }
     @Step
     public TopicView sendData() {
-        javaExecutorClick($x("//button[@type='submit']"));
+        clickByJavaScript($x("//button[@type='submit']"));
         return new TopicView();
     }
     @Step

kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/pages/topic/TopicView.java

@@ -10,7 +10,7 @@ import lombok.experimental.ExtensionMethod;
 import org.openqa.selenium.By;
 
 import static com.codeborne.selenide.Selenide.*;
-import static com.provectus.kafka.ui.utilities.WebUtils.javaExecutorClick;
+import static com.provectus.kafka.ui.utilities.WebUtils.clickByJavaScript;
 
 @ExtensionMethod({WaitUtils.class})
 public class TopicView {
@@ -32,7 +32,7 @@ public class TopicView {
 
     @Step
     public TopicCreateEditSettingsView openEditSettings() {
-        javaExecutorClick(dotMenuBtn);
+        clickByJavaScript(dotMenuBtn);
         $x("//li[@role][text()='Edit settings']").click();
         return new TopicCreateEditSettingsView();
     }
@@ -45,7 +45,7 @@ public class TopicView {
 
     @Step
     public TopicsList deleteTopic() {
-        javaExecutorClick(dotMenuBtn);
+        clickByJavaScript(dotMenuBtn);
         $x("//ul[@role='menu']//div[text()='Remove Topic']").click();
         SelenideElement confirmButton = $x("//div[@role=\"dialog\"]//button[text()='Confirm']");
         confirmButton.shouldBe(Condition.enabled).click();
@@ -55,7 +55,7 @@ public class TopicView {
 
     @Step
     public ProduceMessagePanel clickOnButton(String buttonName) {
-        javaExecutorClick($(By.xpath(String.format("//div//button[text()='%s']", buttonName))));
+        clickByJavaScript($(By.xpath(String.format("//div//button[text()='%s']", buttonName))));
         return new ProduceMessagePanel();
     }
 

kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/pages/topic/TopicsList.java

@@ -11,7 +11,7 @@ import org.openqa.selenium.By;
 
 import static com.codeborne.selenide.Selenide.*;
 import static com.provectus.kafka.ui.utilities.WebUtils.isVisible;
-import static com.provectus.kafka.ui.utilities.WebUtils.javaExecutorClick;
+import static com.provectus.kafka.ui.utilities.WebUtils.clickByJavaScript;
 
 @ExtensionMethod(WaitUtils.class)
 public class TopicsList {
@@ -33,7 +33,7 @@ public class TopicsList {
 
     @Step
     public TopicCreateEditSettingsView pressCreateNewTopic() {
-        javaExecutorClick($x("//button[normalize-space(text()) ='Add a Topic']"));
+        clickByJavaScript($x("//button[normalize-space(text()) ='Add a Topic']"));
         return new TopicCreateEditSettingsView();
     }
 

kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/utilities/WebUtils.java

@@ -1,15 +1,18 @@
 package com.provectus.kafka.ui.utilities;
 
 import com.codeborne.selenide.Condition;
-import com.codeborne.selenide.Selenide;
 import com.codeborne.selenide.SelenideElement;
 import lombok.extern.slf4j.Slf4j;
 
+import static com.codeborne.selenide.Selenide.executeJavaScript;
+
 @Slf4j
 public class WebUtils {
 
-    public static void javaExecutorClick(SelenideElement element){
-        Selenide.executeJavaScript("arguments[0].click();", element);
+    public static void clickByJavaScript(SelenideElement element) {
+        element.shouldBe(Condition.enabled);
+        String script = "arguments[0].click();";
+        executeJavaScript(script, element);
     }
 
     public static boolean isVisible(SelenideElement element) {

kafka-ui-e2e-checks/src/test/java/com/provectus/kafka/ui/tests/ConnectorsTests.java

@@ -96,9 +96,13 @@ public class ConnectorsTests extends BaseTest {
         connectorsList.goTo(CLUSTER_NAME)
                 .waitUntilScreenReady()
                 .openConnector(CONNECTOR_FOR_DELETE.getName());
-        connectorsView.clickDeleteButton();
+        connectorsView
+                .waitUntilScreenReady()
+                .openDotMenu()
+                .clickDeleteButton()
+                .clickConfirmButton();
         connectorsList.goTo(CLUSTER_NAME);
-        Assertions.assertFalse(connectorsList.isConnectorVisible(CONNECTOR_FOR_DELETE.getName()),"isConnectorVisible()");
+        Assertions.assertFalse(connectorsList.isConnectorVisible(CONNECTOR_FOR_DELETE.getName()), "isConnectorVisible()");
         CONNECTOR_LIST.remove(CONNECTOR_FOR_DELETE);
     }
 

kafka-ui-react-app/src/components/Connect/Details/Actions/Actions.tsx

@@ -13,8 +13,8 @@ import {
   clusterConnectorsPath,
   RouterParamsClusterConnectConnector,
 } from 'lib/paths';
-import { Button } from 'components/common/Button/Button';
 import { useConfirm } from 'lib/hooks/useConfirm';
+import { Dropdown, DropdownItem } from 'components/common/Dropdown';
 
 const ConnectorActionsWrapperStyled = styled.div`
   display: flex;
@@ -63,66 +63,34 @@ const Actions: React.FC = () => {
 
   return (
     <ConnectorActionsWrapperStyled>
-      {connector?.status.state === ConnectorState.RUNNING && (
-        <Button
-          buttonSize="M"
-          buttonType="primary"
-          type="button"
-          onClick={pauseConnectorHandler}
+      <Dropdown>
+        {connector?.status.state === ConnectorState.RUNNING && (
+          <DropdownItem onClick={pauseConnectorHandler} disabled={isMutating}>
+            Pause
+          </DropdownItem>
+        )}
+        {connector?.status.state === ConnectorState.PAUSED && (
+          <DropdownItem onClick={resumeConnectorHandler} disabled={isMutating}>
+            Resume
+          </DropdownItem>
+        )}
+        <DropdownItem onClick={restartConnectorHandler} disabled={isMutating}>
+          Restart Connector
+        </DropdownItem>
+        <DropdownItem onClick={restartAllTasksHandler} disabled={isMutating}>
+          Restart All Tasks
+        </DropdownItem>
+        <DropdownItem onClick={restartFailedTasksHandler} disabled={isMutating}>
+          Restart Failed Tasks
+        </DropdownItem>
+        <DropdownItem
+          onClick={deleteConnectorHandler}
           disabled={isMutating}
+          danger
         >
-          Pause
-        </Button>
-      )}
-
-      {connector?.status.state === ConnectorState.PAUSED && (
-        <Button
-          buttonSize="M"
-          buttonType="primary"
-          type="button"
-          onClick={resumeConnectorHandler}
-          disabled={isMutating}
-        >
-          Resume
-        </Button>
-      )}
-
-      <Button
-        buttonSize="M"
-        buttonType="primary"
-        type="button"
-        onClick={restartConnectorHandler}
-        disabled={isMutating}
-      >
-        Restart Connector
-      </Button>
-      <Button
-        buttonSize="M"
-        buttonType="primary"
-        type="button"
-        onClick={restartAllTasksHandler}
-        disabled={isMutating}
-      >
-        Restart All Tasks
-      </Button>
-      <Button
-        buttonSize="M"
-        buttonType="primary"
-        type="button"
-        onClick={restartFailedTasksHandler}
-        disabled={isMutating}
-      >
-        Restart Failed Tasks
-      </Button>
-      <Button
-        buttonSize="M"
-        buttonType="secondary"
-        type="button"
-        onClick={deleteConnectorHandler}
-        disabled={isMutating}
-      >
-        Delete
-      </Button>
+          Delete
+        </DropdownItem>
+      </Dropdown>
     </ConnectorActionsWrapperStyled>
   );
 };

kafka-ui-react-app/src/components/Connect/Details/Actions/__tests__/Actions.spec.tsx

@@ -33,7 +33,11 @@ const expectActionButtonsExists = () => {
   expect(screen.getByText('Restart Failed Tasks')).toBeInTheDocument();
   expect(screen.getByText('Delete')).toBeInTheDocument();
 };
-
+const afterClickDropDownButton = () => {
+  const dropDownButton = screen.getAllByRole('button');
+  expect(dropDownButton.length).toEqual(1);
+  userEvent.click(dropDownButton[0]);
+};
 describe('Actions', () => {
   afterEach(() => {
     mockHistoryPush.mockClear();
@@ -62,7 +66,8 @@ describe('Actions', () => {
         data: set({ ...connector }, 'status.state', ConnectorState.PAUSED),
       }));
       renderComponent();
-      expect(screen.getAllByRole('button').length).toEqual(5);
+      afterClickDropDownButton();
+      expect(screen.getAllByRole('menuitem').length).toEqual(5);
       expect(screen.getByText('Resume')).toBeInTheDocument();
       expect(screen.queryByText('Pause')).not.toBeInTheDocument();
       expectActionButtonsExists();
@@ -73,7 +78,8 @@ describe('Actions', () => {
         data: set({ ...connector }, 'status.state', ConnectorState.FAILED),
       }));
       renderComponent();
-      expect(screen.getAllByRole('button').length).toEqual(4);
+      afterClickDropDownButton();
+      expect(screen.getAllByRole('menuitem').length).toEqual(4);
       expect(screen.queryByText('Resume')).not.toBeInTheDocument();
       expect(screen.queryByText('Pause')).not.toBeInTheDocument();
       expectActionButtonsExists();
@@ -84,7 +90,8 @@ describe('Actions', () => {
         data: set({ ...connector }, 'status.state', ConnectorState.UNASSIGNED),
       }));
       renderComponent();
-      expect(screen.getAllByRole('button').length).toEqual(4);
+      afterClickDropDownButton();
+      expect(screen.getAllByRole('menuitem').length).toEqual(4);
       expect(screen.queryByText('Resume')).not.toBeInTheDocument();
       expect(screen.queryByText('Pause')).not.toBeInTheDocument();
       expectActionButtonsExists();
@@ -95,7 +102,8 @@ describe('Actions', () => {
         data: set({ ...connector }, 'status.state', ConnectorState.RUNNING),
       }));
       renderComponent();
-      expect(screen.getAllByRole('button').length).toEqual(5);
+      afterClickDropDownButton();
+      expect(screen.getAllByRole('menuitem').length).toEqual(5);
       expect(screen.queryByText('Resume')).not.toBeInTheDocument();
       expect(screen.getByText('Pause')).toBeInTheDocument();
       expectActionButtonsExists();
@@ -110,8 +118,9 @@ describe('Actions', () => {
 
       it('opens confirmation modal when delete button clicked', async () => {
         renderComponent();
+        afterClickDropDownButton();
         await waitFor(() =>
-          userEvent.click(screen.getByRole('button', { name: 'Delete' }))
+          userEvent.click(screen.getByRole('menuitem', { name: 'Delete' }))
         );
         expect(screen.getByRole('dialog')).toBeInTheDocument();
       });
@@ -122,8 +131,9 @@ describe('Actions', () => {
           mutateAsync: restartConnector,
         }));
         renderComponent();
+        afterClickDropDownButton();
         userEvent.click(
-          screen.getByRole('button', { name: 'Restart Connector' })
+          screen.getByRole('menuitem', { name: 'Restart Connector' })
         );
         expect(restartConnector).toHaveBeenCalledWith(ConnectorAction.RESTART);
       });
@@ -134,8 +144,9 @@ describe('Actions', () => {
           mutateAsync: restartAllTasks,
         }));
         renderComponent();
+        afterClickDropDownButton();
         userEvent.click(
-          screen.getByRole('button', { name: 'Restart All Tasks' })
+          screen.getByRole('menuitem', { name: 'Restart All Tasks' })
         );
         expect(restartAllTasks).toHaveBeenCalledWith(
           ConnectorAction.RESTART_ALL_TASKS
@@ -148,8 +159,9 @@ describe('Actions', () => {
           mutateAsync: restartFailedTasks,
         }));
         renderComponent();
+        afterClickDropDownButton();
         userEvent.click(
-          screen.getByRole('button', { name: 'Restart Failed Tasks' })
+          screen.getByRole('menuitem', { name: 'Restart Failed Tasks' })
         );
         expect(restartFailedTasks).toHaveBeenCalledWith(
           ConnectorAction.RESTART_FAILED_TASKS
@@ -162,7 +174,8 @@ describe('Actions', () => {
           mutateAsync: pauseConnector,
         }));
         renderComponent();
-        userEvent.click(screen.getByRole('button', { name: 'Pause' }));
+        afterClickDropDownButton();
+        userEvent.click(screen.getByRole('menuitem', { name: 'Pause' }));
         expect(pauseConnector).toHaveBeenCalledWith(ConnectorAction.PAUSE);
       });
 
@@ -175,7 +188,8 @@ describe('Actions', () => {
           mutateAsync: resumeConnector,
         }));
         renderComponent();
-        userEvent.click(screen.getByRole('button', { name: 'Resume' }));
+        afterClickDropDownButton();
+        userEvent.click(screen.getByRole('menuitem', { name: 'Resume' }));
         expect(resumeConnector).toHaveBeenCalledWith(ConnectorAction.RESUME);
       });
     });