feat: ERNEX-40 | add ethereal nexus logo (#42)

* feat: Add ethereal nexus logo with visual alignments

* feat: Remove console errors related with the logo image

* feat: Add config for unit tests and adding feat tests

* feat: Adapting layout to diff screens

* feat: Remove unsed code and comments

ethereal-nexus-dashboard/__tests__/unit/components/DashboardLayout.test.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { RenderResult, render, screen } from '@testing-library/react';
+import DashboardLayout from '@/components/layout';
+import LogoImage from '@/components/ui/logo-image';
+import { MainNav } from '@/components/ui/main-nav/main-nav';
+import ThemePicker from '@/components/theme-picker';
+import { UserNav } from '@/components/user/user-nav';
+import { Toaster } from '@/components/ui/toaster';
+
+
+jest.mock('next-auth', () => ({
+ signIn: jest.fn(),
+}));
+
+jest.mock('@/components/ui/logo-image', () => ({
+ __esModule: true,
+ default: jest.fn(),
+}));
+
+jest.mock('@/components/ui/main-nav/main-nav', () => ({
+ __esModule: true,
+ MainNav: jest.fn(),
+}));
+
+jest.mock('@/components/theme-picker', () => ({
+ __esModule: true,
+ default: jest.fn(),
+}));
+
+jest.mock('@/components/user/user-nav', () => ({
+ __esModule: true,
+ UserNav: jest.fn(),
+}));
+
+jest.mock('@/components/ui/toaster', () => ({
+ __esModule: true,
+ Toaster: jest.fn(),
+}));
+
+// Set up mock implementation for window.matchMedia
+window.matchMedia = jest.fn().mockImplementation(query => {
+ return {
+ matches: false,
+ media: query,
+ onchange: null,
+ addListener: jest.fn(),
+ removeListener: jest.fn(),
+ dispatchEvent: jest.fn(),
+ };
+});
+
+
+describe('Dashboard layout component', () => {
+
+ beforeEach(() => {
+ LogoImage.mockImplementation(() => <div>Ethereal Nexus Logo</div>);
+ MainNav.mockImplementation(() => <div>Main Nav</div>);
+ ThemePicker.mockImplementation(() => <div>ThemePicker</div>);
+ UserNav.mockImplementation(() => <div>User Nav</div>);
+ Toaster.mockImplementation(() => <div>Toaster</div>);
+ });
+
+ afterEach(() => {
+ jest.clearAllMocks();
+ });
+
+ it('should match snapshot', () => {
+ const { asFragment } = render(
+ <DashboardLayout>
+ <div>Child Component</div>
+ </DashboardLayout>
+ );
+ expect(asFragment()).toMatchSnapshot();
+ });
+ it('should render all child components', () => {
+ render(
+ <DashboardLayout>
+ <div>Child Component</div>
+ </DashboardLayout>
+ );
+
+ expect(screen.getByText('Ethereal Nexus Logo')).toBeInTheDocument();
+ expect(screen.getByText('Main Nav')).toBeInTheDocument();
+ expect(screen.getByText('ThemePicker')).toBeInTheDocument();
+ expect(screen.getByText('User Nav')).toBeInTheDocument();
+ expect(screen.getByText('Toaster')).toBeInTheDocument();
+ });
+
+ it('should render children within the layout', () => {
+ render(<DashboardLayout>Test Content</DashboardLayout>);
+
+ // Test that children are rendered
+ expect(screen.getByText('Test Content')).toBeInTheDocument();
+ });
+});

ethereal-nexus-dashboard/__tests__/unit/components/__snapshots__/DashboardLayout.test.tsx.snap

@@ -0,0 +1,44 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Dashboard layout component should match snapshot 1`] = `
+<DocumentFragment>
+ <div
+ class="flex-col md:flex relative mt-6"
+ >
+ <div
+ class="relative"
+ >
+ <div
+ class="flex h-16 items-center px-8"
+ >
+ <div>
+ Ethereal Nexus Logo
+ </div>
+ <div>
+ Main Nav
+ </div>
+ <div
+ class="ml-auto flex items-center space-x-4"
+ >
+ <div>
+ ThemePicker
+ </div>
+ <div>
+ User Nav
+ </div>
+ </div>
+ </div>
+ </div>
+ <div
+ class="flex-1 space-y-4 p-8 mt-6 absolute"
+ >
+ <div>
+ Child Component
+ </div>
+ </div>
+ <div>
+ Toaster
+ </div>
+ </div>
+</DocumentFragment>
+`;

ethereal-nexus-dashboard/__tests__/unit/components/ui/logo-image/LogoImage.test.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { RenderResult, render, screen } from '@testing-library/react';
+import LogoImage from '@/components/ui/logo-image';
+import { useTheme } from 'next-themes';
+
+jest.mock('next-themes');
+
+jest.mock('next-auth', () => ({
+ signIn: jest.fn(),
+}));
+
+describe('LogoImage component', () => {
+ let wrapper: RenderResult;
+
+ const renderComponent = () => {
+ wrapper = render(<LogoImage/>);
+ };
+
+ beforeEach(() => {
+ useTheme.mockReturnValue({ theme: 'light', setTheme: jest.fn() });
+
+ // Set up mock implementation for window.matchMedia
+ window.matchMedia = jest.fn().mockImplementation(query => {
+ return {
+ matches: false,
+ media: query,
+ onchange: null,
+ addListener: jest.fn(),
+ removeListener: jest.fn(),
+ dispatchEvent: jest.fn(),
+ };
+ });
+ renderComponent();
+ });
+
+ it('should match snapshot', () => {
+ expect(wrapper.baseElement).toMatchSnapshot();
+ });
+
+ it('should render the light mode image with light mode theme by default', () => {
+ const image = screen.getByTestId('ethereal-logo-light-image');
+ expect(image).toBeInTheDocument();
+ expect(image).toHaveAttribute('src', expect.stringContaining('light'));
+ });
+
+ it('should render the dark mode image theme when theme is "dark"', () => {
+ useTheme.mockReturnValue({ theme: 'dark', setTheme: jest.fn() });
+
+ renderComponent();
+ const image = screen.getByTestId('ethereal-logo-dark-image');
+ expect(image).toBeInTheDocument();
+ expect(image).toHaveAttribute('src', expect.stringContaining('dark'));
+ });
+
+ it('should render the prefered mode theme (system) when theme is "system"', () => {
+ useTheme.mockReturnValue({ theme: 'system', setTheme: jest.fn() });
+ renderComponent();
+ const preferredColorScheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+
+ const image = screen.getByTestId(`ethereal-logo-${preferredColorScheme}-image`);
+ expect(image).toBeInTheDocument();
+ expect(image).toHaveAttribute('src', expect.stringContaining(preferredColorScheme));
+ });
+});

ethereal-nexus-dashboard/__tests__/unit/components/ui/logo-image/__snapshots__/LogoImage.test.tsx.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LogoImage component should match snapshot 1`] = `
+<body>
+ <div>
+ <img
+ alt="Ethereal Nexus Logo"
+ data-nimg="1"
+ data-testid="ethereal-logo-light-image"
+ decoding="async"
+ height="29.666666666666668"
+ loading="lazy"
+ src="/_next/image?url=%2Fethereal-nexus-logo-light-mode.jpg&w=640&q=75"
+ srcset="/_next/image?url=%2Fethereal-nexus-logo-light-mode.jpg&w=384&q=75 1x, /_next/image?url=%2Fethereal-nexus-logo-light-mode.jpg&w=640&q=75 2x"
+ style="color: transparent;"
+ width="267"
+ />
+ </div>
+</body>
+`;

ethereal-nexus-dashboard/jest.config.js

@@ -0,0 +1,36 @@
+const nextJest = require('next/jest');
+
+const createJestConfig = nextJest({
+ dir: './',
+});
+
+/** @type {import('jest').Config} */
+const config = {
+ collectCoverage: true,
+ collectCoverageFrom: [
+ './**/*.([j|t]s?(x))',
+ '!node_modules/**',
+ '!coverage/**',
+ '!.next/**',
+ '!next.config.js',
+ '!jest.config.js',
+ '!jest.setup.js',
+ '!src/components/ui/**',
+ ],
+ coverageDirectory: 'coverage',
+ coverageReporters: ['json', 'lcov', 'html', 'text'],
+ setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+ testEnvironment: 'jest-environment-jsdom',
+ transformIgnorePatterns: ['/node_modules/', '^.+\\.module\\.(css|sass|scss)$'],
+ moduleNameMapper: {
+ '^@/(.*)$': '<rootDir>/src/$1',
+ '^@/components/(.*)$': '<rootDir>/src/components/$1',
+ '^@/lib/(.*)$': '<rootDir>/src/lib/$1',
+ '^@/tests/(.*)$': '<rootDir>/__tests__/$1',
+ '^@/utils/(.*)$': '<rootDir>/src/utils/$1',
+ '^next-auth$': '<rootDir>/src/auth',
+ },
+};
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(config);

ethereal-nexus-dashboard/jest.setup.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';