all tests work

.gitignore

@@ -21,3 +21,7 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.idea/*
+target/*
+ci-tdd-java-template.iml
+

ci-tdd-java-template.iml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module version="4">
+  <component name="sonarModuleSettings">
+    <option name="localAnalysisScripName" value="&lt;PROJECT&gt;" />
+    <option name="serverName" value="&lt;PROJECT&gt;" />
+  </component>
+</module>

package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test"
+    "test": "react-scripts test",
+    "prettier": "prettier"
   },
   "dependencies": {
     "abort-controller": "3.0.0",

src/App/App.test.tsx

@@ -59,15 +59,21 @@ it('shows a search box and calls the service when entering some text', async ()
   expect(searchInput).toHaveValue(initialSearchText);
 
   await wait(() => {
-    expect(searchPhotosSpy).toHaveBeenLastCalledWith(initialSearchText);
+    expect(searchPhotosSpy).toHaveBeenLastCalledWith(
+      initialSearchText,
+      expect.anything(),
+    );
   });
 
   fireEvent.change(searchInput, {
     target: { value: newSearchText },
   });
 
   await wait(() => {
-    expect(searchPhotosSpy).toHaveBeenLastCalledWith(newSearchText);
+    expect(searchPhotosSpy).toHaveBeenLastCalledWith(
+      newSearchText,
+      expect.anything(),
+    );
   });
 });
 
@@ -89,6 +95,6 @@ it('fetches and displays images', async () => {
   const { url, width, height } = mockPhoto.sizes[0];
 
   expect(imageElement).toHaveAttribute('src', url);
-  expect(imageElement).toHaveAttribute('width', width);
-  expect(imageElement).toHaveAttribute('height', height);
+  expect(imageElement).toHaveAttribute('width', width.toString());
+  expect(imageElement).toHaveAttribute('height', height.toString());
 });

src/App/App.tsx

@@ -20,20 +20,30 @@ export default function App() {
   );
 
   return (
-    <header className={classes.header}>
-      <img src={logo} className={classes.logo} alt="logo" />
-      <p>
-        Edit <code className={classes.code}>src/App.tsx</code> and save to
-        reload.
-      </p>
-      <a
-        className={classes.link}
-        href="https://reactjs.org"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        Learn React
-      </a>
-    </header>
+    <div>
+      {error && <div role="alert">Oh no!</div>}
+      <div>
+        {loading
+          ? 'Loading'
+          : photos.length < 1
+          ? 'No images found'
+          : photos.map(el => (
+              <img
+                key={el.id}
+                alt={el.title}
+                src={el.sizes[0].url}
+                width={el.sizes[0].width}
+                height={el.sizes[0].height}
+              />
+            ))}
+      </div>
+      <label htmlFor="search">Search</label>
+      <input
+        type="search"
+        id="search"
+        value={query}
+        onChange={e => setQuery(e.target.value)}
+      />
+    </div>
   );
 }