From df65a37edb8ecb00971f3df2ab63165bbe4b6186 Mon Sep 17 00:00:00 2001
From: Matt Wang <matt@matthewwang.me>
Date: Tue, 14 Jun 2022 17:56:17 -0700
Subject: [PATCH] tests: adds aXe test for `<Officers />`; resolves `key` bug

---
 .../components/LeadershipOfficers.test.js     | 32 +++++++++++++++++++
 components/LeadershipOfficers.js              |  2 +-
 2 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 __tests__/components/LeadershipOfficers.test.js

diff --git a/__tests__/components/LeadershipOfficers.test.js b/__tests__/components/LeadershipOfficers.test.js
new file mode 100644
index 00000000..cbce9edb
--- /dev/null
+++ b/__tests__/components/LeadershipOfficers.test.js
@@ -0,0 +1,32 @@
+import { render } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import Officers from '../../components/LeadershipOfficers';
+import data from '../../data';
+
+expect.extend(toHaveNoViolations);
+
+// TODO: consider lifting this mock globally
+jest.mock('next/image', () => ({
+  __esModule: true,
+  default: (props) => {
+    // eslint-disable-next-line @next/next/no-img-element
+    return <img alt={props.alt} {...props} />;
+  },
+}));
+
+it('has no axe violations', async () => {
+  const { leadership } = data;
+
+  // this let / async construct is required since next/image rendering
+  // is a side effect that needs to be captured with async act
+  // see https://reactjs.org/docs/test-utils.html#act
+  let results;
+  await act(async () => {
+    const { container } = render(<Officers officers={leadership} />);
+    results = await axe(container);
+  });
+
+  expect(results).toHaveNoViolations();
+});
diff --git a/components/LeadershipOfficers.js b/components/LeadershipOfficers.js
index 9c4213dc..77448937 100644
--- a/components/LeadershipOfficers.js
+++ b/components/LeadershipOfficers.js
@@ -27,7 +27,7 @@ function Officers(props){
 		<div className="grid-desktop-3">
 			{
 				props.officers.map(
-					officer => <Officer officer={officer} key={officer.image} />,
+					officer => <Officer officer={officer} key={officer.name + officer.position} />,
 				)
 			}
 		</div>