KOCHKA: add Layout component invariants

This change prevents using the `Layout` component with `title` or `subtitle` while `withHiddenTitle` is set because it doesn't make any sense. adeira-source-id: 91e042ef6dafec8a45c106b8b9da8e4561b011eb
mrtnzlml-archive · May 4, 2021 · 5e9957f · 5e9957f
1 parent cb0d08a
commit 5e9957f
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 8 deletions.
diff --git a/package.json b/package.json
@@ -35,6 +35,7 @@
   "devDependencies": {
     "@adeira/babel-preset-adeira": "^3.0.0",
     "@axe-core/react": "^4.1.1",
-    "@fbtjs/default-collection-transform": "^0.0.3"
+    "@fbtjs/default-collection-transform": "^0.0.3",
+    "@testing-library/react": "^11.2.6"
   }
 }
diff --git a/src/Layout.js b/src/Layout.js
@@ -1,5 +1,6 @@
 // @flow
 
+import { invariant } from '@adeira/js';
 import Head from 'next/head';
 import * as React from 'react';
 import sx from '@adeira/sx';
@@ -8,17 +9,36 @@ import { Heading } from '@adeira/sx-design';
 import LayoutFooter from './LayoutFooter';
 import LayoutNavigation from './LayoutNavigation';
 
-type Props = {
-  +children: React.Node,
-  +title: React.Node,
-  +subtitle?: React.Node,
-  +withFullWidth?: boolean,
-  +withHiddenTitle?: boolean,
-};
+type Props =
+  | {
+      +children: React.Node,
+      +title: React.Node,
+      +subtitle?: React.Node,
+      +withFullWidth?: boolean,
+      +withHiddenTitle?: false,
+    }
+  | {
+      +children: React.Node,
+      +title?: React.Node,
+      +subtitle?: React.Node,
+      +withFullWidth?: boolean,
+      +withHiddenTitle: true,
+    };
 
 export default function Layout(props: Props): React.Node {
+  if (props.withHiddenTitle === true) {
+    invariant(props.title == null, 'Cannot use `title` together with `withHiddenTitle` property.');
+    invariant(
+      props.subtitle == null,
+      'Cannot use `subtitle` together with `withHiddenTitle` property.',
+    );
+  }
+
   return (
     <>
+      {/* https://github.com/gajus/eslint-plugin-flowtype/pull/477 */}
+      {/* https://github.com/gajus/eslint-plugin-flowtype/pull/478 */}
+      {/* eslint-disable-next-line flowtype/require-readonly-react-props */}
       <Head>
         <title>KOCHKA café · {props.title}</title>
       </Head>

diff --git a/src/__tests__/Layout.test.js b/src/__tests__/Layout.test.js
@@ -0,0 +1,37 @@
+// @flow
+
+import { render } from '@testing-library/react';
+
+import Layout from '../Layout';
+
+it('disallows hidden title when the title is specified', () => {
+  const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+  expect(() =>
+    render(
+      <Layout withHiddenTitle={true} title={'title'}>
+        test
+      </Layout>,
+    ),
+  ).toThrowErrorMatchingInlineSnapshot(
+    `"Cannot use \`title\` together with \`withHiddenTitle\` property."`,
+  );
+
+  consoleSpy.mockRestore();
+});
+
+it('disallows hidden title when the subtitle is specified', () => {
+  const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+  expect(() =>
+    render(
+      <Layout withHiddenTitle={true} subtitle={'subtitle'}>
+        test
+      </Layout>,
+    ),
+  ).toThrowErrorMatchingInlineSnapshot(
+    `"Cannot use \`subtitle\` together with \`withHiddenTitle\` property."`,
+  );
+
+  consoleSpy.mockRestore();
+});