mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Improve left pane UI when loading search results

Browse source
This commit is contained in:
Evan Hahn 2021-04-02 17:32:55 -05:00 • committed by Josh Perez
parent f05d45ac9b
commit d81aaf654f
15 changed files with 420 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

176
ts/test-node/components/leftPane/LeftPaneSearchHelper_test.ts
View file

@ -40,6 +40,39 @@ describe('LeftPaneSearchHelper', () => {
});
describe('getRowCount', () => {
it('returns 100 if any results are loading', () => {
assert.strictEqual(
new LeftPaneSearchHelper({
conversationResults: { isLoading: true },
contactResults: { isLoading: true },
messageResults: { isLoading: true },
searchTerm: 'foo',
}).getRowCount(),
100
);
assert.strictEqual(
new LeftPaneSearchHelper({
conversationResults: {
isLoading: false,
results: [fakeConversation(), fakeConversation()],
},
contactResults: { isLoading: true },
messageResults: { isLoading: true },
searchTerm: 'foo',
}).getRowCount(),
100
);
assert.strictEqual(
new LeftPaneSearchHelper({
conversationResults: { isLoading: true },
contactResults: { isLoading: true },
messageResults: { isLoading: false, results: [fakeMessage()] },
searchTerm: 'foo',
}).getRowCount(),
100
);
});
it('returns 0 when there are no search results', () => {
const helper = new LeftPaneSearchHelper({
conversationResults: { isLoading: false, results: [] },
@ -51,17 +84,6 @@ describe('LeftPaneSearchHelper', () => {
assert.strictEqual(helper.getRowCount(), 0);
});
it("returns 2 rows for each section of search results that's loading", () => {
const helper = new LeftPaneSearchHelper({
conversationResults: { isLoading: true },
contactResults: { isLoading: false, results: [] },
messageResults: { isLoading: true },
searchTerm: 'foo',
});
assert.strictEqual(helper.getRowCount(), 4);
});
it('returns 1 + the number of results, dropping empty sections', () => {
const helper = new LeftPaneSearchHelper({
conversationResults: {
@ -78,34 +100,41 @@ describe('LeftPaneSearchHelper', () => {
});
describe('getRow', () => {
it('returns header + spinner for loading sections', () => {
const helper = new LeftPaneSearchHelper({
conversationResults: { isLoading: true },
contactResults: { isLoading: true },
messageResults: { isLoading: true },
searchTerm: 'foo',
});
it('returns a "loading search results" row if any results are loading', () => {
const helpers = [
new LeftPaneSearchHelper({
conversationResults: { isLoading: true },
contactResults: { isLoading: true },
messageResults: { isLoading: true },
searchTerm: 'foo',
}),
new LeftPaneSearchHelper({
conversationResults: {
isLoading: false,
results: [fakeConversation(), fakeConversation()],
},
contactResults: { isLoading: true },
messageResults: { isLoading: true },
searchTerm: 'foo',
}),
new LeftPaneSearchHelper({
conversationResults: { isLoading: true },
contactResults: { isLoading: true },
messageResults: { isLoading: false, results: [fakeMessage()] },
searchTerm: 'foo',
}),
];
assert.deepEqual(helper.getRow(0), {
type: RowType.Header,
i18nKey: 'conversationsHeader',
});
assert.deepEqual(helper.getRow(1), {
type: RowType.Spinner,
});
assert.deepEqual(helper.getRow(2), {
type: RowType.Header,
i18nKey: 'contactsHeader',
});
assert.deepEqual(helper.getRow(3), {
type: RowType.Spinner,
});
assert.deepEqual(helper.getRow(4), {
type: RowType.Header,
i18nKey: 'messagesHeader',
});
assert.deepEqual(helper.getRow(5), {
type: RowType.Spinner,
helpers.forEach(helper => {
assert.deepEqual(helper.getRow(0), {
type: RowType.SearchResultsLoadingFakeHeader,
});
for (let i = 1; i < 99; i += 1) {
assert.deepEqual(helper.getRow(i), {
type: RowType.SearchResultsLoadingFakeRow,
});
}
assert.isUndefined(helper.getRow(100));
});
});
@ -272,6 +301,54 @@ describe('LeftPaneSearchHelper', () => {
assert.isUndefined(helper.getRow(5));
});
describe('isScrollable', () => {
it('returns false if any results are loading', () => {
const helpers = [
new LeftPaneSearchHelper({
conversationResults: { isLoading: true },
contactResults: { isLoading: true },
messageResults: { isLoading: true },
searchTerm: 'foo',
}),
new LeftPaneSearchHelper({
conversationResults: {
isLoading: false,
results: [fakeConversation(), fakeConversation()],
},
contactResults: { isLoading: true },
messageResults: { isLoading: true },
searchTerm: 'foo',
}),
new LeftPaneSearchHelper({
conversationResults: { isLoading: true },
contactResults: { isLoading: true },
messageResults: { isLoading: false, results: [fakeMessage()] },
searchTerm: 'foo',
}),
];
helpers.forEach(helper => {
assert.isFalse(helper.isScrollable());
});
});
it('returns true if all results have loaded', () => {
const helper = new LeftPaneSearchHelper({
conversationResults: {
isLoading: false,
results: [fakeConversation(), fakeConversation()],
},
contactResults: { isLoading: false, results: [] },
messageResults: {
isLoading: false,
results: [fakeMessage(), fakeMessage(), fakeMessage()],
},
searchTerm: 'foo',
});
assert.isTrue(helper.isScrollable());
});
});
describe('shouldRecomputeRowHeights', () => {
it("returns false if the number of results doesn't change", () => {
const helper = new LeftPaneSearchHelper({
@ -303,7 +380,7 @@ describe('LeftPaneSearchHelper', () => {
);
});
it('returns false when a section goes from loading to loaded with 1 result', () => {
it('returns false when a section completes loading, but not all sections are done (because the pane is still loading overall)', () => {
const helper = new LeftPaneSearchHelper({
conversationResults: { isLoading: true },
contactResults: { isLoading: true },
@ -324,6 +401,27 @@ describe('LeftPaneSearchHelper', () => {
);
});
it('returns true when all sections finish loading', () => {
const helper = new LeftPaneSearchHelper({
conversationResults: { isLoading: true },
contactResults: { isLoading: true },
messageResults: { isLoading: false, results: [fakeMessage()] },
searchTerm: 'foo',
});
assert.isTrue(
helper.shouldRecomputeRowHeights({
conversationResults: {
isLoading: false,
results: [fakeConversation(), fakeConversation()],
},
contactResults: { isLoading: false, results: [] },
messageResults: { isLoading: false, results: [fakeMessage()] },
searchTerm: 'foo',
})
);
});
it('returns true if the number of results in a section changes', () => {
const helper = new LeftPaneSearchHelper({
conversationResults: {