367 lines
18 KiB
JavaScript
367 lines
18 KiB
JavaScript
define([ "jquery", "js/common_helpers/ajax_helpers", "URI", "js/views/asset", "js/views/assets",
|
|
"js/models/asset", "js/collections/asset", "js/spec_helpers/view_helpers"],
|
|
function ($, AjaxHelpers, URI, AssetView, AssetsView, AssetModel, AssetCollection, ViewHelpers) {
|
|
|
|
describe("Assets", function() {
|
|
var assetsView, mockEmptyAssetsResponse, mockAssetUploadResponse, mockFileUpload,
|
|
assetLibraryTpl, assetTpl, pagingFooterTpl, pagingHeaderTpl, uploadModalTpl;
|
|
|
|
assetLibraryTpl = readFixtures('asset-library.underscore');
|
|
assetTpl = readFixtures('asset.underscore');
|
|
pagingHeaderTpl = readFixtures('paging-header.underscore');
|
|
pagingFooterTpl = readFixtures('paging-footer.underscore');
|
|
uploadModalTpl = readFixtures('asset-upload-modal.underscore');
|
|
|
|
beforeEach(function () {
|
|
setFixtures($("<script>", { id: "asset-library-tpl", type: "text/template" }).text(assetLibraryTpl));
|
|
appendSetFixtures($("<script>", { id: "asset-tpl", type: "text/template" }).text(assetTpl));
|
|
appendSetFixtures($("<script>", { id: "paging-header-tpl", type: "text/template" }).text(pagingHeaderTpl));
|
|
appendSetFixtures($("<script>", { id: "paging-footer-tpl", type: "text/template" }).text(pagingFooterTpl));
|
|
appendSetFixtures(uploadModalTpl);
|
|
appendSetFixtures(sandbox({ id: "asset_table_body" }));
|
|
|
|
spyOn($.fn, "fileupload").andReturn("");
|
|
|
|
var collection = new AssetCollection();
|
|
collection.url = "assets-url";
|
|
assetsView = new AssetsView({
|
|
collection: collection,
|
|
el: $('#asset_table_body')
|
|
});
|
|
|
|
assetsView.render();
|
|
});
|
|
|
|
var mockAsset = {
|
|
display_name: "dummy.jpg",
|
|
url: 'actual_asset_url',
|
|
portable_url: 'portable_url',
|
|
date_added: 'date',
|
|
thumbnail: null,
|
|
locked: false,
|
|
id: 'id_1'
|
|
};
|
|
|
|
mockEmptyAssetsResponse = {
|
|
assets: [],
|
|
start: 0,
|
|
end: 0,
|
|
page: 0,
|
|
pageSize: 5,
|
|
totalCount: 0
|
|
};
|
|
|
|
var mockExampleAssetsResponse = {
|
|
sort: "uploadDate",
|
|
end: 2,
|
|
assets: [
|
|
{
|
|
"display_name": "test.jpg",
|
|
"url": "/c4x/A/CS102/asset/test.jpg",
|
|
"date_added": "Nov 07, 2014 at 17:47 UTC",
|
|
"id": "/c4x/A/CS102/asset/test.jpg",
|
|
"portable_url": "/static/test.jpg",
|
|
"thumbnail": "/c4x/A/CS102/thumbnail/test.jpg",
|
|
"locked": false,
|
|
"external_url": "localhost:8000/c4x/A/CS102/asset/test.jpg"
|
|
},
|
|
{
|
|
"display_name": "test.pdf",
|
|
"url": "/c4x/A/CS102/asset/test.pdf",
|
|
"date_added": "Oct 20, 2014 at 11:00 UTC",
|
|
"id": "/c4x/A/CS102/asset/test.pdf",
|
|
"portable_url": "/static/test.pdf",
|
|
"thumbnail": null,
|
|
"locked": false,
|
|
"external_url": "localhost:8000/c4x/A/CS102/asset/test.pdf"
|
|
},
|
|
{
|
|
"display_name": "test.odt",
|
|
"url": "/c4x/A/CS102/asset/test.odt",
|
|
"date_added": "Oct 20, 2014 at 11:00 UTC",
|
|
"id": "/c4x/A/CS102/asset/test.odt",
|
|
"portable_url": "/static/test.odt",
|
|
"thumbnail": null,
|
|
"locked": false,
|
|
"external_url": "localhost:8000/c4x/A/CS102/asset/test.odt"
|
|
}
|
|
],
|
|
pageSize: 2,
|
|
totalCount: 2,
|
|
start: 0,
|
|
page: 0
|
|
};
|
|
|
|
var mockExampleFilteredAssetsResponse = {
|
|
sort: "uploadDate",
|
|
end: 1,
|
|
assets: [
|
|
{
|
|
"display_name": "test.jpg",
|
|
"url": "/c4x/A/CS102/asset/test.jpg",
|
|
"date_added": "Nov 07, 2014 at 17:47 UTC",
|
|
"id": "/c4x/A/CS102/asset/test.jpg",
|
|
"portable_url": "/static/test.jpg",
|
|
"thumbnail": "/c4x/A/CS102/thumbnail/test.jpg",
|
|
"locked": false,
|
|
"external_url": "localhost:8000/c4x/A/CS102/asset/test.jpg"
|
|
}
|
|
],
|
|
pageSize: 1,
|
|
totalCount: 1,
|
|
start: 0,
|
|
page: 0
|
|
};
|
|
|
|
mockAssetUploadResponse = {
|
|
asset: mockAsset,
|
|
msg: "Upload completed"
|
|
};
|
|
|
|
mockFileUpload = {
|
|
files: [{name: 'largefile', size: 0}]
|
|
};
|
|
|
|
var respondWithMockAssets = function(requests) {
|
|
var requestIndex = requests.length - 1;
|
|
var request = requests[requestIndex];
|
|
var url = new URI(request.url);
|
|
var queryParameters = url.query(true); // Returns an object with each query parameter stored as a value
|
|
var asset_type = queryParameters.asset_type;
|
|
var response = asset_type !== '' ? mockExampleFilteredAssetsResponse : mockExampleAssetsResponse;
|
|
AjaxHelpers.respondWithJson(requests, response, requestIndex);
|
|
};
|
|
|
|
var event = {};
|
|
event.target = {"value": "dummy.jpg"};
|
|
|
|
describe("AssetsView", function () {
|
|
var setup;
|
|
setup = function(responseData) {
|
|
var requests = AjaxHelpers.requests(this);
|
|
assetsView.setPage(0);
|
|
if (!responseData){
|
|
AjaxHelpers.respondWithJson(requests, mockEmptyAssetsResponse);
|
|
}
|
|
else{
|
|
AjaxHelpers.respondWithJson(requests, responseData);
|
|
}
|
|
return requests;
|
|
};
|
|
|
|
beforeEach(function () {
|
|
ViewHelpers.installMockAnalytics();
|
|
});
|
|
|
|
afterEach(function () {
|
|
ViewHelpers.removeMockAnalytics();
|
|
});
|
|
|
|
it('shows the upload modal when clicked on "Upload your first asset" button', function () {
|
|
expect(assetsView).toBeDefined();
|
|
appendSetFixtures('<div class="ui-loading"/>');
|
|
expect($('.ui-loading').is(':visible')).toBe(true);
|
|
expect($('.upload-button').is(':visible')).toBe(false);
|
|
setup.call(this);
|
|
expect($('.ui-loading').is(':visible')).toBe(false);
|
|
expect($('.upload-button').is(':visible')).toBe(true);
|
|
|
|
expect($('.upload-modal').is(':visible')).toBe(false);
|
|
$('a:contains("Upload your first asset")').click();
|
|
expect($('.upload-modal').is(':visible')).toBe(true);
|
|
|
|
$('.close-button').click();
|
|
expect($('.upload-modal').is(':visible')).toBe(false);
|
|
});
|
|
|
|
it('has properly initialized constants for handling upload file errors', function() {
|
|
expect(assetsView).toBeDefined();
|
|
expect(assetsView.uploadChunkSizeInMBs).toBeDefined();
|
|
expect(assetsView.maxFileSizeInMBs).toBeDefined();
|
|
expect(assetsView.uploadChunkSizeInBytes).toBeDefined();
|
|
expect(assetsView.maxFileSizeInBytes).toBeDefined();
|
|
expect(assetsView.largeFileErrorMsg).toBeNull();
|
|
});
|
|
|
|
it('uploads file properly', function () {
|
|
var requests = setup.call(this);
|
|
expect(assetsView).toBeDefined();
|
|
spyOn(assetsView, "addAsset").andCallFake(function () {
|
|
assetsView.collection.add(mockAssetUploadResponse.asset);
|
|
assetsView.renderPageItems();
|
|
assetsView.setPage(0);
|
|
});
|
|
|
|
$('a:contains("Upload your first asset")').click();
|
|
expect($('.upload-modal').is(':visible')).toBe(true);
|
|
|
|
$('.choose-file-button').click();
|
|
$("input[type=file]").change();
|
|
expect($('.upload-modal h1').text()).toContain("Uploading");
|
|
|
|
assetsView.showUploadFeedback(event, 100);
|
|
expect($('div.progress-bar').text()).toContain("100%");
|
|
|
|
assetsView.displayFinishedUpload(mockAssetUploadResponse);
|
|
expect($('div.progress-bar').text()).toContain("Upload completed");
|
|
$('.close-button').click();
|
|
expect($('.upload-modal').is(':visible')).toBe(false);
|
|
|
|
expect($('#asset_table_body').html()).toContain("dummy.jpg");
|
|
expect(assetsView.collection.length).toBe(1);
|
|
});
|
|
|
|
it('blocks file uploads larger than the max file size', function() {
|
|
expect(assetsView).toBeDefined();
|
|
|
|
mockFileUpload.files[0].size = assetsView.maxFileSize * 10;
|
|
|
|
$('.choose-file-button').click();
|
|
$(".upload-modal .file-chooser").fileupload('add', mockFileUpload);
|
|
expect($('.upload-modal h1').text()).not.toContain("Uploading");
|
|
|
|
expect(assetsView.largeFileErrorMsg).toBeDefined();
|
|
expect($('div.progress-bar').text()).not.toContain("Upload completed");
|
|
expect($('div.progress-fill').width()).toBe(0);
|
|
});
|
|
|
|
it('allows file uploads equal in size to the max file size', function() {
|
|
expect(assetsView).toBeDefined();
|
|
|
|
mockFileUpload.files[0].size = assetsView.maxFileSize;
|
|
|
|
$('.choose-file-button').click();
|
|
$(".upload-modal .file-chooser").fileupload('add', mockFileUpload);
|
|
|
|
expect(assetsView.largeFileErrorMsg).toBeNull();
|
|
});
|
|
|
|
it('allows file uploads smaller than the max file size', function() {
|
|
expect(assetsView).toBeDefined();
|
|
|
|
mockFileUpload.files[0].size = assetsView.maxFileSize / 100;
|
|
|
|
$('.choose-file-button').click();
|
|
$(".upload-modal .file-chooser").fileupload('add', mockFileUpload);
|
|
|
|
expect(assetsView.largeFileErrorMsg).toBeNull();
|
|
});
|
|
|
|
it('returns the registered info for a filter column', function () {
|
|
assetsView.registerSortableColumn('test-col', 'Test Column', 'testField', 'asc');
|
|
assetsView.registerFilterableColumn('js-asset-type-col', 'Type', 'asset_type');
|
|
var filterInfo = assetsView.filterableColumnInfo('js-asset-type-col');
|
|
expect(filterInfo.displayName).toBe('Type');
|
|
expect(filterInfo.fieldName).toBe('asset_type');
|
|
});
|
|
|
|
it('throws an exception for an unregistered filter column', function () {
|
|
expect(function() {
|
|
assetsView.filterableColumnInfo('no-such-column');
|
|
}).toThrow();
|
|
});
|
|
|
|
|
|
it('make sure selectFilter sets collection filter if undefined', function () {
|
|
expect(assetsView).toBeDefined();
|
|
assetsView.collection.filterField = '';
|
|
assetsView.selectFilter('js-asset-type-col');
|
|
expect(assetsView.collection.filterField).toEqual('asset_type');
|
|
});
|
|
|
|
it('make sure _toggleFilterColumn filters asset list', function () {
|
|
expect(assetsView).toBeDefined();
|
|
var requests = AjaxHelpers.requests(this);
|
|
$.each(assetsView.filterableColumns, function(columnID, columnData){
|
|
var $typeColumn = $('#' + columnID);
|
|
assetsView.setPage(0);
|
|
respondWithMockAssets(requests);
|
|
var assetsNumber = assetsView.collection.length;
|
|
assetsView._toggleFilterColumn('Images', 'Images');
|
|
respondWithMockAssets(requests);
|
|
var assetsNumberFiltered = assetsView.collection.length;
|
|
expect(assetsNumberFiltered).toBeLessThan(assetsNumber);
|
|
expect($typeColumn.find('.title .type-filter')).not.toEqual(assetsView.allLabel);
|
|
});
|
|
});
|
|
|
|
it('opens and closes select type menu', function () {
|
|
expect(assetsView).toBeDefined();
|
|
setup.call(this, mockExampleAssetsResponse);
|
|
$.each(assetsView.filterableColumns, function(columnID, columnData){
|
|
var $typeColumn = $('#' + columnID);
|
|
expect($typeColumn).toBeVisible();
|
|
var assetsNumber = $('#asset-table-body .type-col').length;
|
|
assetsView.openFilterColumn($typeColumn);
|
|
expect($typeColumn.find('.wrapper-nav-sub')).toHaveClass('is-shown');
|
|
expect($typeColumn.find('.title')).toHaveClass('is-selected');
|
|
expect($typeColumn.find('.column-filter-link')).toBeVisible();
|
|
$typeColumn.find('.wrapper-nav-sub').trigger('click');
|
|
expect($typeColumn.find('.wrapper-nav-sub').hasClass('is-shown')).toBe(false);
|
|
});
|
|
});
|
|
|
|
it('check filtering works with sorting by column on', function () {
|
|
expect(assetsView).toBeDefined();
|
|
var requests = AjaxHelpers.requests(this);
|
|
assetsView.registerSortableColumn('name-col', 'Name Column', 'nameField', 'asc');
|
|
assetsView.registerFilterableColumn('js-asset-type-col', gettext('Type'), 'asset_type');
|
|
assetsView.setInitialSortColumn('name-col');
|
|
assetsView.setPage(0);
|
|
respondWithMockAssets(requests);
|
|
var sortInfo = assetsView.sortableColumnInfo('name-col');
|
|
expect(sortInfo.defaultSortDirection).toBe('asc');
|
|
var $firstFilter = $($('#js-asset-type-col').find('li.nav-item a')[1]);
|
|
$firstFilter.trigger('click');
|
|
respondWithMockAssets(requests);
|
|
var assetsNumberFiltered = assetsView.collection.length;
|
|
expect(assetsNumberFiltered).toBe(1);
|
|
|
|
});
|
|
|
|
it('shows type select menu, selects type, and filters results', function () {
|
|
expect(assetsView).toBeDefined();
|
|
var requests = AjaxHelpers.requests(this);
|
|
$.each(assetsView.filterableColumns, function(columnID, columnData) {
|
|
assetsView.setPage(0);
|
|
respondWithMockAssets(requests);
|
|
var $typeColumn = $('#' + columnID);
|
|
expect($typeColumn).toBeVisible();
|
|
var assetsNumber = assetsView.collection.length;
|
|
$typeColumn.trigger('click');
|
|
expect($typeColumn.find('.wrapper-nav-sub')).toHaveClass('is-shown');
|
|
expect($typeColumn.find('.title')).toHaveClass('is-selected');
|
|
var $allFilter = $($typeColumn.find('li.nav-item a')[0]);
|
|
var $firstFilter = $($typeColumn.find('li.nav-item a')[1]);
|
|
var $otherFilter = $($typeColumn.find('li.nav-item a[data-assetfilter="OTHER"]')[0]);
|
|
var select_filter_and_check = function($filterEl, result) {
|
|
$filterEl.trigger('click');
|
|
respondWithMockAssets(requests);
|
|
var assetsNumberFiltered = assetsView.collection.length;
|
|
expect(assetsNumberFiltered).toBe(result);
|
|
};
|
|
|
|
select_filter_and_check($firstFilter, 1);
|
|
select_filter_and_check($allFilter, assetsNumber);
|
|
select_filter_and_check($otherFilter, 1);
|
|
});
|
|
});
|
|
|
|
it('hides the error modal if a large file, then small file is uploaded', function() {
|
|
expect(assetsView).toBeDefined();
|
|
mockFileUpload.files[0].size = assetsView.maxFileSize;
|
|
|
|
$('.choose-file-button').click();
|
|
$(".upload-modal .file-chooser").fileupload('add', mockFileUpload);
|
|
|
|
expect(assetsView.largeFileErrorMsg).toBeDefined();
|
|
|
|
mockFileUpload.files[0].size = assetsView.maxFileSize / 10;
|
|
$('.choose-file-button').click();
|
|
$(".upload-modal .file-chooser").fileupload('add', mockFileUpload);
|
|
expect(assetsView.largeFileErrorMsg).toBeNull();
|
|
});
|
|
});
|
|
});
|
|
});
|