experimenting with tests

niivue · Dec 10, 2023 · 5742258 · 5742258
1 parent 8e94c88
commit 5742258
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 26 deletions.
diff --git a/niivue/src/components/MenuElements.ts b/niivue/src/components/MenuElements.ts
@@ -36,6 +36,7 @@ export const MenuItem = ({ label, onClick, children, visible }: any) => {
       <button
         class="hover:bg-gray-700 pr-2 rounded-r-md h-6 align-middle"
         onClick=${toggle(isOpen)}
+        data-testid="menu-item-dropdown-${label}"
       >
         <${DownArrow} />
       </button>

diff --git a/niivue/src/components/test/App.test.ts b/niivue/src/components/test/App.test.ts
@@ -1,6 +1,5 @@
 import { describe, expect, it, test } from 'vitest'
-import { render, screen } from '@testing-library/preact'
-import { BrowserRouter } from 'react-router-dom'
+import { fireEvent, render, screen } from '@testing-library/preact'
 import { html } from 'htm/preact'
 
 import { App } from '../App'
@@ -19,17 +18,38 @@ describe('app', () => {
     expect(1 + 2).toBe(expected)
   })
 
-  test('should display home screen', () => {
-    // const n = new Niivue()
-    render(html`<${BrowserRouter}><${App} /></${BrowserRouter}>`)
-    // App
-    // test that the component with text "Niivue-ify" is present
-    // expect(screen.getByText("Niivue-ify")).toBe;
-    expect(3 + 2).toBe(5)
+  it('should display home screen', () => {
+    render(html`<${App} />`)
+
+    expect(screen.getByText(/Home/i)).toBeInTheDocument()
+    expect(screen.getByText(/Add Image/i)).toBeInTheDocument()
+    expect(screen.getByText(/View/i)).toBeInTheDocument()
+    expect(screen.getByText(/Bookmarklet/i)).toBeInTheDocument()
+    expect(screen.getByText(/Drop Files to load images/i)).toBeInTheDocument()
   })
 
-  it('basic', () => {
+  it('should load a test image', () => {
     render(html`<${App} />`)
-    expect(screen.getByText(/Niivue-ify/i)).toBeInTheDocument()
+    const testLink = 'https://niivue.github.io/niivue-demo-images/mni152.nii.gz'
+    // send a message to load the test image
+    // window.postMessage(
+    //   {
+    //     type: 'addImage',
+    //     body: {
+    //       data: '',
+    //       uri: testLink,
+    //     },
+    //   },
+    //   '*',
+    // )
+
+    const addImageDropdown = screen.getByTestId('menu-item-dropdown-Add Image')
+    fireEvent.click(addImageDropdown)
+    const openExampleImage = screen.getByText(/Example Image/i)
+    expect(openExampleImage).toBeInTheDocument()
+
+    // fireEvent.click(openExampleImage)
+
+    // expect(screen.getByText(/Loading/i)).toBeInTheDocument()
   })
 })
diff --git a/niivue/src/components/test/HomeScreen.test.ts b/niivue/src/components/test/HomeScreen.test.ts
@@ -3,19 +3,14 @@ import { render } from "@testing-library/preact";
 import { html } from "htm/preact";
 import { HomeScreen } from "../HomeScreen";
 
-describe("HomeScreen", () => {
-  it("renders the OpenFromWeb component", () => {
-    const { getByText } = render(html`<${HomeScreen} />`);
-    expect(getByText("Open Image from URL")).toBeInTheDocument();
-  });
+describe('HomeScreen', () => {
+  it('should render the bookmarklet link', () => {
+    const { getByText } = render(html`<${HomeScreen} />`)
+    expect(getByText('Niivue-ify')).toBeInTheDocument()
+  })
 
-  it("renders the bookmarklet link", () => {
-    const { getByText } = render(html`<${HomeScreen} />`);
-    expect(getByText("Niivue-ify")).toBeInTheDocument();
-  });
-
-  it("renders the test link", () => {
-    const { getByText } = render(html`<${HomeScreen} />`);
-    expect(getByText("MNI")).toBeInTheDocument();
-  });
-});
+  it('should render the test link', () => {
+    const { getByText } = render(html`<${HomeScreen} />`)
+    expect(getByText('MNI')).toBeInTheDocument()
+  })
+})