rename feature-flags docs and camel case keys

app/src/i18n/messages/en-US/index.ts

@@ -19,10 +19,10 @@ export const messages = {
     intro:
       "This is a template for a React web application using the <LinkToNextJs>Next.js framework</LinkToNextJs>.",
     body: "This is template includes:<ul><li>Framework for server-side rendered, static, or hybrid React applications</li><li>TypeScript and React testing tools</li><li>U.S. Web Design System for themeable styling and a set of common components</li><li>Type checking, linting, and code formatting tools</li><li>Storybook for a frontend workshop environment</li></ul>",
-    featureflagging:
+    feature_flagging:
       "The template includes AWS Evidently for feature flagging. Toggle flag to see the content below change:",
-    flagoff: "Flag is disabled",
-    flagon: "Flag is enabled",
+    flag_off: "Flag is disabled",
+    flag_on: "Flag is enabled",
     formatting:
       "The template includes an internationalization library with basic formatters built-in. Such as numbers: { amount, number, currency }, and dates: { isoDate, date, long}.",
   },

app/src/pages/index.tsx

@@ -49,8 +49,8 @@ const Home: NextPage<InferGetServerSidePropsType<typeof getServerSideProps>> = (
         </p>
 
         {/* Demonstration of feature flagging */}
-        <p>{t("featureflagging")}</p>
-        <p>{props.isFooEnabled ? t("flagon") : t("flagoff")}</p>
+        <p>{t("feature_flagging")}</p>
+        <p>{props.isFooEnabled ? t("flag_on") : t("flag_off")}</p>
       </div>
     </>
   );

app/src/services/feature-flags/LocalFeatureFlagManager.ts

@@ -1,8 +1,6 @@
 export class LocalFeatureFlagManager {
   async isFeatureEnabled(featureName: string, userId: string) {
-    console.log(
-      "Using mock feature flag manager", { featureName, userId }
-    );
+    console.log("Using mock feature flag manager", { featureName, userId });
     return Promise.resolve(false);
   }
 }

app/tests/pages/index.test.tsx

@@ -22,4 +22,9 @@ describe("Index", () => {
 
     expect(results).toHaveNoViolations();
   });
+
+  it("conditionally displays content based on feature flag values", () => {
+    const { container } = render(<Index isFooEnabled={true} />);
+    expect(container).toHaveTextContent("Flag is enabled");
+  });
 });