Encode postcode in API URL

src/App.js

@@ -44,17 +44,20 @@ const fetchData = async (link) => {
   }
 };
 
-const fetchPostCode = async(postcode) => {
+const fetchPostCode = async (postcode) => {
   try {
-    const response = await axios.get('https://api.postcodes.io/postcodes/' + postcode);
+    const encoded = encodeURIComponent(postcode);
+    const response = await axios.get(
+      'https://api.postcodes.io/postcodes/' + encoded
+    );
     if (response.data.status === 200) {
       return [response.data.result.longitude, response.data.result.latitude];
     }
   } catch (e) {
     console.log(e);
-    return 'failed!'
+    return 'failed!';
   }
-}
+};
 
 function ready(fn) {
   if (document.readyState !== 'loading') {
@@ -343,3 +346,4 @@ function App () {
 }
 
 export default App;
+export { fetchPostCode };

src/App.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen, waitFor, waitForElementToBeRemoved } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect'; 
-import App from './App';
+import App, { fetchPostCode } from './App';
 import axios from 'axios';
 
 jest.mock('axios');
@@ -134,3 +134,18 @@ test("Status filter can exclude some values", async () => {
   expect(referenceElement1.parentElement.style.display).toEqual("none");
   // expect(referenceElement2.parentElement.style.display).not.toEqual("none");
 });
+
+test('fetchPostCode encodes the postcode in the request URL', async () => {
+  axios.get.mockResolvedValue({
+    data: {
+      status: 200,
+      result: { longitude: 1, latitude: 2 },
+    },
+  });
+
+  await fetchPostCode('EC1A 1BB');
+
+  expect(axios.get).toHaveBeenCalledWith(
+    'https://api.postcodes.io/postcodes/' + encodeURIComponent('EC1A 1BB')
+  );
+});