test: update e2e tests to assert query param and buttons

package.json

@@ -48,7 +48,7 @@
     "recharts": "^2.2.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.31.2",
+    "@playwright/test": "^1.32.1",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
     "@trivago/prettier-plugin-sort-imports": "^4.0.0",

src/components/SearchFilterForm/CustomSortControls/CustomSortControls.tsx

@@ -19,6 +19,7 @@ const Arrow = ({ direction }: { direction?: SortDirection }) =>
       className={`ml-2 w-3 fill-current ${
         direction === "ASC" ? "rotate-180" : ""
       }`}
+      title={direction === "ASC" ? "Ascending" : "Descending"}
     />
   ) : (
     <></>
@@ -37,7 +38,7 @@ export const CustomSortControls = () => {
         <li className="pl-2">
           <Button
             variant="outlined"
-            startIcon={<Plus className="w-3 fill-current" />}
+            startIcon={<Plus className="w-3 fill-current" title="Add" />}
             aria-controls={open ? id : undefined}
             aria-expanded={open ? "true" : undefined}
             aria-haspopup="true"

tests/filter-controls-query-params.spec.ts

@@ -43,10 +43,12 @@ test.describe("Filter Controls and Query Parameters", () => {
       ).not.toBeChecked();
     }
 
+    expect(await page.getByRole("button", { name: "Add Sort" }));
+
     expect(new URL(page.url()).search).toBe("");
   });
 
-  test("WHEN query parameters has values, THEN set the filter controls to their specified values", async ({
+  test("WHEN query parameters has filter values, THEN set the filter controls to their specified values", async ({
     page,
   }) => {
     const queryParams = [
@@ -226,6 +228,7 @@ test.describe("Filter Controls and Query Parameters", () => {
     }
   });
 
+  /** Test Average vs Users Ratings */
   [
     {
       queryParam: "&ratings=1.1-9.9",
@@ -286,7 +289,7 @@ test.describe("Filter Controls and Query Parameters", () => {
       })
   );
 
-  test("WHEN user searches in search form, THEN url reflects filter params", async ({
+  test("WHEN user manipulates controls in search form, THEN url reflects filter params", async ({
     page,
   }) => {
     await page.goto("./");
@@ -339,4 +342,40 @@ test.describe("Filter Controls and Query Parameters", () => {
 
     await expect(new URL(page.url()).search).toBe(expectedUrl);
   });
+
+  test("WHEN navigating with all of the sort values in the query parameters, THEN all of the buttons are visible", async ({
+    page,
+  }) => {
+    const sortConfigs = [
+      { sortBy: "Name", qpKey: "name" },
+      { sortBy: "Player Count Recommendation", qpKey: "rec" },
+      { sortBy: "Average Playtime", qpKey: "time" },
+      { sortBy: "Complexity", qpKey: "weight" },
+      { sortBy: "Ratings", qpKey: "ratings" },
+    ];
+
+    const ascendingQueryParameters = sortConfigs
+      .map(({ qpKey }) => `${qpKey}-asc`)
+      .join("_");
+
+    await page.goto(`/?username=davidhorm&sort=${ascendingQueryParameters}`);
+
+    for await (const name of sortConfigs.map(
+      ({ sortBy }) => `Ascending ${sortBy}`
+    )) {
+      expect(await page.getByRole("button", { name })).toBeDefined();
+    }
+
+    const descendingQueryParameters = sortConfigs
+      .map(({ qpKey }) => `${qpKey}-desc`)
+      .join("_");
+
+    await page.goto(`/?username=davidhorm&sort=${descendingQueryParameters}`);
+
+    for await (const name of sortConfigs.map(
+      ({ sortBy }) => `Descending ${sortBy}`
+    )) {
+      expect(await page.getByRole("button", { name })).toBeDefined();
+    }
+  });
 });