Fix searching/filtering bugs #235
- Fix a bug (introduced in 1b9be8fe) preventing the tree view from being
visible during a search.
- Fix a minor bug where the scripts view does not render based on the
initial filter.
- Add Vue component tests for `TheScriptView` to prevent regressions.
- Refactor `isSearching` in `TheScriptView` to simplify its logic.
This commit is contained in:
undergroundwires
@@ -0,0 +1,416 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { Wrapper, shallowMount } from '@vue/test-utils';
|
||||
import TheScriptsView from '@/presentation/components/Scripts/View/TheScriptsView.vue';
|
||||
import ScriptsTree from '@/presentation/components/Scripts/View/ScriptsTree/ScriptsTree.vue';
|
||||
import CardList from '@/presentation/components/Scripts/View/Cards/CardList.vue';
|
||||
import { ViewType } from '@/presentation/components/Scripts/Menu/View/ViewType';
|
||||
import { useCollectionState } from '@/presentation/components/Shared/Hooks/UseCollectionState';
|
||||
import { UseCollectionStateStub } from '@tests/unit/shared/Stubs/UseCollectionStateStub';
|
||||
import { useApplicationKey, useCollectionStateKey } from '@/presentation/injectionSymbols';
|
||||
import { UseApplicationStub } from '@tests/unit/shared/Stubs/UseApplicationStub';
|
||||
import { UserFilterMethod, UserFilterStub } from '@tests/unit/shared/Stubs/UserFilterStub';
|
||||
import { FilterResultStub } from '@tests/unit/shared/Stubs/FilterResultStub';
|
||||
import { FilterChange } from '@/application/Context/State/Filter/Event/FilterChange';
|
||||
import { IFilterResult } from '@/application/Context/State/Filter/IFilterResult';
|
||||
import { IFilterChangeDetails } from '@/application/Context/State/Filter/Event/IFilterChangeDetails';
|
||||
|
||||
const DOM_SELECTOR_NO_MATCHES = '.search-no-matches';
|
||||
const DOM_SELECTOR_CLOSE_BUTTON = '.search__query__close-button';
|
||||
|
||||
describe('TheScriptsView.vue', () => {
|
||||
describe('view types', () => {
|
||||
describe('initially', () => {
|
||||
interface IInitialViewTypeTestCase {
|
||||
readonly initialView: ViewType;
|
||||
readonly expectedComponent: unknown;
|
||||
readonly absentComponents: readonly unknown[];
|
||||
}
|
||||
const testCases: readonly IInitialViewTypeTestCase[] = [
|
||||
{
|
||||
initialView: ViewType.Tree,
|
||||
expectedComponent: ScriptsTree,
|
||||
absentComponents: [CardList],
|
||||
},
|
||||
{
|
||||
initialView: ViewType.Cards,
|
||||
expectedComponent: CardList,
|
||||
absentComponents: [ScriptsTree],
|
||||
},
|
||||
];
|
||||
|
||||
testCases.forEach(({ initialView, expectedComponent, absentComponents }) => {
|
||||
it(`given initial view, renders only ${ViewType[initialView]}`, () => {
|
||||
// act
|
||||
const wrapper = mountComponent({
|
||||
viewType: initialView,
|
||||
});
|
||||
|
||||
// assert
|
||||
expect(wrapper.findComponent(expectedComponent).exists()).to.equal(true);
|
||||
expectComponentsToNotExist(wrapper, absentComponents);
|
||||
});
|
||||
});
|
||||
});
|
||||
describe('toggle view type', () => {
|
||||
interface IToggleViewTypeTestCase {
|
||||
readonly originalView: ViewType;
|
||||
readonly newView: ViewType;
|
||||
readonly absentComponents: readonly unknown[];
|
||||
readonly expectedComponent: unknown;
|
||||
}
|
||||
|
||||
const toggleTestCases: IToggleViewTypeTestCase[] = [
|
||||
{
|
||||
originalView: ViewType.Tree,
|
||||
newView: ViewType.Cards,
|
||||
absentComponents: [ScriptsTree],
|
||||
expectedComponent: CardList,
|
||||
},
|
||||
{
|
||||
originalView: ViewType.Cards,
|
||||
newView: ViewType.Tree,
|
||||
absentComponents: [CardList],
|
||||
expectedComponent: ScriptsTree,
|
||||
},
|
||||
];
|
||||
|
||||
toggleTestCases.forEach(({
|
||||
originalView, newView, absentComponents, expectedComponent,
|
||||
}) => {
|
||||
it(`toggles from ${ViewType[originalView]} to ${ViewType[newView]}`, async () => {
|
||||
// arrange
|
||||
// act
|
||||
const wrapper = mountComponent({
|
||||
viewType: originalView,
|
||||
});
|
||||
await wrapper.setProps({ currentView: newView });
|
||||
|
||||
// assert
|
||||
expect(wrapper.findComponent(expectedComponent).exists()).to.equal(true);
|
||||
expectComponentsToNotExist(wrapper, absentComponents);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('switching views', () => {
|
||||
interface ISwitchingViewTestCase {
|
||||
readonly name: string;
|
||||
readonly initialView: ViewType;
|
||||
readonly changeEvents: readonly IFilterChangeDetails[];
|
||||
readonly componentsToDisappear: readonly unknown[];
|
||||
readonly expectedComponent: unknown;
|
||||
readonly setupFilter?: (filter: UserFilterStub) => UserFilterStub;
|
||||
}
|
||||
const testCases: readonly ISwitchingViewTestCase[] = [
|
||||
{
|
||||
name: 'tree on initial search with card view',
|
||||
initialView: ViewType.Cards,
|
||||
setupFilter: (filter: UserFilterStub) => filter
|
||||
.withCurrentFilterResult(
|
||||
new FilterResultStub().withQueryAndSomeMatches(),
|
||||
),
|
||||
changeEvents: [],
|
||||
expectedComponent: ScriptsTree,
|
||||
componentsToDisappear: [CardList],
|
||||
},
|
||||
{
|
||||
name: 'restore card after initial search',
|
||||
initialView: ViewType.Cards,
|
||||
setupFilter: (filter: UserFilterStub) => filter
|
||||
.withCurrentFilterResult(
|
||||
new FilterResultStub().withQueryAndSomeMatches(),
|
||||
),
|
||||
changeEvents: [
|
||||
FilterChange.forClear(),
|
||||
],
|
||||
expectedComponent: CardList,
|
||||
componentsToDisappear: [ScriptsTree],
|
||||
},
|
||||
{
|
||||
name: 'tree on search',
|
||||
initialView: ViewType.Cards,
|
||||
changeEvents: [
|
||||
FilterChange.forApply(
|
||||
new FilterResultStub().withQueryAndSomeMatches(),
|
||||
),
|
||||
],
|
||||
expectedComponent: ScriptsTree,
|
||||
componentsToDisappear: [CardList],
|
||||
},
|
||||
{
|
||||
name: 'return to card after search',
|
||||
initialView: ViewType.Cards,
|
||||
changeEvents: [
|
||||
FilterChange.forApply(
|
||||
new FilterResultStub().withQueryAndSomeMatches(),
|
||||
),
|
||||
FilterChange.forClear(),
|
||||
],
|
||||
expectedComponent: CardList,
|
||||
componentsToDisappear: [ScriptsTree],
|
||||
},
|
||||
{
|
||||
name: 'return to tree after search',
|
||||
initialView: ViewType.Tree,
|
||||
changeEvents: [
|
||||
FilterChange.forApply(
|
||||
new FilterResultStub().withQueryAndSomeMatches(),
|
||||
),
|
||||
FilterChange.forClear(),
|
||||
],
|
||||
expectedComponent: ScriptsTree,
|
||||
componentsToDisappear: [CardList],
|
||||
},
|
||||
];
|
||||
testCases.forEach(({
|
||||
name, initialView, changeEvents, expectedComponent: componentToAppear,
|
||||
componentsToDisappear, setupFilter,
|
||||
}) => {
|
||||
it(name, async () => {
|
||||
// arrange
|
||||
let filterStub = new UserFilterStub();
|
||||
if (setupFilter) {
|
||||
filterStub = setupFilter(filterStub);
|
||||
}
|
||||
const stateStub = new UseCollectionStateStub()
|
||||
.withFilter(filterStub);
|
||||
const wrapper = mountComponent({
|
||||
useCollectionState: stateStub.get(),
|
||||
viewType: initialView,
|
||||
});
|
||||
|
||||
// act
|
||||
for (const changeEvent of changeEvents) {
|
||||
filterStub.notifyFilterChange(changeEvent);
|
||||
// eslint-disable-next-line no-await-in-loop
|
||||
await wrapper.vm.$nextTick();
|
||||
}
|
||||
|
||||
// assert
|
||||
expect(wrapper.findComponent(componentToAppear).exists()).to.equal(true);
|
||||
expectComponentsToNotExist(wrapper, componentsToDisappear);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('close button', () => {
|
||||
describe('visibility', () => {
|
||||
describe('does not show close button when not searching', () => {
|
||||
it('not searching initially', () => {
|
||||
// arrange
|
||||
const filterStub = new UserFilterStub()
|
||||
.withNoCurrentFilter();
|
||||
const stateStub = new UseCollectionStateStub()
|
||||
.withFilter(filterStub);
|
||||
|
||||
// act
|
||||
const wrapper = mountComponent({
|
||||
useCollectionState: stateStub.get(),
|
||||
});
|
||||
|
||||
// assert
|
||||
const closeButton = wrapper.find(DOM_SELECTOR_CLOSE_BUTTON);
|
||||
expect(closeButton.exists()).to.equal(false);
|
||||
});
|
||||
it('stop searching', async () => {
|
||||
// arrange
|
||||
const filterStub = new UserFilterStub();
|
||||
const stateStub = new UseCollectionStateStub().withFilter(filterStub);
|
||||
const wrapper = mountComponent({
|
||||
useCollectionState: stateStub.get(),
|
||||
});
|
||||
|
||||
// act
|
||||
filterStub.notifyFilterChange(FilterChange.forApply(
|
||||
new FilterResultStub().withQueryAndSomeMatches(),
|
||||
));
|
||||
await wrapper.vm.$nextTick();
|
||||
filterStub.notifyFilterChange(FilterChange.forClear());
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
// assert
|
||||
const closeButton = wrapper.find(DOM_SELECTOR_CLOSE_BUTTON);
|
||||
expect(closeButton.exists()).to.equal(false);
|
||||
});
|
||||
});
|
||||
describe('shows close button when searching', () => {
|
||||
it('searching initially', () => {
|
||||
// arrange
|
||||
const filterStub = new UserFilterStub()
|
||||
.withCurrentFilterResult(
|
||||
new FilterResultStub().withQueryAndSomeMatches(),
|
||||
);
|
||||
const stateStub = new UseCollectionStateStub()
|
||||
.withFilter(filterStub);
|
||||
|
||||
// act
|
||||
const wrapper = mountComponent({
|
||||
useCollectionState: stateStub.get(),
|
||||
});
|
||||
|
||||
// assert
|
||||
const closeButton = wrapper.find(DOM_SELECTOR_CLOSE_BUTTON);
|
||||
expect(closeButton.exists()).to.equal(true);
|
||||
});
|
||||
it('start searching', async () => {
|
||||
// arrange
|
||||
const filterStub = new UserFilterStub()
|
||||
.withNoCurrentFilter();
|
||||
const stateStub = new UseCollectionStateStub().withFilter(filterStub);
|
||||
const wrapper = mountComponent({
|
||||
useCollectionState: stateStub.get(),
|
||||
});
|
||||
|
||||
// act
|
||||
filterStub.notifyFilterChange(FilterChange.forApply(
|
||||
new FilterResultStub().withQueryAndSomeMatches(),
|
||||
));
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
// assert
|
||||
const closeButton = wrapper.find(DOM_SELECTOR_CLOSE_BUTTON);
|
||||
expect(closeButton.exists()).to.equal(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('clears search query on close button click', async () => {
|
||||
// arrange
|
||||
const filterStub = new UserFilterStub();
|
||||
const stateStub = new UseCollectionStateStub().withFilter(filterStub);
|
||||
const wrapper = mountComponent({
|
||||
useCollectionState: stateStub.get(),
|
||||
});
|
||||
filterStub.notifyFilterChange(FilterChange.forApply(
|
||||
new FilterResultStub().withQueryAndSomeMatches(),
|
||||
));
|
||||
await wrapper.vm.$nextTick();
|
||||
filterStub.callHistory.length = 0;
|
||||
|
||||
// act
|
||||
const closeButton = wrapper.find(DOM_SELECTOR_CLOSE_BUTTON);
|
||||
await closeButton.trigger('click');
|
||||
|
||||
// assert
|
||||
expect(filterStub.callHistory).to.have.lengthOf(1);
|
||||
expect(filterStub.callHistory).to.include(UserFilterMethod.ClearFilter);
|
||||
});
|
||||
});
|
||||
|
||||
describe('no matches text', () => {
|
||||
interface INoMatchesTextTestCase {
|
||||
readonly name: string;
|
||||
readonly filter: IFilterResult;
|
||||
readonly shouldNoMatchesExist: boolean;
|
||||
}
|
||||
const commonTestCases: readonly INoMatchesTextTestCase[] = [
|
||||
{
|
||||
name: 'shows text given no matches',
|
||||
filter: new FilterResultStub()
|
||||
.withQuery('non-empty query')
|
||||
.withEmptyMatches(),
|
||||
shouldNoMatchesExist: true,
|
||||
},
|
||||
{
|
||||
name: 'does not show text given some matches',
|
||||
filter: new FilterResultStub().withQueryAndSomeMatches(),
|
||||
shouldNoMatchesExist: false,
|
||||
},
|
||||
];
|
||||
describe('initial state', () => {
|
||||
const initialStateTestCases: readonly INoMatchesTextTestCase[] = [
|
||||
...commonTestCases,
|
||||
{
|
||||
name: 'does not show text given no filter',
|
||||
filter: undefined,
|
||||
shouldNoMatchesExist: false,
|
||||
},
|
||||
];
|
||||
initialStateTestCases.forEach(({ name, filter, shouldNoMatchesExist }) => {
|
||||
it(name, () => {
|
||||
// arrange
|
||||
const expected = shouldNoMatchesExist;
|
||||
const stateStub = new UseCollectionStateStub()
|
||||
.withFilterResult(filter);
|
||||
|
||||
// act
|
||||
const wrapper = mountComponent({
|
||||
useCollectionState: stateStub.get(),
|
||||
});
|
||||
|
||||
// expect
|
||||
const actual = wrapper.find(DOM_SELECTOR_NO_MATCHES).exists();
|
||||
expect(actual).to.equal(expected);
|
||||
});
|
||||
});
|
||||
});
|
||||
describe('on state change', () => {
|
||||
commonTestCases.forEach(({ name, filter, shouldNoMatchesExist }) => {
|
||||
it(name, async () => {
|
||||
// arrange
|
||||
const expected = shouldNoMatchesExist;
|
||||
const filterStub = new UserFilterStub();
|
||||
const stateStub = new UseCollectionStateStub()
|
||||
.withFilter(filterStub);
|
||||
const wrapper = mountComponent({
|
||||
useCollectionState: stateStub.get(),
|
||||
});
|
||||
|
||||
// act
|
||||
filterStub.notifyFilterChange(FilterChange.forApply(
|
||||
filter,
|
||||
));
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
// expect
|
||||
const actual = wrapper.find(DOM_SELECTOR_NO_MATCHES).exists();
|
||||
expect(actual).to.equal(expected);
|
||||
});
|
||||
});
|
||||
it('shows no text if filter is removed after matches', async () => {
|
||||
// arrange
|
||||
const filter = new UserFilterStub();
|
||||
const stub = new UseCollectionStateStub()
|
||||
.withFilter(filter);
|
||||
const wrapper = mountComponent({
|
||||
useCollectionState: stub.get(),
|
||||
});
|
||||
|
||||
// act
|
||||
filter.notifyFilterChange(FilterChange.forApply(
|
||||
new FilterResultStub().withSomeMatches(),
|
||||
));
|
||||
filter.notifyFilterChange(FilterChange.forClear());
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
// expect
|
||||
expect(wrapper.find(DOM_SELECTOR_NO_MATCHES).exists()).to.equal(false);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function expectComponentsToNotExist(wrapper: Wrapper<Vue>, components: readonly unknown[]) {
|
||||
const existingUnexpectedComponents = components
|
||||
.map((component) => wrapper.findComponent(component))
|
||||
.filter((component) => component.exists());
|
||||
expect(existingUnexpectedComponents).to.have.lengthOf(0);
|
||||
}
|
||||
|
||||
function mountComponent(options?: {
|
||||
readonly useCollectionState?: ReturnType<typeof useCollectionState>,
|
||||
readonly viewType?: ViewType,
|
||||
}) {
|
||||
return shallowMount(TheScriptsView, {
|
||||
provide: {
|
||||
[useCollectionStateKey as symbol]:
|
||||
() => options?.useCollectionState ?? new UseCollectionStateStub().get(),
|
||||
[useApplicationKey as symbol]:
|
||||
new UseApplicationStub().get(),
|
||||
},
|
||||
propsData: {
|
||||
currentView: options?.viewType === undefined ? ViewType.Tree : options.viewType,
|
||||
},
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user