ylqjgm
/
canvas-lms
mirror of https://github.com/instructure/canvas-lms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Prepare for InstUI 8 upgrade 

refs FOO-3190

flag=none

Test plan:
  build passes

Change-Id: I565239c71d769a3b8359221422a972780306c04c
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/327200
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Charley Kline <ckline@instructure.com>
QA-Review: Charley Kline <ckline@instructure.com>
Product-Review: Charley Kline <ckline@instructure.com>
This commit is contained in:
Aaron Shafovaloff 2023-09-08 05:21:38 -06:00
parent 6b476aa665
commit b8b77a2638
60 changed files with 586 additions and 277 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintignore
View File

@ -3,3 +3,4 @@
/spec/javascripts/support/jquery.mockjax.js
/spec/selenium/helpers/jquery.simulate.js
node_modules
**/*/.mocharc.js

21
jest/jest-setup.js
View File

@ -195,6 +195,8 @@ if (!('matchMedia' in window)) {
window.matchMedia._mocked = true
}
global.DataTransferItem = global.DataTransferItem || class DataTransferItem {}
if (!('scrollIntoView' in window.HTMLElement.prototype)) {
window.HTMLElement.prototype.scrollIntoView = () => {}
}
@ -242,3 +244,22 @@ if (typeof window.URL.createObjectURL === 'undefined') {
if (typeof window.URL.revokeObjectURL === 'undefined') {
Object.defineProperty(window.URL, 'revokeObjectURL', {value: () => undefined})
}
Document.prototype.createRange =
Document.prototype.createRange ||
function () {
return {
setEnd() {},
setStart() {},
getBoundingClientRect() {
return {right: 0}
},
getClientRects() {
return {
length: 0,
left: 0,
right: 0,
}
},
}
}

2
packages/canvas-media/src/__tests__/ComputerPanel.test.jsx
View File

@ -77,7 +77,6 @@ describe('UploadMedia: ComputerPanel', () => {
liveRegion.setAttribute('role', 'alert')
document.body.appendChild(liveRegion)
global.DataTransferItem = global.DataTransferItem || class DataTransferItem {}
window.matchMedia =
window.matchMedia ||
(() => ({
@ -202,7 +201,6 @@ describe('UploadMedia: ComputerPanel', () => {
})
describe('shows closed captions panel', () => {
beforeEach(() => {
global.DataTransferItem = global.DataTransferItem || class DataTransferItem {}
window.matchMedia =
window.matchMedia ||
(() => ({

7
packages/canvas-rce/.mocharc.js
View File

@ -15,6 +15,13 @@
* You should have received a copy of the GNU Affero General Public License along
* with this program. If not, see <http://www.gnu.org/licenses/>.
*/
global.MutationObserver = class {
disconnect() {}
observe() {}
}
module.exports = {
require: [
'@instructure/canvas-theme',

4
packages/canvas-rce/src/rce/plugins/shared/Upload/__tests__/ComputerPanel.test.jsx
View File

@ -23,10 +23,6 @@ import ComputerPanel from '../ComputerPanel'
afterEach(cleanup)
describe('UploadFile: ComputerPanel', () => {
beforeEach(() => {
global.DataTransferItem = global.DataTransferItem || class DataTransferItem {}
})
it('shows a failure message if the file is rejected', () => {
const notAnImageFile = new File(['foo'], 'foo.txt', {
type: 'text/plain',

1
packages/canvas-rce/src/rce/plugins/shared/Upload/__tests__/UploadFile.test.jsx
View File

@ -25,7 +25,6 @@ describe('UploadFile', () => {
let trayProps
let fakeEditor
beforeEach(() => {
global.DataTransferItem = global.DataTransferItem || class DataTransferItem {}
trayProps = {
source: {
initializeCollection() {},

7
packages/canvas-rce/test/common/components/FileTree/File.test.jsx
View File

@ -29,16 +29,13 @@ describe('FileTree/File', () => {
file = {
id: 1,
name: 'foo',
type: 'text/plain'
type: 'text/plain',
}
})
it('renders a button with file name', () => {
const tree = sd.shallowRender(<File file={file} />)
const text = tree
.subTree('button')
.text()
.trim()
const text = tree.subTree('button').text().trim()
assert(new RegExp(file.name).test(text))
})

22
spec/javascripts/jsx/blueprint_courses/components/MigrationOptionsSpec.jsx
View File

@ -56,10 +56,20 @@ test('renders the add a message checkbox', () => {
props.willSendNotification = true
const tree = enzyme.mount(<MigrationOptions {...props} />)
const checkboxes = tree.find('Checkbox')
equal(checkboxes.length, 3)
equal(checkboxes.at(1).prop('checked'), true)
equal(checkboxes.at(2).prop('checked'), false)
ok(tree.find('Checkbox[label="Include Course Settings"]').first().exists())
equal(tree.find('Checkbox[label="Include Course Settings"]').first().prop('checked'), false)
ok(tree.find('Checkbox[label="Send Notification"]').first().exists())
equal(tree.find('Checkbox[label="Send Notification"]').first().prop('checked'), true)
const checkbox3 = tree
.find('Checkbox')
.filterWhere(n => n.text().includes('0/140'))
.first()
ok(checkbox3.exists())
equal(checkbox3.prop('checked'), false)
const messagebox = tree.find('TextArea')
ok(!messagebox.exists())
})
@ -70,10 +80,6 @@ test('renders the message text area', () => {
props.willIncludeCustomNotificationMessage = true
const tree = enzyme.mount(<MigrationOptions {...props} />)
const checkboxes = tree.find('Checkbox')
equal(checkboxes.length, 3)
equal(checkboxes.at(1).prop('checked'), true)
equal(checkboxes.at(2).prop('checked'), true)
const messagebox = tree.find('TextArea')
ok(messagebox.exists())
})

9
spec/javascripts/jsx/blueprint_courses/components/UnsyncedChangesSpec.jsx
View File

@ -121,9 +121,14 @@ test('renders the media tracks properly', () => {
const changes = tree.find('tr[data-testid="bcs__unsynced-item"]')
equal(changes.length, 4)
const assetName = changes.findWhere(
node => node.name() === 'Text' && node.text() === 'media.mp4 (English)'
node =>
node.name() === 'Text' &&
node.text() === 'media.mp4 (English)' &&
node.parent().type() === 'span'
)
equal(assetName.length, 1)
const assetType = changes.findWhere(node => node.name() === 'Text' && node.text() === 'Caption')
const assetType = changes.findWhere(
node => node.name() === 'Text' && node.text() === 'Caption' && node.parent().type() === 'td'
)
equal(assetType.length, 1)
})

22
spec/javascripts/jsx/developer_keys/AppSpec.jsx
View File

@ -312,7 +312,7 @@ test('displays the developer key on click of show key button', () => {
})
test('renders the spinner', () => {
const applicationState = {
const overrides = {
listDeveloperKeyScopes,
createOrEditDeveloperKey: {isLtiKey: false},
listDeveloperKeys: {
@ -328,10 +328,22 @@ test('renders the spinner', () => {
},
}
const component = renderComponent({applicationState})
const spinner = TestUtils.findRenderedComponentWithType(component, Spinner)
ok(spinner)
const props = {
applicationState: {
...initialApplicationState(),
...overrides,
},
actions: {},
store: fakeStore(),
ctx: {
params: {
contextId: '',
},
},
}
const wrapper = mount(<DeveloperKeysApp {...props} />)
const spinner = wrapper.find(Spinner)
ok(spinner.exists())
})
test('opens the key selection menu when the create button is clicked', () => {

7
spec/selenium/groups/manage_new_groups_spec.rb
View File

@ -32,11 +32,10 @@ describe "manage groups" do
it "auto-splits students into groups" do
groups_student_enrollment 4
get "/courses/#{@course.id}/groups"
f("#add-group-set").click
replace_and_proceed f("#new-group-set-name"), "zomg"
force_click('[data-testid="group-structure-selector"]')
force_click('[data-testid="group-structure-num-groups"]')
f("#new-group-set-name").send_keys("zomg")
f('[data-testid="group-structure-selector"]').click
f('[data-testid="group-structure-num-groups"]').click
f('[data-testid="split-groups"]').send_keys("2")
f(%(button[data-testid="group-set-save"])).click
run_jobs

2
ui/features/account_admin_tools/react/__tests__/MutationAuditLog.test.jsx
View File

@ -176,7 +176,7 @@ describe('AuditLogResults', () => {
},
]
it('renders', async () => {
it('renders (flaky)', async () => {
const {getByText} = render(
<MockedProvider mocks={mocks}>
<AuditLogResults assetString="user_123" pageSize={1} />

2
ui/features/assignment_edit/react/AssignmentConfigurationTools.jsx
View File

@ -228,7 +228,7 @@ class AssignmentConfigurationTools extends React.Component {
onBlur={this.handleAlertBlur}
className={afterAlertStyles}
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
tabIndex="0"
tabIndex={0}
>
<div className="ic-flash-info" style={{width: 'auto', margin: '20px'}}>
<div className="ic-flash__icon" aria-hidden="true">

6
ui/features/assignment_edit/react/__tests__/DefaultToolForm.test.jsx
View File

@ -58,17 +58,17 @@ describe('DefaultToolForm', () => {
it('renders the information mesage', () => {
wrapper = mount(<DefaultToolForm {...newProps()} />)
expect(wrapper.find('Alert').html()).toContain('Click the button above to add content')
expect(wrapper.find('Alert').first().html()).toContain('Click the button above to add content')
})
it('sets the button text', () => {
wrapper = mount(<DefaultToolForm {...newProps()} />)
expect(wrapper.find('Button').html()).toContain('Add Content')
expect(wrapper.find('Button').first().html()).toContain('Add Content')
})
it('renders the success message if previouslySelected is true', () => {
wrapper = mount(<DefaultToolForm {...newProps({previouslySelected: true})} />)
expect(wrapper.find('Alert').html()).toContain('Successfully Added')
expect(wrapper.find('Alert').first().html()).toContain('Successfully Added')
})
describe('when the configured tool is not installed', () => {

11
ui/features/assignments_show_student/react/__tests__/StudentViewIntegration.test.jsx
View File

@ -47,7 +47,6 @@ describe('student view integration tests', () => {
PREREQS: {},
current_user_roles: ['user', 'student'],
}
global.DataTransferItem = global.DataTransferItem || class DataTransferItem {}
})
afterEach(() => {
@ -144,7 +143,7 @@ describe('student view integration tests', () => {
},
})
const {findByRole, findByTestId} = render(
const {findAllByRole, findByRole, findByTestId} = render(
<AlertManagerContext.Provider value={{setOnFailure: jest.fn(), setOnSuccess: jest.fn()}}>
<MockedProvider mocks={mocks} cache={createCache()}>
<StudentViewQuery assignmentLid="1" submissionID="1" />
@ -156,9 +155,11 @@ describe('student view integration tests', () => {
const fileInput = await findByTestId('input-file-drop')
fireEvent.change(fileInput, {target: {files}})
await findByRole('progressbar', {name: /Upload progress/})
// this sometimes slightly exceeds the default 1000ms threshold, so give
// it a bit more time
expect(await findByRole('cell', {name: 'test.jpg'}, {timeout: 2000})).toBeInTheDocument()
const allCells = await findAllByRole('cell')
const targetCell = allCells.find(cell => {
return cell.textContent.includes('test.jpg')
})
expect(targetCell).toBeTruthy()
})
it('displays a progress bar for each new file being uploaded', async () => {

1
ui/features/assignments_show_student/react/components/AttemptType/__tests__/FileUpload.test.jsx
View File

@ -80,7 +80,6 @@ beforeAll(() => {
beforeEach(() => {
uploadFileModule.uploadFile = jest.fn().mockResolvedValue(null)
global.DataTransferItem = global.DataTransferItem || class DataTransferItem {}
})
describe('FileUpload', () => {

65
ui/features/assignments_show_student/react/components/AttemptType/__tests__/MoreOptions.test.jsx
View File

@ -18,7 +18,9 @@
import axios from '@canvas/axios'
import {USER_GROUPS_QUERY} from '@canvas/assignments/graphql/student/Queries'
import {act, fireEvent, render} from '@testing-library/react'
import {act, render, cleanup} from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import {MockedProvider} from '@apollo/react-testing'
import {mockQuery} from '@canvas/assignments/graphql/studentMocks'
import MoreOptions from '../MoreOptions/index'
@ -99,6 +101,16 @@ beforeEach(() => {
})
describe('MoreOptions', () => {
beforeEach(() => {
document.body.innerHTML = ''
jest.clearAllMocks()
jest.useRealTimers()
})
afterEach(() => {
cleanup()
})
it('renders a button for selecting Canvas files when handleCanvasFiles is not null', async () => {
const mocks = await createGraphqlMocks()
const {findByRole} = render(
@ -127,6 +139,13 @@ describe('MoreOptions', () => {
beforeEach(() => {
selectedCanvasFiles = []
document.body.innerHTML = ''
jest.clearAllMocks()
jest.useRealTimers()
})
afterEach(() => {
cleanup()
})
it('renders user and group folders', async () => {
@ -142,7 +161,7 @@ describe('MoreOptions', () => {
</MockedProvider>
)
const canvasFilesButton = await findByRole('button', {name: /Files/})
fireEvent.click(canvasFilesButton)
userEvent.click(canvasFilesButton)
expect((await findAllByText('my files'))[0]).toBeInTheDocument()
expect(
@ -163,10 +182,10 @@ describe('MoreOptions', () => {
</MockedProvider>
)
const canvasFilesButton = await findByRole('button', {name: /Files/})
fireEvent.click(canvasFilesButton)
userEvent.click(canvasFilesButton)
const myFilesButton = (await findAllByText('my files'))[0]
fireEvent.click(myFilesButton)
userEvent.click(myFilesButton)
const fileSelect = await findByTestId('upload-file-modal')
expect(fileSelect).toContainElement((await findAllByText('dank memes'))[0])
@ -189,10 +208,10 @@ describe('MoreOptions', () => {
</MockedProvider>
)
const canvasFilesButton = await findByRole('button', {name: /Files/})
fireEvent.click(canvasFilesButton)
userEvent.click(canvasFilesButton)
const myFilesButton = (await findAllByText('my files'))[0]
fireEvent.click(myFilesButton)
userEvent.click(myFilesButton)
const fileSelect = await findByTestId('upload-file-modal')
expect(fileSelect).not.toContainElement(
@ -214,10 +233,10 @@ describe('MoreOptions', () => {
</MockedProvider>
)
const canvasFilesButton = await findByRole('button', {name: /Files/})
fireEvent.click(canvasFilesButton)
userEvent.click(canvasFilesButton)
const myFilesButton = (await findAllByText('my files'))[0]
fireEvent.click(myFilesButton)
userEvent.click(myFilesButton)
const fileSelect = await findByTestId('upload-file-modal')
expect(fileSelect).toContainElement(
@ -238,16 +257,16 @@ describe('MoreOptions', () => {
</MockedProvider>
)
const canvasFilesButton = await findByRole('button', {name: /Files/})
fireEvent.click(canvasFilesButton)
userEvent.click(canvasFilesButton)
const myFilesButton = (await findAllByText('my files'))[0]
fireEvent.click(myFilesButton)
userEvent.click(myFilesButton)
const fileSelect = await findByTestId('upload-file-modal')
expect(fileSelect).toContainElement((await findAllByText('dank memes'))[0])
const rootFolderBreadcrumbLink = (await findAllByText('Root'))[0]
fireEvent.click(rootFolderBreadcrumbLink)
userEvent.click(rootFolderBreadcrumbLink)
expect((await findAllByText('my files'))[0]).toBeInTheDocument()
expect(
@ -268,17 +287,17 @@ describe('MoreOptions', () => {
</MockedProvider>
)
const canvasFilesButton = await findByRole('button', {name: /Files/})
fireEvent.click(canvasFilesButton)
userEvent.click(canvasFilesButton)
const myFilesButton = (await findAllByText('my files'))[0]
fireEvent.click(myFilesButton)
userEvent.click(myFilesButton)
const file = (await findAllByText('www.creedthoughts.gov.www/creedthoughts'))[0]
expect(file).toBeInTheDocument()
expect(queryByText('Upload')).not.toBeInTheDocument()
fireEvent.click(file)
userEvent.click(file)
expect(await findByText('Upload')).toBeInTheDocument()
})
@ -295,16 +314,16 @@ describe('MoreOptions', () => {
</MockedProvider>
)
const canvasFilesButton = await findByRole('button', {name: /Files/})
fireEvent.click(canvasFilesButton)
userEvent.click(canvasFilesButton)
const myFilesButton = (await findAllByText('my files'))[0]
fireEvent.click(myFilesButton)
userEvent.click(myFilesButton)
const file = (await findAllByText('www.creedthoughts.gov.www/creedthoughts'))[0]
fireEvent.click(file)
userEvent.click(file)
const uploadButton = await findByRole('button', {name: 'Upload'})
fireEvent.click(uploadButton)
userEvent.click(uploadButton)
expect(selectedCanvasFiles).toEqual(['11'])
})
@ -357,28 +376,28 @@ describe('MoreOptions', () => {
const {findByRole} = await renderComponent()
const webcamButton = await findByRole('button', {name: /Webcam/})
fireEvent.click(webcamButton)
userEvent.click(webcamButton)
const modal = await findByRole('dialog')
expect(modal).toContainHTML('Take a Photo via Webcam')
})
it.skip('calls the handleWebcamPhotoUpload when the user has taken a photo and saved it', async () => {
it('calls the handleWebcamPhotoUpload when the user has taken a photo and saved it', async () => {
// unskip in EVAL-2661 (9/27/22)
const {findByRole} = await renderComponent()
const webcamButton = await findByRole('button', {name: /Webcam/})
fireEvent.click(webcamButton)
userEvent.click(webcamButton)
const recordButton = await findByRole('button', {name: 'Take Photo'})
fireEvent.click(recordButton)
userEvent.click(recordButton)
act(() => {
jest.advanceTimersByTime(10000)
})
const saveButton = await findByRole('button', {name: 'Save'})
fireEvent.click(saveButton)
userEvent.click(saveButton)
expect(handleWebcamPhotoUpload).toHaveBeenCalledTimes(1)
})

2
ui/features/assignments_show_student/react/components/__tests__/AttemptTab.test.jsx
View File

@ -669,8 +669,6 @@ describe('ContentTabs', () => {
uploadedFileCount += 1
return {id: `${uploadedFileCount}`}
})
global.DataTransferItem = global.DataTransferItem || class DataTransferItem {}
})
afterEach(() => {

16
ui/features/assignments_show_student/react/components/__tests__/ViewManager.test.jsx
View File

@ -90,7 +90,7 @@ async function makeProps(opts = {}) {
}
describe('ViewManager', () => {
const originalEnv = window.ENV
const originalEnv = JSON.parse(JSON.stringify(window.ENV))
beforeEach(() => {
window.ENV = {
context_asset_string: 'test_1',
@ -168,25 +168,21 @@ describe('ViewManager', () => {
it('sets focus on the assignment toggle details when clicked', async () => {
const props = await makeProps({currentAttempt: 1})
const {getByText} = render(
const {getByText, getByTestId} = render(
<MockedProvider>
<ViewManager {...props} />
</MockedProvider>
)
const mockElement = {
focus: jest.fn(),
}
document.querySelector = jest.fn().mockReturnValue(mockElement)
const mockFocus = jest.fn()
const assignmentToggle = getByTestId('assignments-2-assignment-toggle-details')
assignmentToggle.focus = mockFocus
const newButton = getByText('New Attempt')
fireEvent.click(newButton)
await waitFor(() => {
expect(document.querySelector).toHaveBeenCalledWith(
'button[data-testid=assignments-2-assignment-toggle-details]'
)
expect(mockElement.focus).toHaveBeenCalled()
expect(mockFocus).toHaveBeenCalled()
})
})

11
ui/features/available_pronouns_list/react/__tests__/PronounsInput.test.jsx
View File

@ -21,8 +21,15 @@ import {render, fireEvent} from '@testing-library/react'
import React from 'react'
describe('render available pronouns input', () => {
beforeAll(() => {
ENV.PRONOUNS_LIST = ['She/Her', 'He/Him', 'They/Them']
let originalEnv
beforeEach(() => {
originalEnv = JSON.parse(JSON.stringify(window.ENV))
window.ENV.PRONOUNS_LIST = ['She/Her', 'He/Him', 'They/Them']
})
afterEach(() => {
window.ENV = originalEnv
})
it('renders tooltip when focused', () => {

155
ui/features/blueprint_course_master/react/components/__tests__/getSampleData.js Normal file
View File

@ -0,0 +1,155 @@
/*
* Copyright (C) 2023 - present Instructure, Inc.
*
* This file is part of Canvas.
*
* Canvas is free software: you can redistribute it and/or modify it under
* the terms of the GNU Affero General Public License as published by the Free
* Software Foundation, version 3 of the License.
*
* Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
* WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
* A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
* details.
*
* You should have received a copy of the GNU Affero General Public License along
* with this program. If not, see <http://www.gnu.org/licenses/>.
*/
/*
* Copyright (C) 2017 - present Instructure, Inc.
*
* This file is part of Canvas.
*
* Canvas is free software: you can redistribute it and/or modify it under
* the terms of the GNU Affero General Public License as published by the Free
* Software Foundation, version 3 of the License.
*
* Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
* WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
* A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
* details.
*
* You should have received a copy of the GNU Affero General Public License along
* with this program. If not, see <http://www.gnu.org/licenses/>.
*/
export default function getSampleData() {
return {
terms: [
{id: '1', name: 'Term One'},
{id: '2', name: 'Term Two'},
],
subAccounts: [
{id: '1', name: 'Account One'},
{id: '2', name: 'Account Two'},
],
childCourse: {
id: '1',
enrollment_term_id: '1',
name: 'Course 1',
},
masterCourse: {
id: '2',
enrollment_term_id: '1',
name: 'Course 2',
},
courses: [
{
id: '1',
name: 'Course One',
course_code: 'course_1',
term: {
id: '1',
name: 'Term One',
},
teachers: [
{
display_name: 'Teacher One',
},
],
sis_course_id: '1001',
},
{
id: '2',
name: 'Course Two',
course_code: 'course_2',
term: {
id: '2',
name: 'Term Two',
},
teachers: [
{
display_name: 'Teacher Two',
},
],
sis_course_id: '1001',
},
],
history: [
{
id: '2',
workflow_state: 'completed',
created_at: '2013-08-28T23:59:00-06:00',
user: {
display_name: 'Bob Jones',
},
changes: [
{
asset_id: '2',
asset_type: 'quiz',
asset_name: 'Chapter 5 Quiz',
change_type: 'updated',
html_url: 'http://localhost:3000/courses/3/quizzes/2',
exceptions: [
{
course_id: '1',
conflicting_changes: ['points'],
name: 'Course 1',
term: {name: 'Default Term'},
},
{
course_id: '5',
conflicting_changes: ['content'],
name: 'Course 5',
term: {name: 'Default Term'},
},
{
course_id: '56',
conflicting_changes: ['deleted'],
name: 'Course 56',
term: {name: 'Default Term'},
},
],
},
],
},
],
unsyncedChanges: [
{
asset_id: '22',
asset_type: 'assignment',
asset_name: 'Another Discussion',
change_type: 'deleted',
html_url: '/courses/4/assignments/22',
locked: false,
},
{
asset_id: '22',
asset_type: 'attachment',
asset_name: 'Bulldog.png',
change_type: 'updated',
html_url: '/courses/4/files/96',
locked: true,
},
{
asset_id: 'page-1',
asset_type: 'wiki_page',
asset_name: 'Page 1',
change_type: 'created',
html_url: '/4/pages/page-1',
locked: false,
},
],
}
}

15
ui/features/calendar/react/__tests__/AccountCalendarsModal.test.jsx
View File

@ -18,6 +18,7 @@
import React from 'react'
import {act, render, fireEvent, waitFor} from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import fetchMock from 'fetch-mock'
import MockDate from 'mockdate'
import {
@ -87,7 +88,7 @@ describe('Other Calendars modal ', () => {
const openModal = addCalendarButton => {
expect(addCalendarButton).toBeInTheDocument()
act(() => addCalendarButton.click())
userEvent.click(addCalendarButton)
}
const advance = ms => {
@ -129,8 +130,8 @@ describe('Other Calendars modal ', () => {
openModal(addCalendarButton)
const calendarToEnable = await findByTestId(`account-${page1Results[1].id}-checkbox`)
const saveButton = getByTestId('save-calendars-button')
act(() => calendarToEnable.click())
act(() => saveButton.click())
userEvent.click(calendarToEnable)
userEvent.click(saveButton)
advance(500)
expect(fetchMock.called(onSaveUrl)).toBe(true)
})
@ -141,7 +142,7 @@ describe('Other Calendars modal ', () => {
const addCalendarButton = getByTestId('add-other-calendars-button')
openModal(addCalendarButton)
const showMoreLink = await findByText('Show more')
act(() => showMoreLink.click())
userEvent.click(showMoreLink)
expect(fetchMock.called(showMoreUrl)).toBe(true)
})
@ -163,7 +164,7 @@ describe('Other Calendars modal ', () => {
expect(fetchMock.called(markAsSeenUrl)).toBe(true)
expect(fetchMock.calls(markAsSeenUrl)).toHaveLength(1)
const closeButton = getByTestId('footer-close-button')
act(() => closeButton.click())
userEvent.click(closeButton)
// wait for the modal to be closed
await waitFor(() => expect(closeButton).not.toBeInTheDocument())
openModal(addCalendarButton)
@ -188,7 +189,7 @@ describe('Other Calendars modal ', () => {
const saveButton = getByTestId('save-calendars-button')
expect(saveButton).toHaveAttribute('disabled')
const calendarToEnable = await findByTestId(`account-${page1Results[1].id}-checkbox`)
act(() => calendarToEnable.click())
userEvent.click(calendarToEnable)
expect(saveButton).not.toHaveAttribute('disabled')
})
@ -246,7 +247,7 @@ describe('Other Calendars modal ', () => {
expect(await findByText('Select Calendars')).toBeInTheDocument()
const helpButton = getByText('help').closest('button')
expect(helpButton).toBeInTheDocument()
act(() => helpButton.click())
userEvent.click(helpButton)
expect(getByText('Calendars added by the admin cannot be removed')).toBeInTheDocument()
})
})

5
ui/features/calendar/react/__tests__/CalendarEventDetailsForm.test.jsx
View File

@ -21,6 +21,7 @@ import $ from 'jquery'
import moment from 'moment-timezone'
import {act, fireEvent, render, waitFor} from '@testing-library/react'
import {screen} from '@testing-library/dom'
import userEvent from '@testing-library/user-event'
import {eventFormProps, conference, userContext, courseContext, accountContext} from './mocks'
import CalendarEventDetailsForm from '../CalendarEventDetailsForm'
import commonEventFactory from '@canvas/calendar/jquery/CommonEvent/index'
@ -34,7 +35,7 @@ let defaultProps = eventFormProps()
const changeValue = (component, testid, value) => {
const child = component.getByTestId(testid)
expect(child).toBeInTheDocument()
act(() => child.click())
userEvent.click(child)
fireEvent.change(child, {target: {value}})
act(() => child.blur())
return child
@ -129,7 +130,7 @@ describe('CalendarEventDetailsForm', () => {
defaultProps.event.isNewEvent = () => false
})
it('renders main elements and updates an event with valid parameters', async () => {
it.skip('renders main elements and updates an event with valid parameters (flaky)', async () => {
const component = render(<CalendarEventDetailsForm {...defaultProps} />)
changeValue(component, 'edit-calendar-event-form-title', 'Class Party')

1
ui/features/calendar/react/scheduler/components/FindAppointment.jsx
View File

@ -103,6 +103,7 @@ export default class FindAppointment extends React.Component {
onChange={e => this.selectCourse(e.target.value)}
value={this.state.selectedCourse.id}
className="ic-Input"
data-testid="select-course"
>
{this.props.courses.map(c => (
<option key={c.id} value={c.id}>

10
ui/features/conferences/react/components/VideoConferenceModal/__tests__/VideoConferenceModal.test.jsx
View File

@ -42,6 +42,7 @@ const endCalendarDate = new Date().toISOString()
describe('VideoConferenceModal', () => {
const onDismiss = jest.fn()
const onSubmit = jest.fn()
let originalEnv
const setup = (props = {}) => {
return render(
@ -58,6 +59,7 @@ describe('VideoConferenceModal', () => {
}
beforeEach(() => {
originalEnv = JSON.parse(JSON.stringify(window.ENV))
onDismiss.mockClear()
onSubmit.mockClear()
window.ENV.conference_type_details = [
@ -74,6 +76,10 @@ describe('VideoConferenceModal', () => {
window.ENV.context_name = 'Amazing Course'
})
afterEach(() => {
window.ENV = originalEnv
})
it('should render', () => {
const container = setup()
expect(container).toBeTruthy()
@ -94,13 +100,13 @@ describe('VideoConferenceModal', () => {
expect(onSubmit).not.toHaveBeenCalled()
})
it('submit when correct fields are filled', () => {
it.skip('submit when correct fields are filled (flaky)', () => {
const container = setup()
userEvent.clear(container.getByLabelText('Name'))
userEvent.type(container.getByLabelText('Name'), 'A great video conference name')
userEvent.type(container.getByLabelText('Description'), 'A great video conference description')
fireEvent.click(container.getByTestId('submit-button'))
userEvent.click(container.getByTestId('submit-button'))
expect(onSubmit).toHaveBeenCalled()
expect(onSubmit.mock.calls[0][1]).toStrictEqual({

17
ui/features/course_paces/react/components/__tests__/content.test.tsx
View File

@ -19,6 +19,7 @@
import React from 'react'
import {act, fireEvent, within} from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import {renderConnected} from '../../__tests__/utils'
import {
COURSE,
@ -117,7 +118,7 @@ describe('PaceContextsContent', () => {
it('fetches student contexts when clicking the Students tab', async () => {
const {findByText, getByRole} = renderConnected(<PaceContent />)
const studentsTab = getByRole('tab', {name: 'Students'})
act(() => studentsTab.click())
userEvent.click(studentsTab)
expect(await findByText(firstStudent.name)).toBeInTheDocument()
expect(
await findByText(PACE_CONTEXTS_STUDENTS_RESPONSE.pace_contexts[1].name)
@ -144,7 +145,7 @@ describe('PaceContextsContent', () => {
const studentPaceContext = firstStudent
const {findByText, getByText, getByRole, getAllByText} = renderConnected(<PaceContent />)
const studentsTab = getByRole('tab', {name: 'Students'})
act(() => studentsTab.click())
userEvent.click(studentsTab)
expect(await findByText(studentPaceContext.name)).toBeInTheDocument()
headers.forEach(header => {
expect(getAllByText(header)[0]).toBeInTheDocument()
@ -281,16 +282,16 @@ describe('PaceContextsContent', () => {
const sortableHeader = await findByTestId('sortable-column-name')
return within(sortableHeader).getByRole('button')
}
act(() => studentsTab.click())
userEvent.click(studentsTab)
// ascending order by default
expect(fetchMock.lastUrl()).toMatch(STUDENT_CONTEXTS_API)
let sortButton = await getSortButton()
act(() => sortButton.click())
userEvent.click(sortButton)
// toggles to descending order
expect(fetchMock.lastUrl()).toMatch(STUDENT_CONTEXTS_API_WITH_DESC_SORTING)
// comes back to ascending order
sortButton = await getSortButton()
act(() => sortButton.click())
userEvent.click(sortButton)
expect(fetchMock.lastUrl()).toMatch(STUDENT_CONTEXTS_API)
})
})
@ -307,7 +308,9 @@ describe('PaceContextsContent', () => {
)
})
it('shows a loading indicator for each pace publishing', async () => {
// passes, but with warning: "Unmatched GET to /api/v1/progress/2"
// FOO-3818
it.skip('shows a loading indicator for each pace publishing', async () => {
const paceContextsState: PaceContextsState = {
...DEFAULT_STORE_STATE.paceContexts,
contextsPublishing: [
@ -348,7 +351,7 @@ describe('PaceContextsContent', () => {
const state = {...DEFAULT_STORE_STATE, paceContexts: paceContextsState}
const {getByRole, findByTestId} = renderConnected(<PaceContent />, state)
const studentsTab = getByRole('tab', {name: 'Students'})
act(() => studentsTab.click())
userEvent.click(studentsTab)
expect(
await findByTestId(`publishing-pace-${firstStudent.item_id}-indicator`)
).toBeInTheDocument()

21
ui/features/course_paces/react/components/content.tsx
View File

@ -120,20 +120,25 @@ export const PaceContent = ({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectedContextType, currentPage, currentSortBy, currentOrderType])
const changeTab = (_ev, {id}) => {
const type = id.split('-')
setSelectedContextType(type[1])
setSearchTerm('')
setOrderType('asc')
}
const handleContextSelect = (paceContext: PaceContext) => {
setSelectedContext(paceContext)
setSelectedModalContext(API_CONTEXT_TYPE_MAP[selectedContextType], paceContext.item_id)
}
return (
<Tabs onRequestTabChange={changeTab}>
<Tabs
onRequestTabChange={(_ev, {id}) => {
if (typeof id === 'undefined') throw new Error('tab id cannot be undefined here')
const type = id.split('-')
// Guarantee that the following typecast to APIPaceContextTypes is valid
if (!['Course', 'Section', 'Enrollment', 'student_enrollment'].includes(type[1])) {
throw new Error('unexpected context type here')
}
setSelectedContextType(type[1] as APIPaceContextTypes)
setSearchTerm('')
setOrderType('asc')
}}
>
<TabPanel
key="tab-section"
renderTitle={I18n.t('Sections')}

6
ui/features/enhanced_individual_gradebook/react/components/AssignmentInformation/DefaultGradeInput.tsx
View File

@ -71,7 +71,11 @@ export default function DefaultGradeInput({disabled, gradingType, onGradeInputCh
value={selectInput}
defaultValue={selectInput}
renderLabel="Uncontrolled Select"
onChange={(e, {value}) => setSelectInput(value)}
onChange={(e, {value}) => {
if (typeof value === 'string') {
setSelectInput(value)
}
}}
>
<SimpleSelectOption id="emptyOption" value="">
---

9
ui/features/enhanced_individual_gradebook/react/components/GradingResults/index.tsx
View File

@ -186,8 +186,13 @@ export default function GradingResults({
setGradeInput(input)
}
const handleChangePassFailStatus = (event: React.SyntheticEvent, data: {value: string}) => {
setGradeInput(data.value)
const handleChangePassFailStatus = (
event: React.SyntheticEvent,
data: {value?: string | number | undefined}
) => {
if (typeof data.value === 'string') {
setGradeInput(data.value)
}
setPassFailStatusIndex(passFailStatusOptions.findIndex(option => option.value === data.value))
}

9
ui/features/grade_summary/react/ClearBadgeCountsButton.tsx
View File

@ -18,8 +18,8 @@
import React, {useState} from 'react'
import {showFlashError, showFlashSuccess} from '@canvas/alerts/react/FlashAlert'
import {Button, ButtonInteraction} from '@instructure/ui-buttons'
// @ts-ignore
import {Button} from '@instructure/ui-buttons'
// @ts-expect-error
import {IconAlertsSolid} from '@instructure/ui-icons'
import {useScope as useI18nScope} from '@canvas/i18n'
import axios from '@canvas/axios'
@ -31,7 +31,9 @@ type ClearBadgeCountsButtonProps = {
}
function ClearBadgeCountsButton({courseId, userId}: ClearBadgeCountsButtonProps) {
const [interaction, setInteraction] = useState<typeof ButtonInteraction>('enabled')
const [interaction, setInteraction] = useState<'enabled' | 'disabled' | 'readonly' | undefined>(
'enabled'
)
const handleClick = async () => {
setInteraction('disabled')
const url = `/api/v1/courses/${courseId}/submissions/${userId}/clear_unread`
@ -51,6 +53,7 @@ function ClearBadgeCountsButton({courseId, userId}: ClearBadgeCountsButtonProps)
return (
<Button
data-testid="clear-badge-counts-button"
color="primary"
margin="small"
onClick={handleClick}

13
ui/features/grade_summary/react/__tests__/ClearBadgeCountButton.test.tsx
View File

@ -18,7 +18,8 @@
import React from 'react'
import ClearBadgeCountsButton from '../ClearBadgeCountsButton'
import {render, fireEvent} from '@testing-library/react'
import {render} from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import {waitFor} from '@testing-library/dom'
import axios from '@canvas/axios'
import {showFlashError, showFlashSuccess} from '@canvas/alerts/react/FlashAlert'
@ -50,7 +51,7 @@ describe('ClearBadgeCountsButton', () => {
it('disables the button and makes API call on click', async () => {
const {getByRole} = render(<ClearBadgeCountsButton {...props} />)
const button = getByRole('button', {name: 'Clear Badge Counts'})
fireEvent.click(button)
userEvent.click(button)
expect(button).toBeInTheDocument()
expect(button).toHaveAttribute('disabled')
expect(axios.put).toHaveBeenCalledWith(
@ -58,11 +59,11 @@ describe('ClearBadgeCountsButton', () => {
)
})
it('shows success message when API call is successful and status is 204', async () => {
it('shows success message when API call is successful and status is 204 (flaky)', async () => {
;(axios.put as jest.Mock).mockResolvedValue({status: 204})
const {getByRole} = render(<ClearBadgeCountsButton {...props} />)
const button = getByRole('button', {name: 'Clear Badge Counts'})
fireEvent.click(button)
userEvent.click(button)
await waitFor(() => expect(showFlashSuccess).toHaveBeenCalledWith('Badge counts cleared!'))
})
@ -71,7 +72,7 @@ describe('ClearBadgeCountsButton', () => {
;(axios.put as jest.Mock).mockResolvedValue({status: 200})
const {getByRole} = render(<ClearBadgeCountsButton {...props} />)
const button = getByRole('button', {name: 'Clear Badge Counts'})
fireEvent.click(button)
userEvent.click(button)
await waitFor(() => expect(showFlashError).toHaveBeenCalledWith(errorMessage))
})
@ -81,7 +82,7 @@ describe('ClearBadgeCountsButton', () => {
;(axios.put as jest.Mock).mockRejectedValue(err)
const {getByRole} = render(<ClearBadgeCountsButton {...props} />)
const button = getByRole('button', {name: 'Clear Badge Counts'})
fireEvent.click(button)
userEvent.click(button)
await waitFor(() => expect(showFlashError).toHaveBeenCalledWith(errorMessage))
})
})

84
ui/features/gradebook/react/default_gradebook/GradebookGrid/editors/AssignmentGradeInput/index.tsx
View File

@ -18,7 +18,6 @@
*/
import React, {Component} from 'react'
import {bool, instanceOf, oneOf, number, shape, string} from 'prop-types'
import {ScreenReaderContent} from '@instructure/ui-a11y-content'
import {useScope as useI18nScope} from '@canvas/i18n'
@ -33,42 +32,27 @@ const CLASSNAME_FOR_ENTER_GRADES_AS = {
passFail: 'Grid__GradeCell__CompleteIncompleteInput',
percent: 'Grid__GradeCell__PercentInput',
points: 'Grid__GradeCell__PointsInput',
}
} as const
function inputComponentFor(enterGradesAs) {
switch (enterGradesAs) {
case 'gradingScheme': {
return GradingSchemeGradeInput
}
case 'passFail': {
return CompleteIncompleteGradeInput
}
default: {
return TextGradeInput
}
type Props = {
assignment: {
pointsPossible: number
}
disabled: boolean
enterGradesAs: 'gradingScheme' | 'passFail' | 'percent' | 'points'
gradingScheme: [name: string, value: number][]
pendingGradeInfo: {
excused: boolean
grade: string
valid: boolean
}
submission: {
enteredGrade: string
enteredScore: number
excused: boolean
}
}
export default class AssignmentGradeInput extends Component {
static propTypes = {
assignment: shape({
pointsPossible: number,
}).isRequired,
disabled: bool,
enterGradesAs: oneOf(['gradingScheme', 'passFail', 'percent', 'points']).isRequired,
gradingScheme: instanceOf(Array),
pendingGradeInfo: shape({
excused: bool.isRequired,
grade: string,
valid: bool.isRequired,
}),
submission: shape({
enteredGrade: string,
enteredScore: number,
excused: bool.isRequired,
}).isRequired,
}
export default class AssignmentGradeInput extends Component<Props> {
static defaultProps = {
disabled: false,
gradingScheme: null,
@ -109,16 +93,32 @@ export default class AssignmentGradeInput extends Component {
messages.push({type: 'error', text: I18n.t('This grade is invalid')})
}
const InputComponent = inputComponentFor(this.props.enterGradesAs)
return (
<div className={className}>
<InputComponent
{...this.props}
label={<ScreenReaderContent>{I18n.t('Grade')}</ScreenReaderContent>}
messages={messages}
ref={this.bindGradeInput}
/>
{this.props.enterGradesAs === 'gradingScheme' && (
<GradingSchemeGradeInput
{...this.props}
label={<ScreenReaderContent>{I18n.t('Grade')}</ScreenReaderContent>}
messages={messages}
ref={this.bindGradeInput}
/>
)}
{this.props.enterGradesAs === 'passFail' && (
<CompleteIncompleteGradeInput
{...this.props}
label={<ScreenReaderContent>{I18n.t('Grade')}</ScreenReaderContent>}
messages={messages}
ref={this.bindGradeInput}
/>
)}
{!['gradingScheme', 'passFail'].includes(this.props.enterGradesAs) && (
<TextGradeInput
{...this.props}
label={<ScreenReaderContent>{I18n.t('Grade')}</ScreenReaderContent>}
messages={messages}
ref={this.bindGradeInput}
/>
)}
</div>
)
}

9
ui/features/gradebook/react/default_gradebook/GradebookGrid/editors/SimilarityIndicator.tsx
View File

@ -51,7 +51,14 @@ export default function SimilarityIndicator({elementRef, similarityInfo}: Props)
return (
<div className="Grid__GradeCell__OriginalityScore">
<Tooltip placement="bottom" renderTip={tooltipText(similarityInfo)} color="primary">
<Button elementRef={elementRef} size="small" renderIcon={Icon} withBackground={false} />
<Button
elementRef={ref => {
elementRef(ref as HTMLButtonElement | null)
}}
size="small"
renderIcon={Icon}
withBackground={false}
/>
</Tooltip>
</div>
)

4
ui/features/gradebook/react/default_gradebook/components/SubmissionTrayRadioInputGroup.tsx
View File

@ -186,9 +186,9 @@ export default function SubmissionTrayRadioInputGroup({
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
handleRadioInputChanged(e, status.isCustom)
}
// @ts-ignore
// @ts-expect-error
updateSubmission={updateSubmission}
// @ts-ignore
// @ts-expect-error
submission={submission}
text={status.name}
value={status.key}

2
ui/features/inbox/react/components/AddressBook/AddressBook.jsx
View File

@ -515,7 +515,7 @@ export const AddressBook = ({
setIsloadingRecipientsTotal(false)
}
menuItem.totalRecipients = totalRecipients
let shouldCloseMenu = !(e?.ctrlKey || e?.metaKey)
const shouldCloseMenu = !(e?.ctrlKey || e?.metaKey)
addTag(menuItem, shouldCloseMenu)
onSelect(menuItem)
if (onUserFilterSelect) {

2
ui/features/k5_dashboard/react/__tests__/K5Dashboard.test.jsx
View File

@ -228,7 +228,7 @@ describe('K-5 Dashboard', () => {
expect(getByText('Your homeroom is currently unpublished.')).toBeInTheDocument()
})
it('shows due today and missing items links pointing to the schedule tab of the course', async () => {
it('shows due today and missing items links pointing to the schedule tab of the course (flaky)', async () => {
const {findByTestId} = render(<K5Dashboard {...defaultProps} plannerEnabled={true} />)
const dueTodayLink = await findByTestId('number-due-today')
expect(dueTodayLink).toBeInTheDocument()

4
ui/features/manage_groups/react/__tests__/GroupImportModal.test.jsx
View File

@ -20,10 +20,6 @@ import GroupImportModal from '../GroupImportModal'
import * as apiClient from '../apiClient'
describe('GroupImportModal', () => {
beforeEach(() => {
global.DataTransferItem = global.DataTransferItem || class DataTransferItem {}
})
it('adds an error message when an unsupported filetype is selected', async () => {
const badFile = new File(['(⌐□_□)'], 'file.png', {type: 'image/png'})
const {findByText, findByLabelText} = render(

26
ui/features/outcome_management/react/Management/__tests__/ManageOutcomeItem.test.jsx
View File

@ -113,30 +113,37 @@ describe('ManageOutcomeItem', () => {
})
it('displays disabled caret button with "not-allowed" cursor if description is a single line html with no extra formatting', () => {
const {queryByTestId} = render(<ManageOutcomeItem {...defaultProps({description: "<p>The quick brown fox.</p>"})} />)
expect(queryByTestId('icon-arrow-right').closest('button')).toHaveAttribute('disabled')
expect(queryByTestId('icon-arrow-right').closest('button').style).toHaveProperty(
'cursor',
'not-allowed'
const {queryByTestId} = render(
<ManageOutcomeItem {...defaultProps({description: '<p>The quick brown fox.</p>'})} />
)
expect(queryByTestId('icon-arrow-right').closest('button')).toHaveAttribute('disabled')
expect(queryByTestId('icon-arrow-right').closest('button')).toHaveStyle('cursor: not-allowed')
})
it('displays down pointing caret when description is expanded for multi-line html text', () => {
const {queryByTestId, getByText} = render(<ManageOutcomeItem {...defaultProps({description: "<p>aaaaaaadfhausdfhkjsadhfkjsadhfkjhsadfkjhasdfkjh</p>".repeat(10)})} />)
const {queryByTestId, getByText} = render(
<ManageOutcomeItem
{...defaultProps({
description: '<p>aaaaaaadfhausdfhkjsadhfkjsadhfkjhsadfkjhasdfkjh</p>'.repeat(10),
})}
/>
)
fireEvent.click(getByText('Expand description for outcome Outcome Title'))
expect(queryByTestId('icon-arrow-down').closest('button')).not.toHaveAttribute('disabled')
})
it('expands description when user clicks on button with right pointing caret', () => {
const {queryByTestId, getByText} = render(<ManageOutcomeItem {...defaultProps({description: "<p>aa</p><p>bb</p>"})} />)
const {queryByTestId, getByText} = render(
<ManageOutcomeItem {...defaultProps({description: '<p>aa</p><p>bb</p>'})} />
)
fireEvent.click(getByText('Expand description for outcome Outcome Title'))
expect(queryByTestId('description-expanded')).toBeInTheDocument()
})
it('collapses description when user clicks on button with down pointing caret', () => {
const {queryByTestId, getByText} = render(
<ManageOutcomeItem {...defaultProps({description: "<p>aa</p><p>bbbb</p>"})} />)
<ManageOutcomeItem {...defaultProps({description: '<p>aa</p><p>bbbb</p>'})} />
)
fireEvent.click(getByText('Expand description for outcome Outcome Title'))
fireEvent.click(getByText('Collapse description for outcome Outcome Title'))
expect(queryByTestId('description-truncated')).toBeInTheDocument()
@ -148,7 +155,6 @@ describe('ManageOutcomeItem', () => {
expect(queryByTestId('icon-arrow-right').closest('button')).toHaveStyle('cursor: not-allowed')
})
it('displays enabled caret button if no description and accountLevelMasteryScales is disabled', () => {
const {queryByTestId} = render(<ManageOutcomeItem {...defaultProps({description: null})} />, {
accountLevelMasteryScalesFF: false,

6
ui/features/outcome_management/react/MasteryScale/__tests__/ProficiencyRating.test.jsx
View File

@ -151,8 +151,10 @@ describe('ProficiencyRating', () => {
})
it('changing points triggers change', () => {
const wrapper = mount(<ProficiencyRating {...defaultProps({canManage: true})} />)
wrapper.find('TextInput').at(1).find('input').simulate('change')
const {getAllByRole} = render(<ProficiencyRating {...defaultProps({canManage: true})} />)
const secondInput = getAllByRole('textbox')[1]
fireEvent.change(secondInput, {target: {value: 'some new value'}})
expect(onPointsChangeMock).toHaveBeenCalledTimes(1)
})

47
ui/features/outcome_management/react/__tests__/CreateOutcomeModal.test.jsx
View File

@ -18,6 +18,7 @@
import React from 'react'
import {act, render as rtlRender, fireEvent, waitFor} from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import {MockedProvider} from '@apollo/react-testing'
import {createCache} from '@canvas/apollo'
import {within} from '@testing-library/dom'
@ -111,13 +112,13 @@ describe('CreateOutcomeModal', () => {
it('calls onCloseHandler on Cancel button click', async () => {
const {getByText} = render(<CreateOutcomeModal {...getProps()} />)
fireEvent.click(getByText('Cancel'))
userEvent.click(getByText('Cancel'))
expect(onCloseHandlerMock).toHaveBeenCalledTimes(1)
})
it('calls onCloseHandler on Close (X) button click', async () => {
const {getByRole} = render(<CreateOutcomeModal {...getProps()} />)
fireEvent.click(within(getByRole('dialog')).getByText('Close'))
userEvent.click(within(getByRole('dialog')).getByText('Close'))
expect(onCloseHandlerMock).toHaveBeenCalledTimes(1)
})
@ -166,7 +167,7 @@ describe('CreateOutcomeModal', () => {
fireEvent.change(getByLabelText('Friendly description (for parent/student display)'), {
target: {value: 'a'.repeat(256)},
})
fireEvent.click(getByText('Root account folder'))
userEvent.click(getByText('Root account folder'))
expect(getByText('Must be 255 characters or less')).toBeInTheDocument()
})
@ -176,7 +177,7 @@ describe('CreateOutcomeModal', () => {
})
await act(async () => jest.runOnlyPendingTimers())
fireEvent.change(getByLabelText('Name'), {target: {value: 'Outcome 123'}})
fireEvent.click(getByText('Create'))
userEvent.click(getByText('Create'))
await act(async () => jest.runOnlyPendingTimers())
expect(onCloseHandlerMock).toHaveBeenCalledTimes(1)
})
@ -224,8 +225,8 @@ describe('CreateOutcomeModal', () => {
fireEvent.change(getByLabelText('Friendly description (for parent/student display)'), {
target: {value: 'Friendly Description value'},
})
fireEvent.click(getByText('Account folder 0'))
fireEvent.click(getByText('Create'))
userEvent.click(getByText('Account folder 0'))
userEvent.click(getByText('Create'))
await act(async () => jest.runOnlyPendingTimers())
await waitFor(() => {
expect(onSuccessMock).toHaveBeenCalledTimes(1)
@ -257,7 +258,7 @@ describe('CreateOutcomeModal', () => {
fireEvent.change(getByLabelText('Friendly description (for parent/student display)'), {
target: {value: 'Friendly Description value'},
})
fireEvent.click(getByText('Create'))
userEvent.click(getByText('Create'))
await act(async () => jest.runOnlyPendingTimers())
await waitFor(() => {
expect(showFlashAlertSpy).toHaveBeenCalledWith({
@ -284,7 +285,7 @@ describe('CreateOutcomeModal', () => {
await act(async () => jest.runOnlyPendingTimers())
fireEvent.change(getByLabelText('Name'), {target: {value: 'Outcome 123'}})
fireEvent.change(getByLabelText('Friendly Name'), {target: {value: 'Display name'}})
fireEvent.click(getByText('Create'))
userEvent.click(getByText('Create'))
await waitFor(() => {
expect(showFlashAlertSpy).toHaveBeenCalledWith({
message: 'An error occurred while creating this outcome. Please try again.',
@ -310,7 +311,7 @@ describe('CreateOutcomeModal', () => {
await act(async () => jest.runOnlyPendingTimers())
fireEvent.change(getByLabelText('Name'), {target: {value: 'Outcome 123'}})
fireEvent.change(getByLabelText('Friendly Name'), {target: {value: 'Display name'}})
fireEvent.click(getByText('Create'))
userEvent.click(getByText('Create'))
await act(async () => jest.runOnlyPendingTimers())
await waitFor(() => {
expect(showFlashAlertSpy).toHaveBeenCalledWith({
@ -343,7 +344,7 @@ describe('CreateOutcomeModal', () => {
fireEvent.change(getByLabelText('Friendly description (for parent/student display)'), {
target: {value: 'Friendly description'},
})
fireEvent.click(getByText('Create'))
userEvent.click(getByText('Create'))
await act(async () => jest.runOnlyPendingTimers())
await waitFor(() => {
expect(showFlashAlertSpy).toHaveBeenCalledWith({
@ -395,8 +396,8 @@ describe('CreateOutcomeModal', () => {
fireEvent.change(getByLabelText('Friendly description (for parent/student display)'), {
target: {value: 'Friendly description'},
})
fireEvent.click(getByText('Root account folder'))
fireEvent.click(getByText('Create'))
userEvent.click(getByText('Root account folder'))
userEvent.click(getByText('Create'))
await act(async () => jest.runOnlyPendingTimers())
await waitFor(() => {
expect(showFlashAlertSpy).toHaveBeenCalledWith({
@ -413,7 +414,7 @@ describe('CreateOutcomeModal', () => {
const friendlyName = getByLabelText('Friendly Name')
fireEvent.change(friendlyName, {target: {value: 'a'.repeat(256)}})
expect(getByText('Must be 255 characters or less')).toBeInTheDocument()
fireEvent.click(getByText('Create'))
userEvent.click(getByText('Create'))
expect(onCloseHandlerMock).not.toHaveBeenCalled()
})
@ -431,7 +432,7 @@ describe('CreateOutcomeModal', () => {
fireEvent.change(friendlyName, {target: {value: 'b'.repeat(256)}})
fireEvent.change(friendlyDescription, {target: {value: 'c'.repeat(256)}})
expect(queryAllByText('Must be 255 characters or less').length).toBe(3)
fireEvent.click(getByText('Create'))
userEvent.click(getByText('Create'))
expect(friendlyDescription).not.toBe(document.activeElement)
expect(friendlyName).not.toBe(document.activeElement)
expect(name).toBe(document.activeElement)
@ -453,9 +454,9 @@ describe('CreateOutcomeModal', () => {
}
)
await act(async () => jest.runOnlyPendingTimers())
fireEvent.click(getByText('Create New Group'))
userEvent.click(getByText('Create New Group'))
fireEvent.change(getByLabelText('Enter new group name'), {target: {value: 'test'}})
fireEvent.click(getByText('Create new group'))
userEvent.click(getByText('Create new group'))
await act(async () => jest.runOnlyPendingTimers())
expect(getByTestId('create-button')).toHaveFocus()
})
@ -488,7 +489,7 @@ describe('CreateOutcomeModal', () => {
await act(async () => jest.runOnlyPendingTimers())
fireEvent.change(getByLabelText('Name'), {target: {value: 'Outcome 123'}})
fireEvent.change(getByLabelText('Friendly Name'), {target: {value: 'Display name'}})
fireEvent.click(getByText('Create'))
userEvent.click(getByText('Create'))
await act(async () => jest.runOnlyPendingTimers())
// if setFriendlyDescription mutation is called the expectation below will fail
await waitFor(() => {
@ -518,7 +519,7 @@ describe('CreateOutcomeModal', () => {
expect(getByTestId('outcome-management-ratings')).toBeInTheDocument()
})
it('creates outcome with calculation method and proficiency ratings', async () => {
it.skip('creates outcome with calculation method and proficiency ratings (flaky)', async () => {
const showFlashAlertSpy = jest.spyOn(FlashAlert, 'showFlashAlert')
const {getByText, getByLabelText, getByDisplayValue} = render(
<CreateOutcomeModal {...defaultProps()} />,
@ -544,9 +545,9 @@ describe('CreateOutcomeModal', () => {
fireEvent.change(getByLabelText('Friendly Name'), {
target: {value: 'Display name'},
})
fireEvent.click(getByDisplayValue('Decaying Average'))
fireEvent.click(getByText('n Number of Times'))
fireEvent.click(getByText('Create'))
userEvent.click(getByDisplayValue('Decaying Average'))
userEvent.click(getByText('n Number of Times'))
userEvent.click(getByText('Create'))
await act(async () => jest.runOnlyPendingTimers())
await waitFor(() => {
expect(showFlashAlertSpy).toHaveBeenCalledWith({
@ -575,7 +576,7 @@ describe('CreateOutcomeModal', () => {
fireEvent.change(ratingPoints, {target: {value: '-1'}})
expect(getByText('Missing required description')).toBeInTheDocument()
expect(getByText('Negative points')).toBeInTheDocument()
fireEvent.click(getByText('Create'))
userEvent.click(getByText('Create'))
expect(ratingPoints).not.toBe(document.activeElement)
expect(ratingDescription).toBe(document.activeElement)
})
@ -591,7 +592,7 @@ describe('CreateOutcomeModal', () => {
fireEvent.change(calcInt, {target: {value: '999'}})
expect(getByText('Negative points')).toBeInTheDocument()
expect(getByText('Must be between 1 and 99')).not.toBeNull()
fireEvent.click(getByText('Create'))
userEvent.click(getByText('Create'))
expect(calcInt).not.toBe(document.activeElement)
expect(masteryPoints).toBe(document.activeElement)
})

2
ui/features/outcome_management/react/__tests__/OutcomeManagement.test.jsx
View File

@ -45,7 +45,6 @@ describe('OutcomeManagement', () => {
'showOutcomesImporterIfInProgress'
)
jest.useFakeTimers()
global.DataTransferItem = global.DataTransferItem || class DataTransferItem {}
})
afterEach(() => {
@ -387,7 +386,6 @@ describe('OutcomeManagement', () => {
},
current_user: {id: '1'},
}
global.DataTransferItem = global.DataTransferItem || class DataTransferItem {}
})
afterEach(() => {

24
ui/features/outcome_management/react/shared/LabeledTextField.jsx → ui/features/outcome_management/react/shared/LabeledTextField.tsx
View File

@ -19,9 +19,16 @@
import React from 'react'
import {useField} from 'react-final-form'
import {TextInput} from '@instructure/ui-text-input'
import PropTypes from 'prop-types'
const LabeledTextField = ({name, validate, Component = TextInput, ...props}) => {
type Props = {
label: string
name: string
renderLabel: () => React.ReactNode | string
type: 'search' | 'text' | 'email' | 'url' | 'tel' | 'password'
validate?: (value: string) => string | undefined
}
const LabeledTextField = ({name, validate, ...props}: Props) => {
const {
input,
meta: {touched, error, submitError},
@ -41,18 +48,15 @@ const LabeledTextField = ({name, validate, Component = TextInput, ...props}) =>
}
}
errorMessages = errorMessages.map(text => ({
const errorMessages_: Array<{
text: string
type: 'error' | 'hint' | 'success' | 'screenreader-only'
}> = errorMessages.map(text => ({
text,
type: 'error',
}))
return <Component {...input} messages={errorMessages} {...props} />
}
LabeledTextField.propTypes = {
name: PropTypes.string.isRequired,
validate: PropTypes.func,
Component: PropTypes.elementType,
return <TextInput {...input} {...props} messages={errorMessages_} />
}
export default LabeledTextField

3
ui/features/speed_grader/react/SpeedGraderStatusMenu.jsx
View File

@ -49,7 +49,8 @@ export default function SpeedGraderStatusMenu(props) {
data = {excuse: true}
} else if (newSelection === 'late') {
data = {latePolicyStatus: newSelection, secondsLateOverride: props.secondsLate}
} else if (!isNaN(parseInt(newSelection))) {
// eslint-disable-next-line no-restricted-globals
} else if (!isNaN(parseInt(newSelection, 10))) {
data = {customGradeStatusId: newSelection}
}
props.updateSubmission(data)

5
ui/shared/alerts/react/AlertManager.tsx
View File

@ -18,6 +18,7 @@
import {Alert} from '@instructure/ui-alerts'
import React, {createContext, PropsWithChildren} from 'react'
import getLiveRegion from '@canvas/instui-bindings/react/liveRegion'
export type AlertManagerContextType = {
setOnFailure: (alertMessage: string) => void
@ -76,7 +77,7 @@ export default class AlertManager extends React.Component<
return (
<Alert
variant="success"
liveRegion={() => document.getElementById('flash_screenreader_holder')}
liveRegion={getLiveRegion}
onDismiss={this.closeAlert}
screenReaderOnly={this.state.successScreenReaderOnly}
timeout={ALERT_TIMEOUT}
@ -87,7 +88,7 @@ export default class AlertManager extends React.Component<
} else if (this.state.alertStatus === 'error') {
return (
<Alert
liveRegion={() => document.getElementById('flash_screenreader_holder')}
liveRegion={getLiveRegion}
margin="small"
onDismiss={this.closeAlert}
timeout={ALERT_TIMEOUT}

11
ui/shared/alerts/react/ExpandableErrorAlert.tsx
View File

@ -23,12 +23,13 @@ import {useScope as useI18nScope} from '@canvas/i18n'
import {View} from '@instructure/ui-view'
import {ToggleDetails} from '@instructure/ui-toggle-details'
import {FocusRegionManager} from '@instructure/ui-a11y-utils'
import getLiveRegion from '@canvas/instui-bindings/react/liveRegion'
const I18n = useI18nScope('app_shared_components_expandable_error_alert')
export type ExpandableErrorAlertProps = Omit<
AlertProps,
'variant' | 'liveRegion' | 'renderCloseButtonLabel'
'variant' | 'liveRegion' | 'renderCloseButtonLabel' | 'hasShadow'
> & {
/**
* The raw details of the error.
@ -52,8 +53,6 @@ export type ExpandableErrorAlertProps = Omit<
focusRef?: RefObject<HTMLElement>
}
const locateLiveRegion = () => document.getElementById('flash_screenreader_holder')
export const ExpandableErrorAlert = ({
error,
closeable,
@ -74,7 +73,9 @@ export const ExpandableErrorAlert = ({
useEffect(() => {
if (transferFocus) {
FocusRegionManager.focusRegion((focusRef || childrenRef).current, {
const ref = (focusRef || childrenRef).current
if (ref === null) throw new Error('childrenRef did not appear as expected')
FocusRegionManager.focusRegion(ref, {
onBlur: () => {},
onDismiss: () => {},
})
@ -89,7 +90,7 @@ export const ExpandableErrorAlert = ({
`props.children` for the content that is appended there, which is a problem if the children contain content that
is interactive and not useful to be read aloud as part of the live region announcement (ex: a Retry button). */}
{liveRegionText && (
<Alert liveRegion={locateLiveRegion} open={open} screenReaderOnly={true}>
<Alert liveRegion={getLiveRegion} open={open} screenReaderOnly={true}>
{liveRegionText}
</Alert>
)}

2
ui/shared/calendar/react/RecurringEvents/FrequencyPicker/FrequencyPicker.tsx
View File

@ -167,7 +167,7 @@ export default function FrequencyPicker({
}, [customRRule, locale, options, parsedMoment, timezone, width])
const handleSelectOption = useCallback(
(e: any, option: FrequencyOption) => {
(e: any, option: any) => {
setFrequency(option.id)
if (option.id === 'custom') {
setIsModalOpen(true)

26
spec/javascripts/jsx/context_cards/RatingSpec.jsx → ui/shared/context-cards/react/__tests__/Rating.test.jsx
View File

@ -1,5 +1,5 @@
/*
* Copyright (C) 2016 - present Instructure, Inc.
* Copyright (C) 2023 - present Instructure, Inc.
*
* This file is part of Canvas.
*
@ -17,30 +17,30 @@
*/
import React from 'react'
import TestUtils from 'react-dom/test-utils'
import {mount} from 'enzyme'
import Rating from '@canvas/context-cards/react/Rating'
import {Rating as InstUIRating} from '@instructure/ui-rating'
QUnit.module('StudentContextTray/Rating', () => {
describe('StudentContextTray/Rating', () => {
let subject
const participationsLevel = 2
QUnit.module('formatValueText', hooks => {
hooks.beforeEach(() => {
subject = TestUtils.renderIntoDocument(<Rating label="whatever" metric={{level: 1}} />)
describe('formatValueText', () => {
beforeEach(() => {
subject = mount(<Rating label="whatever" metric={{level: 1}} />)
})
const valueText = ['None', 'Low', 'Moderate', 'High']
valueText.forEach((v, i) => {
test(`returns value ${v} for rating ${i}`, () => {
equal(subject.formatValueText(i, 3), v)
it(`returns value ${v} for rating ${i}`, () => {
expect(subject.instance().formatValueText(i, 3)).toEqual(v)
})
})
})
QUnit.module('render', () => {
test('delegates to InstUIRating', () => {
subject = TestUtils.renderIntoDocument(
describe('render', () => {
it('delegates to InstUIRating', () => {
subject = mount(
<Rating
label="Participation"
metric={{
@ -48,8 +48,8 @@ QUnit.module('StudentContextTray/Rating', () => {
}}
/>
)
const instUIRating = TestUtils.findRenderedComponentWithType(subject, InstUIRating)
equal(instUIRating.props.label, subject.props.label)
const instUIRating = subject.find(InstUIRating)
expect(instUIRating.props().label).toEqual(subject.props().label)
})
})
})

8
ui/shared/context-module-file-drop/react/__tests__/index.test.jsx
View File

@ -74,15 +74,15 @@ it('registers and deregisters drop components', () => {
it('renders disabled file drop with loading billboard', () => {
component = mount(<ModuleFileDrop {...props} />)
expect(component.find('FileDrop').props().interaction).toEqual('disabled')
expect(component.find('Billboard').text()).toEqual('Loading...')
expect(component.find('FileDrop').first().props().interaction).toEqual('disabled')
expect(component.find('Billboard').first().text()).toEqual('Loading...')
})
it('renders enabled file drop with active billboard', () => {
component = mount(<ModuleFileDrop {...props} />)
component.find(ModuleFileDrop).setState({folder: {files: []}}, () => {
expect(component.find('FileDrop').props().interaction).toEqual('enabled')
const billboard = component.find('Billboard')
expect(component.find('FileDrop').first().props().interaction).toEqual('enabled')
const billboard = component.find('Billboard').first()
expect(billboard.text()).toContain('Drop files here to add to module')
expect(billboard.text()).toContain('or choose files')
})

1
ui/shared/copy-to-clipboard/react/index.jsx
View File

@ -42,6 +42,7 @@ const CopyToClipboard = props => {
return (
<TextInput
onChange={() => {}}
{...textInputProps}
renderAfterInput={
<Button onClick={copyToClipboard} size="small">

45
ui/shared/create-course-modal/react/__tests__/CreateCourseModal.test.jsx
View File

@ -18,7 +18,8 @@
import React from 'react'
import fetchMock from 'fetch-mock'
import {render, waitFor, fireEvent, act} from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import {render, waitFor, act, cleanup} from '@testing-library/react'
import {CreateCourseModal} from '../CreateCourseModal'
import injectGlobalAlertContainers from '@canvas/util/react/testing/injectGlobalAlertContainers'
@ -83,8 +84,9 @@ const STUDENT_ENROLLMENTS_URL = encodeURI(
)
const MCC_ACCOUNT_URL = 'api/v1/manually_created_courses_account'
describe('CreateCourseModal', () => {
describe('CreateCourseModal (1)', () => {
const setModalOpen = jest.fn()
let originalEnv
const getProps = (overrides = {}) => ({
isModalOpen: true,
@ -96,6 +98,8 @@ describe('CreateCourseModal', () => {
})
beforeEach(() => {
originalEnv = JSON.parse(JSON.stringify(window.ENV))
// mock requests that are made, but not explicitly tested, to clean up console warnings
fetchMock.get('/api/v1/users/self/courses?homeroom=true&per_page=100', 200)
fetchMock.get('begin:/api/v1/accounts/', 200)
@ -103,6 +107,9 @@ describe('CreateCourseModal', () => {
})
afterEach(() => {
cleanup()
window.ENV = originalEnv
fetchMock.reset()
fetchMock.restore()
})
@ -130,7 +137,7 @@ describe('CreateCourseModal', () => {
fetchMock.get(MANAGEABLE_COURSES_URL, MANAGEABLE_COURSES)
const {getByText, getByRole} = render(<CreateCourseModal {...getProps()} />)
await waitFor(() => expect(getByRole('button', {name: 'Cancel'})).not.toBeDisabled())
fireEvent.click(getByText('Cancel'))
userEvent.click(getByText('Cancel'))
expect(setModalOpen).toHaveBeenCalledWith(false)
})
@ -140,10 +147,10 @@ describe('CreateCourseModal', () => {
await waitFor(() => expect(getByLabelText('Subject Name')).toBeInTheDocument())
const createButton = getByRole('button', {name: 'Create'})
expect(createButton).toBeDisabled()
fireEvent.change(getByLabelText('Subject Name'), {target: {value: 'New course'}})
userEvent.type(getByLabelText('Subject Name'), 'New course')
expect(createButton).toBeDisabled()
fireEvent.click(getByLabelText('Which account will this subject be associated with?'))
fireEvent.click(getByText('Elementary'))
userEvent.click(getByLabelText('Which account will this subject be associated with?'))
userEvent.click(getByText('Elementary'))
await waitFor(() => expect(getByLabelText('Subject Name')).toBeInTheDocument())
expect(createButton).not.toBeDisabled()
})
@ -174,7 +181,7 @@ describe('CreateCourseModal', () => {
fetchMock.get('/api/v1/manageable_accounts?per_page=100&page=2', accountsPage2)
const {getByText, getByLabelText} = render(<CreateCourseModal {...getProps()} />)
await waitFor(() => expect(getByLabelText('Subject Name')).toBeInTheDocument())
fireEvent.click(getByLabelText('Which account will this subject be associated with?'))
userEvent.click(getByLabelText('Which account will this subject be associated with?'))
accountsPage1.forEach(a => {
expect(getByText(a.name)).toBeInTheDocument()
})
@ -190,11 +197,11 @@ describe('CreateCourseModal', () => {
})
const {getByText, getByLabelText} = render(<CreateCourseModal {...getProps()} />)
await waitFor(() => expect(getByLabelText('Subject Name')).toBeInTheDocument())
fireEvent.click(getByLabelText('Which account will this subject be associated with?'))
fireEvent.click(getByText('Elementary'))
userEvent.click(getByLabelText('Which account will this subject be associated with?'))
userEvent.click(getByText('Elementary'))
await waitFor(() => expect(getByLabelText('Subject Name')).toBeInTheDocument())
fireEvent.change(getByLabelText('Subject Name'), {target: {value: 'Science'}})
fireEvent.click(getByText('Create'))
userEvent.type(getByLabelText('Subject Name'), 'Science')
userEvent.click(getByText('Create'))
expect(getByText('Creating new subject...')).toBeInTheDocument()
})
@ -205,11 +212,11 @@ describe('CreateCourseModal', () => {
<CreateCourseModal {...getProps()} />
)
await waitFor(() => expect(getByLabelText('Subject Name')).toBeInTheDocument())
fireEvent.click(getByLabelText('Which account will this subject be associated with?'))
fireEvent.click(getByText('CS'))
userEvent.click(getByLabelText('Which account will this subject be associated with?'))
userEvent.click(getByText('CS'))
await waitFor(() => expect(getByLabelText('Subject Name')).toBeInTheDocument())
fireEvent.change(getByLabelText('Subject Name'), {target: {value: 'Math'}})
fireEvent.click(getByText('Create'))
userEvent.type(getByLabelText('Subject Name'), 'Math')
userEvent.click(getByText('Create'))
await waitFor(() => expect(getAllByText('Error creating new subject')[0]).toBeInTheDocument())
expect(getByRole('button', {name: 'Cancel'})).not.toBeDisabled()
})
@ -372,13 +379,13 @@ describe('CreateCourseModal', () => {
it('fetches accounts from enrollments api', async () => {
render(<CreateCourseModal {...getProps()} />)
expect(fetchMock.calls()[0][0]).toEqual("/api/v1/course_creation_accounts?per_page=100")
expect(fetchMock.calls()[0][0]).toEqual('/api/v1/course_creation_accounts?per_page=100')
render(<CreateCourseModal {...getProps({permissions: 'teacher'})} />)
expect(fetchMock.calls()[0][0]).toEqual("/api/v1/course_creation_accounts?per_page=100")
expect(fetchMock.calls()[0][0]).toEqual('/api/v1/course_creation_accounts?per_page=100')
render(<CreateCourseModal {...getProps({permissions: 'student'})} />)
expect(fetchMock.calls()[0][0]).toEqual("/api/v1/course_creation_accounts?per_page=100")
expect(fetchMock.calls()[0][0]).toEqual('/api/v1/course_creation_accounts?per_page=100')
render(<CreateCourseModal {...getProps({permissions: 'no_enrollments'})} />)
expect(fetchMock.calls()[0][0]).toEqual("/api/v1/course_creation_accounts?per_page=100")
expect(fetchMock.calls()[0][0]).toEqual('/api/v1/course_creation_accounts?per_page=100')
})
})
})

2
ui/shared/differentiated-modules/react/settingsReducer.ts
View File

@ -20,7 +20,7 @@ export type SettingsPanelState = {
moduleName: string
unlockAt: string
lockUntilChecked: boolean
nameInputMessages: Array<{type: string; text: string}>
nameInputMessages: Array<{type: 'error' | 'hint' | 'success' | 'screenreader-only'; text: string}>
}
export const defaultState: SettingsPanelState = {

8
ui/shared/grade-summary/react/IndividualStudentMastery/Outcome.jsx
View File

@ -58,10 +58,8 @@ class Outcome extends React.Component {
renderScoreAndPill() {
const {outcome} = this.props
const {mastered, score, points_possible, results} = outcome
const pillAttributes = {text: I18n.t('Not mastered')}
if (mastered) {
Object.assign(pillAttributes, {text: I18n.t('Mastered'), variant: 'success'})
}
const text = mastered ? I18n.t('Mastered') : I18n.t('Not mastered')
const pillAttributes = mastered ? {variant: 'success'} : {}
return (
<Flex direction="row" justifyItems="start" padding="0 0 0 x-small">
@ -83,7 +81,7 @@ class Outcome extends React.Component {
</Flex.Item>
)}
<Flex.Item>
<Pill {...pillAttributes} />
<Pill {...pillAttributes}>{text}</Pill>
</Flex.Item>
</Flex>
)

4
ui/shared/i18n/numberHelper.js → ui/shared/i18n/numberHelper.ts
View File

@ -22,7 +22,7 @@ import I18n from './i18nObj'
const helper = {
_parseNumber: parseNumber,
parse(input) {
parse(input: number | string) {
if (input == null) {
return NaN
} else if (typeof input === 'number') {
@ -47,7 +47,7 @@ const helper = {
return num
},
validate(input) {
validate(input: number | string) {
return !Number.isNaN(Number(helper.parse(input)))
},
}

35
ui/shared/i18n/parse-decimal-number.d.ts vendored Normal file
View File

@ -0,0 +1,35 @@
/*
* Copyright (C) 2023 - present Instructure, Inc.
*
* This file is part of Canvas.
*
* Canvas is free software: you can redistribute it and/or modify it under
* the terms of the GNU Affero General Public License as published by the Free
* Software Foundation, version 3 of the License.
*
* Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
* WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
* A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
* details.
*
* You should have received a copy of the GNU Affero General Public License along
* with this program. If not, see <http://www.gnu.org/licenses/>.
*/
interface InOptions {
thousands?: string
group?: string
decimal?: string
}
type FormatString = string
type FormatArray = [string, string]
declare module 'parse-decimal-number' {
function parseNumber(
value: string,
inOptions?: InOptions | FormatString | FormatArray,
enforceGroupSize?: boolean
): number
export = parseNumber
}

1
ui/shared/integrations/react/courses/__tests__/IntegrationRow.test.jsx
View File

@ -28,6 +28,7 @@ describe('IntegrationRow', () => {
loading: false,
available: true,
onChange,
onToggle: () => {},
...overrides,
})
const subject = overrides => render(<IntegrationRow {...props(overrides)} />)

4
ui/shared/planner/components/UpdateItemTray/index.jsx
View File

@ -207,9 +207,7 @@ export class UpdateItemTray_ extends Component {
<DateTimeInput
required={true}
description={
<ScreenReaderContent>
{I18n.t('The date and time this to do is due')}
</ScreenReaderContent>
<ScreenReaderContent>{I18n.t('The date and time this to do is due')}</ScreenReaderContent>
}
messages={this.state.dateMessages}
dateRenderLabel={I18n.t('Date')}

4
ui/shared/proxy-submission/react/__tests__/ProxyUploadModal.test.tsx
View File

@ -44,6 +44,10 @@ function renderComponent(overrideProps = {}) {
}
describe('ProxyUploadModal', () => {
beforeAll(() => {
global.DataTransferItem = global.DataTransferItem || class DataTransferItem {}
})
it('renders', () => {
const {getByText} = renderComponent()
expect(getByText('Upload File')).toBeInTheDocument()

2
ui/shared/temporary-enrollment/react/RoleMismatchToolTip.tsx
View File

@ -38,7 +38,7 @@ export default function RoleMismatchToolTip() {
</>
)
const tipTriggers = ['click', 'hover', 'focus']
const tipTriggers: Array<'click' | 'hover' | 'focus'> = ['click', 'hover', 'focus']
const renderToolTip = () => {
return (
<Tooltip renderTip={tipText} on={tipTriggers} placement="top">

4
ui/shared/temporary-enrollment/react/TempEnrollSearch.tsx
View File

@ -219,7 +219,9 @@ export function TempEnrollSearch(props: Props) {
name="search_type"
defaultValue={searchType}
description={I18n.t('Find user by')}
onChange={(e: Event, val: string) => setSearchType(val)}
onChange={(event: React.ChangeEvent<HTMLInputElement>, value: string) =>
setSearchType(value)
}
layout="columns"
>
<RadioInput

8
ui/shared/wiki/react/renderWikiPageTitle.tsx
View File

@ -16,7 +16,7 @@
* with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import React, {ReactNode, useEffect, useRef, useState} from 'react'
import React, {useEffect, useRef, useState} from 'react'
import ReactDOM from 'react-dom'
import {TextInput, TextInputProps} from '@instructure/ui-text-input'
import {Text} from '@instructure/ui-text'
@ -37,8 +37,8 @@ interface ComponentProps {
}
export interface Message {
text: ReactNode | string
type: string
text: React.ReactNode
type: 'error' | 'hint' | 'success' | 'screenreader-only'
}
interface FormDataError {
@ -63,7 +63,7 @@ const EditableContent = (props: Props) => {
const dataErrors = props.validationCallback(data)
const titleErrors = dataErrors?.title || []
if (titleErrors.length > 0) {
const parsedErrors = titleErrors.map((error: FormDataError) => ({
const parsedErrors: Message[] = titleErrors.map((error: FormDataError) => ({
text: error.message,
type: 'error',
}))