feat: add story unit tests with compose story (storybookjs#551)

Author: dannyhw

.circleci/config.yml

@@ -0,0 +1,29 @@
+name: Checks
+
+on:
+  push:
+    branches:
+      - next
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+jobs:
+  build:
+    name: Check everything!
+    strategy:
+      fail-fast: false
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Set node version
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: install and compile
+        run: yarn
+      - name: build
+        run: yarn build
+      - name: lint
+        run: yarn lint
+      - name: test
+        run: yarn test

.github/workflows/test.yml

@@ -1,2 +1,7 @@
-yarnPath: .yarn/releases/yarn-3.6.1.cjs
-nodeLinker: node-modules
+compressionLevel: mixed
+
+enableGlobalCache: false
+
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.1.0.cjs

.yarn/releases/yarn-3.6.1.cjs

@@ -0,0 +1,15 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+
+import App from './App';
+
+describe('<App />', () => {
+  it('has 1 child', () => {
+    const tree = renderer.create(<App />).toJSON();
+    if (!Array.isArray(tree) && tree.children) {
+      expect(tree.children.length).toBe(1);
+    } else {
+      throw new Error('App has no children');
+    }
+  });
+});

.yarn/releases/yarn-4.1.0.cjs

@@ -1,46 +1,3 @@
-// NOTE this fixes metro not logging correctly for some reason
-// if (__DEV__) {
-//   const primitiveTypes = ['string', 'number', 'boolean'];
-//   const logLevels = ['log', 'debug', 'info', 'warn', 'error'];
-
-//   const transformArgs = (args) => {
-//     return args.map((arg) => {
-//       if (arg === undefined) {
-//         return 'undefined';
-//       }
-//       if (arg instanceof Error) {
-//         if (arg.stack) {
-//           return arg.stack;
-//         }
-//         return arg.toString();
-//       }
-//       if (arg instanceof Date) {
-//         return arg.toString();
-//       }
-//       if (primitiveTypes.includes(typeof arg)) {
-//         return arg.toString();
-//       } else {
-//         return JSON.stringify(arg);
-//       }
-//     });
-//   };
-
-//   const consoleProxy = new Proxy(console, {
-//     get: (target, prop) => {
-//       //@ts-ignore
-//       if (logLevels.includes(prop)) {
-//         return (...args) => {
-//           // we proxy the call to itself, but we transform the arguments to strings before
-//           // so that they are printed in the terminal
-//           return target[prop].apply(this, transformArgs(args));
-//         };
-//       }
-//       return target[prop];
-//     },
-//   });
-
-//   console = consoleProxy;
-// }
 import { Text, View } from 'react-native';
 import Constants from 'expo-constants';
 

.yarnrc.yml

@@ -0,0 +1,21 @@
+import { render, screen, userEvent } from '@testing-library/react-native';
+import { composeStory } from '@storybook/react';
+import Meta, { Basic } from './Actions.stories';
+
+const ActionsStory = composeStory(Basic, Meta);
+
+test('action story renders and onpress works', async () => {
+  jest.useFakeTimers();
+
+  const onPress = jest.fn();
+
+  render(<ActionsStory onPress={onPress} />);
+
+  const user = userEvent.setup({});
+
+  const actionButton = screen.getByText('Press me!');
+
+  await user.press(actionButton);
+
+  expect(onPress).toHaveBeenCalled();
+});

examples/expo-example/App.test.tsx

@@ -11,7 +11,7 @@ const styles = StyleSheet.create({
   text: { color: 'black' },
 });
 
-const BackgroundMeta: Meta<typeof Background> = {
+const meta = {
   title: 'BackgroundExample/Background CSF',
   component: Background,
   decorators: [withBackgrounds],
@@ -26,10 +26,10 @@ const BackgroundMeta: Meta<typeof Background> = {
       ],
     },
   },
-};
+} satisfies Meta<typeof Background>;
 
-export default BackgroundMeta;
+export default meta;
 
-type BackgroundStory = StoryObj<typeof Background>;
+type Story = StoryObj<typeof meta>;
 
-export const Basic: BackgroundStory = {};
+export const Basic: Story = {};

examples/expo-example/App.tsx

@@ -0,0 +1,14 @@
+import '@testing-library/react-native/extend-expect';
+import { render, screen } from '@testing-library/react-native';
+import { composeStory } from '@storybook/react';
+import Meta, { Basic } from './BackgroundCsf.stories';
+
+const BackgroundCsfStory = composeStory(Basic, Meta);
+
+test('Background colour is hotpink', () => {
+  render(<BackgroundCsfStory />);
+
+  expect(screen.getByTestId('addon-backgrounds-container')).toHaveStyle({
+    backgroundColor: 'hotpink',
+  });
+});

examples/expo-example/components/ActionExample/Actions.test.tsx

@@ -1,6 +1,7 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import { Array } from './Array';
-const ArrayMeta: Meta<typeof Array> = {
+
+const meta = {
   title: 'ControlExamples/Array control',
   component: Array,
   args: {
@@ -16,10 +17,10 @@ const ArrayMeta: Meta<typeof Array> = {
     notes:
       'Seems like the array type is not distinguishable from object so you should provide the arg type in this case',
   },
-};
+} satisfies Meta<typeof Array>;
 
-export default ArrayMeta;
+export default meta;
 
-type ArrayStory = StoryObj<typeof Array>;
+type Story = StoryObj<typeof meta>;
 
-export const Basic: ArrayStory = {};
+export const Basic: Story = {};

examples/expo-example/components/BackgroundExample/BackgroundCsf.stories.tsx

@@ -0,0 +1,11 @@
+import { render, screen } from '@testing-library/react-native';
+import { composeStory } from '@storybook/react';
+import Meta, { Basic } from './Array.stories';
+
+const ArrayStory = composeStory(Basic, Meta);
+
+test('array story renders', () => {
+  render(<ArrayStory />);
+
+  expect(screen.getByTestId('array-story-container')).toHaveTextContent(/abc/);
+});

examples/expo-example/components/BackgroundExample/BackgroundCsf.test.tsx

@@ -6,7 +6,7 @@ interface ArrayProps {
 }
 
 export const Array = ({ list }: ArrayProps) => (
-  <View>
+  <View testID="array-story-container">
     {list.map((item, index) => (
       <Text key={index} style={styles.item}>
         {item}

examples/expo-example/components/ControlExamples/Array/Array.stories.tsx

@@ -0,0 +1,18 @@
+import { render, screen } from '@testing-library/react-native';
+import { composeStory } from '@storybook/react';
+import Meta, { Basic, On } from './Boolean.stories';
+
+const BooleanStory = composeStory(Basic, Meta);
+const OnStory = composeStory(On, Meta);
+
+test('boolean story renders', () => {
+  render(<BooleanStory />);
+
+  screen.getByText('off');
+});
+
+test('boolean story renders on', () => {
+  render(<OnStory />);
+
+  screen.getByText('on');
+});

examples/expo-example/components/ControlExamples/Array/Array.test.tsx

@@ -0,0 +1,11 @@
+import { render, screen } from '@testing-library/react-native';
+import { composeStory } from '@storybook/react';
+import Meta, { ColorExample } from './Color.stories';
+
+const ColorStory = composeStory(ColorExample, Meta);
+
+test('color story renders', () => {
+  render(<ColorStory />);
+
+  expect(screen.getByTestId('color-story-container')).toHaveStyle({ backgroundColor: '#a819b9' });
+});

examples/expo-example/components/ControlExamples/Array/Array.tsx

@@ -10,7 +10,7 @@ const styles = StyleSheet.create({
 });
 
 export const Color = ({ color }: ButtonProps) => (
-  <View style={[styles.button, { backgroundColor: color }]}>
+  <View testID="color-story-container" style={[styles.button, { backgroundColor: color }]}>
     <Text>Color: {color as string}</Text>
   </View>
 );

examples/expo-example/components/ControlExamples/Boolean/Boolean.test.tsx

@@ -0,0 +1,13 @@
+import { render, screen } from '@testing-library/react-native';
+import { composeStory } from '@storybook/react';
+import Meta, { Basic } from './Date.stories';
+
+const DateStory = composeStory(Basic, Meta);
+
+test('date story renders', () => {
+  render(<DateStory />);
+
+  const date = new Date(1983, 1, 25);
+
+  screen.getByText(date.toString());
+});

examples/expo-example/components/ControlExamples/Color/Color.test.tsx

@@ -0,0 +1,18 @@
+import { render, screen } from '@testing-library/react-native';
+import { composeStory } from '@storybook/react';
+import Meta, { Basic, Range } from './Number.stories';
+
+const BasicStory = composeStory(Basic, Meta);
+const RangeStory = composeStory(Range, Meta);
+
+test('basic story renders', async () => {
+  render(<BasicStory />);
+
+  await screen.findByText(/5 x 3 = 15/);
+});
+
+test('range story renders', async () => {
+  render(<RangeStory />);
+
+  await screen.findByText(/6 x 7 = 42/);
+});

examples/expo-example/components/ControlExamples/Color/Color.tsx

@@ -0,0 +1,13 @@
+import { render, screen } from '@testing-library/react-native';
+import { composeStory } from '@storybook/react';
+import Meta, { Basic } from './Object.stories';
+
+const ObjectStory = composeStory(Basic, Meta);
+
+test('object story renders', () => {
+  render(<ObjectStory />);
+
+  screen.getByText('title: Blade Runner');
+  screen.getByText('genre: Sci Fi');
+  screen.getByText('release year: 1982');
+});

examples/expo-example/components/ControlExamples/Date/Date.test.tsx

@@ -0,0 +1,11 @@
+import { render, screen } from '@testing-library/react-native';
+import { composeStory } from '@storybook/react';
+import Meta, { Basic } from './Radio.stories';
+
+const RadioStory = composeStory(Basic, Meta);
+
+test('radio story renders', () => {
+  render(<RadioStory />);
+
+  screen.getByText('104.8MHz');
+});

examples/expo-example/components/ControlExamples/Number/Number.test.tsx

@@ -20,7 +20,7 @@ export const MyButton = ({ number }: ButtonProps) => {
   return (
     <View>
       <TouchableOpacity activeOpacity={0.8}>
-        <Text>{number}</Text>
+        <Text>num: {number}</Text>
       </TouchableOpacity>
     </View>
   );