From b35a2c7daa2db5360a61204c9b2f1f0c33e1b19e Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Tue, 30 Jan 2024 13:31:28 -0500 Subject: [PATCH 1/7] test(topbar): add visual regression test --- lib/components/topbar/topbar.visual.test.ts | 173 ++++++++++++++++++++ 1 file changed, 173 insertions(+) create mode 100644 lib/components/topbar/topbar.visual.test.ts diff --git a/lib/components/topbar/topbar.visual.test.ts b/lib/components/topbar/topbar.visual.test.ts new file mode 100644 index 0000000000..0574d820e7 --- /dev/null +++ b/lib/components/topbar/topbar.visual.test.ts @@ -0,0 +1,173 @@ +import { html } from "@open-wc/testing"; +import { defaultOptions, runComponentTests } from "../../test/test-utils"; +import "../../index"; +import { IconAchievements, IconAlert, IconHelp, IconInbox, IconModerator, IconReviewQueue, IconSearch, IconStackExchange } from "@stackoverflow/stacks-icons/icons"; + +const base64Image = + "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAATwAAAE8CAMAAABq2/00AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABhQTFRF/3IA/////44y/8OS/+fU//Xs/6tn/9e2EhvbMQAABH9JREFUeNrs3e1y2ygAhWELJHH/d7zuJpN1XAnxoe408Ly/6xnnHXEOIEwfDwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/gbAGEhrZl2VloY20PIk8tAzZbfkXA7eeuHyysVfdFMsXiY66ptiWF8Re05BdxF7HkBV7PUNW7FVx4E7sVSwrDjBw2+pC7NWwHtkTe3ULM7En9v6O2ONF7Ik9sSf2IPbEntgTexB7t8feTsynniD2Oh6tXex1hFoUe02kaxVi72JMZs+Rib0LLdkXFGLvaECWjkOxdxVmUex1rB6S2Kss2lcytSH2LnVkakPsXQ7E8xwTe5fuMrUh9vKj8CP4xN7lNOXc3mnwib1M2X7Z28VeS93mg0/sFZTG6WCMVSE51fqsYL4s9jpqQ+yV1caxErHXUxtir6c2xF5HbYRF7LXXhtjrqQ2x11MbYu9tLG4VtSH2empD7BUNxpPaSGKvPPh2sdcxX45i78baEHs18+X32hB7NfPl99oQex21MVHsxViaR8W1MU3s/XpMSvWF0tqYJfY+BmMq01dcG+scP6/6enTK9BW+1J0j9l5aYN0rP5BzM0XsbSUnAlpqY4LYezexFeRSbpslH3uDXdF64OG6est258PohXE8BK+7o6g29rJTQsPt1F3qK9qdTwMP2Wz2X1Vv0UvdbeQ53nl2Xesr2Z0Pww7Zs5lsafWW1MY+6JDNxv5/+kLb5/fXfzLirRdhKSGnr6A2tkGvJoxLGZnqva6NkAbdgA+pUN9a+QuWYYPu+98ee/W1/PJgoMG7lek7nW3UHiEdbKpcqu+kO2L9b4aG0rcWjt5jfWf2Z7kCeE891XtSG/O86A5d+tbZj1h0VW+c/ja90FG9uxMCFdWb/+SkZ1Oaq/d1vjzvXfvF+tLp+aiZT5S1Vm90lrFj02B3bW1d9X7T92u+7Aq9qk2D+Fob/v/Myu7YostC76xe9K966evfr5+7ekuXHVy1V6+R275pEMd3kPbGB+Syeod/8D7Sf41NBvPdMf7a4uXpaTGY0zd+4r0vDlKtwdPqHf/BOzzf8zQYqvRtcz54mXfUNUVyUL0T7AhcrBbKY/C36p1geVEy1y00+F3fBA9eKFxnlRXJa/XOcKxnqeF6Pv1VvTPc7RuXai6K5LN6Z9hQSUsb2Rh86pviUultaScTg/sMD15YeqmcT8/bFx1Foi/umk9P3hcMfqTenrabBT5j8DGTwHivwelOCTwNrnfJm/Ol2U0GZ74WdE+dBn9+Z/z2J9UZ7IjB7dZv8gPl9RRJIq89BiN57QZ38trn04G8k62E6xjcHuQ1D+JEXrvBnbz2+XQgr30+/SCveT69ktceg4m8doOBvDG/CXnkkTezvOXPQB555JFHHnnkkUceeeSRRx555JFHHnnkkWcnmTzyyCOPPPLII4888sgjjzzfhDzyyCOPPPL+9Ff+eyCPPPLII4888sgjjzzyyCOPPPLII4888sgDAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPy//CPAAPiZOI3BPDFQAAAAAElFTkSuQmCC"; + +// Children +const children = { + hamburger: { + unselected: ``, + selected: ``, + }, + logo: ``, + notice: { + default: `old`, + unread: `new`, + }, + navigation: { + minimal: `
  1. Products
`, + full: `
    +
  1. About
    2. +
  2. Products
    3. +
  3. For Teams
    4. +
`, + }, + searchbar: { + input: `
+ + ${IconSearch} +
`, + select: `
+ +
`, + }, + content: { + items: ` +
  • + + ${IconInbox} 3 + +
    • +
  • + + ${IconAchievements} +10 + +
    • +
  • + + ${IconReviewQueue} +
    +
    New activity
    +
    +     +
    • +
  • ${IconHelp}
    • +
  • ${IconStackExchange}
    • +
  • ${IconModerator}
    • +
  • + + 8 + +
    • + `, + unset: `
  • ${IconAlert}
    • `, + loggedOut: ` +
  • + Log in +
    • +
  • + Sign up +
    • + `, + loggedIn: `
  • + + + demo avatar + John Doe + +
    +
      +
    • 3,145
      • +
    • 3
      • +
    • 9
      • +
    • 20
      • +
    +
    +     +
    • `, + } +} + +const topbarChildren = ({ + hamburger = "", + loggedIn = true, + navigation = "", + notice = "", + searchInput = false, + searchSelect = false, + unsetItem = false, +} : { + hamburger?: "" | "selected" | "unselected", + loggedIn?: boolean, + navigation?: "" | "minimal" | "full", + notice?: "" | "default" | "unread", + searchInput?: boolean, + searchSelect?: boolean, + unsetItem?: boolean, +}) => { + return ` +
    + ${hamburger ? hamburger === "unselected" ? children.hamburger.unselected : children.hamburger.selected : ""} + ${children.logo} + ${notice ? notice === "default" ? children.notice.default : children.notice.unread : ""} + ${navigation ? ` + + ` : ""} + ${searchInput ? ` +
    + ${searchSelect ? children.searchbar.select : ""} + ${children.searchbar.input} +
    + `: ""} + +
    + `; +}; + +// Configurations +const topbars = { + default: topbarChildren({ hamburger: "unselected" }), + advanced: topbarChildren({ + navigation: "minimal", + notice: "default", + searchInput: true, + searchSelect: true, + unsetItem: true + }), + input: topbarChildren({ navigation: "minimal", searchInput: true }), + alt: topbarChildren({ + hamburger: "selected", + navigation: "full", + notice: "unread", + searchInput: true, + searchSelect: true, + unsetItem: true + }), +} + +describe("topbar", () => { + runComponentTests({ + type: "visual", + baseClass: "s-topbar", + tag: "header", + children: topbars, + variants: ["dark", "light"], + }); +}); From af8788e3a50efd5663a666a8ec2dfe62f3bfd0e2 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Tue, 30 Jan 2024 15:36:31 -0500 Subject: [PATCH 2/7] Ensure the search icon renders as expected --- lib/components/topbar/topbar.visual.test.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/components/topbar/topbar.visual.test.ts b/lib/components/topbar/topbar.visual.test.ts index 0574d820e7..22831168f4 100644 --- a/lib/components/topbar/topbar.visual.test.ts +++ b/lib/components/topbar/topbar.visual.test.ts @@ -28,7 +28,7 @@ const children = { searchbar: { input: `
    - ${IconSearch} + ${IconSearch.replace("svg-icon iconSearch", "s-input-icon s-input-icon__search svg-icon iconSearch")}
    `, select: `