Adds Redux and React-Intl to storybook (#35094)

app/javascript/mastodon/components/button/button.stories.tsx

@@ -36,7 +36,8 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 const buttonTest: Story['play'] = async ({ args, canvas, userEvent }) => {
-  await userEvent.click(canvas.getByRole('button'));
+  const button = await canvas.findByRole('button');
+  await userEvent.click(button);
   await expect(args.onClick).toHaveBeenCalled();
 };
 
@@ -45,7 +46,8 @@ const disabledButtonTest: Story['play'] = async ({
   canvas,
   userEvent,
 }) => {
-  await userEvent.click(canvas.getByRole('button'));
+  const button = await canvas.findByRole('button');
+  await userEvent.click(button);
   await expect(args.onClick).not.toHaveBeenCalled();
 };
 

app/javascript/mastodon/reducers/index.ts

@@ -1,4 +1,4 @@
-import { Record as ImmutableRecord } from 'immutable';
+import { Record as ImmutableRecord, mergeDeep } from 'immutable';
 
 import { loadingBarReducer } from 'react-redux-loading-bar';
 import { combineReducers } from 'redux-immutable';
@@ -98,6 +98,15 @@ const initialRootState = Object.fromEntries(
 
 const RootStateRecord = ImmutableRecord(initialRootState, 'RootState');
 
-const rootReducer = combineReducers(reducers, RootStateRecord);
+export const rootReducer = combineReducers(reducers, RootStateRecord);
 
-export { rootReducer };
+export function reducerWithInitialState(
+  stateOverrides: Record<string, unknown> = {},
+) {
+  const initialStateRecord = mergeDeep(initialRootState, stateOverrides);
+  const PatchedRootStateRecord = ImmutableRecord(
+    initialStateRecord,
+    'RootState',
+  );
+  return combineReducers(reducers, PatchedRootStateRecord);
+}

app/javascript/mastodon/store/store.ts

@@ -6,24 +6,26 @@ import { errorsMiddleware } from './middlewares/errors';
 import { loadingBarMiddleware } from './middlewares/loading_bar';
 import { soundsMiddleware } from './middlewares/sounds';
 
+export const defaultMiddleware = {
+  // In development, Redux Toolkit enables 2 default middlewares to detect
+  // common issues with states. Unfortunately, our use of ImmutableJS for state
+  // triggers both, so lets disable them until our state is fully refactored
+
+  // https://redux-toolkit.js.org/api/serializabilityMiddleware
+  // This checks recursively that every values in the state are serializable in JSON
+  // Which is not the case, as we use ImmutableJS structures, but also File objects
+  serializableCheck: false,
+
+  // https://redux-toolkit.js.org/api/immutabilityMiddleware
+  // This checks recursively if every value in the state is immutable (ie, a JS primitive type)
+  // But this is not the case, as our Root State is an ImmutableJS map, which is an object
+  immutableCheck: false,
+} as const;
+
 export const store = configureStore({
   reducer: rootReducer,
   middleware: (getDefaultMiddleware) =>
-    getDefaultMiddleware({
-      // In development, Redux Toolkit enables 2 default middlewares to detect
-      // common issues with states. Unfortunately, our use of ImmutableJS for state
-      // triggers both, so lets disable them until our state is fully refactored
-
-      // https://redux-toolkit.js.org/api/serializabilityMiddleware
-      // This checks recursively that every values in the state are serializable in JSON
-      // Which is not the case, as we use ImmutableJS structures, but also File objects
-      serializableCheck: false,
-
-      // https://redux-toolkit.js.org/api/immutabilityMiddleware
-      // This checks recursively if every value in the state is immutable (ie, a JS primitive type)
-      // But this is not the case, as our Root State is an ImmutableJS map, which is an object
-      immutableCheck: false,
-    })
+    getDefaultMiddleware(defaultMiddleware)
       .concat(
         loadingBarMiddleware({
           promiseTypeSuffixes: ['REQUEST', 'SUCCESS', 'FAIL'],