feat: use createRoot for tests, updates texts

client/src/features/dashboard/components/ProjectsDashboard.tsx

@@ -44,7 +44,7 @@ function ProjectAlert({ total }: ProjectAlertProps) {
   return total === 0 ?
     <InfoAlert timeout={0}>
       <div data-cy="project-alert" className="mb-0" style={{ textAlign: "justify" }}>
-        <h3><strong>You don’t have any project yet.</strong></h3>
+        <h3><strong>You do not have any projects yet.</strong></h3>
         <p>If you are here for your first time, we recommend you go to through our{" "}
           <ExternalLink role="text" title="tutorial" className="fw-bold"
             url={Docs.READ_THE_DOCS_TUTORIALS_STARTING} />.{" "}
@@ -156,7 +156,7 @@ function ProjectsDashboard( { userName }: ProjectsDashboardProps ) {
   else {
     projectsToShow = projects?.length > 0 ?
       <ProjectListRows projects={projects} gridDisplay={false} />
-      : <p className="rk-dashboard-section-header">You have no current project yet</p>;
+      : <p className="rk-dashboard-section-header">You do not have any recently-visited projects</p>;
   }
   const otherProjectsBtn = totalUserProjects === undefined ? null :
     <OtherProjectsButton totalOwnProjects={totalUserProjects} />;

client/src/landing/Landing.test.js

@@ -24,7 +24,8 @@
  */
 
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
+
 import { act } from "react-dom/test-utils";
 import { MemoryRouter } from "react-router-dom";
 
@@ -42,6 +43,7 @@ describe("rendering", () => {
 
   it("renders home without crashing for anonymous user", async () => {
     const div = document.createElement("div");
+    const root = createRoot(div);
     const params = {
       "UI_SHORT_SHA": "development"
     };
@@ -54,7 +56,7 @@ describe("rendering", () => {
       }
     };
     await act(async () => {
-      ReactDOM.render(
+      root.render(
         <Provider store={model.reduxStore}>
           <MemoryRouter>
             <AnonymousHome client={client}
@@ -65,19 +67,20 @@ describe("rendering", () => {
               params={params}
             />
           </MemoryRouter>
-        </Provider>, div);
+        </Provider>);
     });
   });
 
   it("renders home without crashing for logged user", async () => {
     const div = document.createElement("div");
+    const root = createRoot(div);
     await act(async () => {
-      ReactDOM.render(
+      root.render(
         <Provider store={model.reduxStore}>
           <MemoryRouter>
             <Dashboard />
           </MemoryRouter>
-        </Provider>, div);
+        </Provider>);
     });
   });
 });

client/src/utils/customHooks/useGetRecentlyVisitedProjects.ts

@@ -24,8 +24,8 @@ import { useGetRecentlyVisitedProjectsQuery } from "../../features/projects/Proj
  *  useGetRecentlyVisitedProjects.ts
  *  hook to fetch recent visited projects
  */
-function useGetRecentlyVisitedProjects(cantProjects: number) {
-  const { data, isFetching, refetch } = useGetRecentlyVisitedProjectsQuery(cantProjects);
+function useGetRecentlyVisitedProjects(projectsCount: number) {
+  const { data, isFetching, refetch } = useGetRecentlyVisitedProjectsQuery(projectsCount);
   return { projects: data, isFetchingProjects: isFetching, refetchProjects: refetch };
 }
 

tests/cypress/e2e/local/dashboard.spec.ts

@@ -43,13 +43,13 @@ describe("dashboard", () => {
     cy.wait("@getNoActiveProjects");
 
     cy.get_cy("dashboard-title").should("have.text", "Renku Dashboard - E2E User");
-    cy.get_cy("project-alert").should("contain.text", "You don’t have any project yet.");
-    cy.get_cy("projects-container").should("contain.text", "You have no current project yet");
+    cy.get_cy("project-alert").should("contain.text", "You do not have any projects yet");
+    cy.get_cy("projects-container").should("contain.text", "You do not have any recently-visited projects");
     cy.get_cy("explore-other-projects-btn").should("be.visible");
     cy.get_cy("inactive-kg-project-alert").should("exist");
   });
 
-  it("user does not has own project but has visited projects", () => {
+  it("user does not have own project but has visited projects", () => {
     fixtures.projects()
       .entitySearch("getEntities", "kgSearch/emptySearch.json", "0")
       .getLastVisitedProjects();
@@ -73,12 +73,12 @@ describe("dashboard", () => {
         const projectData = firstProject.response?.body;
         cy.get_cy("list-card-title").first().should("have.text", projectData.name);
         cy.get_cy("explore-other-projects-btn").should("be.visible");
-        cy.get_cy("project-alert").should("contain.text", "You don’t have any project yet.");
+        cy.get_cy("project-alert").should("contain.text", "You do not have any projects yet");
         cy.get_cy("inactive-kg-project-alert").should("not.exist");
       });
   });
 
-  it("user does has own projects and recently visited projects", () => {
+  it("user has own projects and recently visited projects", () => {
     fixtures.projects()
       .entitySearch("getEntities", "kgSearch/search.json", "7")
       .getLastVisitedProjects("getLastVisitedProjects", "projects/last-visited-projects-5.json");

tests/cypress/support/authentication/gui_commands.ts

@@ -17,6 +17,7 @@
  */
 
 import { User } from "./user.interfaces";
+import "../../support/utils";
 
 Cypress.Commands.add("gui_kc_login", (user: User, startFromHome = false) => {
   if (startFromHome) {
@@ -70,7 +71,7 @@ Cypress.Commands.add("gui_kc_register", (user: User) => {
 Cypress.Commands.add("gui_is_welcome_page_logged_user", (user: User) => {
   cy.url().then( () => {
     cy.url().should("be.equal", Cypress.config("baseUrl"));
-    cy.get("[data-cy='dashboard-title']").contains(`Renku Dashboard - ${user.firstname} ${user.lastname}`);
+    cy.get_cy("dashboard-title").contains(`Renku Dashboard - ${user.firstname} ${user.lastname}`);
   });
 });