refactor: cypress e2e/devices tests to use Cucumber MAASENG-5893 (#5934)

Author: rumanowskak

cypress/e2e/with-users/features/devices/devicesList.feature

@@ -0,0 +1,14 @@
+Feature: Device listing
+
+Background
+    Given the user is logged in
+    And the user is on the devices page
+
+Scenario: The correct heading is rendered
+    Then the section header title should be "Devices"
+
+ Scenario: The user can add a tag to a device
+    Given the user adds a new device
+    When the user opens the device configuration
+    And the user adds a tag to the device
+    Then the tag should be visible in the device summary

cypress/support/step_definitions/devices/devicesList.steps.ts

@@ -0,0 +1,51 @@
+import { Given, Then, When } from "@badeball/cypress-cucumber-preprocessor";
+import { generateMAASURL, generateMac } from "../../../e2e/utils";
+
+Given("the user is on the devices page", () => {
+  cy.visit(generateMAASURL("/devices"));
+});
+
+Given("the user adds a new device", () => {
+  cy.findByRole("button", { name: /Add device/ }).click();
+  const mac = generateMac();
+  cy.findByLabelText(/Device name/).type("cypress-device");
+  cy.get("input[placeholder='00:00:00:00:00:00']").type(mac);
+  cy.findByRole("button", { name: /Save device/ }).click();
+});
+
+When("the user opens the device configuration", () => {
+  cy.findByRole("link", { name: /cypress-device/ }).click();
+
+  cy.findByRole("link", {
+    name: /Configuration/,
+  }).click();
+});
+
+When("the user adds a tag to the device", () => {
+  cy.findByRole("button", {
+    name: /Edit/,
+  }).click();
+  cy.get("input[placeholder='Create or remove tags']").type("device-tag");
+
+  cy.findByRole("button", {
+    name: /Create tag "device-tag"/,
+  }).click();
+
+  cy.findByRole("button", {
+    name: /Create and add to tag changes/,
+  }).click();
+
+  cy.findByRole("button", { name: /Save changes/ }).click();
+});
+
+Then("the section header title should be {string}", (expectedTitle: string) => {
+  cy.get("[data-testid='section-header-title']").should(
+    "contain",
+    expectedTitle
+  );
+});
+
+Then("the tag should be visible in the device summary", () => {
+  cy.findByRole("link", { name: /Summary/ }).click();
+  cy.findByText(/device-tag/).should("exist");
+});