construct-hub-webapp 0.1.1119 → 0.1.1121

package/README.md

@@ -7,7 +7,7 @@ This project maintains the React web app for [Construct Hub].
 
 ### :clipboard: Prerequisites:
 
-- Node v12 or later
+- Node v18.20 or later
 - yarn v1
 
 ### :computer: Running the website

package/cypress/e2e/faq.cy.ts

@@ -0,0 +1,9 @@
+import { checkHeaderAndFooter } from "../support/helpers";
+
+describe("FAQ", () => {
+  beforeEach(() => {
+    cy.visit("/faq");
+  });
+
+  checkHeaderAndFooter();
+});

package/cypress/e2e/footer.cy.ts

@@ -0,0 +1,28 @@
+import testIds from "components/Footer/testIds";
+
+const footerTests = (viewport?: Cypress.ViewportPreset) => {
+  before(() => {
+    cy.visit("/terms");
+  });
+
+  beforeEach(() => {
+    if (viewport) {
+      cy.viewport(viewport);
+    }
+    cy.checkFooterVisibility();
+  });
+
+  it("has expected elements", () => {
+    Object.values(testIds).forEach((testId) => {
+      cy.getByDataTest(testId).should("be.visible");
+    });
+  });
+};
+
+describe("Footer", () => {
+  describe("Desktop", footerTests);
+
+  describe("Tablet", () => footerTests("ipad-2"));
+
+  describe("Mobile", () => footerTests("iphone-xr"));
+});

package/cypress/e2e/header.cy.ts

@@ -0,0 +1,125 @@
+import headerTestIds from "components/Header/testIds";
+import searchModalTestIds from "components/SearchModal/testIds";
+import searchBar from "components/SearchBar/testIds";
+
+const checkBaseElements = () => {
+  cy.getByDataTest(headerTestIds.title).should("be.visible");
+  cy.getByDataTest(headerTestIds.gettingStartedTrigger).should("be.visible");
+  cy.getByDataTest(headerTestIds.documentationTrigger).should("be.visible");
+};
+
+const checkMenuInteractions = () => {
+  cy.getByDataTest(headerTestIds.gettingStartedTrigger)
+    .should("be.visible")
+    .click();
+
+  cy.getByDataTest(headerTestIds.gettingStartedMenu).should("be.visible");
+  cy.getByDataTest(headerTestIds.gettingStartedTrigger)
+    .should("be.visible")
+    .click(); // To close
+
+  cy.getByDataTest(headerTestIds.documentationTrigger).should("be.visible").click();
+  cy.getByDataTest(headerTestIds.documentationMenu).should("be.visible");
+  cy.getByDataTest(headerTestIds.documentationTrigger).should("be.visible").click(); // To close
+};
+
+const checkMobileBaseElements = () => {
+  cy.getByDataTest(headerTestIds.title).should("be.visible");
+  cy.getByDataTest(headerTestIds.navOpen).should("be.visible");
+};
+
+describe("Header", () => {
+  describe("Desktop - Without Search", () => {
+    beforeEach(() => {
+      cy.visit("/");
+    });
+
+    it("has title, Getting Started, and Resources", checkBaseElements);
+    it("can open GettingStarted and Resources menus", checkMenuInteractions);
+  });
+
+  describe("Desktop - With Search", () => {
+    beforeEach(() => {
+      // Visible on all routes except / & /search
+      cy.visit("/faq");
+    });
+
+    it("has title, Getting Started, Resources, and SearchBar", () => {
+      checkBaseElements();
+      cy.getByDataTest(headerTestIds.searchInput).should("be.visible");
+    });
+
+    it("has search capabilities from header", () => {
+      cy.getByDataTest(headerTestIds.searchInput).should("be.visible");
+
+      cy.getByDataTest(searchBar.input).should("be.visible").click();
+
+      cy.getByDataTest(searchBar.overlay)
+        .should("be.visible")
+        .click()
+        .should("not.be.visible");
+
+      cy.getByDataTest(searchBar.input).type("@aws-cdk");
+
+      cy.getByDataTest(searchBar.overlay).should("be.visible");
+      cy.getByDataTest(searchBar.suggestionsList).should("be.visible");
+      cy.getByDataTest(searchBar.suggestion).should("have.length", 5);
+
+      cy.get("body").type("{esc}");
+      cy.getByDataTest(searchBar.overlay).should("not.be.visible");
+      cy.getByDataTest(searchBar.suggestionsList).should("not.exist");
+
+      cy.getByDataTest(searchBar.input).type("{enter}");
+      cy.url().should("include", "/search");
+    });
+  });
+
+  describe("Mobile - Without Search", () => {
+    beforeEach(() => {
+      cy.viewport("iphone-xr");
+      cy.visit("/");
+    });
+
+    it("has title and button to open nav", checkMobileBaseElements);
+
+    it("nav has dropdowns", () => {
+      cy.getByDataTest(headerTestIds.navOpen).should("be.visible").click();
+      cy.getByDataTest(headerTestIds.mobileNav)
+        .should("be.visible")
+        .within(() => {
+          cy.getByDataTest(headerTestIds.gettingStartedMenu).should(
+            "be.visible"
+          );
+          cy.getByDataTest(headerTestIds.documentationMenu).should("be.visible");
+        });
+    });
+  });
+
+  describe("Mobile - With Search", () => {
+    beforeEach(() => {
+      cy.viewport("iphone-xr");
+      cy.visit("/faq");
+    });
+
+    it("has base elements and search icon", () => {
+      checkMobileBaseElements();
+      cy.getByDataTest(headerTestIds.searchIcon).should("be.visible");
+    });
+
+    it("opens search modal when search icon is clicked", () => {
+      cy.getByDataTest(headerTestIds.searchIcon).should("be.visible").click();
+      cy.getByDataTest(searchModalTestIds.container).should("be.visible");
+    });
+
+    it("has search functionality from search modal", () => {
+      cy.getByDataTest(headerTestIds.searchIcon).should("be.visible").click();
+
+      cy.getByDataTest(searchModalTestIds.container).within(() => {
+        cy.getByDataTest(searchBar.input)
+          .type("@aws-cdk{enter}")
+          .url()
+          .should("include", "/search");
+      });
+    });
+  });
+});

package/cypress/e2e/home.cy.ts

@@ -0,0 +1,259 @@
+import searchBar from "components/SearchBar/testIds";
+import home from "views/Home/testIds";
+import { getSearchPath } from "util/url";
+import { CDKType, CDKTYPE_RENDER_MAP } from "constants/constructs";
+import {
+  Language,
+  LANGUAGE_NAME_MAP,
+  TEMP_SUPPORTED_LANGUAGES,
+} from "constants/languages";
+import packageCard from "components/PackageCard/testIds";
+import { CatalogSearchSort } from "api/catalog-search/constants";
+
+describe("Home (Redesign / WIP)", () => {
+  describe("Hero Section", () => {
+    beforeEach(() => {
+      cy.visit("/");
+    });
+
+    it("has heading and subtitle", () => {
+      cy.getByDataTest(home.heroHeader).should("be.visible");
+      cy.getByDataTest(home.heroSubtitle).should("be.visible");
+    });
+
+    it("has search capabilities from home page", () => {
+      cy.getByDataTest(home.page).within(() => {
+        cy.getByDataTest(searchBar.input)
+          .should("be.visible")
+          .type("@aws-cdk", { force: true });
+        cy.getByDataTest(searchBar.overlay).should("be.visible");
+        cy.getByDataTest(searchBar.suggestionsList).should("be.visible");
+        cy.getByDataTest(searchBar.suggestion).should("have.length", 5);
+        cy.getByDataTest(searchBar.input)
+          .type("{enter}")
+          .url()
+          .should("include", "/search");
+      });
+    });
+  });
+
+  describe("Informational Section", () => {
+    beforeEach(() => {
+      cy.visit("/");
+    });
+
+    it("has expected sections and content", () => {
+      cy.getByDataTest(home.infoContainer)
+        .should("be.visible")
+        .within(() => {
+          cy.getByDataTest(home.infoSection)
+            .should("have.length", 3)
+            .each((el) => {
+              cy.wrap(el).within(() => {
+                cy.getByDataTest(home.infoSectionHeading).should("be.visible");
+                cy.getByDataTest(home.infoSectionDescription).should(
+                  "be.visible"
+                );
+              });
+            });
+        });
+    });
+
+    it("has cdkType icon links with search urls", () => {
+      cy.getByDataTest(home.infoSection)
+        .first()
+        .within(() => {
+          cy.getByDataTest(home.infoSectionIcon).each((el, index) => {
+            const cdkType = [CDKType.awscdk, CDKType.cdk8s, CDKType.cdktf][
+              index
+            ];
+
+            cy.wrap(el)
+              .should("have.text", CDKTYPE_RENDER_MAP[cdkType].name)
+              .should(
+                "have.attr",
+                "href",
+                getSearchPath({
+                  cdkType,
+                  sort: CatalogSearchSort.DownloadsDesc,
+                })
+              )
+              .find("img")
+              .should("have.attr", "src", CDKTYPE_RENDER_MAP[cdkType].imgsrc);
+          });
+        });
+    });
+
+    it("has language icon links with search urls", () => {
+      cy.getByDataTest(home.infoSection)
+        .eq(1)
+        .within(() => {
+          cy.getByDataTest(home.infoSectionIcon).each((el, index) => {
+            const language = Object.keys(LANGUAGE_NAME_MAP).filter((l) =>
+              TEMP_SUPPORTED_LANGUAGES.has(l as Language)
+            )[index] as Language;
+
+            cy.wrap(el)
+              .should("have.text", LANGUAGE_NAME_MAP[language])
+              .should(
+                "have.attr",
+                "href",
+                getSearchPath({
+                  languages: [language],
+                  sort: CatalogSearchSort.DownloadsDesc,
+                })
+              );
+          });
+        });
+    });
+  });
+
+  describe("Featured Section", () => {
+    it("has a header and 4 cards", () => {
+      cy.visit("/");
+      cy.getByDataTest(home.featuredContainer)
+        .should("be.visible")
+        .within(() => {
+          cy.getByDataTest(home.featuredHeader).should("be.visible");
+          cy.getByDataTest(home.featuredGrid)
+            .should("be.visible")
+            .within(() => {
+              cy.getByDataTest(packageCard.wideContainer).should(
+                "have.length",
+                4
+              );
+            });
+        });
+    });
+
+    it("shows recently updated if no content is featured", () => {
+      cy.visitWithConfig("/", {
+        featuredPackages: undefined,
+      });
+
+      cy.getByDataTest(home.featuredContainer).within(() => {
+        cy.getByDataTest(home.featuredHeader).should(
+          "have.text",
+          "Recently updated"
+        );
+      });
+    });
+
+    it("shows featured content if config provides featured content", () => {
+      const featuredPackages = {
+        sections: [
+          {
+            name: "Featured packages",
+            showPackages: [
+              {
+                name: "@aws-cdk/aws-s3",
+                comment: "One of the most popular AWS CDK libraries!",
+              },
+              {
+                name: "@aws-cdk/aws-lambda",
+              },
+              {
+                name: "@aws-cdk/aws-iam",
+                comment:
+                  "Secure your constructs with safe and manageable permission boundaries.",
+              },
+              {
+                name: "@aws-cdk/pipelines",
+                comment:
+                  "The most recently released L3 construct library from the CDK team!",
+              },
+            ],
+          },
+          {
+            name: "Recently updated",
+            showLastUpdated: 5,
+          },
+        ],
+      };
+
+      cy.visitWithConfig("/", {
+        featuredPackages,
+      });
+
+      cy.getByDataTest(home.featuredContainer).within(() => {
+        cy.getByDataTest(home.featuredHeader).should(
+          "have.text",
+          "Featured packages"
+        );
+
+        cy.getByDataTest(packageCard.title).each((title, index) => {
+          const expectedName =
+            featuredPackages.sections[0].showPackages[index].name;
+
+          cy.wrap(title).should("have.text", expectedName);
+        });
+      });
+    });
+  });
+
+  describe("CDK Type Section", () => {
+    it("has heading, description, 3 tabs, 4 cards, and a see all button", () => {
+      cy.visit("/");
+
+      cy.getByDataTest(home.cdkTypeSection).within(() => {
+        cy.getByDataTest(home.cdkTypeSectionHeading).should("be.visible");
+        cy.getByDataTest(home.cdkTypeSectionDescription).should("be.visible");
+
+        cy.getByDataTest(home.cdkTypeTab).should("have.length", 3);
+
+        cy.getByDataTest(home.packageGrid)
+          .first()
+          .within(() => {
+            cy.getByDataTest(packageCard.wideContainer).should(
+              "have.length",
+              4
+            );
+          });
+
+        cy.getByDataTest(home.cdkTypeSeeAllButton).should("be.visible");
+      });
+    });
+
+    it("reveals different cards for respective tabs", () => {
+      cy.visit("/");
+
+      cy.getByDataTest(home.cdkTypeSection).within(() => {
+        cy.getByDataTest(home.cdkTypeTab).each((tab, index) => {
+          const tabName: string = ["Community", "AWS", "HashiCorp"][index];
+
+          cy.wrap(tab).click();
+
+          cy.wrap(tab).should("have.attr", "data-value", tabName);
+
+          // Verify current tab's package grid is visible and others are not
+          cy.getByDataTest(home.packageGrid).each((grid, gridIndex) => {
+            cy.wrap(grid).should(
+              index === gridIndex ? "be.visible" : "not.be.visible"
+            );
+          });
+        });
+      });
+    });
+
+    it("has a see all button which opens the correct search url", () => {
+      cy.visit("/");
+
+      const testSeeAll = (tagName: string, index: number) => {
+        cy.getByDataTest(home.cdkTypeTab).eq(index).click();
+
+        cy.getByDataTest(home.cdkTypeSeeAllButton)
+          .eq(index)
+          .should(
+            "have.attr",
+            "href",
+            getSearchPath({
+              tags: [tagName],
+              sort: CatalogSearchSort.DownloadsDesc,
+            })
+          );
+      };
+
+      ["community", "aws-published", "hashicorp-published"].forEach(testSeeAll);
+    });
+  });
+});

package/cypress/e2e/package-page.cy.ts

@@ -0,0 +1,170 @@
+import { getPackagePath } from "util/url";
+import header from "components/Header/testIds";
+import packagePage from "views/Package/testIds";
+import markdown from "components/Markdown/testIds";
+import assemblyFixture from "../fixtures/assembly-constructs@3.3.161.json";
+import versionsFixture from "../fixtures/all-versions.json";
+import { sanitizeVersion } from "api/package/util";
+import { Language } from "constants/languages";
+import { CONSTRUCT_HUB_REPO_URL } from "../../src/constants/links";
+import semver from "semver";
+
+describe("Package Page", () => {
+  beforeEach(() => {
+    cy.intercept("**/constructs/v3.3.161/assembly.json", async (req) => {
+      req.reply({
+        fixture: "assembly-constructs@3.3.161",
+      });
+    });
+
+    cy.intercept("**/constructs/v3.3.161/metadata.json", async (req) => {
+      req.reply({
+        fixture: "metadata-constructs@3.3.161",
+      });
+    });
+
+    cy.intercept("**/constructs/v3.3.161/docs-typescript.md", async (req) => {
+      req.reply({
+        fixture: "docs-typescript-constructs@3.3.161.md",
+      });
+    }).as("getDocs", { type: "static" });
+
+    cy.intercept("**/constructs/v10.0.9/assembly.json", async (req) => {
+      req.reply({
+        fixture: "assembly-constructs@10.0.9",
+      });
+    });
+
+    cy.intercept("**/constructs/v10.0.9/metadata.json", async (req) => {
+      req.reply({
+        fixture: "metadata-constructs@10.0.9",
+      });
+    });
+
+    cy.intercept("**/constructs/v10.0.9/docs-typescript.md", async (req) => {
+      req.reply({
+        fixture: "docs-typescript-constructs@10.0.9.md",
+      });
+    });
+
+    cy.intercept("**/catalog.json", async (req) => {
+      req.reply({
+        fixture: "catalog",
+      });
+    }).as("getCatalog", { type: "static" });
+
+    cy.intercept("**/all-versions.json", async (req) => {
+      req.reply({
+        fixture: "all-versions",
+      });
+    }).as("getVersions", { type: "static" });
+
+    cy.visit(
+      getPackagePath({
+        name: "constructs",
+        version: "3.3.161",
+        language: "typescript" as any,
+      })
+    );
+
+    cy.wait("@getDocs");
+    cy.wait("@getCatalog");
+    cy.wait("@getVersions");
+
+    cy.getByDataTest(header.container).should("be.visible");
+  });
+
+  it("Has feedback and report links", () => {
+    cy.getByDataTest(packagePage.feedbackLinks)
+      .should("be.visible")
+      .within(() => {
+        cy.getByDataTest(packagePage.reportAbuseLink)
+          .should("be.visible")
+          .should(
+            "have.attr",
+            "href",
+            `mailto:abuse@amazonaws.com?subject=${encodeURIComponent(
+              `ConstructHub - Report of abusive package: constructs`
+            )}`
+          );
+
+        cy.getByDataTest(packagePage.reportLink)
+          .should("be.visible")
+          .should(
+            "have.attr",
+            "href",
+            `${CONSTRUCT_HUB_REPO_URL}/issues/new`
+          );
+
+        cy.getByDataTest(packagePage.githubLink)
+          .should("be.visible")
+          .should(
+            "have.attr",
+            "href",
+            `https://github.com/aws/constructs/issues`
+          );
+      });
+  });
+
+  it("Can switch between versions of a package", () => {
+    const versions = [...versionsFixture.packages.constructs];
+    versions.sort(semver.rcompare);
+
+    cy.getByDataTest(markdown.container)
+      .should("contain", "Fake README description for v3.3.161");
+
+    cy.getByDataTest(packagePage.selectVersionDropdown)
+      .children('option')
+      .then(options => {
+        const actual = [...options as any].map(o => o.value);
+        const expected = versions;
+        expect(actual).to.deep.eq(expected);
+      })
+
+    cy.getByDataTest(packagePage.selectVersionDropdown)
+      .select("v10.0.9");
+
+    cy.url().should(
+      "contain",
+      getPackagePath({
+        name: "constructs",
+        version: "10.0.9",
+        language: Language.TypeScript,
+      }),
+    );
+
+    // validate that new metadata has loaded
+    cy.getByDataTest(packagePage.description)
+      .should("contain", "A programming model for software-defined state");
+
+    // validate that new docs have loaded
+    cy.getByDataTest(markdown.container)
+      .should("contain", "Fake README description for v10.0.9");
+
+    cy.getByDataTest(packagePage.selectVersionDropdown)
+      .should("be.visible")
+      .should("contain", "v10.0.9");
+  });
+
+  it("has a dependencies tab with dependency links", () => {
+    const depEntries = Object.entries(assemblyFixture.dependencies);
+
+    cy.getByDataTest(packagePage.dependenciesTab).should("be.visible").click();
+
+    cy.getByDataTest(packagePage.dependenciesList)
+      .should("be.visible")
+      .within(() => {
+        cy.getByDataTest(packagePage.dependenciesLink)
+          .should("have.length", depEntries.length)
+          .each((el, i) => {
+            const [name, version] = depEntries[i];
+
+            cy.wrap(el).should(
+              "have.attr",
+              "href",
+              getPackagePath({ name, version: sanitizeVersion(version) })
+            );
+          });
+      });
+  });
+});

package/cypress/e2e/search.cy.ts

@@ -0,0 +1,214 @@
+import packageCardIds from "components/PackageCard/testIds";
+import searchBar from "components/SearchBar/testIds";
+import searchRedesign from "views/Search/testIds";
+import { checkHeaderAndFooter } from "../support/helpers";
+import { getSearchPath } from "util/url";
+import { CatalogSearchSort } from "api/catalog-search/constants";
+import { CDKType } from "constants/constructs";
+import { SORT_RENDER_MAP } from "views/Search/constants";
+import { Language, TEMP_SUPPORTED_LANGUAGES } from "constants/languages";
+
+const checkCard = (cardType: string) => {
+  cy.getByDataTest(cardType).each(() => {
+    cy.getByDataTest(packageCardIds.title).should("be.visible");
+    cy.getByDataTest(packageCardIds.description).should("be.visible");
+    cy.getByDataTest(packageCardIds.published).should("be.visible");
+    cy.getByDataTest(packageCardIds.author).should("be.visible");
+    cy.getByDataTest([packageCardIds.downloads, packageCardIds.version]).should(
+      "be.visible"
+    );
+    cy.getByDataTest(packageCardIds.languages).should("be.visible");
+  });
+};
+
+describe("Search", () => {
+  beforeEach(() => {
+    cy.visit("/search");
+  });
+
+  checkHeaderAndFooter();
+});
+
+describe("Search (Redesign / WIP)", () => {
+  beforeEach(() => {
+    cy.visitWithConfig("/search", {
+      featureFlags: {
+        searchRedesign: true,
+      },
+    });
+  });
+
+  describe("Results Area", () => {
+    it("has expected elements for Wide Cards", () => {
+      checkCard(packageCardIds.wideContainer);
+    });
+
+    it("can go to next page", () => {
+      cy.getByDataTest(searchRedesign.nextPage)
+        .click()
+        .url()
+        .should("contain", getSearchPath({ query: "", offset: 1 }));
+    });
+
+    it("can go to previous page", () => {
+      cy.visitWithConfig(getSearchPath({ offset: 3 }), {
+        featureFlags: { searchRedesign: true },
+      });
+
+      cy.getByDataTest(searchRedesign.prevPage)
+        .click()
+        .url()
+        .should("contain", getSearchPath({ query: "", offset: 2 }));
+    });
+
+    it("can jump to a page", () => {
+      cy.visitWithConfig("/search", {
+        featureFlags: { searchRedesign: true },
+      });
+
+      cy.getByDataTest(searchRedesign.goToPage)
+        .clear()
+        .type("5{enter}")
+        .url()
+        .should("contain", getSearchPath({ query: "", offset: 4 }));
+    });
+  });
+
+  describe("Filters Panel", () => {
+    beforeEach(() => {
+      cy.visitWithConfig("/search", {
+        featureFlags: {
+          searchRedesign: true,
+        },
+      });
+    });
+
+    const filterByCDKType = (cdkType: CDKType) => {
+      cy.getByDataTest(searchRedesign.cdkTypeFilter)
+        .find(`[data-value="${cdkType}"]`)
+        .click();
+
+      cy.url().should("contain", getSearchPath({ query: "", cdkType }));
+    };
+
+    const filterByCDKMajors = (cdkType: CDKType, versions: number[]) => {
+      filterByCDKType(cdkType);
+
+      versions.forEach((cdkMajor) => {
+        cy.getByDataTest(searchRedesign.cdkVersionFilter)
+          .find(`[data-value="${cdkMajor}"]`)
+          .click()
+          .url()
+          .should("contain", getSearchPath({ query: "", cdkType, cdkMajor }));
+      });
+    };
+
+    it("has expected core filters", () => {
+      cy.getByDataTest(searchRedesign.filtersPanel)
+        .should("be.visible")
+        .each(() => {
+          [
+            searchRedesign.cdkTypeFilter,
+            searchRedesign.languagesFilter,
+          ].forEach((testid) => {
+            cy.getByDataTest(testid).should("be.visible");
+          });
+        });
+    });
+
+    // If this test fails, it may be an indication of data failure in catalog.json
+    it("can filter by CDK Type", () => {
+      cy.getByDataTest(searchRedesign.filtersPanel).each(() => {
+        [CDKType.awscdk, CDKType.cdk8s, CDKType.cdktf].forEach(filterByCDKType);
+      });
+    });
+
+    // Only applies to CDKTypes with more than one version
+    it("can filter by CDK Version for each CDK Type", () => {
+      cy.getByDataTest(searchRedesign.filtersPanel).each(() => {
+        filterByCDKMajors(CDKType.awscdk, [0, 1, 2]);
+        filterByCDKMajors(CDKType.cdk8s, [0, 1]);
+      });
+    });
+
+    it("can filter by languages", () => {
+      cy.getByDataTest(searchRedesign.languagesFilter).each(() => {
+        const languages = [];
+
+        cy.getByDataTest(searchRedesign.filterItem).each((el) => {
+          const lang = el.attr("data-value");
+
+          if (!TEMP_SUPPORTED_LANGUAGES.has(lang as Language)) return;
+
+          languages.push(lang);
+
+          cy.wrap(el)
+            .click()
+            .url()
+            .should("contain", getSearchPath({ query: "", languages }));
+        });
+
+        // Now deselect each language
+        cy.getByDataTest(searchRedesign.filterItem).each((el) => {
+          const lang = el.attr("data-value");
+
+          if (!TEMP_SUPPORTED_LANGUAGES.has(lang as Language)) return;
+
+          languages.shift();
+
+          cy.wrap(el)
+            .click()
+            .url()
+            .should("contain", getSearchPath({ query: "", languages }));
+        });
+      });
+    });
+  });
+
+  describe("Sorting", () => {
+    it("supports re-ordering of results", () => {
+      const sorts = [undefined, ...Object.values(CatalogSearchSort)];
+
+      sorts.forEach((sort) => {
+        cy.getByDataTest(searchRedesign.sortButton)
+          .click()
+          .getByDataTest(searchRedesign.sortDropdown)
+          .should("be.visible")
+          .each(() => {
+            // Not ideal, but for some reason .click() doesn't actually trigger the onClick for the buttons in cypress
+            if (sort === undefined) {
+              cy.getByDataTest(searchRedesign.sortItem).first().invoke("click");
+            } else {
+              cy.get(`[data-value="${sort}"]`).invoke("click");
+            }
+          });
+
+        cy.url().should(
+          "contain",
+          sort ? getSearchPath({ query: "", sort }) : "/search"
+        );
+
+        cy.getByDataTest(searchRedesign.sortButton).should(
+          "contain",
+          sort ? SORT_RENDER_MAP[sort] : "Relevance"
+        );
+      });
+    });
+  });
+
+  describe("Querying", () => {
+    it("supports searching by a query", () => {
+      cy.getByDataTest(searchRedesign.page).each(() => {
+        cy.getByDataTest(searchBar.input)
+          .type("@aws-cdk{enter}")
+          .url()
+          .should("include", `/search?q=${encodeURIComponent("@aws-cdk")}`);
+
+        cy.getByDataTest(searchRedesign.searchDetails).should(
+          "contain",
+          "@aws-cdk"
+        );
+      });
+    });
+  });
+});

package/cypress/e2e/site-terms.cy.ts

@@ -0,0 +1,9 @@
+import { checkHeaderAndFooter } from "../support/helpers";
+
+describe("Site Terms", () => {
+  beforeEach(() => {
+    cy.visit("/terms");
+  });
+
+  checkHeaderAndFooter();
+});

package/cypress/e2e/xss.cy.ts

@@ -0,0 +1,127 @@
+/**
+ * @fileoverview Tests the potential xss vectors in the application
+ * @todo: Commented tests are for code that is not merged yet
+ */
+import header from "components/Header/testIds";
+import markdown from "components/Markdown/testIds";
+import searchBar from "components/SearchBar/testIds";
+import { getPackagePath, getSearchPath } from "util/url";
+
+const alertHTML = "<script>window.alert()</script>";
+const alertJS = "window.alert()";
+
+const withWindowAlertCheck = (assertion: () => Promise<unknown>) => {
+  cy.window().then((win) => {
+    cy.spy(win, "alert");
+
+    assertion().then(() => {
+      expect(win.alert).not.to.be.called;
+    });
+  });
+};
+
+const checkURL = (params: Parameters<typeof getSearchPath>[0]) => {
+  cy.url().should("eq", `${Cypress.config().baseUrl}${getSearchPath(params)}`);
+};
+
+const testSearchURL = async (query: string) => {
+  withWindowAlertCheck(async () => {
+    cy.visit(decodeURIComponent(getSearchPath({ query })));
+
+    cy.getByDataTest(header.container).should("be.visible");
+  });
+};
+
+const testInput = async ({ input = "", url = "/" }) => {
+  withWindowAlertCheck(async () => {
+    cy.visit(url);
+
+    cy.getByDataTest(searchBar.input).type(input + "{enter}", { force: true });
+
+    checkURL({ query: input });
+  });
+};
+
+const testMarkdown = async () => {
+  withWindowAlertCheck(async () => {
+    cy.intercept("**/assembly.json", async (req) => {
+      req.reply({
+        fixture: "assembly",
+      });
+    });
+
+    cy.intercept("**/metadata.json", async (req) => {
+      req.reply({
+        fixture: "metadata",
+      });
+    });
+
+    cy.intercept("**/docs-typescript.md", async (req) => {
+      req.reply({
+        fixture: "xss-docs.md",
+      });
+    }).as("getDocs");
+
+    cy.visit(
+      getPackagePath({
+        name: "construct-hub",
+        version: "0.2.31",
+        language: "typescript" as any,
+      })
+    );
+
+    cy.wait("@getDocs");
+
+    cy.getByDataTest(header.container).should("be.visible");
+    // Give extra long timeout for CI
+    cy.getByDataTest(markdown.container, { timeout: 60000 }).should("exist");
+  });
+};
+
+describe("XSS - Stable Featureset", () => {
+  describe("Package Page - Markdown Rendering", () => {
+    it("will not execute malicious HTML or JS Markdown", () => {
+      testMarkdown();
+    });
+  });
+});
+
+describe("XSS - GA Featureset", () => {
+  describe("Home Page - Input", () => {
+    it("will not execute malicious HTML input", () => {
+      testInput({
+        input: alertHTML,
+      });
+    });
+
+    it("will not execute malicious JavaScript input", () => {
+      testInput({
+        input: alertJS,
+      });
+    });
+  });
+
+  describe("Search Page - URL & Input", () => {
+    it("will not execute malicious HTML urls", () => {
+      testSearchURL(alertHTML);
+    });
+
+    it("will not execute malicious JS urls", () => {
+      testSearchURL(alertJS);
+    });
+
+    it("will not execute malicious HTML input", () => {
+      testInput({
+        url: "/search",
+        input: alertHTML,
+      });
+    });
+
+    it("will not execute malicious JS input", () => {
+      testInput({
+        url: "/search",
+        input: alertJS,
+      });
+    });
+  });
+});

package/cypress/support/e2e.ts

@@ -0,0 +1,11 @@
+import "./commands";
+
+beforeEach(() => {
+  if (window.navigator && navigator.serviceWorker) {
+    navigator.serviceWorker.getRegistrations().then((registrations) => {
+      registrations.forEach((registration) => {
+        registration.unregister();
+      });
+    });
+  }
+});

package/cypress.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  blockedHosts: ['*.awsstatic.com', '*omtrdc.net', '*.shortbread.aws.dev'],
+  chromeWebSecurity: false,
+  defaultCommandTimeout: 15000,
+  retries: {
+    runMode: 2,
+    openMode: 1,
+  },
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      return require('./cypress/plugins/index.js')(on, config)
+    },
+    baseUrl: 'http://localhost:3000',
+  },
+})

package/package.json

@@ -44,17 +44,17 @@
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^26.0.24",
     "@types/lunr": "^2.3.7",
-    "@types/node": "^16",
+    "@types/node": "^18",
     "@types/node-emoji": "^1.8.2",
     "@types/react": "17.0.80",
     "@types/react-dom": "17.0.25",
     "@types/react-helmet": "6.1.7",
     "@types/react-router-dom": "5.3.3",
     "@types/semver": "^7.5.8",
-    "@typescript-eslint/eslint-plugin": "^6",
-    "@typescript-eslint/parser": "^6",
+    "@typescript-eslint/eslint-plugin": "^7",
+    "@typescript-eslint/parser": "^7",
     "constructs": "^10.0.0",
-    "cypress": "9.7.0",
+    "cypress": "^13.11.0",
     "eslint": "^8",
     "eslint-config-prettier": "^8.10.0",
     "eslint-import-resolver-typescript": "^2.7.1",
@@ -68,7 +68,7 @@
     "express-http-proxy": "^1.6.3",
     "jsii-docgen": "^6.3.27",
     "prettier": "^2.8.8",
-    "projen": "^0.82.4",
+    "projen": "^0.82.6",
     "react-app-rewired": "^2.2.1",
     "react-scripts": "^5",
     "standard-version": "^9",
@@ -84,12 +84,12 @@
     "@chakra-ui/theme-tools": "^1.3.6",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
-    "@jsii/spec": "^1.99.0",
+    "@jsii/spec": "^1.100.0",
     "copy-to-clipboard": "^3.3.3",
     "date-fns": "^2.30.0",
     "framer-motion": "^4",
     "hast-util-sanitize": "^3.0.2",
-    "jsii-reflect": "^1.99.0",
+    "jsii-reflect": "^1.100.0",
     "lunr": "^2.3.9",
     "node-emoji": "^1.11.0",
     "prism-react-renderer": "^1.3.5",
@@ -118,13 +118,13 @@
     "wrap-ansi": "7.0.0"
   },
   "engines": {
-    "node": ">= 16.17.0"
+    "node": ">= 18.20.0"
   },
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.1.1119",
+  "version": "0.1.1121",
   "eslintConfig": {
     "extends": [
       "react-app",

package/cypress.json

@@ -1,14 +0,0 @@
-{
-  "baseUrl": "http://localhost:3000",
-  "blockedHosts": [
-    "*.awsstatic.com",
-    "*omtrdc.net",
-    "*.shortbread.aws.dev"
-  ],
-  "chromeWebSecurity": false,
-  "defaultCommandTimeout": 15000,
-  "retries": {
-    "runMode": 2,
-    "openMode": 1
-  }
-}