test: added more test inside containers component

web/containers/AutoLink/index.test.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import AutoLink from './index'
+
+describe('AutoLink Component', () => {
+ it('renders text without links correctly', () => {
+ const text = 'This is a test without links.'
+ render(<AutoLink text={text} />)
+ expect(screen.getByText(text)).toBeInTheDocument()
+ })
+
+ it('renders text with a single link correctly', () => {
+ const text = 'Check this link: https://example.com'
+ render(<AutoLink text={text} />)
+ const link = screen.getByText('https://example.com')
+ expect(link).toBeInTheDocument()
+ expect(link).toHaveAttribute('href', 'https://example.com')
+ expect(link).toHaveAttribute('target', 'blank')
+ })
+
+ it('renders text with multiple links correctly', () => {
+ const text = 'Visit https://example.com and http://test.com'
+ render(<AutoLink text={text} />)
+ const link1 = screen.getByText('https://example.com')
+ const link2 = screen.getByText('http://test.com')
+ expect(link1).toBeInTheDocument()
+ expect(link1).toHaveAttribute('href', 'https://example.com')
+ expect(link1).toHaveAttribute('target', 'blank')
+ expect(link2).toBeInTheDocument()
+ expect(link2).toHaveAttribute('href', 'http://test.com')
+ expect(link2).toHaveAttribute('target', 'blank')
+ })
+
+ it('renders text with a link without protocol correctly', () => {
+ const text = 'Visit example.com for more info.'
+ render(<AutoLink text={text} />)
+ const link = screen.getByText('example.com')
+ expect(link).toBeInTheDocument()
+ expect(link).toHaveAttribute('href', 'http://example.com')
+ expect(link).toHaveAttribute('target', 'blank')
+ })
+})

web/containers/BlankState/index.test.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import BlankState from './index'
+
+describe('BlankState Component', () => {
+ it('renders title correctly', () => {
+ const title = 'Test Title'
+ render(<BlankState title={title} />)
+ expect(screen.getByText(title)).toBeInTheDocument()
+ })
+
+ it('renders description correctly when provided', () => {
+ const title = 'Test Title'
+ const description = 'Test Description'
+ render(<BlankState title={title} description={description} />)
+ expect(screen.getByText(description)).toBeInTheDocument()
+ })
+
+ it('does not render description when not provided', () => {
+ const title = 'Test Title'
+ render(<BlankState title={title} />)
+ expect(screen.queryByText('Test Description')).not.toBeInTheDocument()
+ })
+
+ it('renders action correctly when provided', () => {
+ const title = 'Test Title'
+ const action = <button>Test Action</button>
+ render(<BlankState title={title} action={action} />)
+ expect(screen.getByText('Test Action')).toBeInTheDocument()
+ })
+
+ it('does not render action when not provided', () => {
+ const title = 'Test Title'
+ render(<BlankState title={title} />)
+ expect(screen.queryByText('Test Action')).not.toBeInTheDocument()
+ })
+})

web/containers/Brand/Logo/Mark.test.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import LogoMark from './Mark'
+
+describe('LogoMark Component', () => {
+ it('renders with default width and height', () => {
+ render(<LogoMark />)
+ const image = screen.getByAltText('Jan - Logo')
+ expect(image).toBeInTheDocument()
+ expect(image).toHaveAttribute('width', '24')
+ expect(image).toHaveAttribute('height', '24')
+ })
+
+ it('renders with provided width and height', () => {
+ render(<LogoMark width={48} height={48} />)
+ const image = screen.getByAltText('Jan - Logo')
+ expect(image).toBeInTheDocument()
+ expect(image).toHaveAttribute('width', '48')
+ expect(image).toHaveAttribute('height', '48')
+ })
+
+ it('applies provided className', () => {
+ render(<LogoMark className="custom-class" />)
+ const image = screen.getByAltText('Jan - Logo')
+ expect(image).toBeInTheDocument()
+ expect(image).toHaveClass('custom-class')
+ })
+
+ it('renders with the correct src and alt attributes', () => {
+ render(<LogoMark />)
+ const image = screen.getByAltText('Jan - Logo')
+ expect(image).toBeInTheDocument()
+ expect(image).toHaveAttribute('src', 'icons/app_icon.svg')
+ expect(image).toHaveAttribute('alt', 'Jan - Logo')
+ })
+})

web/containers/CenterPanelContainer/index.test.tsx

@@ -0,0 +1,56 @@
+import { render, screen } from '@testing-library/react'
+import { useAtomValue } from 'jotai'
+import CenterPanelContainer from './index'
+import '@testing-library/jest-dom'
+
+// Mock useAtomValue from jotai
+jest.mock('jotai', () => ({
+ ...jest.requireActual('jotai'),
+ useAtomValue: jest.fn(),
+}))
+
+describe('CenterPanelContainer', () => {
+ it('renders with reduceTransparent set to true', () => {
+ // Mock reduceTransparentAtom to be true
+ ;(useAtomValue as jest.Mock).mockReturnValue(true)
+
+ render(
+ <CenterPanelContainer>
+ <div>Test Child</div>
+ </CenterPanelContainer>
+ )
+
+ // Check that the container renders with no border or rounded corners
+ const container = screen.getByText('Test Child').parentElement
+ expect(container).not.toHaveClass('rounded-lg border')
+ })
+
+ it('renders with reduceTransparent set to false', () => {
+ // Mock reduceTransparentAtom to be false
+ ;(useAtomValue as jest.Mock).mockReturnValue(false)
+
+ render(
+ <CenterPanelContainer>
+ <div>Test Child</div>
+ </CenterPanelContainer>
+ )
+
+ // Check that the container renders with border and rounded corners
+ const container = screen.getByText('Test Child').parentElement
+ expect(container).toHaveClass('rounded-lg border')
+ })
+
+ it('renders children correctly', () => {
+ // Mock reduceTransparentAtom to be true for this test
+ ;(useAtomValue as jest.Mock).mockReturnValue(true)
+
+ render(
+ <CenterPanelContainer>
+ <div>Child Content</div>
+ </CenterPanelContainer>
+ )
+
+ // Verify that the child content is rendered
+ expect(screen.getByText('Child Content')).toBeInTheDocument()
+ })
+})

web/containers/CopyInstruction/index.test.tsx

@@ -0,0 +1,65 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { useAtom } from 'jotai'
+import '@testing-library/jest-dom'
+import CopyOverInstruction from './index'
+
+// Mock the `useAtom` hook from jotai
+jest.mock('jotai', () => ({
+ useAtom: jest.fn(),
+}))
+
+describe('CopyOverInstruction', () => {
+ const setCopyOverInstructionEnabled = jest.fn()
+
+ beforeEach(() => {
+ ;(useAtom as jest.Mock).mockImplementation(() => [
+ false,
+ setCopyOverInstructionEnabled,
+ ])
+ })
+
+ afterEach(() => {
+ jest.clearAllMocks()
+ })
+
+ it('should render the component with the switch in the correct state', () => {
+ render(<CopyOverInstruction />)
+
+ // Assert the text is rendered
+ expect(
+ screen.getByText(/Save instructions for new threads/i)
+ ).toBeInTheDocument()
+
+ // Assert the switch is rendered and in the unchecked state
+ const switchInput = screen.getByRole('checkbox')
+ expect(switchInput).toBeInTheDocument()
+ expect(switchInput).not.toBeChecked()
+ })
+
+ it('should call setCopyOverInstructionEnabled when the switch is toggled', () => {
+ render(<CopyOverInstruction />)
+
+ const switchInput = screen.getByRole('checkbox')
+
+ // Simulate toggling the switch
+ fireEvent.click(switchInput)
+
+ // Assert that the atom setter is called with true when checked
+ expect(setCopyOverInstructionEnabled).toHaveBeenCalledWith(true)
+ })
+
+ it('should reflect the updated state when the atom value changes', () => {
+ // Mock the atom to return true (enabled state)
+ ;(useAtom as jest.Mock).mockImplementation(() => [
+ true,
+ setCopyOverInstructionEnabled,
+ ])
+
+ render(<CopyOverInstruction />)
+
+ const switchInput = screen.getByRole('checkbox')
+
+ // The switch should now be checked
+ expect(switchInput).toBeChecked()
+ })
+})

web/containers/EngineSetting/index.test.tsx

@@ -0,0 +1,115 @@
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import EngineSetting from './index'
+import SettingComponentBuilder from '@/containers/ModelSetting/SettingComponent'
+import { SettingComponentProps } from '@janhq/core'
+
+// Mock the SettingComponentBuilder component
+jest.mock('@/containers/ModelSetting/SettingComponent', () =>
+ jest.fn(() => null)
+)
+
+describe('EngineSetting', () => {
+ const mockComponentData: SettingComponentProps[] = [
+ {
+ key: 'setting1',
+ title: 'Setting 1',
+ description: 'This is the first setting.',
+ controllerType: 'input',
+ controllerProps: {
+ placeholder: 'Enter text',
+ value: 'default text',
+ type: 'text',
+ },
+ },
+ {
+ key: 'setting2',
+ title: 'Setting 2',
+ description: 'This is the second setting.',
+ controllerType: 'slider',
+ controllerProps: {
+ min: 0,
+ max: 100,
+ step: 1,
+ value: 50,
+ },
+ },
+ {
+ key: 'setting3',
+ title: 'Setting 3',
+ description: 'This is the third setting.',
+ controllerType: 'checkbox',
+ controllerProps: {
+ value: true,
+ },
+ },
+ ]
+
+ const onValueChangedMock = jest.fn()
+
+ afterEach(() => {
+ jest.clearAllMocks() // Clear mocks after each test
+ })
+
+ it('renders SettingComponentBuilder with the correct props', () => {
+ render(
+ <EngineSetting
+ componentData={mockComponentData}
+ onValueChanged={onValueChangedMock}
+ disabled={false}
+ />
+ )
+
+ // Check that SettingComponentBuilder is called with the correct props
+ expect(SettingComponentBuilder).toHaveBeenCalledWith(
+ {
+ componentProps: mockComponentData,
+ disabled: false,
+ onValueUpdated: onValueChangedMock,
+ },
+ {}
+ )
+ })
+
+ it('renders SettingComponentBuilder with disabled prop', () => {
+ render(
+ <EngineSetting
+ componentData={mockComponentData}
+ onValueChanged={onValueChangedMock}
+ disabled={true}
+ />
+ )
+
+ // Check that SettingComponentBuilder is called with disabled=true
+ expect(SettingComponentBuilder).toHaveBeenCalledWith(
+ {
+ componentProps: mockComponentData,
+ disabled: true,
+ onValueUpdated: onValueChangedMock,
+ },
+ {}
+ )
+ })
+
+ it('calls onValueChanged when the value is updated', () => {
+ // Simulating value update in SettingComponentBuilder
+ ;(SettingComponentBuilder as jest.Mock).mockImplementation(
+ ({ onValueUpdated }) => {
+ // Simulate calling the value update handler
+ onValueUpdated('setting1', 'new value')
+ return null
+ }
+ )
+
+ render(
+ <EngineSetting
+ componentData={mockComponentData}
+ onValueChanged={onValueChangedMock}
+ disabled={false}
+ />
+ )
+
+ // Assert that onValueChanged is called with the correct parameters
+ expect(onValueChangedMock).toHaveBeenCalledWith('setting1', 'new value')
+ })
+})