Disable code coverage for most of playground/web (#2829)

These are non-production and their code coverage scores
shouldn't be aggregated with production packages.

packages/playground/jest.config.js

@@ -6,5 +6,7 @@ module.exports = require("@batch/common-config/jest-common").createConfig(
     {
         testEnvironment: "jsdom",
         setupFilesAfterEnv: ["<rootDir>/src/__tests__/setup-tests.tsx"],
+        // Ignore most code coverage as this isn't used in production
+        coveragePathIgnorePatterns: ["^(?!.*(playground-example.tsx))"],
     }
 );

util/common-config/jest-common.js

@@ -131,6 +131,10 @@ function getCombinedResourceStrings() {
             __dirname,
             "../../packages/playground/resources/i18n/json/resources.en.json"
         )),
+        require(path.join(
+            __dirname,
+            "../../web/resources/i18n/resources.en.json"
+        )),
     ];
 
     const allResourceStrings = {};

web/jest.config.js

@@ -6,5 +6,7 @@ module.exports = require("@batch/common-config/jest-common").createConfig(
     {
         testEnvironment: "jsdom",
         setupFilesAfterEnv: ["<rootDir>/src/__tests__/setup-tests.ts"],
+        // Ignore most code coverage as this isn't used in production
+        coveragePathIgnorePatterns: ["^(?!.*(application.tsx))"],
     }
 );

web/src/__tests__/setup-tests.ts

@@ -1,4 +1,9 @@
 import { destroyEnvironment } from "@azure/bonito-core";
+import { initializeAxe } from "@azure/bonito-ui/lib/test-util";
+
+beforeAll(async () => {
+    await initializeAxe();
+});
 
 afterEach(() => {
     jest.resetAllMocks();
@@ -9,6 +14,9 @@ afterAll(() => {
     jest.restoreAllMocks();
 });
 
+// UI tests can be slow, especially with a11y tests enabled
+jest.setTimeout(30000);
+
 // KLUDGE: Mock out the monaco API so that imports to MonacoEditor do not error.
 // Note that the editor itself currently does not work in a Node.js
 // environment regardless

web/src/components/__tests__/application.spec.tsx

@@ -0,0 +1,23 @@
+import { initMockBrowserEnvironment } from "@azure/bonito-ui";
+import { runAxe } from "@azure/bonito-ui/lib/test-util/a11y";
+import { render } from "@testing-library/react";
+import { Application } from "components/application";
+import * as React from "react";
+
+describe("Application tests", () => {
+    beforeEach(() => initMockBrowserEnvironment());
+
+    test("Can render the web UI without accessibility violations", async () => {
+        const { container } = render(<Application />);
+        expect(
+            await runAxe(container, {
+                rules: {
+                    // See https://github.com/microsoft/fluentui/issues/28706
+                    "aria-required-children": { enabled: false },
+                    // See https://github.com/microsoft/fluentui/issues/18474
+                    "empty-table-header": { enabled: false },
+                },
+            })
+        ).toHaveNoViolations();
+    });
+});