remote IStore interface to simplify. fix workflow test command

.github/workflows/ci.yml

@@ -63,4 +63,4 @@ jobs:
             - name: Install modules
               run: npm i
             - name: Run tests
-              run: npm test
+              run: npm run test:ci

package.json

@@ -25,11 +25,12 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
+    "test:ci": "react-scripts test --watchAll=false",
     "eject": "react-scripts eject",
     "lint": "eslint src/**/*.ts*",
     "fix": "npm run lint -- --fix",
     "check-types": "tsc --noEmit",
-    "ci": "npm run lint && npm run check-types && npm run build"
+    "ci": "npm run lint && npm run check-types && npm run test:ci && npm run build"
   },
   "browserslist": {
     "production": [

src/App.test.tsx

@@ -3,11 +3,13 @@ import App from './App';
 import {IClient} from './client/IClient';
 import {ProjectData, CommentData, SectionData, EntityType, FileData} from './types';
 import {LocalStorageStore, StoreData} from './store/LocalStorageStore';
-import {MockLocalStorage} from './store/MockLocalStorage';
+import {MockLocalStorageDependency} from './store/MockLocalStorageDependency';
 import {LocalStorageClient} from './client/LocalStorageClient';
 
 // import * as testData from './sampleData'
 
+window.alert = () => {};
+
 const makeTestStore = (): StoreData => {
     const initialProjects: ProjectData[] = [
         {
@@ -87,25 +89,47 @@ describe('App', () => {
     beforeEach(() => {
         const initialStore = makeTestStore();
 
-        const localStorageDependency = new MockLocalStorage(initialStore);
+        const localStorageDependency = new MockLocalStorageDependency(initialStore);
         const store = new LocalStorageStore(localStorageDependency);
         client = new LocalStorageClient(store);
     });
 
-    it('initializing', () => {
-        it('show "Loading"', async () => {
+    describe('initializing', () => {
+        it('should show "Loading"', async () => {
+            // this method is made blocking for this specific test
+            client.fetchFullDataForProject = (() => new Promise(r => setTimeout(r)));
+
+            render(
+                <App
+                    projectId={'project-1'}
+                    sectionId={'section-1'}
+                    client={client}
+                />
+            );
+
+            expect(screen.getByText(/Loading/)).toBeDefined();
+        });
+
+        it('should show client error', async () => {
+            client.fetchFullDataForProject = jest.fn().mockResolvedValue(new Error('Some error'));
+
             render(
                 <App
                     projectId={'project-1'}
                     sectionId={'section-1'}
                     client={client}
                 />
             );
+
+            await waitFor(() => {
+                expect(screen.queryByText(/Loading/)).toBeNull();
+            });
+
+            expect(screen.getByText(/Some error/)).toBeDefined();
         });
-        expect(screen.getByText(/Loading/)).toBeDefined();
     });
 
-    it('initialized', () => {
+    describe('initialized', () => {
         it('should show the section title and description', async () => {
             render(
                 <App

src/ChordProgression.tsx

@@ -9,7 +9,7 @@ export const ChordProgression: React.FC<ChordProgressionProps> = ({ chordProgres
   return (
     <div className="chords">
       <ol>
-        {chordProgression.map((chord, index) => <li>{chord}</li>)}
+        {chordProgression.map((chord, index) => <li key={index}>{chord}</li>)}
       </ol>
     </div>
   );

src/Files.tsx

@@ -16,7 +16,10 @@ export const Files: React.FC<FilesProps> = ({files}) => {
                 const numComments = globalStore.getCommentsForFile(file.id).length;
 
                 return (
-                    <div id={file.id}>
+                    <div
+                        key={file.id}
+                        id={file.id}
+                    >
                         {file.title}
                         <br></br> <br></br>
                         {numComments}

src/client/IClient.ts

@@ -1,4 +1,4 @@
-import {CommentData, FullProjectData, ProjectData, SectionData} from '../types';
+import {CommentData, FullProjectData, SectionData} from '../types';
 
 export interface IClient {
     fetchFullDataForProject: (projectId: string) => Promise<FullProjectData | Error>;

src/store/LocalStorageStore.ts

@@ -1,5 +1,4 @@
 import {CommentData, EntityType, FileData, ProjectData, SectionData} from '../types';
-import {IStore} from './IStore';
 
 export interface LocalStorageDependency {
     getItem(key: string): string | null;
@@ -22,7 +21,7 @@ export type StoreData = {
     comments: CommentData[];
 }
 
-export class LocalStorageStore implements IStore {
+export class LocalStorageStore {
     private ls: LocalStorageDependency;
 
     private currentData: StoreData;

src/store/MockLocalStorage.ts → src/store/MockLocalStorageDependency.ts

@@ -1,6 +1,6 @@
 import {LocalStorageDependency} from './LocalStorageStore';
 
-export class MockLocalStorage<T extends Record<string, object>> implements LocalStorageDependency {
+export class MockLocalStorageDependency<T extends Record<string, object>> implements LocalStorageDependency {
     public currentData: T;
 
     constructor(data: T) {