wip: testit kuntoon

Opetushallitus · Jan 8, 2025 · 828ac25 · 828ac25
1 parent 23762b3
commit 828ac25
Show file tree

Hide file tree

Showing 22 changed files with 1,317 additions and 207 deletions.
diff --git a/web/app/components-v2/controls/Checkbox.tsx b/web/app/components-v2/controls/Checkbox.tsx
@@ -25,7 +25,7 @@ export const Checkbox: React.FC<CheckboxProps> = (props) => {
         onChange={(event) => props.onChange(event.target.checked)}
         data-testid={testId}
       />
-      <label htmlFor={id}>
+      <label htmlFor={id} onClick={() => props.onChange(!props.checked)}>
         <span className="Checkbox__label">{t(props.label)}</span>
       </label>
     </div>

diff --git a/web/app/components-v2/opiskeluoikeus/KoodistoField.tsx b/web/app/components-v2/opiskeluoikeus/KoodistoField.tsx
@@ -3,7 +3,7 @@ import { t } from '../../i18n/i18n'
 import { Koodistokoodiviite } from '../../types/fi/oph/koski/schema/Koodistokoodiviite'
 import { CommonProps, common } from '../CommonProps'
 import { FieldEditorProps, FieldViewerProps } from '../forms/FormField'
-import { TestIdLayer } from '../../appstate/useTestId'
+import { TestIdLayer, useTestId } from '../../appstate/useTestId'
 import {
   Select,
   SelectOption,
@@ -24,11 +24,14 @@ export type KoodistoViewProps<T extends string> = CommonProps<
   >
 >
 
-export const KoodistoView = <T extends string>(props: KoodistoViewProps<T>) => (
-  <div {...common(props)} data-testid={props.testId}>
-    {t(props.value?.nimi) || '–'}
-  </div>
-)
+export const KoodistoView = <T extends string>(props: KoodistoViewProps<T>) => {
+  const testId = useTestId(props.testId)
+  return (
+    <div {...common(props)} data-testid={testId}>
+      {t(props.value?.nimi) || '–'}
+    </div>
+  )
+}
 
 export type KoodistoEditProps<T extends string> = CommonProps<
   FieldEditorProps<

diff --git a/web/app/components-v2/opiskeluoikeus/OpiskeluoikeudenTila.tsx b/web/app/components-v2/opiskeluoikeus/OpiskeluoikeudenTila.tsx
@@ -83,13 +83,16 @@ export const OpiskeluoikeudenTilaView = <T extends OpiskeluoikeudenTila>(
                     </TestIdText>
                   </time>,
                   <React.Fragment key={`jakso_tila_lisatiedot_${index}`}>
-                    <TestIdText id="tila">
-                      <span>{t(jakso.tila.nimi)}</span>
-                      <span>
-                        {isRahoituksellinenOpiskeluoikeusjakso(jakso) &&
-                          ` (${t(jakso.opintojenRahoitus?.nimi)})`}
-                      </span>
-                    </TestIdText>
+                    <TestIdText id="tila">{t(jakso.tila.nimi)}</TestIdText>
+                    {isRahoituksellinenOpiskeluoikeusjakso(jakso) && (
+                      <>
+                        {' ('}
+                        <TestIdText id="rahoitus">
+                          {t(jakso.opintojenRahoitus?.nimi)}
+                        </TestIdText>
+                        {')'}
+                      </>
+                    )}
                   </React.Fragment>
                 ]}
               </KeyColumnedValuesRow>

diff --git a/web/app/components-v2/opiskeluoikeus/OppiaineTable.tsx b/web/app/components-v2/opiskeluoikeus/OppiaineTable.tsx
@@ -3,16 +3,14 @@ import { constant, pipe } from 'fp-ts/lib/function'
 import * as NEA from 'fp-ts/NonEmptyArray'
 import * as NonEmptyArray from 'fp-ts/NonEmptyArray'
 import * as O from 'fp-ts/Option'
+import * as Ord from 'fp-ts/Ord'
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { ISO2FinnishDate } from '../../date/date'
 import { t } from '../../i18n/i18n'
 import { isArvioinniton } from '../../types/fi/oph/koski/schema/Arvioinniton'
 import { Arviointi } from '../../types/fi/oph/koski/schema/Arviointi'
 import { IBOpiskeluoikeus } from '../../types/fi/oph/koski/schema/IBOpiskeluoikeus'
-import {
-  IBOppiaineenSuoritus,
-  isIBOppiaineenSuoritus
-} from '../../types/fi/oph/koski/schema/IBOppiaineenSuoritus'
+import { isIBOppiaineenSuoritus } from '../../types/fi/oph/koski/schema/IBOppiaineenSuoritus'
 import { IBTheoryOfKnowledgeSuoritus } from '../../types/fi/oph/koski/schema/IBTheoryOfKnowledgeSuoritus'
 import { IBTutkinnonSuoritus } from '../../types/fi/oph/koski/schema/IBTutkinnonSuoritus'
 import { LukionArviointi } from '../../types/fi/oph/koski/schema/LukionArviointi'
@@ -40,6 +38,9 @@ import { FormModel, getValue } from '../forms/FormModel'
 import { CHARCODE_REMOVE } from '../texts/Icon'
 import { ArvosanaEdit, koodiarvoOnly } from './ArvosanaField'
 import { OppiaineTableKurssiEditor } from './OppiaineTableKurssiEditor'
+import { TestIdLayer, TestIdText } from '../../appstate/useTestId'
+import { string } from 'fp-ts'
+import { isPaikallinenKoodi } from '../../types/fi/oph/koski/schema/PaikallinenKoodi'
 
 // Vain OppiaineTablen tukemat päätason suoritukset (tätä komponenttia tullaan myöhemmin käyttämään ainakin lukion näkymille)
 export type OppiaineTableOpiskeluoikeus = IBOpiskeluoikeus
@@ -150,36 +151,46 @@ export const OppiaineTable = <T extends OppiaineTablePäätasonSuoritus>({
           {form.editMode && <th className="OppiaineTable__poisto" />}
         </tr>
       </thead>
-      {groupedOppiaineet.map(([groupName, oppiaineet], groupIndex) => (
-        <tbody key={groupIndex}>
-          {groupName && (
-            <tr>
-              <th colSpan={10}>{groupName}</th>
-            </tr>
-          )}
-          {oppiaineet.map((oppiaine, oppiaineIndex) => (
-            <OppiaineRow
-              organisaatioOid={organisaatioOid!}
-              oppiaine={oppiaine}
-              form={form}
-              showPredictedGrade={showPredictedGrade}
-              oppiainePath={[
-                ...selectedSuoritus.pathTokens,
-                'osasuoritukset',
-                oppiaineIndex
-              ]}
-              onDelete={deleteOppiaine(oppiaine)}
-              onDeleteKurssi={deleteKurssi(oppiaine)}
-              addOsasuoritusDialog={addOsasuoritusDialog}
-              onAddOsasuoritus={addOsasuoritus(oppiaine)}
-              onArviointi={addKurssiArviointi(oppiaine)}
-              onOppiaineArviointi={addOppiaineArviointi(oppiaine)}
-              onPredictedGrade={addPredictedGrade(oppiaine)}
-              key={oppiaineIndex}
-            />
-          ))}
-        </tbody>
-      ))}
+      <TestIdLayer id="oppiaineryhmät">
+        {groupedOppiaineet.map(([groupName, oppiaineet], groupIndex) => (
+          <TestIdLayer id={groupIndex} key={groupIndex}>
+            <tbody key={groupIndex}>
+              {groupName ? (
+                <tr>
+                  <th colSpan={10}>
+                    <TestIdText id="nimi">{groupName}</TestIdText>
+                  </th>
+                </tr>
+              ) : null}
+              <TestIdLayer id="oppiaineet">
+                {oppiaineet.map((oppiaine, oppiaineIndex) => (
+                  <TestIdLayer id={oppiaineIndex} key={oppiaineIndex}>
+                    <OppiaineRow
+                      organisaatioOid={organisaatioOid!}
+                      oppiaine={oppiaine}
+                      form={form}
+                      showPredictedGrade={showPredictedGrade}
+                      oppiainePath={[
+                        ...selectedSuoritus.pathTokens,
+                        'osasuoritukset',
+                        oppiaineIndex
+                      ]}
+                      onDelete={deleteOppiaine(oppiaine)}
+                      onDeleteKurssi={deleteKurssi(oppiaine)}
+                      addOsasuoritusDialog={addOsasuoritusDialog}
+                      onAddOsasuoritus={addOsasuoritus(oppiaine)}
+                      onArviointi={addKurssiArviointi(oppiaine)}
+                      onOppiaineArviointi={addOppiaineArviointi(oppiaine)}
+                      onPredictedGrade={addPredictedGrade(oppiaine)}
+                      key={oppiaineIndex}
+                    />
+                  </TestIdLayer>
+                ))}
+              </TestIdLayer>
+            </tbody>
+          </TestIdLayer>
+        ))}
+      </TestIdLayer>
     </table>
   )
 }
@@ -247,7 +258,9 @@ const OppiaineRow = <T,>({
       </td>
       <td className="OppiaineRow__oppiaine">
         <div className="OppiaineRow__nimi">
-          {oppiaineenNimi(oppiaine.koulutusmoduuli)}
+          <TestIdText id="nimi">
+            {oppiaineenNimi(oppiaine.koulutusmoduuli)}
+          </TestIdText>
         </div>
         <OppiaineenKurssit
           form={form}
@@ -259,7 +272,9 @@ const OppiaineRow = <T,>({
           onShowAddOsasuoritusDialog={showAddOsasuoritusDialog}
         />
       </td>
-      <td className="OppiaineRow__laajuus">{kurssejaYhteensä}</td>
+      <td className="OppiaineRow__laajuus">
+        <TestIdText id="laajuus">{kurssejaYhteensä}</TestIdText>
+      </td>
       {showPredictedGrade && (
         <td className="OppiaineRow__predictedGrade">
           <PredictedGrade
@@ -309,6 +324,12 @@ export type OppiaineenKurssitProps = {
   onShowAddOsasuoritusDialog: () => void
 }
 
+const kurssiNaturalOrd = Ord.contramap((kurssi: OppiaineenOsasuoritus) => {
+  const tunniste = kurssi.koulutusmoduuli.tunniste.koodiarvo
+  const match = tunniste.match(/([^\d]*)(\d*)/)
+  return match ? `${match[1]}${match[2].padStart(8, '0')}` : tunniste
+})(string.Ord)
+
 export const OppiaineenKurssit = ({
   form,
   kurssit,
@@ -317,26 +338,37 @@ export const OppiaineenKurssit = ({
   onArviointi,
   onDeleteKurssi,
   onShowAddOsasuoritusDialog
-}: OppiaineenKurssitProps) => (
-  <div className="OppiaineRow__kurssit">
-    {kurssit.map((kurssi, index) => (
-      <Kurssi
-        key={index}
-        form={form}
-        kurssi={kurssi}
-        kurssiPath={[...oppiainePath, 'osasuoritukset', index]}
-        oppiaine={oppiaine}
-        onArviointi={(a) => a && onArviointi(index, a)}
-        onDelete={() => onDeleteKurssi(index)}
-      />
-    ))}
-    {form.editMode && (
-      <FlatButton onClick={onShowAddOsasuoritusDialog}>
-        {t('Lisää osasuoritus')}
-      </FlatButton>
-    )}
-  </div>
-)
+}: OppiaineenKurssitProps) => {
+  const sortedKurssit = useMemo(
+    () => A.sort(kurssiNaturalOrd)(kurssit),
+    [kurssit]
+  )
+
+  return (
+    <div className="OppiaineRow__kurssit">
+      <TestIdLayer id="kurssit">
+        {sortedKurssit.map((kurssi, index) => (
+          <TestIdLayer id={index} key={index}>
+            <Kurssi
+              key={index}
+              form={form}
+              kurssi={kurssi}
+              kurssiPath={[...oppiainePath, 'osasuoritukset', index]}
+              oppiaine={oppiaine}
+              onArviointi={(a) => a && onArviointi(index, a)}
+              onDelete={() => onDeleteKurssi(index)}
+            />
+          </TestIdLayer>
+        ))}
+      </TestIdLayer>
+      {form.editMode && (
+        <FlatButton onClick={onShowAddOsasuoritusDialog} testId="addKurssi">
+          {t('Lisää osasuoritus')}
+        </FlatButton>
+      )}
+    </div>
+  )
+}
 
 type OppiaineArvosanaProps = {
   form: FormModel<OppiaineTableOpiskeluoikeus>
@@ -375,9 +407,9 @@ const OppiaineArvosana: React.FC<OppiaineArvosanaProps> = ({
       format={koodiarvoOnly}
     />
   ) : (
-    <span>
+    <TestIdText id="arvosana.value">
       {arvioinnit ? parasArviointi(arvioinnit)?.arvosana.koodiarvo : '-'}
-    </span>
+    </TestIdText>
   )
 }
 
@@ -415,14 +447,16 @@ const PredictedGrade: React.FC<OppiaineArvosanaProps> = ({
 }
 
 const oppiaineenNimi = (koulutusmoduuli: KoulutusmoduuliOf<Oppiaine>) =>
-  [
-    koulutusmoduuli.tunniste.nimi,
-    (koulutusmoduuli as any)?.kieli?.nimi,
-    (koulutusmoduuli as any)?.oppimäärä?.nimi
-  ]
-    .filter(notUndefined)
-    .map((s) => t(s))
-    .join(', ')
+  pipe(
+    [
+      (koulutusmoduuli as any)?.oppimäärä?.nimi ||
+        koulutusmoduuli.tunniste.nimi,
+      (koulutusmoduuli as any)?.kieli?.nimi
+    ],
+    A.filter(notUndefined),
+    A.map(t),
+    (as) => as.join(', ')
+  )
 
 type KurssiProps = {
   form: FormModel<OppiaineTableOpiskeluoikeus>
@@ -460,7 +494,10 @@ export const Kurssi: React.FC<KurssiProps> = ({
         onBlur={closeTooltip}
         aria-describedby={tooltipId}
       >
-        {kurssi.koulutusmoduuli.tunniste.koodiarvo}
+        <TestIdText id="tunniste">
+          {kurssi.koulutusmoduuli.tunniste.koodiarvo}
+          {isPaikallinenKoodi(kurssi.koulutusmoduuli.tunniste) && ' *'}
+        </TestIdText>
         {form.editMode && (
           <IconButton
             charCode={CHARCODE_REMOVE}
@@ -479,10 +516,13 @@ export const Kurssi: React.FC<KurssiProps> = ({
             suoritusClassName={kurssi.$class}
             format={koodiarvoOnly}
           />
-        ) : kurssi.arviointi ? (
-          parasArviointi(kurssi.arviointi as Arviointi[])?.arvosana.koodiarvo
         ) : (
-          '-'
+          <TestIdText id="arvosana.value">
+            {kurssi.arviointi
+              ? parasArviointi(kurssi.arviointi as Arviointi[])?.arvosana
+                  .koodiarvo
+              : '–'}
+          </TestIdText>
         )}
       </div>
       {editModalVisible ? (