@instructure/outcomes-ui 4.0.0 → 4.1.0

package/es/translated/es_ES/components/Gradebook/__mocks__/mockData.ts

@@ -0,0 +1,235 @@
+import type { LmgbUserDetails, Student, StudentMasteryScores } from '@/types/gradebook'
+
+// ============================================
+// Helper functions
+// ============================================
+
+export const createStudent = (id: string, firstName: string, lastName: string): Student => ({
+  id,
+  name: `${firstName} ${lastName}`,
+  display_name: `${firstName} ${lastName}`,
+  sortable_name: `${lastName}, ${firstName}`,
+  sis_id: 'SIS123456',
+  integration_id: 'INT789',
+  login_id: `${firstName.toLowerCase()}.${lastName.toLowerCase()}@example.com`,
+  status: 'active',
+})
+
+// ============================================
+// User details mocks (for MSW handlers)
+// ============================================
+
+export const mockUserDetailsDefault: LmgbUserDetails = {
+  course: {
+    name: 'Introduction to Computer Science',
+  },
+  user: {
+    sections: [
+      { id: 1, name: 'Section A' },
+      { id: 2, name: 'Section B' },
+    ],
+    last_login: '2024-01-15T10:30:00Z',
+  },
+}
+
+export const mockUserDetailsSingleSection: LmgbUserDetails = {
+  course: {
+    name: 'Advanced Mathematics',
+  },
+  user: {
+    sections: [{ id: 1, name: 'Honors Section' }],
+    last_login: '2024-02-08T14:20:00Z',
+  },
+}
+
+export const mockUserDetailsManySections: LmgbUserDetails = {
+  course: {
+    name: 'World History',
+  },
+  user: {
+    sections: [
+      { id: 1, name: 'Section A - Morning' },
+      { id: 2, name: 'Section B - Afternoon' },
+      { id: 3, name: 'Section C - Evening' },
+      { id: 4, name: 'Section D - Online' },
+    ],
+    last_login: '2024-02-09T09:15:00Z',
+  },
+}
+
+export const mockUserDetailsNoLogin: LmgbUserDetails = {
+  course: {
+    name: 'Biology 101',
+  },
+  user: {
+    sections: [{ id: 1, name: 'Lab Section' }],
+    last_login: null,
+  },
+}
+
+export const mockUserDetailsLongCourseName: LmgbUserDetails = {
+  course: {
+    name: 'Advanced Placement European History: Renaissance to Modern Era',
+  },
+  user: {
+    sections: [{ id: 1, name: 'AP Section' }],
+    last_login: '2024-02-01T16:45:00Z',
+  },
+}
+
+export const mockUserDetailsNoSections: LmgbUserDetails = {
+  course: {
+    name: 'Independent Study',
+  },
+  user: {
+    sections: [],
+    last_login: '2024-01-20T11:30:00Z',
+  },
+}
+
+// ============================================
+// Rollup averages
+// ============================================
+
+export const mixedPerformanceAverage = {
+  averageScore: 3,
+  averageMasteryLevel: 'near_mastery' as const,
+}
+
+export const highPerformanceAverage = {
+  averageScore: 4.67,
+  averageMasteryLevel: 'exceeds_mastery' as const,
+}
+
+export const lowPerformanceAverage = {
+  averageScore: 1.67,
+  averageMasteryLevel: 'remediation' as const,
+}
+
+export const nearMasteryAverage = {
+  averageScore: 3,
+  averageMasteryLevel: 'near_mastery' as const,
+}
+
+// ============================================
+// Common students
+// ============================================
+
+export const mockStudent = createStudent('1', 'John', 'Smith')
+export const mockStudentLongName = createStudent('2', 'Alexander Montgomery Wellington Junior', 'III')
+
+// ============================================
+// Mastery Scores
+// ============================================
+
+export const mockMasteryScores: StudentMasteryScores = {
+  grossAverage: mixedPerformanceAverage.averageScore,
+  averageIcon: mixedPerformanceAverage.averageMasteryLevel,
+  averageText: 'Mixed Performance',
+  buckets: {
+    exceeds_mastery: {
+      name: 'Exceeds Mastery',
+      icon: 'exceeds_mastery',
+      count: 2,
+    },
+    mastery: {
+      name: 'Mastery',
+      icon: 'mastery',
+      count: 3,
+    },
+    near_mastery: {
+      name: 'Near Mastery',
+      icon: 'near_mastery',
+      count: 1,
+    },
+    remediation: {
+      name: 'Remediation',
+      icon: 'remediation',
+      count: 4,
+    },
+  },
+}
+
+export const highMasteryScores: StudentMasteryScores = {
+  grossAverage: highPerformanceAverage.averageScore,
+  averageIcon: highPerformanceAverage.averageMasteryLevel,
+  averageText: 'Exceeds Mastery',
+  buckets: {
+    exceeds_mastery: {
+      name: 'Exceeds Mastery',
+      icon: 'exceeds_mastery',
+      count: 5,
+    },
+    mastery: {
+      name: 'Mastery',
+      icon: 'mastery',
+      count: 2,
+    },
+    near_mastery: {
+      name: 'Near Mastery',
+      icon: 'near_mastery',
+      count: 1,
+    },
+    remediation: {
+      name: 'Remediation',
+      icon: 'remediation',
+      count: 0,
+    },
+  },
+}
+
+export const lowMasteryScores: StudentMasteryScores = {
+  grossAverage: lowPerformanceAverage.averageScore,
+  averageIcon: lowPerformanceAverage.averageMasteryLevel,
+  averageText: 'Remediation',
+  buckets: {
+    exceeds_mastery: {
+      name: 'Exceeds Mastery',
+      icon: 'exceeds_mastery',
+      count: 0,
+    },
+    mastery: {
+      name: 'Mastery',
+      icon: 'mastery',
+      count: 1,
+    },
+    near_mastery: {
+      name: 'Near Mastery',
+      icon: 'near_mastery',
+      count: 2,
+    },
+    remediation: {
+      name: 'Remediation',
+      icon: 'remediation',
+      count: 5,
+    },
+  },
+}
+
+export const unassessedMasteryScores: StudentMasteryScores = {
+  grossAverage: null,
+  averageIcon: 'unassessed',
+  averageText: 'Unassessed',
+  buckets: {
+    exceeds_mastery: {
+      name: 'Exceeds Mastery',
+      icon: 'exceeds_mastery',
+      count: 0,
+    },
+    mastery: {
+      name: 'Mastery',
+      icon: 'mastery',
+      count: 0,
+    },
+    near_mastery: {
+      name: 'Near Mastery',
+      icon: 'near_mastery',
+      count: 0,
+    },
+    remediation: {
+      name: 'Remediation',
+      icon: 'remediation',
+      count: 0,
+    },
+  },
+}

package/es/translated/es_ES/components/Gradebook/__tests__/index.test.tsx

@@ -0,0 +1,318 @@
+import React from 'react'
+import { expect, jest } from '@jest/globals'
+import { render, screen, waitFor } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+jest.mock('@/i18n/translationLoader', () => ({
+  loadTranslationContext: () => ({
+    keys: () => [],
+  }),
+  loadDefaultTranslations: () => ({}),
+}))
+
+jest.mock('@/i18n/i18n')
+
+jest.mock('../context/GradebookConfigContext', () => ({
+  GradebookConfigProvider: ({ children, config }: { children: React.ReactNode; config: unknown }) => (
+    <div data-testid="gradebook-config-provider" data-config={JSON.stringify(config)}>
+      {children}
+    </div>
+  ),
+}))
+
+jest.mock('../context/GradebookAppContext', () => ({
+  GradebookAppProvider: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="gradebook-app-provider">
+      {children}
+    </div>
+  ),
+}))
+
+import GradebookApp from '../index'
+import type { GradebookConfig } from '../context/GradebookConfigContext'
+import * as i18nModule from '@/i18n/i18n'
+const mockSetupI18n = i18nModule.setupI18n as jest.MockedFunction<typeof i18nModule.setupI18n>
+
+describe('GradebookApp', () => {
+  const mockConfig: GradebookConfig = {
+    components: {
+      StudentPopover: () => <div>Student Popover</div>,
+      SettingsTrayContent: () => <div>Settings</div>,
+    },
+  }
+
+  const mockSettingsData = {}
+  const mockOnSave = jest.fn<(s: object) => Promise<import('../context/GradebookAppContext').SaveSettingsResult>>().mockResolvedValue({ success: true })
+  const mockSettings = { settings: mockSettingsData, onSave: mockOnSave }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('Translation Configuration', () => {
+    it('renders with default translation config (i18n enabled)', async () => {
+      render(<GradebookApp config={mockConfig} settings={mockSettings} />)
+
+      // Should call setupI18n with default language
+      expect(mockSetupI18n).toHaveBeenCalledWith('en', undefined)
+
+      // After effect runs, content should be visible
+      await waitFor(() => {
+        expect(screen.getByText('GradebookAppRoot')).toBeInTheDocument()
+      })
+    })
+
+    it('renders with i18n disabled', () => {
+      render(
+        <GradebookApp
+          config={mockConfig}
+          settings={mockSettings}
+          translations={{ i18nEnabled: false }}
+        />
+      )
+
+      // Should not call setupI18n
+      expect(mockSetupI18n).not.toHaveBeenCalled()
+
+      // Should render immediately without waiting
+      expect(screen.getByText('GradebookAppRoot')).toBeInTheDocument()
+    })
+
+    it('renders with custom language', async () => {
+      render(
+        <GradebookApp
+          config={mockConfig}
+          settings={mockSettings}
+          translations={{ language: 'es', i18nEnabled: true }}
+        />
+      )
+
+      expect(mockSetupI18n).toHaveBeenCalledWith('es', undefined)
+
+      await waitFor(() => {
+        expect(screen.getByText('GradebookAppRoot')).toBeInTheDocument()
+      })
+    })
+
+    it('renders with custom language and resource overrides', async () => {
+      const resourceOverrides = {
+        en: {
+          'test.key': 'Test Value'
+        }
+      }
+
+      render(
+        <GradebookApp
+          config={mockConfig}
+          settings={mockSettings}
+          translations={{
+            language: 'fr',
+            i18nEnabled: true,
+            resourceOverrides,
+          }}
+        />
+      )
+
+      expect(mockSetupI18n).toHaveBeenCalledWith('fr', resourceOverrides)
+
+      await waitFor(() => {
+        expect(screen.getByText('GradebookAppRoot')).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('Children Rendering', () => {
+    it('renders custom children when provided', async () => {
+      render(
+        <GradebookApp
+          config={mockConfig}
+          settings={mockSettings}
+          translations={{ i18nEnabled: false }}
+        >
+          <div data-testid="custom-content">Custom Content</div>
+        </GradebookApp>
+      )
+
+      expect(screen.getByTestId('custom-content')).toBeInTheDocument()
+      expect(screen.getByText('Custom Content')).toBeInTheDocument()
+    })
+
+    it('renders fallback content when no children provided', () => {
+      render(
+        <GradebookApp
+          config={mockConfig}
+          settings={mockSettings}
+          translations={{ i18nEnabled: false }}
+        />
+      )
+
+      expect(screen.getByText('GradebookAppRoot')).toBeInTheDocument()
+    })
+  })
+
+  describe('GradebookConfigProvider Integration', () => {
+    it('passes gradebookConfig to GradebookConfigProvider', () => {
+      render(
+        <GradebookApp
+          config={mockConfig}
+          settings={mockSettings}
+          translations={{ i18nEnabled: false }}
+        />
+      )
+
+      const provider = screen.getByTestId('gradebook-config-provider')
+      expect(provider).toBeInTheDocument()
+
+      const configData = provider.getAttribute('data-config')
+      expect(configData).toBeTruthy()
+
+      const parsedConfig = JSON.parse(configData!)
+      expect(parsedConfig).toMatchObject({
+        components: expect.any(Object),
+      })
+    })
+
+    it('wraps children with GradebookConfigProvider', () => {
+      render(
+        <GradebookApp
+          config={mockConfig}
+          settings={mockSettings}
+          translations={{ i18nEnabled: false }}
+        >
+          <div data-testid="test-child">Test</div>
+        </GradebookApp>
+      )
+
+      const provider = screen.getByTestId('gradebook-config-provider')
+      const child = screen.getByTestId('test-child')
+
+      expect(provider).toContainElement(child)
+    })
+  })
+
+  describe('Loading State', () => {
+    it('shows content after i18n is ready', async () => {
+      render(
+        <GradebookApp
+          config={mockConfig}
+          settings={mockSettings}
+          translations={{ language: 'en', i18nEnabled: true }}
+        >
+          <div data-testid="child-content">Child</div>
+        </GradebookApp>
+      )
+
+      // After effect runs, content should appear
+      await waitFor(() => {
+        expect(screen.getByTestId('child-content')).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('Effect Dependencies', () => {
+    it('re-runs setupI18n when language changes', async () => {
+      const { rerender } = render(
+        <GradebookApp
+          config={mockConfig}
+          settings={mockSettings}
+          translations={{ language: 'en', i18nEnabled: true }}
+        />
+      )
+
+      expect(mockSetupI18n).toHaveBeenCalledWith('en', undefined)
+      expect(mockSetupI18n).toHaveBeenCalledTimes(1)
+
+      rerender(
+        <GradebookApp
+          config={mockConfig}
+          settings={mockSettings}
+          translations={{ language: 'es', i18nEnabled: true }}
+        />
+      )
+
+      await waitFor(() => {
+        expect(mockSetupI18n).toHaveBeenCalledWith('es', undefined)
+        expect(mockSetupI18n).toHaveBeenCalledTimes(2)
+      })
+    })
+
+    it('re-runs setupI18n when resourceOverrides change', async () => {
+      const overrides1 = { en: { key1: 'value1' } }
+      const overrides2 = { en: { key2: 'value2' } }
+
+      const { rerender } = render(
+        <GradebookApp
+          config={mockConfig}
+          settings={mockSettings}
+          translations={{ language: 'en', i18nEnabled: true, resourceOverrides: overrides1 }}
+        />
+      )
+
+      expect(mockSetupI18n).toHaveBeenCalledWith('en', overrides1)
+
+      rerender(
+        <GradebookApp
+          config={mockConfig}
+          settings={mockSettings}
+          translations={{ language: 'en', i18nEnabled: true, resourceOverrides: overrides2 }}
+        />
+      )
+
+      await waitFor(() => {
+        expect(mockSetupI18n).toHaveBeenCalledWith('en', overrides2)
+        expect(mockSetupI18n).toHaveBeenCalledTimes(2)
+      })
+    })
+
+    it('does not re-run setupI18n when i18nEnabled changes to false', () => {
+      const { rerender } = render(
+        <GradebookApp
+          config={mockConfig}
+          settings={mockSettings}
+          translations={{ language: 'en', i18nEnabled: true }}
+        />
+      )
+
+      expect(mockSetupI18n).toHaveBeenCalledTimes(1)
+
+      rerender(
+        <GradebookApp
+          config={mockConfig}
+          settings={mockSettings}
+          translations={{ i18nEnabled: false }}
+        />
+      )
+
+      // setupI18n should only have been called once
+      expect(mockSetupI18n).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe('Type Safety', () => {
+    it('accepts gradebookConfig with custom settings type', () => {
+      interface CustomSettings {
+        customOption: boolean
+      }
+
+      const customConfig: GradebookConfig<CustomSettings> = {
+        components: {
+          StudentPopover: () => <div>Popover</div>,
+          SettingsTrayContent: () => <div>Settings</div>,
+        },
+      }
+
+      const customSettingsData: CustomSettings = { customOption: true }
+      const customOnSave = jest.fn<(s: CustomSettings) => Promise<import('../context/GradebookAppContext').SaveSettingsResult>>().mockResolvedValue({ success: true })
+
+      render(
+        <GradebookApp<CustomSettings>
+          config={customConfig}
+          settings={{ settings: customSettingsData, onSave: customOnSave }}
+          translations={{ i18nEnabled: false }}
+        />
+      )
+
+      expect(screen.getByText('GradebookAppRoot')).toBeInTheDocument()
+    })
+  })
+})

package/es/translated/es_ES/components/Gradebook/context/GradebookAppContext/GradebookAppContext.tsx

@@ -0,0 +1,17 @@
+import { createContext } from 'react'
+
+export interface SaveSettingsResult {
+  success: boolean
+  error?: string
+}
+
+export interface GradebookAppContextValue<TSettings = object> {
+  settings: {
+    settings: TSettings
+    setSettings: (settings: TSettings) => void
+    onSave: (settings: TSettings) => Promise<SaveSettingsResult>
+  }
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const GradebookAppContext = createContext<GradebookAppContextValue<any> | null>(null)

package/es/translated/es_ES/components/Gradebook/context/GradebookAppContext/GradebookAppProvider.tsx

@@ -0,0 +1,33 @@
+import React, { PropsWithChildren, useState } from 'react'
+import { GradebookAppContextValue, GradebookAppContext, SaveSettingsResult } from './GradebookAppContext'
+
+export interface GradebookAppProviderProps<TSettings> {
+  settings: {
+    settings: TSettings
+    onSave: (settings: TSettings) => Promise<SaveSettingsResult>
+  }
+}
+
+export const GradebookAppProvider = <TSettings,>({
+  children,
+  settings: {
+    settings: originalSettings,
+    onSave,
+  },
+}: PropsWithChildren<GradebookAppProviderProps<TSettings>>) => {
+  const [ settings, setSettings ] = useState<TSettings>(originalSettings)
+
+  const value: GradebookAppContextValue<TSettings> = {
+    settings: {
+      settings,
+      setSettings,
+      onSave,
+    },
+  }
+
+  return (
+    <GradebookAppContext.Provider value={value}>
+      {children}
+    </GradebookAppContext.Provider>
+  )
+}