Fix OS switching not working on tree view UI
This commit resolves a rendering bug in the tree view component. Previously, updating the tree collection prior to node updates led to rendering errors due to the presence of non-existent nodes in the new collection. Changes: - Implement manual control over the rendering process in tree view. This includes clearing the rendering queue and currently rendered nodes before updates, aligning the rendering process with the updated collection. - Add Cypress E2E tests to test switching between all operating systems and script views, ensuring no uncaught errors and preventing regression. - Replace hardcoded operating system lists in the download URL list view with a unified `getSupportedOsList()` method from the application, reducing duplication and simplifying future updates. - Rename `initial-nodes` to `nodes` in `TreeView.vue` to reflect their mutable nature. - Centralize the function for getting operating system names into `OperatingSystemNames.ts`, improving reusability in E2E tests.
This commit is contained in:
@@ -14,10 +14,11 @@
|
||||
import { defineComponent, computed } from 'vue';
|
||||
import { injectKey } from '@/presentation/injectionSymbols';
|
||||
import { OperatingSystem } from '@/domain/OperatingSystem';
|
||||
import { getOperatingSystemDisplayName } from '@/presentation/components/Shared/OperatingSystemNames';
|
||||
import MenuOptionList from './MenuOptionList.vue';
|
||||
import MenuOptionListItem from './MenuOptionListItem.vue';
|
||||
|
||||
interface IOsViewModel {
|
||||
interface OperatingSystemOption {
|
||||
readonly name: string;
|
||||
readonly os: OperatingSystem;
|
||||
}
|
||||
@@ -31,12 +32,12 @@ export default defineComponent({
|
||||
const { modifyCurrentContext, currentState } = injectKey((keys) => keys.useCollectionState);
|
||||
const { application } = injectKey((keys) => keys.useApplication);
|
||||
|
||||
const allOses = computed<ReadonlyArray<IOsViewModel>>(
|
||||
const allOses = computed<ReadonlyArray<OperatingSystemOption>>(
|
||||
() => application
|
||||
.getSupportedOsList()
|
||||
.map((os) : IOsViewModel => ({
|
||||
.map((os) : OperatingSystemOption => ({
|
||||
os,
|
||||
name: renderOsName(os),
|
||||
name: getOperatingSystemDisplayName(os),
|
||||
})),
|
||||
);
|
||||
|
||||
@@ -57,13 +58,4 @@ export default defineComponent({
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
function renderOsName(os: OperatingSystem): string {
|
||||
switch (os) {
|
||||
case OperatingSystem.Windows: return 'Windows';
|
||||
case OperatingSystem.macOS: return 'macOS';
|
||||
case OperatingSystem.Linux: return 'Linux (preview)';
|
||||
default: throw new RangeError(`Cannot render os name: ${OperatingSystem[os]}`);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user