chore(userAccounts): duplicate username scenario

app/web/templates/users.html

@@ -1,5 +1,5 @@
 <h3>Users</h3>
-<form action="/users" method="post" enctype="multipart/form-data">
+<form action="/users" method="post" enctype="multipart/form-data" data-test="create_user_form">
     <h4 class="form_header">Create New User</h4>
     <div>
         <label for="username" hidden>Username</label>

test/cypress/features/userAccounts.feature

@@ -13,15 +13,6 @@ Scenario: Create a new user with a valid username and password
   Then I should see a user created success message
   And I should see the user in the list
 
-@pending
-Scenario: Newly created user can log in
-  Given I have created a new user "testuser" with the password "password12345678"
-
-  When I log out and enter the username "testuser" and password "password123" in the login form
-
-  Then I should successfully log in
-
-@pending
 Scenario: Admin cannot create a user with a duplicate username
   Given I am on the user list page
   And a user with the name "testuser" already exists
@@ -30,6 +21,14 @@ Scenario: Admin cannot create a user with a duplicate username
 
   Then I should see a duplicate username failure message
 
+@pending
+Scenario: Newly created user can log in
+  Given I have created a new user "testuser" with the password "password12345678"
+
+  When I log out and enter the username "testuser" and password "password123" in the login form
+
+  Then I should successfully log in
+
 @pending
 Scenario Outline: Admin cannot create a user with an invalid password
   Given I am on the user list page

test/cypress/steps/shared/users.ts

@@ -1,21 +1,17 @@
 export const getUsername = () => {
-    return cy.get("[data-test=username]");
+    return cy.get("[data-test=create_user_form] [data-test=username]");
 };
 
 export const getPassword = () => {
-    return cy.get("[data-test=password]");
-};
-
-export const shouldSeeCreatedSuccessMessage = (user: string) => {
-    getMessage().should("contain", `Created new user "${user}"`);
+    return cy.get("[data-test=create_user_form] [data-test=password]");
 };
 
 export const getMessage = () => {
     return cy.get("[data-test=message]");
 };
 
 export const getCreateUserButton = () => {
-    return cy.get("[data-test=create_user]");
+    return cy.get("[data-test=create_user_form] [data-test=create_user]");
 };
 
 export const userRowsSelector = "[data-test=user_table] tbody tr";

test/cypress/steps/userAccounts.ts

@@ -3,9 +3,8 @@ import {login} from "./shared/login";
 import {
     getUsername,
     getPassword,
-    shouldSeeCreatedSuccessMessage,
     getCreateUserButton,
-    getUsernames
+    getUsernames, getMessage
 } from "./shared/users";
 
 const state: {
@@ -33,17 +32,30 @@ Given("I am on the user list page", () => {
    cy.visit("/users");
 });
 
-When("I create a new user with the username {string} and password {string}", (user: string, pass: string) => {
+Given("a user with the name {string} already exists", (user: string) => {
+    const validPassword = "password12345678";
+    createUser(user, validPassword)
+});
+
+const createUser = (user: string, pass: string) => {
     getUsername().type(user);
     getPassword().type(pass);
-    state.user = user;
     getCreateUserButton().click();
+}
+
+When("I create a new user with the username {string} and password {string}", (user: string, pass: string) => {
+    createUser(user, pass);
+    state.user = user;
 });
 
 Then("I should see a user created success message", () => {
-    shouldSeeCreatedSuccessMessage(state.user);
+    getMessage().should("contain", `Created new user "${state.user}"`);
 });
 
 Then("I should see the user in the list", () => {
     getUsernames().first().should('contain.text', state.user);
+});
+
+Then("I should see a duplicate username failure message", () => {
+    getMessage().should("contain", `Username "${state.user}" already exists.`);
 });