From c9ed1401b769cb3774f4595f248f7f5a2b1623ef Mon Sep 17 00:00:00 2001 From: Alec Rollison <88508028+aelishRollo@users.noreply.github.com> Date: Thu, 6 Jun 2024 15:37:16 -0400 Subject: [PATCH] Get basic template working so I can begin developing --- src/App.test.tsx | 201 ----------------------------------------------- src/App.tsx | 63 +-------------- src/Foo.tsx | 8 ++ src/index.tsx | 12 +-- 4 files changed, 13 insertions(+), 271 deletions(-) delete mode 100644 src/App.test.tsx create mode 100644 src/Foo.tsx diff --git a/src/App.test.tsx b/src/App.test.tsx deleted file mode 100644 index 8e27742..0000000 --- a/src/App.test.tsx +++ /dev/null @@ -1,201 +0,0 @@ -import {render, screen, waitFor} from '@testing-library/react'; -import App from './App'; -import {IClient} from './client/IClient'; -import {ProjectData, CommentData, SectionData, EntityType, FileData} from './types'; -import {LocalStorageStore, StoreData} from './store/LocalStorageStore'; -import {MockLocalStorageDependency} from './store/MockLocalStorageDependency'; -import {LocalStorageClient} from './client/LocalStorageClient'; - -// import * as testData from './sampleData' - -window.alert = () => {}; - -const makeTestStore = (): StoreData => { - const initialProjects: ProjectData[] = [ - { - id: 'project-1', - }, - { - id: 'project-2', - }, - ]; - - const initialSections: SectionData[] = [ - { - id: 'section-1', - projectId: 'project-1', - chordProgression: ['C', 'Dm', 'F', 'G'], - description: 'This is the intro', - title: 'Intro', - numRevisions: 3, - } - ]; - - const initialFiles: FileData[] = [ - { - id: 'file-1', - projectId: 'project-1', - entityId: 'section-1', - entityType: EntityType.SECTION, - title: 'Bass.mp3', - }, - { - id: 'file-2', - projectId: 'project-1', - entityId: 'section-1', - entityType: EntityType.SECTION, - title: 'Chunky Monkey.mp3', - }, - ]; - - const initialComments: CommentData[] = [ - { - id: 'comment-1', - projectId: 'project-1', - message: 'Hey what\'s up', - entityType: EntityType.SECTION, - entityId: 'section-1', - username: 'username-1', - }, - { - id: 'comment-2', - projectId: 'project-1', - message: 'Yeah', - entityType: EntityType.FILE, - entityId: 'file-1', - username: 'username-1', - }, - { - id: 'comment-3', - projectId: 'project-1', - message: 'Yeah 3', - entityType: EntityType.FILE, - entityId: 'file-1', - username: 'username-1', - }, - ]; - - return { - projects: initialProjects, - sections: initialSections, - files: initialFiles, - comments: initialComments, - }; -}; - -describe('App', () => { - let client: IClient; - - beforeEach(() => { - const initialStore = makeTestStore(); - - const localStorageDependency = new MockLocalStorageDependency(initialStore); - const store = new LocalStorageStore(localStorageDependency); - client = new LocalStorageClient(store); - }); - - describe('initializing', () => { - it('should show "Loading"', async () => { - // this method is made blocking for this specific test - client.fetchFullDataForProject = (() => new Promise(r => setTimeout(r))); - - render( - - ); - - expect(screen.getByText(/Loading/)).toBeDefined(); - }); - - it('should show client error', async () => { - client.fetchFullDataForProject = jest.fn().mockResolvedValue(new Error('Some error')); - - render( - - ); - - await waitFor(() => { - expect(screen.queryByText(/Loading/)).toBeNull(); - }); - - expect(screen.getByText(/Some error/)).toBeDefined(); - }); - }); - - describe('initialized', () => { - it('should show the section title and description', async () => { - render( - - ); - - await waitFor(() => { - expect(screen.queryByText(/Loading/)).toBeNull(); - }); - - expect(screen.getByText(/Intro/)).toBeDefined(); - expect(screen.getByText(/This is the intro/)).toBeDefined(); - }); - - it('should show the chord progression', async () => { - const {container} = render( - - ); - - await waitFor(() => { - expect(screen.queryByText(/Loading/)).toBeNull(); - }); - - expect(container.querySelector('.chords')?.textContent).toEqual('CDmFG'); - }); - - it('should show files attached to the section', async () => { - const {container} = render( - - ); - - await waitFor(() => { - expect(screen.queryByText(/Loading/)).toBeNull(); - }); - - expect(container.querySelector('.files #file-1')?.textContent).toContain('Bass.mp3'); - expect(container.querySelector('.files #file-1')?.textContent).toContain('2 Comments'); - }); - - it('should show the comments on the section', async () => { - const {container} = render( - - ); - - await waitFor(() => { - expect(screen.queryByText(/Loading/)).toBeNull(); - }); - - expect(container.querySelector('.comments')?.textContent).toContain('1 Comment'); - expect(container.querySelector('.comments #comment-1')?.textContent).toContain('username-1'); - expect(container.querySelector('.comments #comment-1')?.textContent).toContain('Hey what\'s up'); - }); - }); -}); diff --git a/src/App.tsx b/src/App.tsx index df11b80..7d3e3b5 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,68 +1,13 @@ -import {useState} from 'react'; -import './App.css'; -import './css_reset.css' -import './index.css' -import './section_view.css'; -import * as types from './types'; -import {GlobalStoreProvider} from './hooks/useGlobalStore'; -import SectionPage from './SectionPage'; -import {IClient} from './client/IClient'; -import {ClientProvider} from './hooks/useClient'; -import {useMount} from './hooks/useMount'; -type AppProps = { - projectId: string; - sectionId: string; +import Foo from './Foo' - client: IClient; -} - -const App: React.FC = ({projectId, sectionId, client}) => { - const [initialProjectData, setInitialProjectData] = useState(null); - const [error, setError] = useState(''); - - useMount(async () => { - const projectDataOrError = await client.fetchFullDataForProject(projectId); - - if (projectDataOrError instanceof Error) { - alert(projectDataOrError.message); - setError(projectDataOrError.message); - return; - } - setInitialProjectData(projectDataOrError); - }); - - if (error) { - return ( -

- {error} -

- ); - } - - if (!initialProjectData) { - return ( -

- Loading -

- ); - } - - const pageContent = ( - - ); +const App = () => { + return ( - - - {pageContent} - - + ); } diff --git a/src/Foo.tsx b/src/Foo.tsx new file mode 100644 index 0000000..fae4aa2 --- /dev/null +++ b/src/Foo.tsx @@ -0,0 +1,8 @@ + + + +let ChordProgression = () => { + return (

Hello, Universe!

); + }; + + export default ChordProgression diff --git a/src/index.tsx b/src/index.tsx index 7b20240..15f2911 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -11,19 +11,9 @@ window.addEventListener('load', async () => { document.getElementById('root') as HTMLElement ); - const localStore = new LocalStorageStore(localStorage); - const localClient = new LocalStorageClient(localStore); - - const projectId = 'project-1'; - const sectionId = 'section-1'; - root.render( - + ); });