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

Upgrade react-modal so it works with react 16 

I know I said that the way forward was to just not use react-modal
and use instUI modal instead but there are a bunch of things that _are_
Using it and I don’t want changing all those to be blockers for react16
if this will work.


I still want us to get rid of react-modal, just don’t want it to be a 
blocker for react 16


Test plan:
Things that use react-modal should still work the same as before. Check:
* the color picker used on the calendar sidebar
* the external apps stuff that has modals
* the file preview modal in files
* the “find appointment” modal in scheduler

Change-Id: I606eda110782cd3300fcbb2f8052681fa5048050
Reviewed-on: https://gerrit.instructure.com/164232
Tested-by: Jenkins
Reviewed-by: Steven Burnett <sburnett@instructure.com>
Product-Review: Ryan Shaw <ryan@instructure.com>
QA-Review: Ryan Shaw <ryan@instructure.com>
This commit is contained in:
Ryan Shaw 2018-09-12 13:05:43 -06:00
parent 895d09c839
commit ec49145559
3 changed files with 160 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -84,7 +84,7 @@
"react-dom": "0.14.9",
"react-immutable-proptypes": "^2.1.0",
"react-lazy-load": "^3.0.13",
"react-modal": "1.6.5",
"react-modal": "^3",
"react-redux": "4.4.5",
"react-tokeninput": "2.4.0",
"redux": "^3.5.2",

320
spec/javascripts/jsx/files/components/FilePreviewSpec.js
View File

@ -16,206 +16,176 @@
* with this program. If not, see <http://www.gnu.org/licenses/>.
*/
define([
'react',
'react-dom',
'react-addons-test-utils',
'react-modal',
'jsx/files/FilePreview',
'compiled/models/Folder',
'compiled/models/File',
'compiled/collections/FilesCollection',
'compiled/collections/FoldersCollection'
], (React, ReactDOM, TestUtils, ReactModal, FilePreview, Folder, File, FilesCollection, FoldersCollection) => {
import React from 'react'
import ReactDOM from 'react-dom'
import {mount} from 'enzyme'
import TestUtils from 'react-addons-test-utils'
import ReactModal from 'react-modal'
import FilePreview from 'jsx/files/FilePreview'
import Folder from 'compiled/models/Folder'
import File from 'compiled/models/File'
import FilesCollection from 'compiled/collections/FilesCollection'
import FoldersCollection from 'compiled/collections/FoldersCollection'
let filesCollection = {};
let folderCollection = {};
let file1 = {};
let file2 = {};
let file3 = {};
let currentFolder = {};
let filesCollection = {}
let folderCollection = {}
let file1 = {}
let file2 = {}
let file3 = {}
let currentFolder = {}
QUnit.module('File Preview Rendering', {
setup () {
// Initialize a few things to view in the preview.
filesCollection = new FilesCollection();
file1 = new File({
QUnit.module('File Preview Rendering', {
setup() {
// Initialize a few things to view in the preview.
filesCollection = new FilesCollection()
file1 = new File(
{
id: '1',
cid: 'c1',
name:'Test File.file1',
name: 'Test File.file1',
'content-type': 'unknown/unknown',
size: 1000000,
created_at: (new Date()).toISOString(),
updated_at: (new Date()).toISOString()
},
{preflightUrl: ''}
);
file2 = new File({
created_at: new Date().toISOString(),
updated_at: new Date().toISOString()
},
{preflightUrl: ''}
)
file2 = new File(
{
id: '2',
cid: 'c2',
name:'Test File.file2',
name: 'Test File.file2',
'content-type': 'unknown/unknown',
size: 1000000,
created_at: (new Date()).toISOString(),
updated_at: (new Date()).toISOString()
},
{preflightUrl: ''}
);
file3 = new File({
created_at: new Date().toISOString(),
updated_at: new Date().toISOString()
},
{preflightUrl: ''}
)
file3 = new File(
{
id: '3',
cid: 'c3',
name:'Test File.file3',
name: 'Test File.file3',
'content-type': 'unknown/unknown',
size: 1000000,
created_at: (new Date()).toISOString(),
updated_at: (new Date()).toISOString(),
created_at: new Date().toISOString(),
updated_at: new Date().toISOString(),
url: 'test/test/test.png'
},
{preflightUrl: ''}
);
},
{preflightUrl: ''}
)
filesCollection.add(file1);
filesCollection.add(file2);
filesCollection.add(file3);
currentFolder = new Folder();
currentFolder.files = filesCollection;
filesCollection.add(file1)
filesCollection.add(file2)
filesCollection.add(file3)
currentFolder = new Folder()
currentFolder.files = filesCollection
ReactModal.setAppElement(document.getElementById('fixtures'));
},
teardown () {
let filesCollection = {};
let folderCollection = {};
let file1 = {};
let file2 = {};
let file3 = {};
let currentFolder = {};
}
});
ReactModal.setAppElement(document.getElementById('fixtures'))
},
teardown() {
let filesCollection = {}
let folderCollection = {}
let file1 = {}
let file2 = {}
let file3 = {}
let currentFolder = {}
}
})
test('clicking the info button should render out the info panel', () => {
const component = TestUtils.renderIntoDocument(
<FilePreview
isOpen={true}
query={{
preview: '1'
}}
currentFolder={currentFolder}
/>
);
test('clicking the info button should render out the info panel', () => {
const component = mount(
<FilePreview
isOpen={true}
query={{
preview: '1'
}}
currentFolder={currentFolder}
/>
)
$('.ef-file-preview-header-info').click()
equal(
$('tr:contains("Name")')
.find('td')
.text(),
'Test File.file1'
)
const modalPortal = component.refs.modal.portal;
const infoBtn = TestUtils.findRenderedDOMComponentWithClass(modalPortal, 'ef-file-preview-header-info');
TestUtils.Simulate.click(infoBtn);
ok(component.state.showInfoPanel, 'info panel displayed state is updated');
ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(component).parentNode);
});
// click it again to hide it
$('.ef-file-preview-header-info').click()
equal($('tr:contains("Name")').length, 0)
component.unmount()
})
test('clicking the info button after the panel has been opened should hide the info panel', () => {
const component = TestUtils.renderIntoDocument(
<FilePreview
isOpen={true}
query={{
preview: '1'
}}
currentFolder={currentFolder}
/>
);
test('opening the preview for one file should show navigation buttons for the previous and next files in the current folder', () => {
const component = mount(
<FilePreview
isOpen={true}
query={{
preview: '2'
}}
currentFolder={currentFolder}
/>
)
const modalPortal = component.refs.modal.portal;
const infoBtn = TestUtils.findRenderedDOMComponentWithClass(modalPortal, 'ef-file-preview-header-info');
TestUtils.Simulate.click(infoBtn);
ok(component.state.showInfoPanel, 'info panel displayed state is updated to be open');
TestUtils.Simulate.click(infoBtn);
ok(!component.state.showInfoPanel, 'info panel displayed state is updated to false');
ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(component).parentNode);
});
const arrows = $('.ef-file-preview-container-arrow-link')
test('clicking the info button after the panel has been opened should hide the info panel', () => {
const component = TestUtils.renderIntoDocument(
<FilePreview
isOpen={true}
query={{
preview: '1'
}}
currentFolder={currentFolder}
/>
);
equal(arrows.length, 2, 'there are two arrows shown')
const modalPortal = component.refs.modal.portal;
const infoBtn = TestUtils.findRenderedDOMComponentWithClass(modalPortal, 'ef-file-preview-header-info');
TestUtils.Simulate.click(infoBtn);
ok(component.state.showInfoPanel, 'info panel displayed state is updated to be open');
TestUtils.Simulate.click(infoBtn);
ok(!component.state.showInfoPanel, 'info panel displayed state is updated to false');
ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(component).parentNode);
});
ok(
arrows[0].href.match('preview=1'),
'The left arrow link has an incorrect href (`preview` query string does not exist or points to the wrong id)'
)
ok(
arrows[1].href.match('preview=3'),
'The right arrow link has an incorrect href (`preview` query string does not exist or points to the wrong id)'
)
component.unmount()
})
test('opening the preview for one file should show navigation buttons for the previous and next files in the current folder', () => {
const component = TestUtils.renderIntoDocument(
<FilePreview
isOpen={true}
query={{
preview: '2'
}}
currentFolder={currentFolder}
/>
);
test('download button should be rendered on the file preview', () => {
const component = mount(
<FilePreview
isOpen={true}
query={{
preview: '3'
}}
currentFolder={currentFolder}
/>
)
const modalPortal = component.refs.modal.portal;
const arrows = TestUtils.scryRenderedDOMComponentsWithClass(modalPortal, 'ef-file-preview-container-arrow-link');
const downloadBtn = $('.ef-file-preview-header-download')[0]
ok(downloadBtn, 'download button renders')
ok(downloadBtn.href.includes(file3.get('url')), 'the download button url is correct')
component.unmount()
})
equal(arrows.length, 2, 'there are two arrows shown');
test('clicking the close button calls closePreview with the correct url', () => {
let closePreviewCalled = false
ok(arrows[0].href.match("preview=1"), 'The left arrow link has an incorrect href (`preview` query string does not exist or points to the wrong id)');
ok(arrows[1].href.match("preview=3"), 'The right arrow link has an incorrect href (`preview` query string does not exist or points to the wrong id)');
ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(component).parentNode);
});
const component = mount(
<FilePreview
isOpen={true}
query={{
preview: '3',
search_term: 'web',
sort: 'size',
order: 'desc'
}}
collection={filesCollection}
closePreview={url => {
closePreviewCalled = true
ok(url.includes('sort=size'))
ok(url.includes('order=desc'))
ok(url.includes('search_term=web'))
}}
/>
)
test('download button should be rendered on the file preview', () => {
const component = TestUtils.renderIntoDocument(
<FilePreview
isOpen={true}
query={{
preview: '3'
}}
currentFolder={currentFolder}
/>
);
const modalPortal = component.refs.modal.portal;
const downloadBtn = TestUtils.findRenderedDOMComponentWithClass(modalPortal, 'ef-file-preview-header-download');
ok(downloadBtn, 'download button renders');
ok(downloadBtn.href.includes(file3.get('url')), 'the download button url is correct');
ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(component).parentNode);
});
test('clicking the close button calls closePreview with the correct url', () => {
let closePreviewCalled = false
const component = TestUtils.renderIntoDocument(
<FilePreview
isOpen={true}
query={{
preview: '3',
search_term: 'web',
sort: 'size',
order: 'desc'
}}
collection={filesCollection}
closePreview={(url) => {
closePreviewCalled = true;
ok(url.includes('sort=size'));
ok(url.includes('order=desc'));
ok(url.includes('search_term=web'));
}}
/>
);
const modalPortal = component.refs.modal.portal;
const closeButton = TestUtils.findRenderedDOMComponentWithClass(modalPortal, 'ef-file-preview-header-close');
ok(closeButton);
TestUtils.Simulate.click(closeButton);
ok(closePreviewCalled);
ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(component).parentNode);
});
});
const closeButton = $('.ef-file-preview-header-close')[0]
ok(closeButton)
closeButton.click()
ok(closePreviewCalled)
component.unmount()
})

27
yarn.lock
View File

@ -4818,10 +4818,6 @@ elegant-spinner@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/elegant-spinner/-/elegant-spinner-1.0.1.tgz#db043521c95d7e303fd8f345bedc3349cfb0729e"
element-class@^0.2.0:
version "0.2.2"
resolved "https://registry.yarnpkg.com/element-class/-/element-class-0.2.2.tgz#9d3bbd0767f9013ef8e1c8ebe722c1402a60050e"
elliptic@^6.0.0:
version "6.4.0"
resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.0.tgz#cac9af8762c85836187003c8dfe193e5e2eae5df"
@ -5624,9 +5620,9 @@ execall@^1.0.0:
dependencies:
clone-regexp "^1.0.0"
exenv@1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.0.tgz#3835f127abf075bfe082d0aed4484057c78e3c89"
exenv@^1.2.0:
version "1.2.2"
resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
exit-hook@^1.0.0:
version "1.1.1"
@ -12854,13 +12850,18 @@ react-lazy-load@^3.0.13:
lodash.throttle "^4.0.0"
prop-types "^15.5.8"
react-modal@1.6.5:
version "1.6.5"
resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-1.6.5.tgz#f720d99bd81b1def5c2c32e0ffaa48bdaf484862"
react-lifecycles-compat@^3.0.0:
version "3.0.4"
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
react-modal@^3:
version "3.5.1"
resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.5.1.tgz#33d38527def90ea324848f7d63e53acc4468a451"
dependencies:
element-class "^0.2.0"
exenv "1.2.0"
lodash.assign "^4.2.0"
exenv "^1.2.0"
prop-types "^15.5.10"
react-lifecycles-compat "^3.0.0"
warning "^3.0.0"
react-moment-proptypes@^1.4.0:
version "1.6.0"