Tweak RNW CI

storybookjs · Nov 17, 2024 · ee7b69f · ee7b69f
1 parent 4fb8b02
commit ee7b69f
Show file tree

Hide file tree

Showing 21 changed files with 346 additions and 252 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -980,30 +980,30 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 37
+          parallelism: 38
           requires:
             - build
       # - smoke-test-sandboxes: # disabled for now
       #     requires:
       #       - create-sandboxes
       - build-sandboxes:
-          parallelism: 37
+          parallelism: 38
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 34
+          parallelism: 35
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 32
+          parallelism: 33
           requires:
             - build-sandboxes
       - e2e-dev:
           parallelism: 2
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 32
+          parallelism: 33
           requires:
             - build-sandboxes
       - vitest-integration:

diff --git a/code/e2e-tests/addon-actions.spec.ts b/code/e2e-tests/addon-actions.spec.ts
@@ -12,6 +12,10 @@ test.describe('addon-actions', () => {
       templateName.includes('svelte') && templateName.includes('prerelease'),
       'Svelte 5 prerelase does not support automatic actions with our current example components yet'
     );
+    test.skip(
+      templateName.includes('react-native-web'),
+      'React Native uses onPress rather than onClick'
+    );
     await page.goto(storybookUrl);
     const sbPage = new SbPage(page, expect);
     sbPage.waitUntilLoaded();

diff --git a/code/e2e-tests/addon-controls.spec.ts b/code/e2e-tests/addon-controls.spec.ts
@@ -4,9 +4,12 @@ import process from 'process';
 import { SbPage } from './util';
 
 const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
+const templateName = process.env.STORYBOOK_TEMPLATE_NAME || '';
 
 test.describe('addon-controls', () => {
   test('should change component when changing controls', async ({ page }) => {
+    test.skip(templateName.includes('react-native-web'), 'React Native CSS behaves differently');
+
     await page.goto(storybookUrl);
     const sbPage = new SbPage(page, expect);
     await sbPage.waitUntilLoaded();

diff --git a/code/e2e-tests/addon-docs.spec.ts b/code/e2e-tests/addon-docs.spec.ts
@@ -123,6 +123,7 @@ test.describe('addon-docs', () => {
       //   - template: https://638db567ed97c3fb3e21cc22-ulhjwkqzzj.chromatic.com/?path=/docs/addons-docs-docspage-basic--docs
       //   - real: https://638db567ed97c3fb3e21cc22-ulhjwkqzzj.chromatic.com/?path=/docs/example-button--docs
       'lit-vite',
+      'react-native-web',
     ];
     test.skip(
       new RegExp(`^${skipped.join('|')}`, 'i').test(`${templateName}`),

diff --git a/code/e2e-tests/addon-interactions.spec.ts b/code/e2e-tests/addon-interactions.spec.ts
@@ -23,6 +23,10 @@ test.describe('addon-interactions', () => {
       /^(lit)/i.test(`${templateName}`),
       `Skipping ${templateName}, which does not support addon-interactions`
     );
+    test.skip(
+      templateName.includes('react-native-web'),
+      'React Native does not use className locators'
+    );
 
     const sbPage = new SbPage(page, expect);
 

diff --git a/code/frameworks/react-native-web-vite/template/cli/js/Button.stories.jsx b/code/frameworks/react-native-web-vite/template/cli/js/Button.stories.jsx
@@ -1,8 +1,11 @@
+import { fn } from '@storybook/test';
+
 import { View } from 'react-native';
 
 import { Button } from './Button';
 
 const meta = {
+  title: 'Example/Button',
   component: Button,
   decorators: [
     (Story) => (
@@ -13,6 +16,8 @@ const meta = {
   ],
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
+  // Use `fn` to spy on the onPress arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: { onPress: fn() },
 };
 
 export default meta;

diff --git a/code/frameworks/react-native-web-vite/template/cli/js/Header.jsx b/code/frameworks/react-native-web-vite/template/cli/js/Header.jsx
@@ -12,11 +12,16 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
 
       <View style={styles.buttonContainer}>
         {user ? (
-          <Button style={styles.button} size="small" onPress={onLogout} label="Log out" />
+          <>
+            <>
+              <Text>Welcome, </Text>
+              <Text style={styles.userName}>{user.name}!</Text>
+            </>
+            <Button style={styles.button} size="small" onPress={onLogout} label="Log out" />
+          </>
         ) : (
           <>
             <Button style={styles.button} size="small" onPress={onLogin} label="Log in" />
-
             <Button
               style={styles.button}
               primary
@@ -58,6 +63,10 @@ const styles = StyleSheet.create({
   },
   buttonContainer: {
     flexDirection: 'row',
+    alignItems: 'center',
+  },
+  userName: {
+    fontWeight: '700',
   },
 });
 

diff --git a/code/frameworks/react-native-web-vite/template/cli/js/Header.stories.jsx b/code/frameworks/react-native-web-vite/template/cli/js/Header.stories.jsx
@@ -1,6 +1,7 @@
 import { Header } from './Header';
 
 const meta = {
+  title: 'Example/Header',
   component: Header,
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
@@ -10,7 +11,9 @@ export default meta;
 
 export const LoggedIn = {
   args: {
-    user: {},
+    user: {
+      name: 'Jane Doe',
+    },
     onLogin: () => {},
     onLogout: () => {},
     onCreateAccount: () => {},

diff --git a/code/frameworks/react-native-web-vite/template/cli/js/Page.jsx b/code/frameworks/react-native-web-vite/template/cli/js/Page.jsx
@@ -1,84 +1,95 @@
+import { useState } from 'react';
+
 import { Linking, StyleSheet, Text, View } from 'react-native';
 
 import { Header } from './Header';
 
-export const Page = ({ user, onLogin, onLogout, onCreateAccount }) => (
-  <View>
-    <Header user={user} onLogin={onLogin} onLogout={onLogout} onCreateAccount={onCreateAccount} />
-
-    <View style={styles.section}>
-      <Text role="heading" style={styles.h2}>
-        Pages in Storybook
-      </Text>
-
-      <Text style={styles.p}>
-        We recommend building UIs with a{' '}
-        <Text
-          style={[styles.a, { fontWeight: 'bold' }]}
-          role="link"
-          onPress={() => {
-            Linking.openURL('https://componentdriven.org');
-          }}
-        >
-          <Text>component-driven</Text>
-        </Text>{' '}
-        process starting with atomic components and ending with pages.
-      </Text>
-
-      <Text style={styles.p}>
-        Render pages with mock data. This makes it easy to build and review page states without
-        needing to navigate to them in your app. Here are some handy patterns for managing page data
-        in Storybook:
-      </Text>
-
-      <View>
-        <View>
-          Use a higher-level connected component. Storybook helps you compose such data from the
-          "args" of child component stories
-        </View>
+export const Page = () => {
+  const [user, setUser] = useState();
+
+  return (
+    <View>
+      <Header
+        user={user}
+        onLogin={() => setUser({ name: 'Jane Doe' })}
+        onLogout={() => setUser(undefined)}
+        onCreateAccount={() => setUser({ name: 'Jane Doe' })}
+      />
+
+      <View style={styles.section}>
+        <Text role="heading" style={styles.h2}>
+          Pages in Storybook
+        </Text>
+
+        <Text style={styles.p}>
+          We recommend building UIs with a{' '}
+          <Text
+            style={[styles.a, { fontWeight: 'bold' }]}
+            role="link"
+            onPress={() => {
+              Linking.openURL('https://componentdriven.org');
+            }}
+          >
+            <Text>component-driven</Text>
+          </Text>{' '}
+          process starting with atomic components and ending with pages.
+        </Text>
+
+        <Text style={styles.p}>
+          Render pages with mock data. This makes it easy to build and review page states without
+          needing to navigate to them in your app. Here are some handy patterns for managing page
+          data in Storybook:
+        </Text>
 
         <View>
-          Assemble data in the page component from your services. You can mock these services out
-          using Storybook.
+          <View>
+            Use a higher-level connected component. Storybook helps you compose such data from the
+            "args" of child component stories
+          </View>
+
+          <View>
+            Assemble data in the page component from your services. You can mock these services out
+            using Storybook.
+          </View>
         </View>
-      </View>
 
-      <Text style={styles.p}>
-        Get a guided tutorial on component-driven development at{' '}
-        <Text
-          style={styles.a}
-          role="link"
-          onPress={() => {
-            Linking.openURL('https://storybook.js.org/tutorials/');
-          }}
-        >
-          Storybook tutorials
+        <Text style={styles.p}>
+          Get a guided tutorial on component-driven development at{' '}
+          <Text
+            style={styles.a}
+            role="link"
+            onPress={() => {
+              Linking.openURL('https://storybook.js.org/tutorials/');
+            }}
+          >
+            Storybook tutorials
+          </Text>
+          . Read more in the{' '}
+          <Text
+            style={styles.a}
+            role="link"
+            onPress={() => {
+              Linking.openURL('https://storybook.js.org/docs');
+            }}
+          >
+            docs
+          </Text>
+          .
         </Text>
-        . Read more in the{' '}
-        <Text
-          style={styles.a}
-          role="link"
-          onPress={() => {
-            Linking.openURL('https://storybook.js.org/docs');
-          }}
-        >
-          docs
-        </Text>
-        .
-      </Text>
 
-      <View style={styles.tipWrapper}>
-        <View style={styles.tip}>
-          <Text style={styles.tipText}>Tip </Text>
-        </View>
+        <View style={styles.tipWrapper}>
+          <View style={styles.tip}>
+            <Text style={styles.tipText}>Tip </Text>
+          </View>
 
-        <Text>Adjust the width of the canvas with the </Text>
+          <Text>Adjust the width of the canvas with the </Text>
 
-        <Text>Viewports addon in the toolbar</Text>
+          <Text>Viewports addon in the toolbar</Text>
+        </View>
       </View>
     </View>
-  </View>
-);
+  );
+};
 
 const styles = StyleSheet.create({
   section: {
@@ -149,16 +160,3 @@ const styles = StyleSheet.create({
     marginTop: 3,
   },
 });
-
-Page.propTypes = {
-  user: PropTypes.shape({
-    name: PropTypes.string.isRequired,
-  }),
-  onLogin: PropTypes.func.isRequired,
-  onLogout: PropTypes.func.isRequired,
-  onCreateAccount: PropTypes.func.isRequired,
-};
-
-Page.defaultProps = {
-  user: null,
-};
diff --git a/code/frameworks/react-native-web-vite/template/cli/js/Page.stories.jsx b/code/frameworks/react-native-web-vite/template/cli/js/Page.stories.jsx
@@ -1,16 +1,25 @@
-import * as HeaderStories from './Header.stories';
+import { expect, userEvent, within } from '@storybook/test';
+
 import { Page } from './Page';
 
 const meta = {
+  title: 'Example/Page',
   component: Page,
 };
 
 export default meta;
 
 export const LoggedIn = {
-  args: HeaderStories.LoggedIn.args,
-};
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const loginButton = canvas.getByRole('button', { name: /Log in/i });
+    await expect(loginButton).toBeInTheDocument();
+    await userEvent.click(loginButton);
+    // FIXME: await expect(loginButton).not.toBeInTheDocument();
 
-export const LoggedOut = {
-  args: HeaderStories.LoggedOut.args,
+    const logoutButton = canvas.getByRole('button', { name: /Log out/i });
+    await expect(logoutButton).toBeInTheDocument();
+  },
 };
+
+export const LoggedOut = {};
diff --git a/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Button.stories.tsx b/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Button.stories.tsx
@@ -1,10 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 
 import { View } from 'react-native';
 
 import { Button } from './Button';
 
 const meta: Meta<typeof Button> = {
+  title: 'Example/Button',
   component: Button,
   decorators: [
     (Story) => (
@@ -15,6 +17,8 @@ const meta: Meta<typeof Button> = {
   ],
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
+  // Use `fn` to spy on the onPress arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: { onPress: fn() },
 };
 
 export default meta;