fix tests

codeborne · Aug 16, 2023 · 37fe0e1 · 37fe0e1
1 parent 59aed70
commit 37fe0e1
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 24 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -55,27 +55,29 @@
     }
   }
 
-  function setupNewProjectIfNotExists() {
+  async function setupNewProjectIfNotExists() {
     projects = []
     loadedProjects = []
     selectedProject = new LoadedProject({url: '', token: '', title: '', indent: 2}, {})
-    setTimeout(() => showAddProject = true)
+    await tick()
+    showAddProject = true
   }
 
   async function loadLastProject() {
     await loadProject(projects.find(p => p.title === localProjectStore.getSelectedProject()) ?? projects[0])
     showAddProject = !selectedProject
   }
 
-  function projectImported(e: CustomEvent) {
+  async function projectImported(e: CustomEvent) {
     loading = true
     const project = e.detail
     projects = projects.concat(project)
     localProjectStore.setProjects(projects)
     localProjectStore.setSelectedProject(project)
-    loadProject(project)
     showConfig = false
-    setTimeout(() => {showAddProject = false; loading = false})
+    await loadProject(project)
+    showAddProject = false
+    loading = false
   }
 
   async function updateProject(e: CustomEvent) {
@@ -115,9 +117,8 @@
     if (existingLoadedProject) {
       selectedProject = existingLoadedProject
       localProjectStore.setSelectedProject(selectedProject.config)
-    }
-    else await loadProject(newProject)
-    await setTimeout(() => loading = false) // setTimeout keeps loading the state in correct order in Svelte's lifecycle
+    } else await loadProject(newProject)
+    setTimeout(() => loading = false) // display loading while synchronously parsing a big json
   }
 
   function switchProjectEvent(e: CustomEvent) {
@@ -144,7 +145,7 @@
 <main class="container mw-100 p-3">
   {#if showAddProject || showConfig}
     <div class="fix-width mx-auto">
-      <ToggleBackButton bind:showAddProject bind:showConfig showBack={loadedProjects && loadedProjects.length > 0}/>
+      <ToggleBackButton bind:showAddProject bind:showConfig showBack={!!loadedProjects?.length}/>
     </div>
   {/if}
 

diff --git a/src/App.test.ts b/src/App.test.ts
@@ -26,14 +26,15 @@ describe('<App>', () => {
     localProjectStore.clear()
   })
 
-  it('renders language importer with no config file or localstorage', async () => {
+  it('renders importer with no config file nor localstorage', async () => {
     stub(localProjectStore, 'getProjects').returns([])
     const {container} = render(App)
     expect(jsonLoader.loadJson).calledWith('projects.json')
     await act(jsonLoader.loadJson)
     expect(localProjectStore.getProjects).called
     await tick()
-    expect(container.querySelector('.addNew')).to.exist
+    await tick()
+    expect(container.querySelector('.import')).to.exist
   })
 
   it.skip('renders editor if localStorage exists, but no deployed projects', async () => {

diff --git a/src/config/GitHubProjectImporter.svelte b/src/config/GitHubProjectImporter.svelte
@@ -1,6 +1,5 @@
 <svelte:options accessors/>
 <script lang="ts">
-
   import type {Project} from '../common/Project'
   import {ProjectSource} from '../common/Project'
   import {createEventDispatcher} from 'svelte'

diff --git a/src/config/ProjectImportList.svelte b/src/config/ProjectImportList.svelte
@@ -9,29 +9,29 @@
   import AwsCodeCommitImporter from './AwsCodeCommitImporter.svelte'
 
   interface Accordion {
-    heading: string,
+    title: string,
     className: string,
-    slot: SvelteComponent,
+    component: SvelteComponent,
     isOpen?: boolean
   }
 
-  let importers: Accordion[] = [
-    { heading: 'Via GitHub', className: 'githubImport', slot: GitHubProjectImporter },
-    { heading: 'Via BitBucket', className: 'bitbucketImport', slot: BitBucketProjectImporter },
-    { heading: 'Via Public URL', className: 'publicImport', isOpen: true, slot: SimpleProjectImporter },
-    { heading: 'Via AWS CodeCommit', className: 'awsCodeCommitImport', slot: AwsCodeCommitImporter },
+  let importers = [
+    { title: 'Via GitHub', className: 'githubImport', component: GitHubProjectImporter },
+    { title: 'Via BitBucket', className: 'bitbucketImport', component: BitBucketProjectImporter },
+    { title: 'Via Public URL', className: 'publicImport', isOpen: true, component: SimpleProjectImporter },
+    { title: 'Via AWS CodeCommit', className: 'awsCodeCommitImport', component: AwsCodeCommitImporter },
   ] as Accordion[]
 
   function toggle(e) {
     importers.forEach(i => i.isOpen = i.className === e.detail && i.isOpen !== true)
     importers = importers
   }
-
 </script>
-<div class="accordion addNew fix-width mx-auto" in:fly={{x: -200, duration: 200}}>
+
+<div class="accordion import addNew fix-width mx-auto" in:fly={{x: -200, duration: 200}}>
 
   <h3 class="mb-3">New project</h3>
-  <Card flex padding="px-4 py-3" class="mb-3">
+  <Card padding="px-4 py-3" class="mb-3">
     <div>
       <h5><i class="fa-solid fa-circle-info mb-3 me-2"></i>Quickstart</h5>
       <p>Make sure to acquaint yourself with the desired <a target="_blank" href="https://github.com/codeborne/translate-tool#using-the-tool">file structure</a></p>
@@ -41,8 +41,8 @@
 
   {#each importers as importer}
     <Accordion on:toggle={toggle}
-      heading={importer.heading} className={importer.className} isOpen={importer.isOpen}>
-      <svelte:component this={importer.slot} on:imported />
+      heading={importer.title} className={importer.className} isOpen={importer.isOpen}>
+      <svelte:component this={importer.component} on:imported/>
     </Accordion>
   {/each}
 </div>