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

do not lose focus when uploading new files in a2 

because we tied the row key to the ids of the files in the row
we were re-rendering the row everytime we added a new file,
causing our focus to disappear.

because the columns are a 1-1 relation to the files already, we
can safely just tie the row key to the row index

Test Plan:
* as a student in a2, navigate to a file upload assignment
* with no files drafted, add a new file
** confirm that the focus remains on the file upload box
* with files added, add a new file
** confirm that the focus remains on the file upload box
* with files added, navigate away while the file is uploading
** confirm that the focus remains where you navigated on
   completion

flag=assignments_2_student
fixes KNO-52

Change-Id: Idcfe88f31d968cb6a82755c5762b4b92f01312ec
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/217677
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Tested-by: Jenkins
Reviewed-by: Steven Burnett <sburnett@instructure.com>
QA-Review: Steven Burnett <sburnett@instructure.com>
Product-Review: Ryan Norton <rnorton@instructure.com>
This commit is contained in:
Ryan Norton 2019-11-18 14:17:13 -07:00
parent 698257bb1f
commit e58cca4bd9
3 changed files with 28 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/jsx/assignments_2/student/__tests__/StudentViewIntegration.test.js
View File

@ -139,7 +139,10 @@ describe('student view integration tests', () => {
it('displays a loading indicator for each new file being uploaded', async () => {
window.URL.createObjectURL = jest.fn()
uploadFileModule.uploadFiles = jest.fn()
uploadFileModule.uploadFiles.mockReturnValueOnce([{id: '1', name: 'file1.jpg'}])
uploadFileModule.uploadFiles.mockReturnValueOnce([
{id: '1', name: 'file1.jpg'},
{id: '2', name: 'file2.jpg'}
])
$('body').append('<div role="alert" id="flash_screenreader_holder" />')
const mocks = await createGraphqlMocks({
@ -156,7 +159,10 @@ describe('student view integration tests', () => {
</AlertManagerContext.Provider>
)
const files = [new File(['foo'], 'file1.jpg', {type: 'image/jpg'})]
const files = [
new File(['foo'], 'file1.jpg', {type: 'image/jpg'}),
new File(['foo'], 'file2.pdf', {type: 'application/pdf'})
]
const fileInput = await waitForElement(() =>
container.querySelector('input[id="inputFileDrop"]')
)

41
app/jsx/assignments_2/student/components/AttemptType/FileUpload.js
View File

@ -301,27 +301,26 @@ export default class FileUpload extends Component {
// and two rendered files and all subsequent rows having three rendered files
const nextFileRows = files.length > 2 ? chunk(files.slice(2, files.length), 3) : []
return (
<div data-testid="non-empty-upload">
<Grid>
<Grid.Row key={firstFileRow.map(file => file._id).join()}>
<Grid.Col width={4}>{this.renderUploadBox()}</Grid.Col>
{firstFileRow.map(file => (
<Grid>
<Grid.Row key="upload-box">
<Grid.Col width={4}>{this.renderUploadBox()}</Grid.Col>
{firstFileRow.map(file => (
<Grid.Col width={4} key={file._id} vAlign="bottom">
{this.renderUploadedFile(file)}
</Grid.Col>
))}
</Grid.Row>
{nextFileRows.map((row, i) => (
// eslint-disable-next-line react/no-array-index-key
<Grid.Row key={i}>
{row.map(file => (
<Grid.Col width={4} key={file._id} vAlign="bottom">
{this.renderUploadedFile(file)}
</Grid.Col>
))}
</Grid.Row>
{nextFileRows.map(row => (
<Grid.Row key={row.map(file => file._id).join()}>
{row.map(file => (
<Grid.Col width={4} key={file._id} vAlign="bottom">
{this.renderUploadedFile(file)}
</Grid.Col>
))}
</Grid.Row>
))}
</Grid>
</div>
))}
</Grid>
)
}
@ -332,15 +331,7 @@ export default class FileUpload extends Component {
render() {
return (
<div data-testid="upload-pane" style={{marginBottom: theme.variables.spacing.xxLarge}}>
{this.shouldRenderFiles() ? (
this.renderUploadBoxAndUploadedFiles()
) : (
<Grid>
<Grid.Row>
<Grid.Col width={4}>{this.renderUploadBox()}</Grid.Col>
</Grid.Row>
</Grid>
)}
{this.renderUploadBoxAndUploadedFiles()}
</div>
)
}

9
app/jsx/assignments_2/student/components/AttemptType/__tests__/FileUpload.test.js
View File

@ -118,7 +118,7 @@ describe('FileUpload', () => {
<FileUpload {...props} />
</MockedProvider>
)
const uploadRender = getByTestId('non-empty-upload')
const uploadRender = getByTestId('upload-pane')
expect(uploadRender).toContainElement(getAllByText('foobarbaz')[0])
})
@ -133,7 +133,7 @@ describe('FileUpload', () => {
<FileUpload {...props} />
</MockedProvider>
)
const uploadRender = getByTestId('non-empty-upload')
const uploadRender = getByTestId('upload-pane')
expect(uploadRender).toContainElement(container.querySelector('img[alt="foobarbaz preview"]'))
})
@ -149,7 +149,7 @@ describe('FileUpload', () => {
<FileUpload {...props} />
</MockedProvider>
)
const uploadRender = getByTestId('non-empty-upload')
const uploadRender = getByTestId('upload-pane')
expect(uploadRender).toContainElement(container.querySelector('svg[name="IconPdf"]'))
expect(container.querySelector('img[alt="foobarbaz preview"]')).toBeNull()
@ -512,7 +512,7 @@ describe('FileUpload', () => {
const props = await makeProps({
Assignment: {allowedExtensions: ['jpg']}
})
const {container, getByText, queryByTestId} = render(
const {container, getByText} = render(
<MockedProvider mocks={mocks}>
<FileUpload {...props} />
</MockedProvider>
@ -523,7 +523,6 @@ describe('FileUpload', () => {
uploadFiles(fileInput, [file])
expect(getByText('Invalid file type')).toBeInTheDocument()
expect(queryByTestId('non-empty-upload')).toBeNull()
})
it('does not render an error when adding a file that is an allowed extension', async () => {