Commit caf35636 authored by Denys Mishunov's avatar Denys Mishunov Committed by Natalia Tepluhina

Filter out blobs on blob_view

When querying for blob content, GraphQL still returns the array of the
blobs. In order to find the correct content, we have to filter out
the list
parent f3caeb39
......@@ -50,9 +50,7 @@ export default {
data-qa-selector="clone_button"
/>
</div>
<div v-for="blob in blobs" :key="blob.path">
<snippet-blob :snippet="snippet" :blob="blob" />
</div>
<snippet-blob v-for="blob in blobs" :key="blob.path" :snippet="snippet" :blob="blob" />
</template>
</div>
</template>
......@@ -25,8 +25,9 @@ export default {
rich: this.activeViewerType === RICH_BLOB_VIEWER,
};
},
update: data =>
data.snippets.edges[0].node.blob.richData || data.snippets.edges[0].node.blob.plainData,
update(data) {
return this.onContentUpdate(data);
},
result() {
if (this.activeViewerType === RICH_BLOB_VIEWER) {
this.blob.richViewer.renderError = null;
......@@ -76,6 +77,12 @@ export default {
this.$apollo.queries.blobContent.skip = false;
this.$apollo.queries.blobContent.refetch();
},
onContentUpdate(data) {
const { path: blobPath } = this.blob;
const { blobs } = data.snippets.edges[0].node;
const updatedBlobData = blobs.find(blob => blob.path === blobPath);
return updatedBlobData.richData || updatedBlobData.plainData;
},
},
BLOB_RENDER_EVENT_LOAD,
BLOB_RENDER_EVENT_SHOW_SOURCE,
......
......@@ -3,7 +3,8 @@ query SnippetBlobContent($ids: [ID!], $rich: Boolean!) {
edges {
node {
id
blob {
blobs {
path
richData @include(if: $rich)
plainData @skip(if: $rich)
}
......
......@@ -32,6 +32,10 @@
.snippet-file-content {
border-radius: 3px;
+ .snippet-file-content {
@include gl-mt-5;
}
}
.snippet-header {
......
......@@ -47,10 +47,12 @@ export const BinaryBlob = {
};
export const RichBlobContentMock = {
path: 'foo.md',
richData: '<h1>Rich</h1>',
};
export const SimpleBlobContentMock = {
path: 'foo.js',
plainData: 'Plain',
};
......
import { nextTick } from 'vue';
import { mount } from '@vue/test-utils';
import SnippetBlobView from '~/snippets/components/snippet_blob_view.vue';
import BlobHeader from '~/blob/components/blob_header.vue';
......@@ -10,7 +11,13 @@ import {
import { RichViewer, SimpleViewer } from '~/vue_shared/components/blob_viewers';
import { SNIPPET_VISIBILITY_PUBLIC } from '~/snippets/constants';
import { Blob as BlobMock, SimpleViewerMock, RichViewerMock } from 'jest/blob/components/mock_data';
import {
Blob as BlobMock,
SimpleViewerMock,
RichViewerMock,
RichBlobContentMock,
SimpleBlobContentMock,
} from 'jest/blob/components/mock_data';
describe('Blob Embeddable', () => {
let wrapper;
......@@ -111,6 +118,59 @@ describe('Blob Embeddable', () => {
expect(wrapper.find(BlobHeader).props('hasRenderError')).toBe(true);
});
describe('bob content in multi-file scenario', () => {
const SimpleBlobContentMock2 = {
...SimpleBlobContentMock,
plainData: 'Another Plain Foo',
};
const RichBlobContentMock2 = {
...SimpleBlobContentMock,
richData: 'Another Rich Foo',
};
it.each`
snippetBlobs | description | currentBlob | expectedContent
${[SimpleBlobContentMock]} | ${'one existing textual blob'} | ${SimpleBlobContentMock} | ${SimpleBlobContentMock.plainData}
${[RichBlobContentMock]} | ${'one existing rich blob'} | ${RichBlobContentMock} | ${RichBlobContentMock.richData}
${[SimpleBlobContentMock, RichBlobContentMock]} | ${'mixed blobs with current textual blob'} | ${SimpleBlobContentMock} | ${SimpleBlobContentMock.plainData}
${[SimpleBlobContentMock, RichBlobContentMock]} | ${'mixed blobs with current rich blob'} | ${RichBlobContentMock} | ${RichBlobContentMock.richData}
${[SimpleBlobContentMock, SimpleBlobContentMock2]} | ${'textual blobs with current textual blob'} | ${SimpleBlobContentMock} | ${SimpleBlobContentMock.plainData}
${[RichBlobContentMock, RichBlobContentMock2]} | ${'rich blobs with current rich blob'} | ${RichBlobContentMock} | ${RichBlobContentMock.richData}
`(
'renders correct content for $description',
async ({ snippetBlobs, currentBlob, expectedContent }) => {
const apolloData = {
snippets: {
edges: [
{
node: {
blobs: snippetBlobs,
},
},
],
},
};
createComponent({
blob: {
...BlobMock,
path: currentBlob.path,
},
});
// mimic apollo's update
wrapper.setData({
blobContent: wrapper.vm.onContentUpdate(apolloData),
});
await nextTick();
const findContent = () => wrapper.find(BlobContent);
expect(findContent().props('content')).toBe(expectedContent);
},
);
});
describe('URLS with hash', () => {
beforeEach(() => {
window.location.hash = '#LC2';
......
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