Skip to content

Commit

Permalink
feat(archive-viewer): add tests and address comments
Browse files Browse the repository at this point in the history
  • Loading branch information
Mingze Xiao committed Dec 11, 2019
1 parent dc7dcb6 commit 7ee396c
Show file tree
Hide file tree
Showing 16 changed files with 765 additions and 77 deletions.
2 changes: 2 additions & 0 deletions build/karma.conf.js
Original file line number Diff line number Diff line change
Expand Up @@ -97,9 +97,11 @@ module.exports = config =>
`src/third-party/model3d/${MODEL3D_STATIC_ASSETS_VERSION}/**/*.js`,
`src/third-party/swf/${SWF_STATIC_ASSETS_VERSION}/**/*.js`,
`src/third-party/text/${TEXT_STATIC_ASSETS_VERSION}/**/*.js`,
'build/webpack.test.js',
].concat(getTestFile(config.src)),

preprocessors: {
'build/webpack.test.js': ['webpack', 'sourcemap'],
'src/**/__tests__/**/*-test.js': ['webpack', 'sourcemap'],
'src/**/__tests__/**/*-test.html': ['html2js'],
},
Expand Down
10 changes: 1 addition & 9 deletions build/webpack.karma.config.js
Original file line number Diff line number Diff line change
@@ -1,17 +1,13 @@
require('babel-polyfill');

const { argv } = process;
const isDebug = argv.find(arg => {
return arg === '--auto-watch' || arg === '--no-single-run';
});

const { IgnorePlugin } = require('webpack');
const commonConfig = require('./webpack.common.config');

const baseConfig = commonConfig('en-US');

const config = {
...baseConfig,
devtool: 'inline-source-map',
mode: 'development',
resolve: {
alias: {
Expand All @@ -20,10 +16,6 @@ const config = {
},
};

if (isDebug) {
config.devtool = 'inline-source-map';
}

config.plugins.push(
new IgnorePlugin(/react\/addons/),
new IgnorePlugin(/react\/lib\/ReactContext/),
Expand Down
10 changes: 10 additions & 0 deletions build/webpack.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

function importAll(r) {
r.keys().forEach(r);
}

importAll(require.context('../src/lib/viewers/archive/__tests__', true, /-test-react\.js$/));
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,8 @@
"css-loader": "^3.1.0",
"cssnano-cli": "^1.0.5",
"cypress": "^3.4.1",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.15.1",
"eslint": "^6.3.0",
"eslint-config-airbnb": "^18.0.1",
"eslint-config-prettier": "^6.2.0",
Expand Down
2 changes: 1 addition & 1 deletion src/lib/__tests__/Preview-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -2421,7 +2421,7 @@ describe('lib/Preview', () => {
stubs.getHeaders = sandbox.stub(util, 'getHeaders');
stubs.headers = {
'X-Rep-Hints':
'[3d][pdf][text][mp3][jpg?dimensions=1024x1024&paged=false][jpg?dimensions=2048x2048,png?dimensions=2048x2048]',
'[3d][pdf][text][mp3][json][jpg?dimensions=1024x1024&paged=false][jpg?dimensions=2048x2048,png?dimensions=2048x2048]',
};

preview.options.sharedLink = 'link';
Expand Down
2 changes: 1 addition & 1 deletion src/lib/constants.js
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ export const STATUS_SUCCESS = 'success';
export const STATUS_VIEWABLE = 'viewable';

// X-Rep-Hints for Representations API
export const X_REP_HINT_BASE = '[3d][pdf][text][mp3]';
export const X_REP_HINT_BASE = '[3d][pdf][text][mp3][json]';
export const X_REP_HINT_DOC_THUMBNAIL = '[jpg?dimensions=1024x1024&paged=false]';
export const X_REP_HINT_IMAGE = '[jpg?dimensions=2048x2048,png?dimensions=2048x2048]';
export const X_REP_HINT_VIDEO_DASH = '[dash,mp4][filmstrip]';
Expand Down
52 changes: 22 additions & 30 deletions src/lib/viewers/archive/ArchiveExplorer.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import VirtualizedTable from 'box-ui-elements/es/features/virtualized-table';
import { Column } from 'react-virtualized/dist/es/Table/index';
import { TABLE_COLUMNS } from './constants';

const { KEY_NAME, KEY_MODIFIED_AT } = TABLE_COLUMNS;
const { KEY_NAME, KEY_MODIFIED_AT, KEY_SIZE } = TABLE_COLUMNS;

class ArchiveExplorer extends React.Component {
static propTypes = {
Expand Down Expand Up @@ -47,16 +47,22 @@ class ArchiveExplorer extends React.Component {
).isRequired,
};

buildCache = memoize(itemList => {
constructor(props) {
super(props);

this.state = {
fullPath: props.itemCollection.find(info => !info.parent).absolute_path,
};

this.memoBuildCache = memoize(this.buildCache);
}

buildCache = itemCollection => {
const folders = [];
const temp = {};
const cache = {};
let root;

itemList.forEach(info => {
if (!info.parent) {
root = info.absolute_path;
}
itemCollection.forEach(info => {
if (info.type === 'folder') {
folders.push(info);
}
Expand All @@ -67,19 +73,11 @@ class ArchiveExplorer extends React.Component {
cache[folderInfo.absolute_path] = folderInfo.item_collection.entries.map(item => temp[item.absolute_path]);
});

return { cache, root };
});

constructor(props) {
super(props);

this.state = {
fullPath: undefined,
};
}
return cache;
};

getRowData = itemList => ({ index }) => {
const { name, type, modified_at: modifiedAt, ...rest } = itemList[index];
const { modified_at: modifiedAt, name, size, type, ...rest } = itemList[index];

const rowData = {
[KEY_NAME]: {
Expand All @@ -88,6 +86,7 @@ class ArchiveExplorer extends React.Component {
type,
},
[KEY_MODIFIED_AT]: `20${modifiedAt}`,
[KEY_SIZE]: size,
...rest,
};
return rowData;
Expand All @@ -105,14 +104,7 @@ class ArchiveExplorer extends React.Component {
render() {
const { itemCollection } = this.props;
const { fullPath } = this.state;
const { cache, root } = this.buildCache(itemCollection);

if (!fullPath) {
this.setState({
fullPath: root,
});
return null;
}
const cache = this.memoBuildCache(itemCollection);

const itemList = cache[fullPath];

Expand All @@ -125,7 +117,7 @@ class ArchiveExplorer extends React.Component {
>
{intl => [
<Column
key="Filename"
key={KEY_NAME}
cellRenderer={itemNameCellRenderer(intl, this.handleClick)}
dataKey={KEY_NAME}
disableSort
Expand All @@ -134,7 +126,7 @@ class ArchiveExplorer extends React.Component {
width={1}
/>,
<Column
key="Last modified date"
key={KEY_MODIFIED_AT}
cellRenderer={readableTimeCellRenderer}
dataKey={KEY_MODIFIED_AT}
disableSort
Expand All @@ -143,9 +135,9 @@ class ArchiveExplorer extends React.Component {
width={1}
/>,
<Column
key="Size"
key={KEY_SIZE}
cellRenderer={sizeCellRenderer()}
dataKey="size"
dataKey={KEY_SIZE}
disableSort
flexGrow={1}
label={__('size')}
Expand Down
45 changes: 18 additions & 27 deletions src/lib/viewers/archive/ArchiveViewer.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
/* eslint-disable no-unused-vars */
import get from 'lodash/get';
import './Archive.scss';
import BaseViewer from '../BaseViewer';
import { VIEWER_EVENT } from '../../events';
Expand Down Expand Up @@ -262,49 +263,39 @@ class ArchiveViewer extends BaseViewer {
super.load();

return Promise.all([this.loadAssets(JS, CSS), this.getRepStatus().getPromise()])
.then(this.postLoad)
.then(() => {
const { representation } = this.options;
const template = get(representation, 'info.url') || get(representation, 'content.url_template');
const contentUrl = this.createContentUrlWithAuthParams(template);
this.startLoadTimer();

return this.api.get(contentUrl);
})
.then(this.finishLoading)
.catch(this.handleAssetError);
}

/**
* Loads archive file representation.
*
* @private
* @return {Promise} promise to get archive content
*/
postLoad = () => {
const { representation } = this.options;
const template = representation.content.url_template;
const contentUrl = this.createContentUrlWithAuthParams(template);
this.startLoadTimer();

this.api.get(contentUrl).then(data => {
if (this.isDestroyed()) {
return;
}

this.data = testData;

this.finishLoading();
});
};

/**
* Finishes loading the archive data
*
* @private
* @param {Array<Object>} data - archive data collection
* @return {void}
*/
finishLoading() {
finishLoading = data => {
if (this.isDestroyed()) {
return;
}

/*
global BoxArchive
The BoxArchive is loaded from archive.js
*/
this.archiveComponent = new BoxArchive(this.archiveEl, this.data);
this.archiveComponent = new BoxArchive(this.archiveEl, testData);

this.loaded = true;
this.emit(VIEWER_EVENT.load);
}
};
}

export default ArchiveViewer;
110 changes: 110 additions & 0 deletions src/lib/viewers/archive/__tests__/ArchiveExplorer-test-react.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
import React from 'react';
import { shallow } from 'enzyme';
import sinon from 'sinon';
import ArchiveExplorer from '../ArchiveExplorer';
import { TABLE_COLUMNS } from '../constants';

const sandbox = sinon.sandbox.create();
let data;

describe('lib/viewers/archive/ArchiveExplorer', () => {
beforeEach(() => {
data = [
{
type: 'folder',
absolute_path: 'test/',
name: 'test',
modified_at: '19-Dec-02 16:43',
size: 0,
path_collection: { total_count: 0, entries: [] },
parent: null,
item_collection: {
total_count: 3,
entries: [
{
type: 'file',
absolute_path: 'test/csv-level-1.csv',
name: 'csv-level-1.csv',
},
{
type: 'file',
absolute_path: 'test/test-level-1.jpg',
name: 'test-level-1.jpg',
},
],
},
},
{
type: 'file',
absolute_path: 'test/csv-level-1.csv',
name: 'csv-level-1.csv',
modified_at: '19-Nov-04 16:11',
size: 133,
path_collection: {
total_count: 1,
entries: [{ type: 'folder', absolute_path: 'test/', name: 'test' }],
},
parent: 'test',
item_collection: null,
},
{
type: 'file',
absolute_path: 'test/test-level-1.jpg',
name: 'test-level-1.jpg',
modified_at: '19-Nov-08 15:08',
size: 57379,
path_collection: {
total_count: 1,
entries: [{ type: 'folder', absolute_path: 'test/', name: 'test' }],
},
parent: 'test',
item_collection: null,
},
];
});

afterEach(() => {
sandbox.verifyAndRestore();
});

describe('render()', () => {
it('should render VirtualizedTable', () => {
const component = shallow(<ArchiveExplorer itemCollection={data} />);

expect(component.find('Internationalize').length).to.equal(1);
expect(component.find('InjectIntl(VirtualizedTable)').length).to.equal(1);
});
});

describe('handleClick()', () => {
it('should set state when handleClick() is called', () => {
const component = shallow(<ArchiveExplorer itemCollection={data} />);

component.instance().handleClick({ name: 'subfolder' });

expect(component.state().fullPath).to.equal('test/subfolder/');
});
});

describe('getRowData()', () => {
it('should return correct row data', () => {
const component = shallow(<ArchiveExplorer itemCollection={data} />);

const rowData = component.instance().getRowData(data)({ index: 0 });

const { KEY_NAME, KEY_MODIFIED_AT, KEY_SIZE } = TABLE_COLUMNS;
const { modified_at: modifiedAt, name, size, type, ...rest } = data[0];

expect(rowData).to.eql({
[KEY_NAME]: {
isExternal: false,
name,
type,
},
[KEY_MODIFIED_AT]: `20${modifiedAt}`,
[KEY_SIZE]: size,
...rest,
});
});
});
});
Loading

0 comments on commit 7ee396c

Please sign in to comment.