Linting

client/src/includes/a11y-result.test.ts

@@ -1,5 +1,5 @@
 import { AxeResults } from 'axe-core';
-import { sortAxeViolations } from './a11y-result';
+import { sortAxeViolations, checkImageAltText } from './a11y-result';
 
 const mockDocument = `
 <div id="a"></div>
@@ -55,3 +55,64 @@ describe('sortAxeViolations', () => {
     ]);
   });
 });
+
+describe('checkImageAltText', () => {
+  beforeEach(() => {
+    document.body.innerHTML = `
+      <img src="image1.jpg" alt="Good alt text with words like GIFted and moTIF">
+      <img src="image2.png" alt="Bad alt text.png">
+      <img src="image3.tiff" alt="Bad alt text.TIFF more text">
+      <img src="image4.png" alt="https://Bad.alt.text">
+      <img src="https://example.com/image5.gif" alt="">
+      <img src="image6.jpg">
+    `;
+  });
+
+  it('should not flag images with good alt text', () => {
+    const image = document.querySelector<HTMLImageElement>(
+      'img[src="image1.jpg"]',
+    );
+    if (!image) return;
+    expect(checkImageAltText(image)).toBe(true);
+  });
+
+  it('should flag images with a file extension in the alt text', () => {
+    const image = document.querySelector<HTMLImageElement>(
+      'img[src="image2.png"]',
+    );
+    if (!image) return;
+    expect(checkImageAltText(image)).toBe(false);
+  });
+
+  it('should flag images with a capitalised file extension in the alt text', () => {
+    const image = document.querySelector<HTMLImageElement>(
+      'img[src="image3.tiff"]',
+    );
+    if (!image) return;
+    expect(checkImageAltText(image)).toBe(false);
+  });
+
+  it('should flag images with a file URL in the alt text', () => {
+    const image = document.querySelector<HTMLImageElement>(
+      'img[src="image4.png"]',
+    );
+    if (!image) return;
+    expect(checkImageAltText(image)).toBe(false);
+  });
+
+  it('should not flag images with empty alt attribute', () => {
+    const image = document.querySelector<HTMLImageElement>(
+      'img[src="https://example.com/image5.gif"]',
+    );
+    if (!image) return;
+    expect(checkImageAltText(image)).toBe(true);
+  });
+
+  it('should not flag images with no alt attribute', () => {
+    const image = document.querySelector<HTMLImageElement>(
+      'img[src="image6.jpg"]',
+    );
+    if (!image) return;
+    expect(checkImageAltText(image)).toBe(true);
+  });
+});