Sort ChooseProject list alphabetically (#2617)

src/components/ProjectScreen/ChooseProject.tsx

@@ -27,7 +27,10 @@ export default function ChooseProject(): ReactElement {
   useEffect(() => {
     const userId = getUserId();
     if (userId) {
-      getAllActiveProjectsByUser(userId).then(setProjectList);
+      getAllActiveProjectsByUser(userId).then((projects) => {
+        projects.sort((a: Project, b: Project) => a.name.localeCompare(b.name));
+        setProjectList(projects);
+      });
     }
   }, []);
 

src/components/ProjectScreen/tests/ChooseProject.test.tsx

@@ -6,6 +6,7 @@ import "tests/reactI18nextMock";
 import { Project } from "api/models";
 import ChooseProject from "components/ProjectScreen/ChooseProject";
 import { newProject } from "types/project";
+import { randomIntString } from "utilities/utilities";
 
 jest.mock("backend", () => ({
   getAllActiveProjectsByUser: () => mockGetProjects(),
@@ -19,14 +20,32 @@ jest.mock("react-router-dom", () => ({
 }));
 
 const mockGetProjects = jest.fn();
-const mockProj = (id: string): Project => ({ ...newProject(id), id });
+const mockProj = (name: string): Project => ({
+  ...newProject(name),
+  id: randomIntString(),
+});
 
 let testRenderer: renderer.ReactTestRenderer;
 
-it("renders with 2 projects", async () => {
-  mockGetProjects.mockResolvedValue([mockProj("0"), mockProj("1")]);
+const hasText = (item: renderer.ReactTestInstance, text: string): boolean => {
+  const found = item.findAll(
+    (node) => node.children.length === 1 && node.children[0] === text
+  );
+  return found.length !== 0;
+};
+
+it("renders with projects in alphabetical order", async () => {
+  const unordered = ["In the middle", "should be last", "alphabetically first"];
+  mockGetProjects.mockResolvedValue(unordered.map((name) => mockProj(name)));
   await renderer.act(async () => {
     testRenderer = renderer.create(<ChooseProject />);
   });
-  expect(testRenderer.root.findAllByType(ListItemButton)).toHaveLength(2);
+  const items = testRenderer.root.findAllByType(ListItemButton);
+  expect(items).toHaveLength(unordered.length);
+  expect(hasText(items[0], unordered[0])).toBeFalsy;
+  expect(hasText(items[1], unordered[1])).toBeFalsy;
+  expect(hasText(items[2], unordered[2])).toBeFalsy;
+  expect(hasText(items[0], unordered[2])).toBeTruthy;
+  expect(hasText(items[1], unordered[0])).toBeTruthy;
+  expect(hasText(items[2], unordered[1])).toBeTruthy;
 });