Skip to content

Commit fd53ed0

Browse files
joshunraujoshunrau
committed
add many testids in the for components
1 parent 521986c commit fd53ed0

File tree

11 files changed

+52
-19
lines changed

11 files changed

+52
-19
lines changed

‎apps/web/src/components/Footer/Footer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export const Footer = () => {
99
const { t } = useTranslation('layout');
1010

1111
return (
12-
<footer className="text-muted-foreground container py-3 text-sm">
12+
<footer className="text-muted-foreground container py-3 text-sm" data-testid="footer">
1313
<hr className="my-3 border-slate-200 dark:border-slate-700" />
1414
<div className="flex items-center justify-center">
1515
<div className="mb-1 flex flex-row flex-wrap font-medium lg:flex-nowrap">

‎apps/web/src/components/IdentificationForm/IdentificationForm.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,7 @@ export const IdentificationForm = ({ onSubmit }: IdentificationFormProps) => {
113113
}
114114
}
115115
]}
116+
data-testid="identification-form"
116117
initialValues={{
117118
identificationMethod: currentGroup?.settings.defaultIdentificationMethod ?? 'PERSONAL_INFO'
118119
}}

‎apps/web/src/components/InstrumentCard/InstrumentCard.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,7 @@ export const InstrumentCard = ({ instrument, onClick }: InstrumentCardProps) =>
125125
return (
126126
<Card
127127
className="group flex gap-8 p-6 transition-transform duration-300 ease-in-out hover:scale-[1.03] hover:cursor-pointer sm:p-8"
128+
data-testid={`instrument-card-${instrument.id}`}
128129
role="button"
129130
tabIndex={0}
130131
onClick={onClick}

‎apps/web/src/components/InstrumentShowcase/InstrumentShowcase.tsx‎

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -59,19 +59,30 @@ export const InstrumentShowcase: React.FC<{
5959
}, [availableInstruments]);
6060

6161
return (
62-
<div className="flex flex-col gap-5">
62+
<div className="flex flex-col gap-5" data-testid="instrument-showcase">
6363
<div className="flex items-center gap-2.5">
64-
<SearchBar className="grow" value={searchTerm} onValueChange={setSearchTerm} />
64+
<SearchBar
65+
className="grow"
66+
data-testid="instrument-search-bar"
67+
value={searchTerm}
68+
onValueChange={setSearchTerm}
69+
/>
6570
<div className="flex items-center gap-2.5">
66-
<InstrumentKindDropdown selected={selectedKinds} setSelected={setSelectedKinds} />
67-
<ListboxDropdown
68-
widthFull
69-
options={tagOptions}
70-
selected={selectedTags}
71-
setSelected={setSelectedTags}
72-
title={t('core.tags')}
73-
/>
74-
<InstrumentLanguageDropdown selected={selectedLanguages} setSelected={setSelectedLanguages} />
71+
<div data-testid="instrument-kind-filter">
72+
<InstrumentKindDropdown selected={selectedKinds} setSelected={setSelectedKinds} />
73+
</div>
74+
<div data-testid="instrument-tag-filter">
75+
<ListboxDropdown
76+
widthFull
77+
options={tagOptions}
78+
selected={selectedTags}
79+
setSelected={setSelectedTags}
80+
title={t('core.tags')}
81+
/>
82+
</div>
83+
<div data-testid="instrument-language-filter">
84+
<InstrumentLanguageDropdown selected={selectedLanguages} setSelected={setSelectedLanguages} />
85+
</div>
7586
</div>
7687
</div>
7788
<ul className="flex flex-col gap-5">

‎apps/web/src/components/Layout/Layout.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@ import { Sidebar } from '../Sidebar';
66

77
export const Layout = () => {
88
return (
9-
<div className="flex h-screen w-screen flex-col md:flex-row">
9+
<div className="flex h-screen w-screen flex-col md:flex-row" data-testid="layout">
1010
<div className="absolute md:hidden">
1111
<Navbar />
1212
</div>
1313
<div className="hidden md:flex md:shrink-0">
1414
<Sidebar />
1515
</div>
16-
<div className="scrollbar-none flex grow flex-col overflow-y-scroll pt-14 md:pt-0">
16+
<div className="scrollbar-none flex grow flex-col overflow-y-scroll pt-14 md:pt-0" data-testid="layout-main">
1717
<main className="container flex grow flex-col">
1818
<Outlet />
1919
</main>

‎apps/web/src/components/NavButton/NavButton.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ export const NavButton = React.forwardRef<HTMLButtonElement, NavButtonProps>(fun
2727
)}
2828
data-nav-url={url}
2929
data-spotlight-type="nav-button"
30+
data-testid={`nav-button-${url}`}
3031
disabled={disabled}
3132
ref={ref}
3233
type="button"

‎apps/web/src/components/Navbar/Navbar.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,15 @@ export const Navbar = () => {
3030

3131
return (
3232
<Sheet open={isOpen} onOpenChange={setIsOpen}>
33-
<div className="fixed top-0 z-10 w-full bg-white/80 text-slate-700 shadow-sm backdrop-blur-lg dark:bg-slate-800/75 dark:text-slate-300">
33+
<div
34+
className="fixed top-0 z-10 w-full bg-white/80 text-slate-700 shadow-sm backdrop-blur-lg dark:bg-slate-800/75 dark:text-slate-300"
35+
data-testid="navbar"
36+
>
3437
<div className="h-full w-full bg-inherit">
3538
<div className="container flex items-center justify-between bg-inherit py-2 font-medium">
3639
<Branding className="[&>span]:hidden" />
3740
<Sheet.Trigger
41+
data-testid="navbar-menu-trigger"
3842
onClick={() => {
3943
setIsOpen(true);
4044
}}

‎apps/web/src/components/PageHeader/PageHeader.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@ type PageHeaderProps = {
1111
export const PageHeader = ({ children, className }: PageHeaderProps) => {
1212
return (
1313
<React.Fragment>
14-
<div className={cn('mt-5 w-full', className)}>{children}</div>
14+
<div className={cn('mt-5 w-full', className)} data-testid="page-header">
15+
{children}
16+
</div>
1517
<Separator className="my-5 w-full" />
1618
</React.Fragment>
1719
);

‎apps/web/src/components/Sidebar/Sidebar.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,11 @@ export const Sidebar = () => {
2222

2323
const { t } = useTranslation();
2424
return (
25-
<div className="flex h-screen w-[19rem] flex-col bg-slate-900 px-3 py-2 text-slate-100 shadow-lg dark:border-r dark:border-slate-700">
26-
<div id="sidebar-branding-container">
25+
<div
26+
className="flex h-screen w-[19rem] flex-col bg-slate-900 px-3 py-2 text-slate-100 shadow-lg dark:border-r dark:border-slate-700"
27+
data-testid="sidebar"
28+
>
29+
<div data-testid="sidebar-branding-container" id="sidebar-branding-container">
2730
<Branding className="h-12" fontSize="md" logoVariant="light" />
2831
</div>
2932
<hr className="my-2 h-[1px] border-none bg-slate-700" />

‎apps/web/src/components/UserDropup/UserDropup.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,11 @@ export const UserDropup = () => {
2121

2222
return (
2323
<DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
24-
<DropdownMenu.Trigger asChild className="flex items-center gap-1.5 focus-visible:ring-0">
24+
<DropdownMenu.Trigger
25+
asChild
26+
className="flex items-center gap-1.5 focus-visible:ring-0"
27+
data-testid="user-dropup-trigger"
28+
>
2529
<ArrowToggle
2630
className="flex flex-row-reverse items-center p-2 hover:bg-slate-700 hover:text-slate-100"
2731
isToggled={isOpen}
@@ -39,13 +43,15 @@ export const UserDropup = () => {
3943
<DropdownMenu.Content
4044
align="start"
4145
className="w-56 border-slate-700 bg-slate-800 text-slate-300 shadow-md"
46+
data-testid="user-dropup-menu"
4247
side="top"
4348
>
4449
<DropdownMenu.Label className="text-slate-300">{currentUser?.username}</DropdownMenu.Label>
4550
<DropdownMenu.Separator className="bg-slate-700" />
4651
<DropdownMenu.Group>
4752
<DropdownMenu.Item
4853
className="gap-2 hover:bg-slate-700 hover:text-slate-100 focus:bg-slate-700 focus:text-slate-100 focus:ring-0"
54+
data-testid="user-dropup-about"
4955
onClick={() => {
5056
void navigate({ to: '/about' });
5157
}}
@@ -58,6 +64,7 @@ export const UserDropup = () => {
5864
</DropdownMenu.Item>
5965
<DropdownMenu.Item
6066
className="gap-2 hover:bg-slate-700 hover:text-slate-100 focus:bg-slate-700 focus:text-slate-100"
67+
data-testid="user-dropup-preferences"
6168
onClick={() => {
6269
void navigate({ to: '/user' });
6370
}}
@@ -70,6 +77,7 @@ export const UserDropup = () => {
7077
</DropdownMenu.Item>
7178
<DropdownMenu.Item
7279
className="gap-2 hover:bg-slate-700 hover:text-slate-100 focus:bg-slate-700 focus:text-slate-100"
80+
data-testid="user-dropup-tutorial"
7381
disabled={currentSession !== null}
7482
onClick={() => {
7583
setIsWalkthroughOpen(true);
@@ -83,6 +91,7 @@ export const UserDropup = () => {
8391
</DropdownMenu.Item>
8492
<DropdownMenu.Item
8593
className="gap-2 hover:bg-slate-700 hover:text-slate-100 focus:bg-slate-700 focus:text-slate-100 focus:ring-0"
94+
data-testid="user-dropup-logout"
8695
onClick={logout}
8796
>
8897
<LogOutIcon />

0 commit comments

Comments
 (0)