diff --git a/.eslintrc.json b/.eslintrc.json
index 9b67c6a2db46d35bcb2826803891513d66299cad..94cbfd15580063d9b7ce1313d8af37d2e955d2e2 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -62,7 +62,8 @@
"test-*.{ts,tsx}", // repos with multiple top-level test files
"**/*{.,_}{test,spec}.{ts,tsx}", // tests where the extension or filename suffix denotes that it is a test
"**/jest.config.ts", // jest config
- "**/jest.setup.ts" // jest setup
+ "**/jest.setup.ts", // jest setup
+ "**/setupTests.ts"
],
"optionalDependencies": false
}
diff --git a/jest.config.mjs b/jest.config.ts
similarity index 90%
rename from jest.config.mjs
rename to jest.config.ts
index 2d42f8618ea00d456721e30496d677568f695f89..7e7dad84baf520a554606ca827b2fbc17c5cfc68 100644
--- a/jest.config.mjs
+++ b/jest.config.ts
@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/extensions
import nextJest from 'next/jest.js';
const createJestConfig = nextJest({
@@ -23,6 +24,7 @@ const config = {
'!**/node_modules/**',
],
coverageReporters: ['html', 'text', 'text-summary', 'cobertura'],
+ setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],
};
// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
diff --git a/package.json b/package.json
index b4864fbb2026e1537a04b5f0ed8fbc53ba2bbd43..a840cf2fad07c115fec8d24c65a9e063e32b8bdd 100644
--- a/package.json
+++ b/package.json
@@ -10,9 +10,9 @@
"lint:ts": "node_modules/eslint/bin/eslint.js src --ext .ts,.tsx",
"prepare": "husky install",
"postinstall": "husky install",
- "test": "jest --watch --config ./jest.config.mjs",
- "test:ci": "jest --config ./jest.config.mjs --collectCoverage --coverageDirectory=\"./coverage\" --ci --reporters=default --reporters=jest-junit --watchAll=false --passWithNoTests",
- "test:coverage": "jest --watchAll --coverage --config ./jest.config.mjs",
+ "test": "jest --watch --config ./jest.config.ts",
+ "test:ci": "jest --config ./jest.config.ts --collectCoverage --coverageDirectory=\"./coverage\" --ci --reporters=default --reporters=jest-junit --watchAll=false --passWithNoTests",
+ "test:coverage": "jest --watchAll --coverage --config ./jest.config.ts",
"test:coveragee": "jest --coverage",
"coverage": "open ./coverage/lcov-report/index.html",
"cypress": "cypress open"
diff --git a/setupTests.ts b/setupTests.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7b0828bfa80fb3c4504510349e22dc4cf5bc0a7b
--- /dev/null
+++ b/setupTests.ts
@@ -0,0 +1 @@
+import '@testing-library/jest-dom';
diff --git a/src/assets/.gitkeep b/src/assets/.gitkeep
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/src/assets/images/user-avatar.png b/src/assets/images/user-avatar.png
new file mode 100644
index 0000000000000000000000000000000000000000..3775ddea4346e27cc72a938e3bc1bedbe81f66ce
Binary files /dev/null and b/src/assets/images/user-avatar.png differ
diff --git a/src/assets/vectors/icons/.gitkeep b/src/assets/vectors/icons/.gitkeep
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/src/assets/vectors/icons/lens.svg b/src/assets/vectors/icons/lens.svg
new file mode 100644
index 0000000000000000000000000000000000000000..9e2627a90a99787820e0082cc59b6e4a74861426
--- /dev/null
+++ b/src/assets/vectors/icons/lens.svg
@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2474_4682)">
+<path d="M12.0208 11.0767L14.8762 13.9314L13.9328 14.8747L11.0782 12.0194C10.016 12.8708 8.69483 13.334 7.3335 13.332C4.0215 13.332 1.3335 10.644 1.3335 7.33203C1.3335 4.02003 4.0215 1.33203 7.3335 1.33203C10.6455 1.33203 13.3335 4.02003 13.3335 7.33203C13.3354 8.69337 12.8723 10.0145 12.0208 11.0767ZM10.6835 10.582C11.5296 9.71196 12.0021 8.54565 12.0002 7.33203C12.0002 4.75336 9.9115 2.66536 7.3335 2.66536C4.75483 2.66536 2.66683 4.75336 2.66683 7.33203C2.66683 9.91003 4.75483 11.9987 7.3335 11.9987C8.54712 12.0006 9.71342 11.5281 10.5835 10.682L10.6835 10.582Z" fill="#6A6977"/>
+</g>
+<defs>
+<clipPath id="clip0_2474_4682">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.test.tsx b/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b8f11bb295a728fe3e5b0aed7985e961e9c0688a
--- /dev/null
+++ b/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.test.tsx
@@ -0,0 +1,15 @@
+import { screen, render, RenderResult, fireEvent } from '@testing-library/react';
+import { SearchBar } from './SearchBar.component';
+
+const renderComponent = (): RenderResult => render(<SearchBar />);
+
+describe('SearchBar - component', () => {
+ it('should let user type text', () => {
+ renderComponent();
+
+ const input = screen.getByRole('input', { name: 'search-input' });
+ fireEvent.change(input, { target: { value: 'test value' } });
+
+ expect(screen.getByDisplayValue('test value')).toBeInTheDocument();
+ });
+});
diff --git a/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.tsx b/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..82f82bb9d66630919321b3179e6ed9ec1978c32b
--- /dev/null
+++ b/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.tsx
@@ -0,0 +1,30 @@
+import Image from 'next/image';
+import { ChangeEvent, useState } from 'react';
+import lensIcon from '@/assets/vectors/icons/lens.svg';
+
+export const SearchBar = (): JSX.Element => {
+ const [searchValue, setSearchValue] = useState<string>('');
+
+ const onSearchChange = (event: ChangeEvent<HTMLInputElement>): void => {
+ setSearchValue(event.target.value);
+ };
+
+ return (
+ <div className="relative" data-testid="search-bar">
+ <input
+ value={searchValue}
+ name="search-input"
+ aria-label="search-input"
+ onChange={onSearchChange}
+ className="bg-cultured r-[64px] w-72 rounded-[64px] py-2.5 px-4 text-xs outline-none border border-transparent focus:border-greyscale-600 hover:border-greyscale-600 font-medium text-font-400"
+ />
+ <Image
+ src={lensIcon}
+ alt="lens icon"
+ height={16}
+ width={16}
+ className="absolute right-4 top-2.5"
+ />
+ </div>
+ );
+};
diff --git a/src/components/FunctionalArea/TopBar/SearchBar/index.ts b/src/components/FunctionalArea/TopBar/SearchBar/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e5d1538e82017257cb2365b706f1bb12c54f2204
--- /dev/null
+++ b/src/components/FunctionalArea/TopBar/SearchBar/index.ts
@@ -0,0 +1 @@
+export { SearchBar } from './SearchBar.component';
diff --git a/src/components/FunctionalArea/TopBar/TopBar.component.test.tsx b/src/components/FunctionalArea/TopBar/TopBar.component.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a611ffd3fa009a1d98b6d663bd9af6dd9fb7a73a
--- /dev/null
+++ b/src/components/FunctionalArea/TopBar/TopBar.component.test.tsx
@@ -0,0 +1,13 @@
+import { screen, render, RenderResult } from '@testing-library/react';
+import { TopBar } from './TopBar.component';
+
+const renderComponent = (): RenderResult => render(<TopBar />);
+
+describe('TopBar - component', () => {
+ it('Should contain user avatar, search bar', () => {
+ renderComponent();
+
+ expect(screen.getByTestId('user-avatar')).toBeInTheDocument();
+ expect(screen.getByTestId('search-bar')).toBeInTheDocument();
+ });
+});
diff --git a/src/components/FunctionalArea/TopBar/TopBar.component.tsx b/src/components/FunctionalArea/TopBar/TopBar.component.tsx
index fd98c130abf162bacb8b0f40ed226e3b91b07ba2..a692928129a9be836c6f7649cd52b5e420ebed45 100644
--- a/src/components/FunctionalArea/TopBar/TopBar.component.tsx
+++ b/src/components/FunctionalArea/TopBar/TopBar.component.tsx
@@ -1 +1,14 @@
-export const TopBar = (): JSX.Element => <div className="w-100 bg-slate-600 h-16">.</div>;
+import { SearchBar } from '@/components/FunctionalArea/TopBar/SearchBar';
+import { UserAvatar } from '@/components/FunctionalArea/TopBar/UserAvatar';
+
+export const TopBar = (): JSX.Element => (
+ <div className="w-100 bg-white h-16 flex flex-row items-center py-4 pl-7 pr-6 justify-between">
+ <div className="flex flex-row items-center">
+ <UserAvatar />
+ <SearchBar />
+ </div>
+ <div className="bg-primary-100 px-4 py-1 leading-6 text-xs text-primary-500">
+ Parkinson disease map
+ </div>
+ </div>
+);
diff --git a/src/components/FunctionalArea/TopBar/UserAvatar/UserAvatar.component.test.tsx b/src/components/FunctionalArea/TopBar/UserAvatar/UserAvatar.component.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..dbe50d028ae89e8de29d95904f6f1a3379b39d95
--- /dev/null
+++ b/src/components/FunctionalArea/TopBar/UserAvatar/UserAvatar.component.test.tsx
@@ -0,0 +1,12 @@
+import { screen, render, RenderResult } from '@testing-library/react';
+import { UserAvatar } from './UserAvatar.component';
+
+const renderComponent = (): RenderResult => render(<UserAvatar />);
+
+describe('UserAvatar - component ', () => {
+ it('should render placeholder image', () => {
+ renderComponent();
+
+ expect(screen.getByAltText('user avatar')).toBeInTheDocument();
+ });
+});
diff --git a/src/components/FunctionalArea/TopBar/UserAvatar/UserAvatar.component.tsx b/src/components/FunctionalArea/TopBar/UserAvatar/UserAvatar.component.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c48e49cce8ad5201194febb6fbbe6dac7247cc01
--- /dev/null
+++ b/src/components/FunctionalArea/TopBar/UserAvatar/UserAvatar.component.tsx
@@ -0,0 +1,8 @@
+import Image from 'next/image';
+import avatarImg from '@/assets/images/user-avatar.png';
+
+export const UserAvatar = (): JSX.Element => (
+ <div className="w-8 h-8 mr-7" data-testid="user-avatar">
+ <Image src={avatarImg} fill alt="user avatar" />
+ </div>
+);
diff --git a/src/components/FunctionalArea/TopBar/UserAvatar/index.ts b/src/components/FunctionalArea/TopBar/UserAvatar/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..384816dc5b7d2902a853fd5fde1aa72cf47a66b5
--- /dev/null
+++ b/src/components/FunctionalArea/TopBar/UserAvatar/index.ts
@@ -0,0 +1 @@
+export { UserAvatar } from './UserAvatar.component';
diff --git a/tsconfig.json b/tsconfig.json
index 53d7a2e22f1bdb4d575facfe48a60abca375c7b1..a44f42a56e52544084e6f465ad04da481689ef14 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -23,7 +23,15 @@
"@/*": ["./src/*"]
}
},
- "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "pages"],
+ "include": [
+ "next-env.d.ts",
+ "**/*.ts",
+ "**/*.tsx",
+ ".next/types/**/*.ts",
+ "pages",
+ "jest.config.ts",
+ "setupTests.ts"
+ ],
"exclude": ["node_modules", "cypress/**/*.ts", "cypress.config.ts"],
"noFallthroughCasesInSwitch": true, //Ensures that any non-empty case inside a switch statement includes either break, return, or throw.
"noImplicitReturns": true, // check all code paths in a function to ensure they return a value.