@instructure/outcomes-ui 4.0.0 → 4.1.0

package/es/translated/da/components/Gradebook/icons/MasteryLevelIcon/__tests__/index.test.tsx

@@ -0,0 +1,175 @@
+import React from 'react'
+import { expect } from '@jest/globals'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import MasteryLevelIcon from '../index'
+import type { MasteryLevelIconProps } from '../index'
+import type { MasteryLevel } from '@/types/gradebook'
+
+describe('MasteryLevelIcon', () => {
+  const defaultProps: MasteryLevelIconProps = {
+    masteryLevel: 'mastery',
+  }
+
+  describe('Rendering mastery level icons', () => {
+    it.each<MasteryLevel>([
+      'exceeds_mastery',
+      'mastery',
+      'near_mastery',
+      'remediation',
+      'no_evidence',
+      'unassessed',
+    ])('renders %s icon', (masteryLevel) => {
+      const { container } = render(<MasteryLevelIcon masteryLevel={masteryLevel} />)
+      const svg = container.querySelector('svg')
+      expect(svg).toBeInTheDocument()
+    })
+  })
+
+  describe('Props forwarding', () => {
+    it('forwards fill prop to SVG icon', () => {
+      const { container } = render(<MasteryLevelIcon {...defaultProps} fill="#FF0000" />)
+      const svg = container.querySelector('svg')
+      expect(svg).toHaveAttribute('fill', '#FF0000')
+    })
+
+    it('forwards width prop to SVG icon', () => {
+      const { container } = render(<MasteryLevelIcon {...defaultProps} width="50" />)
+      const svg = container.querySelector('svg')
+      expect(svg).toHaveAttribute('width', '50')
+    })
+
+    it('forwards numeric width prop to SVG icon', () => {
+      const { container } = render(<MasteryLevelIcon {...defaultProps} width={50} />)
+      const svg = container.querySelector('svg')
+      expect(svg).toHaveAttribute('width', '50')
+    })
+
+    it('forwards height prop to SVG icon', () => {
+      const { container } = render(<MasteryLevelIcon {...defaultProps} height="50" />)
+      const svg = container.querySelector('svg')
+      expect(svg).toHaveAttribute('height', '50')
+    })
+
+    it('forwards numeric height prop to SVG icon', () => {
+      const { container } = render(<MasteryLevelIcon {...defaultProps} height={50} />)
+      const svg = container.querySelector('svg')
+      expect(svg).toHaveAttribute('height', '50')
+    })
+
+    it('forwards style prop to SVG icon', () => {
+      const customStyle = { marginLeft: '10px', opacity: 0.5 }
+      const { container } = render(<MasteryLevelIcon {...defaultProps} style={customStyle} />)
+      const svg = container.querySelector('svg')
+      expect(svg).toHaveStyle(customStyle)
+    })
+  })
+
+  describe('Accessibility props', () => {
+    it('forwards aria-hidden prop to SVG icon', () => {
+      const { container } = render(<MasteryLevelIcon {...defaultProps} ariaHidden={true} />)
+      const svg = container.querySelector('svg')
+      expect(svg).toHaveAttribute('aria-hidden', 'true')
+    })
+
+    it('forwards aria-label prop to SVG icon', () => {
+      const { container } = render(
+        <MasteryLevelIcon {...defaultProps} ariaLabel="Mastery level achieved" />
+      )
+      const svg = container.querySelector('svg')
+      expect(svg).toHaveAttribute('aria-label', 'Mastery level achieved')
+    })
+
+    it('sets both aria-hidden and aria-label when provided', () => {
+      const { container } = render(
+        <MasteryLevelIcon
+          {...defaultProps}
+          ariaHidden={false}
+          ariaLabel="Achievement indicator"
+        />
+      )
+      const svg = container.querySelector('svg')
+      expect(svg).toHaveAttribute('aria-hidden', 'false')
+      expect(svg).toHaveAttribute('aria-label', 'Achievement indicator')
+    })
+  })
+
+  describe('Multiple props combination', () => {
+    it('forwards all props simultaneously', () => {
+      const customStyle = { transform: 'rotate(45deg)' }
+      const { container } = render(
+        <MasteryLevelIcon
+          masteryLevel="exceeds_mastery"
+          fill="#00FF00"
+          width={100}
+          height={100}
+          style={customStyle}
+          ariaHidden={true}
+          ariaLabel="Exceeds mastery level"
+        />
+      )
+      const svg = container.querySelector('svg')
+      expect(svg).toBeInTheDocument()
+      expect(svg).toHaveAttribute('fill', '#00FF00')
+      expect(svg).toHaveAttribute('width', '100')
+      expect(svg).toHaveAttribute('height', '100')
+      expect(svg).toHaveStyle(customStyle)
+      expect(svg).toHaveAttribute('aria-hidden', 'true')
+      expect(svg).toHaveAttribute('aria-label', 'Exceeds mastery level')
+    })
+  })
+
+  describe('Invalid mastery level handling', () => {
+    let consoleWarnSpy: jest.SpyInstance
+
+    beforeEach(() => {
+      consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {})
+    })
+
+    afterEach(() => {
+      consoleWarnSpy.mockRestore()
+    })
+
+    it('returns null for invalid mastery level', () => {
+      const { container } = render(
+        <MasteryLevelIcon masteryLevel={'invalid_level' as MasteryLevel} />
+      )
+      expect(container.firstChild).toBeNull()
+    })
+
+    it('logs warning for invalid mastery level', () => {
+      render(<MasteryLevelIcon masteryLevel={'invalid_level' as MasteryLevel} />)
+      expect(consoleWarnSpy).toHaveBeenCalledWith(
+        'MasteryLevelIcon: No icon found for mastery level "invalid_level"'
+      )
+    })
+
+    it('does not log warning for valid mastery levels', () => {
+      render(<MasteryLevelIcon masteryLevel="mastery" />)
+      expect(consoleWarnSpy).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('Component rendering variations', () => {
+    it('renders with only required masteryLevel prop', () => {
+      const { container } = render(<MasteryLevelIcon masteryLevel="remediation" />)
+      const svg = container.querySelector('svg')
+      expect(svg).toBeInTheDocument()
+    })
+
+    it('renders different icons for different mastery levels', () => {
+      const { container: container1 } = render(<MasteryLevelIcon masteryLevel="mastery" />)
+      const { container: container2 } = render(
+        <MasteryLevelIcon masteryLevel="exceeds_mastery" />
+      )
+
+      const svg1 = container1.querySelector('svg')
+      const svg2 = container2.querySelector('svg')
+
+      expect(svg1).toBeInTheDocument()
+      expect(svg2).toBeInTheDocument()
+      // Both should be SVGs but represent different icons
+      expect(svg1).not.toEqual(svg2)
+    })
+  })
+})

package/es/translated/da/components/Gradebook/icons/MasteryLevelIcon/index.tsx

@@ -0,0 +1,60 @@
+import type { MasteryLevel } from '@/types/gradebook'
+import React, { SVGProps } from 'react'
+import { ExceedsMasteryIcon } from './ExceedsMasteryIcon'
+import { MasteryIcon } from './MasteryIcon'
+import { NearMasteryIcon } from './NearMasteryIcon'
+import { RemediationIcon } from './RemediationIcon'
+import { NoEvidenceIcon } from './NoEvidenceIcon'
+import { UnassessedIcon } from './UnassessedIcon'
+
+export interface MasteryLevelIconProps {
+  masteryLevel: MasteryLevel
+  fill?: string
+  width?: string | number
+  height?: string | number
+  style?: React.CSSProperties
+  ariaHidden?: boolean
+  ariaLabel?: string
+}
+
+const MASTERY_LEVEL_ICONS: Record<
+  MasteryLevel,
+  React.ComponentType<SVGProps<SVGSVGElement>>
+> = {
+  exceeds_mastery: ExceedsMasteryIcon,
+  mastery: MasteryIcon,
+  near_mastery: NearMasteryIcon,
+  remediation: RemediationIcon,
+  no_evidence: NoEvidenceIcon,
+  unassessed: UnassessedIcon,
+}
+
+export const MasteryLevelIcon: React.FC<MasteryLevelIconProps> = ({
+  masteryLevel,
+  fill,
+  width,
+  height,
+  style,
+  ariaHidden,
+  ariaLabel,
+}) => {
+  const Icon = MASTERY_LEVEL_ICONS[masteryLevel]
+
+  if (!Icon) {
+    console.warn(`MasteryLevelIcon: No icon found for mastery level "${masteryLevel}"`)
+    return null
+  }
+
+  return (
+    <Icon
+      fill={fill}
+      width={width}
+      height={height}
+      style={style}
+      aria-hidden={ariaHidden}
+      aria-label={ariaLabel}
+    />
+  )
+}
+
+export default MasteryLevelIcon

package/es/translated/da/components/Gradebook/index.tsx

@@ -0,0 +1,61 @@
+import React, { PropsWithChildren, useEffect, useState } from 'react'
+import { setupI18n } from '../../i18n/i18n'
+import { type Translations } from 'format-message'
+import { GradebookConfigProvider, type GradebookConfig } from './context/GradebookConfigContext'
+import { GradebookAppProvider, type SaveSettingsResult } from './context/GradebookAppContext'
+
+interface I18nDisabledConfig {
+  i18nEnabled: false
+  language?: never
+  resourceOverrides?: never
+}
+
+interface I18nEnabledConfig {
+  i18nEnabled?: true
+  language: string
+  resourceOverrides?: Translations
+}
+
+export type TranslationConfig = I18nEnabledConfig | I18nDisabledConfig
+
+export type { SaveSettingsResult }
+
+export interface GradebookAppProps<TSettings = object> {
+  config: GradebookConfig<TSettings>
+  settings: {
+    settings: TSettings
+    onSave: (settings: TSettings) => Promise<SaveSettingsResult>
+  }
+  translations?: TranslationConfig
+}
+
+const GradebookApp = <TSettings extends object = object>({
+  config,
+  settings,
+  translations = { language: 'en', i18nEnabled: true },
+  children,
+}: PropsWithChildren<GradebookAppProps<TSettings>>) => {
+  const { language, resourceOverrides, i18nEnabled } = translations
+  const [ i18nReady, setI18nReady ] = useState(false)
+
+  useEffect(() => {
+    if (i18nEnabled) {
+      setupI18n(language, resourceOverrides)
+      setI18nReady(true)
+    }
+  }, [language, resourceOverrides, i18nEnabled])
+
+  if (i18nEnabled && !i18nReady) {
+    return null
+  }
+
+  return (
+    <GradebookConfigProvider config={config}>
+      <GradebookAppProvider settings={settings}>
+        {children || <div>GradebookAppRoot</div>}
+      </GradebookAppProvider>
+    </GradebookConfigProvider>
+  )
+}
+
+export default GradebookApp

package/es/translated/da/components/Gradebook/popovers/StudentPopover/__tests__/index.test.tsx

@@ -0,0 +1,220 @@
+import React from 'react'
+import { render, screen, waitFor, within, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { GradebookConfigProvider } from '@/components/Gradebook/context/GradebookConfigContext'
+import {
+  mockStudent,
+  mockStudentLongName,
+  mockUserDetailsDefault,
+  mockUserDetailsNoSections,
+  mockMasteryScores,
+} from '@/components/Gradebook/__mocks__/mockData'
+import { StudentPopover } from '..'
+import type { StudentPopoverProps } from '..'
+
+jest.mock('format-message', () => (msg: string) => msg)
+
+describe('StudentPopover', () => {
+  const defaultProps: StudentPopoverProps = {
+    student: mockStudent,
+    studentName: mockStudent.display_name,
+    userDetails: mockUserDetailsDefault,
+    masteryScores: mockMasteryScores,
+    studentGradesUrl: '/courses/123/grades/1',
+  }
+
+  const renderComponent = (props: Partial<StudentPopoverProps> = {}) => {
+    return render(
+      <GradebookConfigProvider
+        config={{
+          components: {
+            StudentPopover: () => null,
+            SettingsTrayContent: () => null,
+          },
+        }}
+      >
+        <StudentPopover {...{ ...defaultProps, ...props } as StudentPopoverProps} />
+      </GradebookConfigProvider>
+    )
+  }
+
+  describe('Rendering', () => {
+    it('renders the student name as a clickable link', () => {
+      renderComponent()
+      const link = screen.getByTestId('student-cell-link')
+      expect(link).toBeInTheDocument()
+      expect(within(link).getByText(mockStudent.display_name)).toBeInTheDocument()
+    })
+
+    it('renders long student names with truncation', () => {
+      renderComponent({
+        student: mockStudentLongName,
+        studentName: mockStudentLongName.display_name,
+      })
+      const link = screen.getByTestId('student-cell-link')
+      expect(link).toBeInTheDocument()
+    })
+
+    it('does not render popover content initially', () => {
+      renderComponent()
+      expect(screen.queryByTestId('lmgb-student-popover-avatar')).not.toBeInTheDocument()
+    })
+
+    it('renders custom header when headerOverride is provided', async () => {
+      renderComponent({
+        headerOverride: <div data-testid="custom-header">Custom Header</div>,
+      })
+
+      fireEvent.click(screen.getByTestId('student-cell-link'))
+
+      expect(await screen.findByTestId('custom-header')).toBeInTheDocument()
+    })
+
+    it('renders custom mastery scores when masteryScoresOverride is provided', async () => {
+      renderComponent({
+        masteryScoresOverride: <div data-testid="custom-mastery-scores">Custom Mastery Scores</div>,
+      })
+
+      fireEvent.click(screen.getByTestId('student-cell-link'))
+
+      expect(await screen.findByTestId('custom-mastery-scores')).toBeInTheDocument()
+    })
+
+    it('renders custom actions when actionsOverride is provided', async () => {
+      renderComponent({
+        actionsOverride: <div data-testid="custom-actions">Custom Actions</div>,
+      })
+
+      fireEvent.click(screen.getByTestId('student-cell-link'))
+
+      expect(await screen.findByTestId('custom-actions')).toBeInTheDocument()
+      expect(screen.queryByText('Message')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Popover Interaction', () => {
+    it('opens and closes popover', async () => {
+      renderComponent()
+
+      fireEvent.click(screen.getByTestId('student-cell-link'))
+
+      expect(await screen.findByTestId('lmgb-student-popover-avatar')).toBeInTheDocument()
+
+      fireEvent.click(screen.getByRole('button', { name: 'Close' }))
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('lmgb-student-popover-avatar')).not.toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('User Details Display', () => {
+    it('displays user details including avatar, name, course, and sections', async () => {
+      renderComponent()
+
+      fireEvent.click(screen.getByTestId('student-cell-link'))
+
+      await screen.findByTestId('lmgb-student-popover-avatar')
+      expect(screen.getAllByText(mockStudent.display_name).length).toBeGreaterThan(0)
+      expect(screen.getByText('Introduction to Computer Science')).toBeInTheDocument()
+      expect(screen.getByText('Section A, Section B')).toBeInTheDocument()
+    })
+
+    it('does not display sections when none exist', async () => {
+      renderComponent({ userDetails: mockUserDetailsNoSections })
+
+      fireEvent.click(screen.getByTestId('student-cell-link'))
+
+      await screen.findByTestId('lmgb-student-popover-avatar')
+
+      expect(screen.queryByText(/Section/)).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Action Links', () => {
+    it('displays action links with correct behavior', async () => {
+      const gradesUrl = '/courses/123/grades/1'
+      renderComponent({ studentGradesUrl: gradesUrl })
+
+      fireEvent.click(screen.getByTestId('student-cell-link'))
+
+      const messageLink = await screen.findByText('Message')
+      expect(messageLink).toBeInTheDocument()
+
+      const masteryLink = screen.getByText('View Mastery Report')
+      expect(masteryLink.closest('a')).toHaveAttribute('href', gradesUrl)
+    })
+
+    it('handles message link click', async () => {
+      renderComponent()
+
+      fireEvent.click(screen.getByTestId('student-cell-link'))
+
+      const messageLink = await screen.findByText('Message')
+
+      expect(() => fireEvent.click(messageLink)).not.toThrow()
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('has accessible close button', async () => {
+      renderComponent()
+
+      fireEvent.click(screen.getByTestId('student-cell-link'))
+
+      expect(await screen.findByRole('button', { name: 'Close' })).toBeInTheDocument()
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('handles missing mastery scores gracefully', async () => {
+      renderComponent({ masteryScores: undefined })
+
+      fireEvent.click(screen.getByTestId('student-cell-link'))
+
+      await screen.findByTestId('lmgb-student-popover-avatar')
+
+      expect(screen.getAllByText(mockStudent.display_name).length).toBeGreaterThan(0)
+    })
+  })
+
+  describe('Loading State', () => {
+    it('shows a spinner when isLoading is true', async () => {
+      renderComponent({ isLoading: true })
+
+      fireEvent.click(screen.getByTestId('student-cell-link'))
+
+      expect(await screen.findByTitle('Loading user details')).toBeInTheDocument()
+    })
+
+    it('does not show student details when isLoading is true', async () => {
+      renderComponent({ isLoading: true })
+
+      fireEvent.click(screen.getByTestId('student-cell-link'))
+
+      await screen.findByTitle('Loading user details')
+
+      expect(screen.queryByTestId('lmgb-student-popover-avatar')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Error State', () => {
+    it('shows an error message when error prop is provided', async () => {
+      renderComponent({ error: 'Failed to load student details' })
+
+      fireEvent.click(screen.getByTestId('student-cell-link'))
+
+      expect(await screen.findByText('Failed to load student details')).toBeInTheDocument()
+    })
+
+    it('does not show student details when error is present', async () => {
+      renderComponent({ error: 'Something went wrong' })
+
+      fireEvent.click(screen.getByTestId('student-cell-link'))
+
+      await screen.findByText('Something went wrong')
+
+      expect(screen.queryByTestId('lmgb-student-popover-avatar')).not.toBeInTheDocument()
+    })
+  })
+})