From 921f6d46c2c636de42bd855cc4202523233c3c4e Mon Sep 17 00:00:00 2001 From: Eddie Jaoude Date: Fri, 20 Oct 2023 10:21:02 +0100 Subject: [PATCH] feat: discover to search page (fix pr 9496) (#9545) * feat: move discover to search page (#9496) * feat: show text Recently updated profiles if no search input * feat: implement discover people logic in search page * feat: remove discover page and navbar link * feat: update text for Discover section * feat: remove test for discover page --------- Co-authored-by: Eddie Jaoude * fix: failing search test --------- Co-authored-by: Sansar Maske --- components/navbar/Navbar.js | 4 ---- pages/discover.js | 48 ------------------------------------- pages/pricing.js | 2 +- pages/search.js | 21 +++++++--------- tests/discover.spec.js | 47 ------------------------------------ tests/search.spec.js | 38 +++++++---------------------- 6 files changed, 19 insertions(+), 141 deletions(-) delete mode 100644 pages/discover.js delete mode 100644 tests/discover.spec.js diff --git a/components/navbar/Navbar.js b/components/navbar/Navbar.js index 0db18583f2e..eca9ee2659f 100644 --- a/components/navbar/Navbar.js +++ b/components/navbar/Navbar.js @@ -88,10 +88,6 @@ export default function Navbar() { name: "Repos", url: "/repos", }, - { - name: "Discover", - url: "/discover", - }, { name: "Pricing", url: "/pricing", diff --git a/pages/discover.js b/pages/discover.js deleted file mode 100644 index c0e5e46e3eb..00000000000 --- a/pages/discover.js +++ /dev/null @@ -1,48 +0,0 @@ -import { clientEnv } from "@config/schemas/clientSchema"; - -import logger from "@config/logger"; -import Page from "@components/Page"; -import PageHead from "@components/PageHead"; -import { getProfiles } from "./api/discover/profiles"; - -import UserHorizontal from "@components/user/UserHorizontal"; - -export async function getServerSideProps() { - let profiles = []; - try { - profiles = await getProfiles(); - } catch (e) { - logger.error(e, "get users failed"); - } - return { - props: { - profiles, - BASE_URL: clientEnv.NEXT_PUBLIC_BASE_URL, - }, - }; -} - -export default function Discover({ profiles }) { - return ( - <> - - -

Recently updated Profiles

- -
    - {profiles.map((profile) => ( -
  • - -
    • - ))} -
- - - ); -} diff --git a/pages/pricing.js b/pages/pricing.js index 274d34aaea0..f0a696a7ad4 100644 --- a/pages/pricing.js +++ b/pages/pricing.js @@ -215,7 +215,7 @@ export default function Premium({ user }) { { name: "Discover", description: - "See a list of all those BioDrop Profiles which have been recently updated", + "See a list of all those BioDrop Profiles which have been recently updated on the Search Page", tiers: { Free: true, Premium: true }, }, // { diff --git a/pages/search.js b/pages/search.js index 36fb07ae8ab..573ba5ec179 100755 --- a/pages/search.js +++ b/pages/search.js @@ -9,7 +9,7 @@ import Badge from "@components/Badge"; import logger from "@config/logger"; import Input from "@components/form/Input"; import { getTags } from "./api/discover/tags"; -import { getProfiles } from "./api/profiles"; +import { getProfiles } from "./api/discover/profiles"; import Pagination from "@components/Pagination"; import { cleanSearchInput, @@ -28,13 +28,8 @@ async function fetchUsersByKeyword(keyword) { return searchData.users || []; } -async function fetchRandomUsers() { +async function fetchRecentlyUpdatedUsers() { const users = await getProfiles(); - - if (users.length > 9) { - return users.sort(() => 0.5 - Math.random()).slice(0, 9); - } - return users; } @@ -53,14 +48,14 @@ export async function getServerSideProps(context) { let serverProps = { tags: [], filteredUsers: [], - randUsers: [], + recentlyUpdatedUsers: [], }; try { if (keyword) { serverProps.filteredUsers = await fetchUsersByKeyword(keyword); } else { - serverProps.randUsers = await fetchRandomUsers(); + serverProps.recentlyUpdatedUsers = await fetchRecentlyUpdatedUsers(); } } catch (e) { logger.error(e, "ERROR fetching users"); @@ -74,13 +69,13 @@ export async function getServerSideProps(context) { } export default function Search({ - data: { tags, randUsers, filteredUsers }, + data: { tags, recentlyUpdatedUsers, filteredUsers }, BASE_URL, }) { const router = useRouter(); const { username, keyword, userSearchParam } = router.query; const [notFound, setNotFound] = useState(); - const [users, setUsers] = useState(keyword ? filteredUsers : randUsers); + const [users, setUsers] = useState(keyword ? filteredUsers : recentlyUpdatedUsers); const [inputValue, setInputValue] = useState( username || keyword || userSearchParam || "", ); @@ -102,7 +97,7 @@ export default function Search({ useEffect(() => { if (!inputValue) { //Setting the users as null when the input field is empty - setUsers(randUsers); + setUsers(recentlyUpdatedUsers); //Removing the not found field when the input field is empty setNotFound(); router.replace( @@ -244,6 +239,8 @@ export default function Search({ /> + {!inputValue &&

Recently updated profiles

} + {notFound && }
    { - await page.goto("/discover"); - await expect(page).toHaveTitle(/Discover/); -}); - -test("Navigate to the Discover page", async ({ page }) => { - await page.goto("/"); - await page - .getByRole("navigation") - .getByRole("link", { name: "Discover" }) - .click(); - await page.waitForLoadState("networkidle"); - await expect(page.locator("h1")).toHaveText("Recently updated Profiles"); -}); - -test("Discover shows Profiles", async ({ page }) => { - await page.goto("/search"); - await expect(page.locator("main li")).toHaveCount(9); -}); - -test.describe("accessibility tests (light)", () => { - test.use({ colorScheme: "light" }); - - test("should pass axe wcag accessibility tests (light)", async ({ page }) => { - await page.goto("/discover"); - const accessibilityScanResults = await new AxeBuilder({ page }) - .withTags(["wcag2a", "wcag2aa", "wcag21a", "wcag21aa"]) - .analyze(); - expect(accessibilityScanResults.violations).toEqual([]); - }); -}); - -test.describe("accessibility tests (dark)", () => { - test.use({ colorScheme: "dark" }); - - test("should pass axe wcag accessibility tests (dark)", async ({ page }) => { - await page.goto("/discover"); - const accessibilityScanResults = await new AxeBuilder({ page }) - .withTags(["wcag2a", "wcag2aa", "wcag21a", "wcag21aa"]) - .analyze(); - expect(accessibilityScanResults.violations).toEqual([]); - }); -}); diff --git a/tests/search.spec.js b/tests/search.spec.js index cb58ab30cd8..24a47ef934f 100644 --- a/tests/search.spec.js +++ b/tests/search.spec.js @@ -39,7 +39,7 @@ test("Search page has random results when no search term used", async ({ await page.goto("/search"); const input = page.locator("[name='keyword']"); - await input.type(""); + await input.fill(""); await expect(page.locator("main li")).toHaveCount(defaultUsers); }); @@ -66,24 +66,22 @@ test("Search page shows results after typing 3 characters", async ({ await expect(page.locator("main li")).toContainText(["aka"]); }); -test("Search term persistence", async ({ page }) => { +test("Search term persistence after navigating back", async ({ page }) => { // 1. Perform search await page.goto("/search"); const input = page.locator("[name='keyword']"); - const searchTerm = "eddiejaoude"; // Store the search term + const searchTerm = "eddiejaoude"; await input.fill(searchTerm); - // 2. Click on the searched profile - const profileLinkSelector = 'a[href="/eddiejaoude"]'; - const profileLink = page.locator(profileLinkSelector); - - await profileLink.click(); + // 2. Navigate to profile + await expect(page).toHaveURL("/search?userSearchParam=eddiejaoude"); + await page.waitForLoadState("networkidle"); + await page.locator("h3:has-text('eddiejaoude')").click(); await page.waitForLoadState("networkidle"); // 3. Check if the profile is displayed - const profileHeader = page.locator("h1"); - const profileHeaderText = await profileHeader.innerText(); - expect(profileHeaderText).toContain("Eddie Jaoude"); + await expect(page).toHaveURL("/eddiejaoude"); + await expect(page.locator("h1")).toHaveText("Eddie Jaoude"); // 4. Go back and check that search term is still here await page.goBack(); @@ -94,24 +92,6 @@ test("Search term persistence", async ({ page }) => { expect(inputFieldValue).toBe(searchTerm); }); -test("After search click profile", async ({ page }) => { - // 1. Perform search - await page.goto("/search"); - const input = page.locator("[name='keyword']"); - await input.type("eddiejaoude"); - - // 2. Click on the searched profile - const profileLinkSelector = 'a[href="/eddiejaoude"]'; - const profileLink = page.locator(profileLinkSelector); - await profileLink.click(); - await page.waitForLoadState("networkidle"); - - // 3. Check if the profile is displayed - const profileHeader = page.locator("h1"); - const profileHeaderText = await profileHeader.innerText(); - await expect(profileHeaderText).toContain("Eddie Jaoude"); -}); - test("find the profile after providing concise name", async ({ page }) => { // 1. Start from the homepage await page.goto("/");