search placeholder shows total scripts

src/presentation/TheSearchBar.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="search">
-      <input type="search" class="searchTerm" placeholder="Search"
+      <input type="search" class="searchTerm" :placeholder="searchPlaceHolder"
         @input="updateFilterAsync($event.target.value)" >
       <div class="iconWrapper">
           <font-awesome-icon :icon="['fas', 'search']" />
@@ -14,6 +14,15 @@ import { StatefulVue } from './StatefulVue';
 
 @Component
 export default class TheSearchBar extends StatefulVue {
+  public searchPlaceHolder = 'Search';
+
+  public async mounted() {
+    const state = await this.getCurrentStateAsync();
+    const totalScripts = state.app.totalScripts;
+    const totalCategories = state.app.totalCategories;
+    this.searchPlaceHolder = `Search in ${totalScripts} scripts`;
+  }
+
   public async updateFilterAsync(filter: |string) {
     const state = await this.getCurrentStateAsync();
     if (!filter) {

tests/unit/domain/Application.spec.ts

@@ -59,4 +59,28 @@ describe('Application', () => {
         // assert
         expect(construct).to.throw('Application must consist of at least one recommended script');
     });
+    it('totalScripts counts right', () => {
+        // arrange
+        const categories = [
+            new CategoryStub(1).withScripts(new ScriptStub('S1').withIsRecommended(true)),
+            new CategoryStub(2).withScripts(new ScriptStub('S2'), new ScriptStub('S3')),
+            new CategoryStub(3).withCategories(new CategoryStub(4).withScripts(new ScriptStub('S4'))),
+        ];
+        // act
+        const application = new Application('name', 'repo', '0.1.0', categories);
+        // assert
+        expect(application.totalScripts).to.equal(4);
+    });
+    it('totalCategories counts right', () => {
+        // arrange
+        const categories = [
+            new CategoryStub(1).withScripts(new ScriptStub('S1').withIsRecommended(true)),
+            new CategoryStub(2).withScripts(new ScriptStub('S2'), new ScriptStub('S3')),
+            new CategoryStub(3).withCategories(new CategoryStub(4).withScripts(new ScriptStub('S4'))),
+        ];
+        // act
+        const application = new Application('name', 'repo', '0.1.0', categories);
+        // assert
+        expect(application.totalCategories).to.equal(4);
+    });
 });

tests/unit/stubs/CategoryStub.ts

@@ -23,6 +23,16 @@ export class CategoryStub extends BaseEntity<number> implements ICategory  {
         }
         return this;
     }
+    public withCategories(...categories: ICategory[]): CategoryStub {
+        for (const category of categories) {
+            this.withCategory(category);
+        }
+        return this;
+    }
+    public withCategory(category: ICategory): CategoryStub {
+        this.subCategories.push(category);
+        return this;
+    }
     public withScript(script: IScript): CategoryStub {
         this.scripts.push(script);
         return this;

tests/unit/stubs/ScriptStub.ts

@@ -6,7 +6,7 @@ export class ScriptStub extends BaseEntity<string> implements IScript {
     public code = `REM code${this.id}`;
     public revertCode = `REM revertCode${this.id}`;
     public readonly documentationUrls = new Array<string>();
-    public isRecommended = false;
+    public isRecommended = true;
 
     constructor(public readonly id: string) {
         super(id);