@instructure/quiz-core 22.17.0 → 22.18.0

package/src/common/middleware/__tests__/quizTimerWebSocketMiddleware.test.js

@@ -0,0 +1,220 @@
+import {expect, vi} from 'vitest'
+import {SET_WS_TOKEN, QUIZ_SUBMISSION_EVENT} from '@instructure/quiz-common/constants'
+import {
+  createWebsocket,
+  handleExtraTime,
+  parseJwt,
+  initializeWebSocket,
+  handleWebSocketMessage,
+  createQuizTimerWebSocketMiddleware,
+} from '../quizTimerWebSocketMiddleware'
+
+describe('QuizTimerWebSocketMiddleware', () => {
+  describe('createWebsocket', () => {
+    it('should create a WebSocket with the correct URL', () => {
+      const url = 'ws://example.com'
+      const token = 'test-token'
+      const websocket = createWebsocket(url, token)
+      expect(websocket.url).toBe(`${url}/?token=${token}`)
+    })
+  })
+
+  describe('handleExtraTime', () => {
+    describe('when extraTimeInSeconds AND endAt is null, unlimited accomodation has been added, therefore', () => {
+      it('calls actions with appropriate parameters ', () => {
+        const extraTimeInSeconds = null
+        const endAt = null
+
+        const updateTimeAction = vi.fn()
+        const notifyTimeAdded = vi.fn()
+
+        handleExtraTime(extraTimeInSeconds, endAt, updateTimeAction, notifyTimeAdded)
+
+        expect(updateTimeAction).toHaveBeenCalledWith(expect.anything(), false)
+        expect(notifyTimeAdded).toHaveBeenCalledWith(false, null)
+      })
+    })
+
+    describe('when extraTimeInSeconds AND endAt is not null', () => {
+      it('should update time and notify time added', () => {
+        const now = Date.now()
+        vi.spyOn(Date, 'now').mockReturnValue(now)
+
+        const extraTimeInSeconds = 120
+        const endAt = new Date(now + extraTimeInSeconds * 1000).toISOString()
+
+        const updateTimeAction = vi.fn()
+        const notifyTimeAdded = vi.fn()
+
+        handleExtraTime(extraTimeInSeconds, endAt, updateTimeAction, notifyTimeAdded)
+
+        // updateTimeAction receives (remainingTimeInSeconds, !isUnlimited)
+        expect(updateTimeAction).toHaveBeenCalledWith(120, true)
+        expect(notifyTimeAdded).toHaveBeenCalledWith(true, '2 minutes')
+      })
+    })
+  })
+
+  describe('parseJwt', () => {
+    it('should parse a valid JWT token', () => {
+      const token = 'header.eyJhdWQiOiJ3cyJ9.signature'
+      const parsed = parseJwt(token)
+      expect(parsed).toEqual({aud: 'ws'})
+    })
+
+    it('should return null for an invalid JWT token', () => {
+      const token = 'invalid.token'
+      const parsed = parseJwt(token)
+      expect(parsed).toBeNull()
+    })
+  })
+
+  describe('initializeWebSocket', () => {
+    it('should initialize WebSocket with valid token', () => {
+      const token = 'header.eyJhdWQiOiJ3cyJ9.signature'
+      const createWebsocketFn = vi.fn()
+      initializeWebSocket(token, createWebsocketFn)
+      expect(createWebsocketFn).toHaveBeenCalledWith('ws', token)
+    })
+
+    it('should return null for invalid token', () => {
+      const token = 'invalid.token'
+      const createWebsocketFn = vi.fn()
+      const result = initializeWebSocket(token, createWebsocketFn)
+      expect(result).toBeNull()
+    })
+  })
+
+  describe('handleWebSocketMessage', () => {
+    let boundTakingApiActions
+    let handleExtraTime
+
+    beforeEach(() => {
+      boundTakingApiActions = {
+        updateTime: vi.fn(),
+        notifyTimeAdded: vi.fn(),
+      }
+      handleExtraTime = vi.fn()
+    })
+
+    // afterEach(() => {
+    //   vi.restoreAllMocks()
+    // })
+
+    it('should return if WebSocket message data is missing', () => {
+      const message = {
+        data: JSON.stringify({
+          message: {},
+        }),
+      }
+      handleWebSocketMessage(message, boundTakingApiActions, handleExtraTime)
+      expect(handleExtraTime).not.toHaveBeenCalled()
+    })
+
+    const messageTestCases = [
+      {
+        description: 'AWS message data',
+        getMessage: (type, extra_time_in_seconds, end_at) => ({
+          data: JSON.stringify({
+            data: {
+              type,
+              extra_time_in_seconds,
+              end_at,
+            },
+          }),
+        }),
+      },
+      {
+        description: 'ActionCable message data',
+        getMessage: (type, extra_time_in_seconds, end_at) => ({
+          data: JSON.stringify({
+            message: {
+              data: {
+                type,
+                extra_time_in_seconds,
+                end_at,
+              },
+            },
+          }),
+        }),
+      },
+    ]
+
+    messageTestCases.forEach(({description, getMessage}) => {
+      describe(`it should parse ${description} correctly`, () => {
+        it("shouldn't call handleExtraTime when type is not 'accommodation_changed'", () => {
+          const message = getMessage('not_accommodation_changed', 120, undefined)
+
+          handleWebSocketMessage(message, boundTakingApiActions, handleExtraTime)
+          expect(handleExtraTime).not.toHaveBeenCalled()
+
+          const message2 = getMessage(
+            'not_accommodation_changed',
+            undefined,
+            new Date().toISOString(),
+          )
+          handleWebSocketMessage(message2, boundTakingApiActions, handleExtraTime)
+          expect(handleExtraTime).not.toHaveBeenCalled()
+        })
+
+        it("should call handleExtraTime when type is 'accomodation_changed'", () => {
+          const extra_time_in_seconds = 120
+          const end_at = new Date().toISOString()
+          const message = getMessage('accommodation_changed', extra_time_in_seconds, end_at)
+          handleWebSocketMessage(message, boundTakingApiActions, handleExtraTime)
+          expect(handleExtraTime).toHaveBeenCalledWith(
+            extra_time_in_seconds,
+            end_at,
+            boundTakingApiActions.updateTime,
+            boundTakingApiActions.notifyTimeAdded,
+          )
+        })
+      })
+    })
+  })
+
+  describe('createQuizTimerWebSocketMiddleware', () => {
+    let store, next, action, createWebsocketFn
+
+    beforeEach(() => {
+      store = {
+        dispatch: vi.fn(),
+      }
+      next = vi.fn()
+      action = {}
+      createWebsocketFn = vi.fn()
+    })
+
+    it('should initialize WebSocket and handle messages', () => {
+      const token = 'header.eyJhdWQiOiJ3cyJ9.signature'
+      action.type = SET_WS_TOKEN
+      action.payload = {wsToken: token}
+      const socket = {
+        addEventListener: vi.fn(),
+        close: vi.fn(),
+      }
+      createWebsocketFn.mockReturnValue(socket)
+      const middleware = createQuizTimerWebSocketMiddleware(createWebsocketFn)
+      middleware(store)(next)(action)
+      expect(createWebsocketFn).toHaveBeenCalledWith('ws', token)
+      expect(socket.addEventListener).toHaveBeenCalled()
+    })
+
+    it('should close WebSocket on QUIZ_SUBMISSION_EVENT', () => {
+      const token = 'header.eyJhdWQiOiJ3cyJ9.signature'
+      action.type = SET_WS_TOKEN
+      action.payload = {wsToken: token}
+      const socket = {
+        addEventListener: vi.fn(),
+        close: vi.fn(),
+      }
+      createWebsocketFn.mockReturnValue(socket)
+      const middleware = createQuizTimerWebSocketMiddleware(createWebsocketFn)
+      middleware(store)(next)(action)
+
+      action.type = QUIZ_SUBMISSION_EVENT
+      middleware(store)(next)(action)
+      expect(socket.close).toHaveBeenCalled()
+    })
+  })
+})

package/src/common/middleware/__tests__/sharedBanksMiddleware.test.js

@@ -0,0 +1,46 @@
+import {expect, vi} from 'vitest'
+import {GET_SHARED_BANKS} from '@instructure/quiz-common/constants'
+import Fetcher from '../../../common/util/Fetcher'
+import {createSharedBanksMiddleware} from '../sharedBanksMiddleware'
+
+describe('createSharedBanksMiddleware', () => {
+  const getUserInfoStub = vi.fn().mockResolvedValue([])
+  const getCourseInfoStub = vi.fn().mockResolvedValue([])
+  const getAccountInfoStub = vi.fn().mockResolvedValue([])
+
+  const testBank = {
+    id: '123',
+    creator: 'user-123',
+  }
+
+  let getStub, fetcherStub, dispatch, next, getState
+  beforeEach(() => {
+    dispatch = vi.fn()
+    next = vi.fn()
+    getState = vi.fn()
+    getStub = vi.fn().mockResolvedValue([])
+    fetcherStub = vi.spyOn(Fetcher.prototype, 'get').mockImplementation(getStub)
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('should hit the right endpoint', async () => {
+    const action = {
+      type: GET_SHARED_BANKS,
+      payload: {
+        bank: testBank,
+        getUserInfo: getUserInfoStub,
+        getCourseInfo: getCourseInfoStub,
+        getAccountInfo: getAccountInfoStub,
+        startingPoint: 0,
+        limit: 10,
+        searchValue: '',
+        searchSource: 0,
+      },
+    }
+    await createSharedBanksMiddleware()({dispatch, getState})(next)(action)
+    expect(fetcherStub).toHaveBeenCalledWith('/api/banks/123/shared_banks')
+  })
+})

package/src/common/middleware/alertTimerMiddleware.js

@@ -0,0 +1,26 @@
+import {ADD_ALERT} from '@instructure/quiz-common/constants'
+
+import {removeAlert} from '../actions/alerts'
+
+const alertTimerMiddleware =
+  store =>
+  next =>
+  (action, delay = setTimeout) => {
+    if (
+      action &&
+      action.type === ADD_ALERT &&
+      action.payload.removeIn &&
+      action.payload.variant != 'stickyerror'
+    ) {
+      const remove = () => {
+        store.dispatch(removeAlert(action.payload.uuid))
+      }
+
+      // injected for testing
+      delay(remove, action.payload.removeIn)
+    }
+
+    return next(action)
+  }
+
+export default alertTimerMiddleware

package/src/common/middleware/appSyncMiddleware.js

@@ -0,0 +1,18 @@
+import {appDispatch} from '../../appDispatch'
+
+export function createAppSyncMiddleware() {
+  return store => next => action => {
+    if (!appDispatch) {
+      return next(action)
+    }
+
+    if (action.type === 'ADD_QUIZZES') {
+      appDispatch({
+        type: 'APPSYNC_ADD_QUIZZES',
+        payload: action.payload,
+      })
+    }
+
+    return next(action)
+  }
+}

package/src/common/middleware/crossDomainMessagingMiddleware.js

@@ -0,0 +1,11 @@
+import {POST_TO_PARENT} from '@instructure/quiz-common/constants'
+import {postToParent} from '../util/crossDomainMessaging'
+
+const crossDomainMessagingMiddleware = store => next => action => {
+  if (action.type === POST_TO_PARENT) {
+    postToParent(action.payload)
+  }
+  return next(action)
+}
+
+export default crossDomainMessagingMiddleware

package/src/common/middleware/eventLoggerMiddleware.js

@@ -0,0 +1,36 @@
+import serializeEvent from '../util/serializeEvent'
+
+// ==============================================================
+// this middleware queues payloads to the logger for handling
+// ==============================================================
+
+import getLogger from '../kinesis/QuizEventsLogger'
+import {createFetcher} from '../util/Fetcher'
+
+import {getActiveQuizSessionId} from '../selectors/quizSessions'
+
+const eventLoggerMiddlewareCreator =
+  (loggerFetch = getLogger, serializer = serializeEvent) =>
+  store =>
+  next =>
+  action => {
+    const result = next(action)
+
+    const eventJSON = serializer(action, store)
+
+    if (eventJSON) {
+      const quizSessionId = getActiveQuizSessionId(store.getState())
+      // This middleware sometimes gets used on pages without quiz sessions due to race conditions
+      if (quizSessionId === null) {
+        return result
+      }
+      const fetcher = createFetcher(store.dispatch, store.getState)
+      loggerFetch(quizSessionId, undefined, fetcher).then(logger => {
+        logger.enqueueEvent(eventJSON)
+      })
+    }
+
+    return result
+  }
+
+export default eventLoggerMiddlewareCreator

package/src/common/middleware/persistedStorageMiddleware.js

@@ -0,0 +1,64 @@
+import store from 'store'
+
+import {
+  ACTIVE_QUESTION,
+  ACTIVE_QUIZ_SESSION_CHANGE,
+  BACKTRACKING_NEXT_QUESTION,
+  CACHED_SESSION_ID,
+  PREVIOUS_QUESTION,
+  SET_CURRENT_SESSION_ITEM_POSITION,
+  PERSIST_PRINT_FONT_SIZE_PREFERENCE,
+  QUIZ_PRINT_FONT_SIZE_PREFERENCE,
+} from '@instructure/quiz-common/constants'
+
+import {sessionStore} from '../util/sessionStore'
+
+/**
+ * Some of our redux store values are stored in browser client-side storage
+ * for easy recall in the event of a page refresh, etc. This provides a single
+ * place to save all of those values so we can know how our data is organized
+ * in client-side storage.
+ *
+ * See also src/common/util/persistedState.js for how these values are loaded.
+ */
+
+const persistTakingInfo = (store, persistedLocalStore) => {
+  const position = store.getState().taking.get('currentSessionItemPosition')
+  const sessionId = store.getState().quizSessions.get('activeQuizSessionId')
+
+  persistedLocalStore.set(ACTIVE_QUESTION, position)
+  persistedLocalStore.set(CACHED_SESSION_ID, sessionId)
+}
+
+const persistPrintFontSizePreference = (store, persistedLocalStore) => {
+  const fontSize = store.getState().printing.get('fontSizePreference')
+
+  persistedLocalStore.set(QUIZ_PRINT_FONT_SIZE_PREFERENCE, fontSize)
+}
+
+const persistedStorageMiddleware = function (
+  persistedSessionStore = sessionStore,
+  persistedLocalStore = store,
+) {
+  return store => next => action => {
+    const nextState = next(action)
+
+    if (persistedLocalStore.enabled) {
+      switch (action.type) {
+        case ACTIVE_QUIZ_SESSION_CHANGE:
+        case BACKTRACKING_NEXT_QUESTION:
+        case PREVIOUS_QUESTION:
+        case SET_CURRENT_SESSION_ITEM_POSITION:
+          persistTakingInfo(store, persistedLocalStore)
+          break
+        case PERSIST_PRINT_FONT_SIZE_PREFERENCE:
+          persistPrintFontSizePreference(store, persistedLocalStore)
+          break
+      }
+    }
+
+    return nextState
+  }
+}
+
+export default persistedStorageMiddleware

package/src/common/middleware/quizTimerWebSocketMiddleware.js

@@ -0,0 +1,92 @@
+import {SET_WS_TOKEN, QUIZ_SUBMISSION_EVENT} from '@instructure/quiz-common/constants'
+import {formatTime} from '../../common/util/formatTimespan'
+import {updateTime, notifyTimeAdded} from '../../taking/api/taking'
+import {bindActionCreators} from 'redux'
+
+const takingApiActions = {updateTime, notifyTimeAdded}
+
+export const createWebsocket = (url, token) => {
+  return new WebSocket(`${url}?token=${token}`)
+}
+
+export const handleExtraTime = (extraTimeInSeconds, endAt, updateTimeAction, notifyTimeAdded) => {
+  const remainingTimeInMs = new Date(endAt) - Date.now()
+  const remainingTimeInSeconds = Math.floor(remainingTimeInMs / 1000)
+
+  const formattedExtraTimeText = formatTime(extraTimeInSeconds)
+
+  const isUnlimited = endAt === null && extraTimeInSeconds === null
+
+  updateTimeAction(remainingTimeInSeconds, !isUnlimited)
+  notifyTimeAdded(!isUnlimited, !isUnlimited ? formattedExtraTimeText : null)
+}
+
+export const parseJwt = token => {
+  try {
+    return JSON.parse(Buffer.from(token.split('.')[1], 'base64').toString())
+  } catch {
+    return null
+  }
+}
+
+export const initializeWebSocket = (token, createWebsocketFn) => {
+  const jwt = parseJwt(token)
+  if (!jwt) {
+    return null
+  }
+  return createWebsocketFn(jwt['aud'], token)
+}
+
+export const handleWebSocketMessage = (
+  webSocketMessage,
+  boundTakingApiActions,
+  handleExtraTimeFn,
+) => {
+  let webSocketMessageData = JSON.parse(webSocketMessage.data)
+  webSocketMessageData = webSocketMessageData?.message?.data || webSocketMessageData?.data
+
+  if (!webSocketMessageData) {
+    return
+  }
+
+  const type = webSocketMessageData.type
+
+  if (type !== 'accommodation_changed') {
+    return
+  }
+
+  handleExtraTimeFn(
+    webSocketMessageData.extra_time_in_seconds,
+    webSocketMessageData.end_at,
+    boundTakingApiActions.updateTime,
+    boundTakingApiActions.notifyTimeAdded,
+  )
+}
+
+export const createQuizTimerWebSocketMiddleware = (createWebsocketFn = createWebsocket) => {
+  let socket = null
+
+  return store => next => action => {
+    if (action.type === SET_WS_TOKEN && socket === null) {
+      const token = action.payload.wsToken
+      socket = initializeWebSocket(token, createWebsocketFn)
+
+      if (!socket) {
+        return next(action)
+      }
+
+      const boundTakingApiActions = bindActionCreators(takingApiActions, store.dispatch)
+
+      socket.addEventListener('message', webSocketMessage => {
+        handleWebSocketMessage(webSocketMessage, boundTakingApiActions, handleExtraTime)
+      })
+    }
+
+    if (action.type === QUIZ_SUBMISSION_EVENT && socket !== null) {
+      socket.close()
+      socket = null
+    }
+
+    return next(action)
+  }
+}

package/src/common/middleware/sharedBanksMiddleware.js

@@ -0,0 +1,147 @@
+import {createFetcher} from '../util/Fetcher'
+import t from '@instructure/quiz-i18n/format-message'
+import {handleError} from '../api/helpers'
+import {handleShareBanksResponse} from '../api/callHandlers'
+import {
+  CAN_EDIT,
+  SHARED_WITH_USER,
+  SHARED_WITH_COURSE,
+  SHARED_WITH_ACCOUNT,
+  GET_SHARED_BANKS,
+} from '@instructure/quiz-common/constants'
+import {sharedBankLoadingAction} from '../../common/actions/sharingModal'
+
+const banksApiEndpoint = '/api/banks'
+const chunkSize = 200
+
+async function getAllinfo(func, uuids) {
+  let info = []
+  for (let i = 0; i < uuids.length; i += chunkSize) {
+    let nextChunk = uuids.slice(i, i + chunkSize)
+    let nextData = func(nextChunk)
+    info.push(nextData)
+  }
+  try {
+    const result = await Promise.all(info)
+    return result.flat()
+  } catch (error) {
+    console.error('Error fetching user info', error)
+    return []
+  }
+}
+
+async function getSharedBankUsers(sharedBanksInfo, getUserInfo) {
+  const userSharedBanks = []
+  const userUuids = sharedBanksInfo
+    .filter(sb => sb.entity_type === SHARED_WITH_USER)
+    .map(sb => sb.entity_id)
+
+  const usersInfo = await getAllinfo(getUserInfo, userUuids)
+  usersInfo.forEach(userInfo => {
+    const sharedBankInfo = sharedBanksInfo.find(
+      sb => sb.entity_type === SHARED_WITH_USER && sb.entity_id === userInfo.uuid,
+    )
+    if (sharedBankInfo) {
+      userSharedBanks.push({
+        id: sharedBankInfo.id,
+        entityType: sharedBankInfo.entity_type,
+        entityId: sharedBankInfo.entity_id,
+        title: userInfo.fullName,
+        avatar: userInfo.avatar,
+        permission: sharedBankInfo.permission,
+        bankId: sharedBankInfo.bank_id,
+      })
+    }
+  })
+  return userSharedBanks
+}
+
+async function getSharedBankCourses(sharedBanksInfo, getCourseInfo) {
+  const courseSharedBanks = []
+  const courseUuids = sharedBanksInfo
+    .filter(sb => sb.entity_type === SHARED_WITH_COURSE)
+    .map(sb => sb.entity_id)
+  const coursesInfo = await getAllinfo(getCourseInfo, courseUuids)
+  coursesInfo.forEach(courseInfo => {
+    const sharedBankInfo = sharedBanksInfo.find(
+      sb => sb.entity_type === SHARED_WITH_COURSE && sb.entity_id === courseInfo.uuid,
+    )
+    if (sharedBankInfo) {
+      courseSharedBanks.push({
+        id: sharedBankInfo.id,
+        entityType: sharedBankInfo.entity_type,
+        entityId: sharedBankInfo.entity_id,
+        title: courseInfo.title,
+        permission: sharedBankInfo.permission,
+        bankId: sharedBankInfo.bank_id,
+      })
+    }
+  })
+  return courseSharedBanks
+}
+
+async function getSharedBankAccounts(sharedBanksInfo, getAccountInfo) {
+  const accountSharedBanks = []
+  const accountUuids = sharedBanksInfo
+    .filter(sb => sb.entity_type === SHARED_WITH_ACCOUNT)
+    .map(sb => sb.entity_id)
+  const accountsInfo = await getAllinfo(getAccountInfo, accountUuids)
+  accountsInfo.forEach(accountInfo => {
+    const sharedBankInfo = sharedBanksInfo.find(
+      sb => sb.entity_type === SHARED_WITH_ACCOUNT && sb.entity_id === accountInfo.uuid,
+    )
+    if (sharedBankInfo) {
+      accountSharedBanks.push({
+        id: sharedBankInfo.id,
+        entityType: sharedBankInfo.entity_type,
+        entityId: sharedBankInfo.entity_id,
+        title: accountInfo.name,
+        permission: sharedBankInfo.permission,
+        bankId: sharedBankInfo.bank_id,
+      })
+    }
+  })
+  return accountSharedBanks
+}
+
+export const createSharedBanksMiddleware = () => {
+  return store => next => async action => {
+    if (action.type === GET_SHARED_BANKS) {
+      const {bank, getUserInfo, getCourseInfo, getAccountInfo} = action.payload
+      const dispatch = store.dispatch
+      const url = `${banksApiEndpoint}/${bank.id}/shared_banks`
+
+      const startLoading = {
+        loading: true,
+      }
+      dispatch(sharedBankLoadingAction(startLoading))
+
+      const fetcher = createFetcher(dispatch, store.getState, {
+        onError: handleError(dispatch, t('Failed to fetch shared banks.')),
+      })
+      const sharedBanksInfo = await fetcher.get(url)
+      // Add bank creator if no data
+      if (sharedBanksInfo.length === 0) {
+        sharedBanksInfo.push({
+          id: '-1',
+          entity_type: SHARED_WITH_USER,
+          entity_id: bank.creator,
+          permission: CAN_EDIT,
+          bank_id: bank.id,
+        })
+      }
+
+      const users = await getSharedBankUsers(sharedBanksInfo, getUserInfo)
+      const courses = await getSharedBankCourses(sharedBanksInfo, getCourseInfo)
+      const accounts = await getSharedBankAccounts(sharedBanksInfo, getAccountInfo)
+
+      dispatch(handleShareBanksResponse(users.concat(courses).concat(accounts)))
+
+      const endLoading = {
+        loading: false,
+      }
+      dispatch(sharedBankLoadingAction(endLoading))
+    }
+    return next(action)
+  }
+}