Fix snapshot tests

frontend/src/metabase/components/Button.jsx

@@ -90,4 +90,6 @@ const Button = sys(
   "color",
 );
 
+Button.displayName = "Button";
+
 export default Button;

frontend/src/metabase/components/PageHeading.info.js

+import React from "react";
+import PageHeading from "metabase/components/PageHeading";
+
+export const component = PageHeading;
+
+export const description = `Page heading component.`;
+
+export const examples = {
+  normal: <PageHeading>Hello World</PageHeading>,
+};

frontend/src/metabase/components/PageHeading.jsx

@@ -4,4 +4,6 @@ const PageHeading = styled.h1`
   font-weight: 900;
 `;
 
+PageHeading.displayName = "PageHeading";
+
 export default PageHeading;

frontend/src/metabase/internal/lib/components-node.js

@@ -8,4 +8,7 @@ let normalizedPath = path.join(__dirname, "..", "..", "components");
 export default fs
   .readdirSync(normalizedPath)
   .filter(file => /\.info\.js$/.test(file))
-  .map(file => require(path.join(normalizedPath, file)));
+  .map(file => ({
+    filename: file.replace(/\.info\.js$/, ""),
+    ...require(path.join(normalizedPath, file)),
+  }));

frontend/test/metabase/internal/__snapshots__/components.unit.spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Button should render "" correctly 1`] = `
+<button
+  className="Button sc-bdVaJa bDWFJH "
+>
+  <div
+    className="flex layout-centered"
+  >
+    <div>
+      Clickity click
+    </div>
+  </div>
+</button>
+`;
+
+exports[`Button should render "primary" correctly 1`] = `
+<button
+  className="Button sc-bdVaJa bDWFJH Button--primary"
+>
+  <div
+    className="flex layout-centered"
+  >
+    <div>
+      Clickity click
+    </div>
+  </div>
+</button>
+`;
+
+exports[`Button should render "with an icon" correctly 1`] = `
+<button
+  className="Button sc-bdVaJa bDWFJH "
+>
+  <div
+    className="flex layout-centered"
+  >
+    <svg
+      className="Icon Icon-star mr1 Icon-cxuQhR kTAgZA"
+      fill="currentcolor"
+      height={14}
+      name="star"
+      size={14}
+      viewBox="0 0 32 32"
+      width={14}
+    >
+      <path
+        d="M16 0 L21 11 L32 12 L23 19 L26 31 L16 25 L6 31 L9 19 L0 12 L11 11"
+      />
+    </svg>
+    <div>
+      Clickity click
+    </div>
+  </div>
+</button>
+`;
+
 exports[`Card should render "dark" correctly 1`] = `
 <div
   className="Card-RQot dPIXem"
@@ -435,6 +490,14 @@ exports[`EntityMenu should render "Share menu" correctly 1`] = `
 </div>
 `;
 
+exports[`PageHeading should render "normal" correctly 1`] = `
+<h1
+  className="PageHeading-iMPvjs juZTVP"
+>
+  Hello World
+</h1>
+`;
+
 exports[`Position should render "Absolute" correctly 1`] = `
 <div
   className="Position-kiwZOl jyvUWC sc-bwzfXH kLwrie"
@@ -968,61 +1031,6 @@ exports[`StackedCheckBox should render "Off - Default" correctly 1`] = `
 </div>
 `;
 
-exports[`Styled(div) should render "" correctly 1`] = `
-<button
-  className="Button sc-bdVaJa bDWFJH "
->
-  <div
-    className="flex layout-centered"
-  >
-    <div>
-      Clickity click
-    </div>
-  </div>
-</button>
-`;
-
-exports[`Styled(div) should render "primary" correctly 1`] = `
-<button
-  className="Button sc-bdVaJa bDWFJH Button--primary"
->
-  <div
-    className="flex layout-centered"
-  >
-    <div>
-      Clickity click
-    </div>
-  </div>
-</button>
-`;
-
-exports[`Styled(div) should render "with an icon" correctly 1`] = `
-<button
-  className="Button sc-bdVaJa bDWFJH "
->
-  <div
-    className="flex layout-centered"
-  >
-    <svg
-      className="Icon Icon-star mr1 Icon-cxuQhR kTAgZA"
-      fill="currentcolor"
-      height={14}
-      name="star"
-      size={14}
-      viewBox="0 0 32 32"
-      width={14}
-    >
-      <path
-        d="M16 0 L21 11 L32 12 L23 19 L26 31 L16 25 L6 31 L9 19 L0 12 L11 11"
-      />
-    </svg>
-    <div>
-      Clickity click
-    </div>
-  </div>
-</button>
-`;
-
 exports[`Toggle should render "off" correctly 1`] = `
 <a
   className="no-decoration"

frontend/test/metabase/internal/components.unit.spec.js

@@ -4,9 +4,12 @@ import components from "metabase/internal/lib/components-node";
 
 // generates a snapshot test for every example in every component's `.info.js`
 components.map(
-  ({ component, examples, noSnapshotTest }) =>
+  ({ component, examples, noSnapshotTest, description, filename }) =>
     !noSnapshotTest &&
-    describe(component.displayName, () => {
+    describe(filename, () => {
+      it(`should have displayName matching file name`, () => {
+        expect(component && component.displayName).toEqual(filename);
+      });
       Object.entries(examples).map(([exampleName, element]) =>
         it(`should render "${exampleName}" correctly`, () => {
           expect(renderer.create(element).toJSON()).toMatchSnapshot();