test(web): add Vitest tests for search, auth, public, and admin layouts
- SearchLayout: verifies children pass-through (3 tests) - AuthLayout: verifies role=main, #main-content, max-w-md centering (5 tests) - PublicLayout: verifies navbar, ticker strip, footer, compare bar, #main-content (8 tests) - AdminLayout: verifies sidebar nav, auth guard, loading state, logout, mobile toggle (10 tests) All 156 web test files pass (1157 total web tests). Pre-existing API test failures in unrelated modules (auth OTP handler, projects, search indexer, admin settings encryption) are outside scope of this task. Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
61
apps/web/app/[locale]/(auth)/__tests__/layout.spec.tsx
Normal file
61
apps/web/app/[locale]/(auth)/__tests__/layout.spec.tsx
Normal file
@@ -0,0 +1,61 @@
|
||||
/* eslint-disable import-x/order */
|
||||
/**
|
||||
* Kiểm thử AuthLayout: wrapper căn giữa cho trang đăng nhập / đăng ký.
|
||||
*/
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import * as React from 'react';
|
||||
import { describe, expect, it } from 'vitest';
|
||||
|
||||
import AuthLayout from '../layout';
|
||||
|
||||
describe('AuthLayout', () => {
|
||||
it('renders children', () => {
|
||||
render(
|
||||
<AuthLayout>
|
||||
<div data-testid="form">Form đăng nhập</div>
|
||||
</AuthLayout>,
|
||||
);
|
||||
expect(screen.getByTestId('form')).toBeInTheDocument();
|
||||
expect(screen.getByText('Form đăng nhập')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('has role="main" on the outer element', () => {
|
||||
render(
|
||||
<AuthLayout>
|
||||
<div>Nội dung</div>
|
||||
</AuthLayout>,
|
||||
);
|
||||
expect(screen.getByRole('main')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('has id="main-content" for skip-nav accessibility', () => {
|
||||
const { container } = render(
|
||||
<AuthLayout>
|
||||
<div>Nội dung</div>
|
||||
</AuthLayout>,
|
||||
);
|
||||
expect(container.querySelector('#main-content')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('centres the form inside a max-width container', () => {
|
||||
const { container } = render(
|
||||
<AuthLayout>
|
||||
<div>Form</div>
|
||||
</AuthLayout>,
|
||||
);
|
||||
// Inner div has w-full max-w-md
|
||||
const inner = container.querySelector('.max-w-md');
|
||||
expect(inner).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders multiple children', () => {
|
||||
render(
|
||||
<AuthLayout>
|
||||
<h1 data-testid="heading">Tiêu đề</h1>
|
||||
<p data-testid="body">Nội dung</p>
|
||||
</AuthLayout>,
|
||||
);
|
||||
expect(screen.getByTestId('heading')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('body')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user