Commit c6c3dc03 authored by Andrew Fontaine's avatar Andrew Fontaine

Merge branch 'ps-step-2-use-array-buffer-for-binary' into 'master'

Step 2 - Use arraybuffer for binary files in Web IDE

See merge request gitlab-org/gitlab!50249
parents ddf977b8 85d2ab4b
......@@ -74,8 +74,11 @@ export default {
fileEditor() {
return getFileEditorOrDefault(this.fileEditors, this.file.path);
},
isBinaryFile() {
return !isTextFile(this.file);
},
shouldHideEditor() {
return this.file && !this.file.loading && !isTextFile(this.file);
return this.file && !this.file.loading && this.isBinaryFile;
},
showContentViewer() {
return (
......@@ -244,6 +247,10 @@ export default {
);
},
createEditorInstance() {
if (this.isBinaryFile) {
return;
}
this.editor.dispose();
this.$nextTick(() => {
......
......@@ -27,9 +27,12 @@ export default {
return Promise.resolve(file.raw);
}
const options = file.binary ? { responseType: 'arraybuffer' } : {};
return axios
.get(file.rawPath, {
transformResponse: [f => f],
...options,
})
.then(({ data }) => data);
},
......
......@@ -11,7 +11,7 @@ export default {
},
props: {
content: {
type: String,
type: [String, ArrayBuffer],
default: '',
required: false,
},
......
......@@ -205,6 +205,8 @@ describe('RepoEditor', () => {
beforeEach(done => {
vm.file.name = 'file.dat';
vm.file.content = '🐱'; // non-ascii binary content
jest.spyOn(vm.editor, 'createInstance').mockImplementation();
jest.spyOn(vm.editor, 'createDiffInstance').mockImplementation();
vm.$nextTick(done);
});
......@@ -212,6 +214,16 @@ describe('RepoEditor', () => {
it('does not render the IDE', () => {
expect(vm.shouldHideEditor).toBeTruthy();
});
it('does not call createInstance', async () => {
// Mirror the act's in the `createEditorInstance`
vm.createEditorInstance();
await vm.$nextTick();
expect(vm.editor.createInstance).not.toHaveBeenCalled();
expect(vm.editor.createDiffInstance).not.toHaveBeenCalled();
});
});
describe('createEditorInstance', () => {
......
......@@ -117,6 +117,21 @@ describe('IDE services', () => {
it('sends a request to file.rawPath', () => {
return services.getRawFileData(file).then(raw => {
expect(axios.get).toHaveBeenCalledWith(file.rawPath, {
transformResponse: [expect.any(Function)],
});
expect(raw).toEqual('raw content');
});
});
it('returns arraybuffer for binary files', () => {
file.binary = true;
return services.getRawFileData(file).then(raw => {
expect(axios.get).toHaveBeenCalledWith(file.rawPath, {
transformResponse: [expect.any(Function)],
responseType: 'arraybuffer',
});
expect(raw).toEqual('raw content');
});
});
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment