feat: rename component display names, update directory export tests (#1572)

BREAKING CHANGE: Component display names are now prefixed to improve discoverability

Author: scomea

build/helpers/file-includes-all-subdirectories-as-named-exports.ts

@@ -3,9 +3,9 @@ import fs from "fs";
 import { pascalCase } from "../../packages/fast-web-utilities";
 
 /**
- * Verifies all components in source directory are exported
+ * Verifies all components in source directory are exported, directories listed in "excludes" parameter are ignored
  */
-export function includesAllSubdirectoriesAsNamedExports(indexFile: string): boolean {
+export function includesAllSubdirectoriesAsNamedExports(indexFile: string, excludes?: string[]): boolean {
     // Get the folders in the indexFile directory to compare to export listing
     const directoryPath: string = path.dirname(indexFile);
     const components: string[] = fs.readdirSync(directoryPath)
@@ -15,7 +15,7 @@ export function includesAllSubdirectoriesAsNamedExports(indexFile: string): bool
 
     // Get listing of all exports and compare against folder listings
     const foundExports: any = Object.keys(require(path.resolve(__dirname, indexFile)));
-    const missingExports: string[] = components.filter((component: string) => !foundExports.includes(component));
+    const missingExports: string[] = components.filter((component: string) => !foundExports.includes(component) && excludes.indexOf(component) !== -1);
 
     if (missingExports.length === 0) {
         return true;

packages/fast-components-react-base/src/auto-suggest/auto-suggest.spec.tsx

@@ -4,6 +4,7 @@ import { configure, mount, render, shallow } from "enzyme";
 import AutoSuggest, { AutoSuggestUnhandledProps } from "./auto-suggest";
 import ListboxItem from "../listbox-item";
 import { KeyCodes } from "@microsoft/fast-web-utilities";
+import { DisplayNamePrefix } from "../utilities";
 
 /*
  * Configure Enzyme
@@ -16,7 +17,9 @@ const itemC: JSX.Element = <ListboxItem id="c" value="c" />;
 
 describe("auto suggest", (): void => {
     test("should have a displayName that matches the component name", () => {
-        expect((AutoSuggest as any).name).toBe(AutoSuggest.displayName);
+        expect(`${DisplayNamePrefix}${(AutoSuggest as any).name}`).toBe(
+            AutoSuggest.displayName
+        );
     });
 
     test("should not throw if managedClasses are not provided", () => {
@@ -117,7 +120,7 @@ describe("auto suggest", (): void => {
 
         rendered
             .find({ id: "a" })
-            .find("ListboxItem")
+            .find(ListboxItem.displayName)
             .simulate("keydown", { keyCode: KeyCodes.arrowDown });
         input = rendered.find("input");
         expect(input.prop("aria-owns")).toEqual("listboxId");
@@ -151,7 +154,7 @@ describe("auto suggest", (): void => {
 
         rendered
             .find({ id: "a" })
-            .find("ListboxItem")
+            .find(ListboxItem.displayName)
             .simulate("keydown", { keyCode: KeyCodes.arrowDown });
         input = rendered.find("input");
         expect(input.prop("aria-owns")).toEqual("listboxId");
@@ -182,7 +185,7 @@ describe("auto suggest", (): void => {
 
         rendered
             .find({ id: "a" })
-            .find("ListboxItem")
+            .find(ListboxItem.displayName)
             .simulate("keydown", { keyCode: KeyCodes.arrowDown });
         input = rendered.find("input");
         expect(input.prop("aria-activedescendant")).toEqual("b");
@@ -228,19 +231,19 @@ describe("auto suggest", (): void => {
         expect(rendered.state("value")).toEqual("a");
         rendered
             .find({ id: "a" })
-            .find("ListboxItem")
+            .find(ListboxItem.displayName)
             .simulate("keydown", { keyCode: KeyCodes.arrowDown });
         expect(document.activeElement.id).toBe("b");
         expect(rendered.state("value")).toEqual("b");
         rendered
             .find({ id: "b" })
-            .find("ListboxItem")
+            .find(ListboxItem.displayName)
             .simulate("keydown", { keyCode: KeyCodes.arrowDown });
         expect(document.activeElement.id).toBe("c");
         expect(rendered.state("value")).toEqual("c");
         rendered
             .find({ id: "c" })
-            .find("ListboxItem")
+            .find(ListboxItem.displayName)
             .simulate("keydown", { keyCode: KeyCodes.arrowDown });
         expect(document.activeElement.id).toBe("");
         expect(rendered.state("value")).toEqual("c");
@@ -249,19 +252,19 @@ describe("auto suggest", (): void => {
         expect(rendered.state("value")).toEqual("c");
         rendered
             .find({ id: "c" })
-            .find("ListboxItem")
+            .find(ListboxItem.displayName)
             .simulate("keydown", { keyCode: KeyCodes.arrowUp });
         expect(document.activeElement.id).toBe("b");
         expect(rendered.state("value")).toEqual("b");
         rendered
             .find({ id: "b" })
-            .find("ListboxItem")
+            .find(ListboxItem.displayName)
             .simulate("keydown", { keyCode: KeyCodes.arrowUp });
         expect(document.activeElement.id).toBe("a");
         expect(rendered.state("value")).toEqual("a");
         rendered
             .find({ id: "a" })
-            .find("ListboxItem")
+            .find(ListboxItem.displayName)
             .simulate("keydown", { keyCode: KeyCodes.arrowUp });
         expect(document.activeElement.id).toBe("");
         expect(rendered.state("value")).toEqual("a");
@@ -312,7 +315,7 @@ describe("auto suggest", (): void => {
         input.simulate("keydown", { keyCode: KeyCodes.arrowDown });
         rendered
             .find({ id: "a" })
-            .find("ListboxItem")
+            .find(ListboxItem.displayName)
             .simulate("keydown", { keyCode: KeyCodes.enter });
         expect(onInvoked).toHaveBeenCalledTimes(1);
 

packages/fast-components-react-base/src/auto-suggest/auto-suggest.tsx

@@ -12,6 +12,7 @@ import { ListboxItemProps } from "../listbox-item";
 import Listbox from "../listbox";
 import TextField, { TextFieldType } from "../text-field";
 import { AutoSuggestContext, AutoSuggestContextType } from "./auto-suggest-context";
+import { DisplayNamePrefix } from "../utilities";
 
 export interface AutoSuggestState {
     value: string;
@@ -24,7 +25,7 @@ class AutoSuggest extends Foundation<
     AutoSuggestUnhandledProps,
     AutoSuggestState
 > {
-    public static displayName: string = "AutoSuggest";
+    public static displayName: string = `${DisplayNamePrefix}AutoSuggest`;
 
     public static defaultProps: Partial<AutoSuggestProps> = {
         initialValue: "",

packages/fast-components-react-base/src/badge/badge.spec.tsx

@@ -2,15 +2,16 @@ import React from "react";
 import Adapter from "enzyme-adapter-react-16";
 import { configure, mount, shallow } from "enzyme";
 import Badge, { BadgeHandledProps, BadgeProps, BadgeUnhandledProps } from "./index";
+import { DisplayNamePrefix } from "../utilities";
 
 /*
  * Configure Enzyme
  */
 configure({ adapter: new Adapter() });
 
 describe("badge", (): void => {
-    test("should have a displayName that matches the component name", () => {
-        expect((Badge as any).name).toBe(Badge.displayName);
+    test("should have a displayName that includes the component name", () => {
+        expect(`${DisplayNamePrefix}${(Badge as any).name}`).toBe(Badge.displayName);
     });
 
     test("should not throw if managedClasses are not provided", () => {

packages/fast-components-react-base/src/badge/badge.tsx

@@ -3,9 +3,9 @@ import Foundation, { HandledProps } from "@microsoft/fast-components-foundation-
 import { BadgeClassNameContract } from "@microsoft/fast-components-class-name-contracts-base";
 import { BadgeHandledProps, BadgeUnhandledProps } from "./badge.props";
 import { get } from "lodash-es";
-
+import { DisplayNamePrefix } from "../utilities";
 class Badge extends Foundation<BadgeHandledProps, BadgeUnhandledProps, {}> {
-    public static displayName: string = "Badge";
+    public static displayName: string = `${DisplayNamePrefix}Badge`;
 
     protected handledProps: HandledProps<BadgeHandledProps> = {
         managedClasses: void 0,

packages/fast-components-react-base/src/breadcrumb/breadcrumb.spec.tsx

@@ -5,6 +5,7 @@ import Breadcrumb, {
     BreadcrumbClassNameContract,
     BreadcrumbUnhandledProps,
 } from "./breadcrumb";
+import { DisplayNamePrefix } from "../utilities";
 
 /*
  * Configure Enzyme
@@ -21,7 +22,9 @@ const managedClasses: BreadcrumbClassNameContract = {
 
 describe("breadcrumb", (): void => {
     test("should have a displayName that matches the component name", () => {
-        expect((Breadcrumb as any).name).toBe(Breadcrumb.displayName);
+        expect(`${DisplayNamePrefix}${(Breadcrumb as any).name}`).toBe(
+            Breadcrumb.displayName
+        );
     });
 
     test("should have correct root element type 'nav'", () => {

packages/fast-components-react-base/src/breadcrumb/breadcrumb.tsx

@@ -8,13 +8,14 @@ import {
     BreadcrumbUnhandledProps,
 } from "./breadcrumb.props";
 import { get } from "lodash-es";
+import { DisplayNamePrefix } from "../utilities";
 
 class Breadcrumb extends Foundation<
     BreadcrumbHandledProps,
     BreadcrumbUnhandledProps,
     {}
 > {
-    public static displayName: string = "Breadcrumb";
+    public static displayName: string = `${DisplayNamePrefix}Breadcrumb`;
 
     protected handledProps: HandledProps<BreadcrumbHandledProps> = {
         children: void 0,

packages/fast-components-react-base/src/button/button.spec.tsx

@@ -11,6 +11,7 @@ import Button, {
     ButtonProps,
     ButtonUnhandledProps,
 } from "./button";
+import { DisplayNamePrefix } from "../utilities";
 
 /*
  * Configure Enzyme
@@ -24,7 +25,7 @@ describe("button", (): void => {
     const href: string = "https://www.microsoft.com";
 
     test("should have a displayName that matches the component name", () => {
-        expect((Button as any).name).toBe(Button.displayName);
+        expect(`${DisplayNamePrefix}${(Button as any).name}`).toBe(Button.displayName);
     });
 
     test("should not throw if managedClasses are not provided", () => {

packages/fast-components-react-base/src/button/button.tsx

@@ -7,6 +7,7 @@ import {
     ButtonClassNameContract,
     ManagedClasses,
 } from "@microsoft/fast-components-class-name-contracts-base";
+import { DisplayNamePrefix } from "../utilities";
 
 /**
  * Button HTML tags
@@ -17,7 +18,7 @@ export enum ButtonHTMLTags {
 }
 
 class Button extends Foundation<ButtonHandledProps, ButtonUnhandledProps, {}> {
-    public static displayName: string = "Button";
+    public static displayName: string = `${DisplayNamePrefix}Button`;
 
     protected handledProps: HandledProps<ButtonHandledProps> = {
         disabled: void 0,

packages/fast-components-react-base/src/card/card.spec.tsx

@@ -10,6 +10,7 @@ import Card, {
     CardTag,
     CardUnhandledProps,
 } from "./card";
+import { DisplayNamePrefix } from "../utilities";
 
 /*
  * Configure Enzyme
@@ -22,7 +23,7 @@ describe("card", (): void => {
     };
 
     test("should have a displayName that matches the component name", () => {
-        expect((Card as any).name).toBe(Card.displayName);
+        expect(`${DisplayNamePrefix}${(Card as any).name}`).toBe(Card.displayName);
     });
 
     test("should return an object that includes all valid props which are not enumerated as handledProps", () => {