#NOISSUE Upgrade dependencies

Author: wongchito

package-lock.json

@@ -7,45 +7,44 @@
     },
     "license": "GPL-3.0-only",
     "dependencies": {
-        "@chakra-ui/react": "^2.8.1",
-        "@emotion/react": "^11.11.1",
+        "@chakra-ui/react": "^2.8.2",
+        "@emotion/react": "^11.11.3",
         "@emotion/styled": "^11.11.0",
         "@railmapgen/rmg-components": "^9.0.0",
         "@railmapgen/rmg-palette-resources": "file:package/dist",
-        "@railmapgen/rmg-runtime": "^8.0.3",
+        "@railmapgen/rmg-runtime": "^8.1.0",
         "@railmapgen/rmg-translate": "^3.1.0",
-        "@reduxjs/toolkit": "^1.9.6",
-        "@vitejs/plugin-legacy": "^4.1.1",
-        "ag-grid-community": "^30.2.0",
-        "ag-grid-react": "^30.2.0",
-        "framer-motion": "^10.16.4",
+        "@reduxjs/toolkit": "^2.0.1",
+        "@vitejs/plugin-legacy": "^5.2.0",
+        "ag-grid-community": "^31.0.1",
+        "ag-grid-react": "^31.0.1",
+        "framer-motion": "^10.16.16",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-i18next": "^13.2.2",
-        "react-icons": "^4.11.0",
-        "react-redux": "^8.1.2",
-        "react-router-dom": "^6.16.0"
+        "react-i18next": "^14.0.0",
+        "react-icons": "^4.12.0",
+        "react-redux": "^9.0.4",
+        "react-router-dom": "^6.21.1"
     },
     "devDependencies": {
-        "@testing-library/jest-dom": "^6.1.3",
-        "@testing-library/react": "^14.0.0",
-        "@types/node": "^20.7.1",
-        "@types/react": "^18.2.23",
-        "@types/react-dom": "^18.2.8",
+        "@testing-library/jest-dom": "^6.1.6",
+        "@testing-library/react": "^14.1.2",
+        "@testing-library/user-event": "^14.5.1",
+        "@types/node": "^20.10.5",
+        "@types/react": "^18.2.45",
+        "@types/react-dom": "^18.2.18",
         "@types/react-router-dom": "^5.3.3",
-        "@types/redux-mock-store": "^1.0.4",
-        "@typescript-eslint/eslint-plugin": "^6.7.3",
-        "@typescript-eslint/parser": "^6.7.3",
-        "@vitejs/plugin-react": "^4.1.0",
-        "eslint": "^8.50.0",
-        "eslint-plugin-prettier": "^5.0.0",
+        "@typescript-eslint/eslint-plugin": "^6.16.0",
+        "@typescript-eslint/parser": "^6.16.0",
+        "@vitejs/plugin-react": "^4.2.1",
+        "eslint": "^8.56.0",
+        "eslint-plugin-prettier": "^5.1.2",
         "eslint-plugin-react": "^7.33.2",
-        "prettier": "^3.0.3",
-        "redux-mock-store": "^1.5.4",
-        "terser": "^5.20.0",
-        "typescript": "^5.2.2",
-        "vite": "^4.4.9",
-        "vitest": "^0.34.5"
+        "prettier": "^3.1.1",
+        "terser": "^5.26.0",
+        "typescript": "^5.3.3",
+        "vite": "^5.0.10",
+        "vitest": "^1.1.0"
     },
     "scripts": {
         "dev": "vite --host",

package.json

@@ -6,7 +6,7 @@
         "url": "https://github.com/railmapgen/rmg-palette.git",
         "directory": "package"
     },
-    "version": "2.1.9",
+    "version": "2.2.0-0",
     "description": "",
     "main": "./index.js",
     "scripts": {
@@ -17,11 +17,11 @@
     "author": "",
     "license": "GPL-3.0",
     "devDependencies": {
-        "@types/jsdom": "^21.1.3",
-        "jsdom": "^22.1.0",
-        "ts-node": "^10.9.1",
-        "typescript": "^5.2.2",
-        "vitest": "^0.34.5"
+        "@types/jsdom": "^21.1.6",
+        "jsdom": "^23.0.1",
+        "ts-node": "^10.9.2",
+        "typescript": "^5.3.3",
+        "vitest": "^1.1.0"
     },
     "exports": {
         ".": "./index.js",

package/package-lock.json

@@ -3,7 +3,7 @@ import { vi } from 'vitest';
 import SubmitModal from './submit-modal';
 import { fireEvent, screen } from '@testing-library/react';
 import rootReducer from '../../redux';
-import { createMockRootStore } from '../../setupTests';
+import { createTestStore } from '../../setupTests';
 import { MonoColour } from '@railmapgen/rmg-palette-resources';
 
 const realStore = rootReducer.getState();
@@ -30,8 +30,7 @@ describe('SubmitModal', () => {
     });
 
     it('Can display one click submit button if no errors', () => {
-        const mockStore = createMockRootStore({
-            ...realStore,
+        const mockStore = createTestStore({
             ticket: {
                 ...realStore.ticket,
                 country: 'HK',

package/package.json

@@ -4,11 +4,10 @@ import { vi } from 'vitest';
 import i18n from '../../i18n/config';
 import { render } from '../../test-utils';
 import rootReducer from '../../redux';
-import { createMockRootStore } from '../../setupTests';
+import { createTestStore } from '../../setupTests';
 
 const realStore = rootReducer.getState();
-const mockStore = createMockRootStore({
-    ...realStore,
+const mockStore = createTestStore({
     app: {
         ...realStore.app,
         cityList: [

package/vitest.config.ts package/vitest.config.mts

@@ -1,34 +1,33 @@
 import { render } from '../../test-utils';
 import CitySection from './city-section';
 import { fireEvent, screen, waitFor } from '@testing-library/react';
-import rootReducer from '../../redux';
-import { createMockRootStore } from '../../setupTests';
+import rootReducer, { RootStore } from '../../redux';
+import { createTestStore } from '../../setupTests';
 import { vi } from 'vitest';
 
 const realStore = rootReducer.getState();
-const mockStore = createMockRootStore({
-    ...realStore,
-    app: {
-        ...realStore.app,
-        cityList: [
-            {
-                id: 'guangzhou',
-                country: 'CN',
-                name: {
-                    en: 'Guangzhou',
-                },
-            },
-        ],
-    },
-    ticket: { ...realStore.ticket, country: 'CN' },
-});
+let mockStore: RootStore;
 
 const originalFetch = global.fetch;
 const mockFetch = vi.fn();
 
 describe('CitySection', () => {
-    afterEach(() => {
-        mockStore.clearActions();
+    beforeEach(() => {
+        mockStore = createTestStore({
+            app: {
+                ...realStore.app,
+                cityList: [
+                    {
+                        id: 'guangzhou',
+                        country: 'CN',
+                        name: {
+                            en: 'Guangzhou',
+                        },
+                    },
+                ],
+            },
+            ticket: { ...realStore.ticket, country: 'CN' },
+        });
         vi.clearAllMocks();
         global.fetch = originalFetch;
     });
@@ -71,30 +70,14 @@ describe('CitySection', () => {
 
         // select guangzhou
         fireEvent.change(screen.getByRole('combobox', { name: 'City' }), { target: { value: 'guangzhou' } });
-        await waitFor(() => expect(mockStore.getActions()).toHaveLength(1));
-
-        const actions = mockStore.getActions();
-        expect(actions).toContainEqual(
-            expect.objectContaining({
-                type: 'ticket/populateTicket',
-                payload: expect.objectContaining({
-                    city: expect.objectContaining({
-                        id: 'guangzhou',
-                        country: 'CN',
-                    }),
-                }),
-            })
-        );
+        await waitFor(() => expect(mockStore.getState().ticket.city).toBe('guangzhou'));
     });
 
     it('Can clear lines when adding a new city', async () => {
         render(<CitySection />, { store: mockStore });
 
         // select new
         fireEvent.change(screen.getByRole('combobox', { name: 'City' }), { target: { value: 'new' } });
-        await waitFor(() => expect(mockStore.getActions()).toHaveLength(1));
-
-        const actions = mockStore.getActions();
-        expect(actions).toContainEqual({ type: 'ticket/setCity', payload: 'new' });
+        await waitFor(() => expect(mockStore.getState().ticket.city).toBe('new'));
     });
 });

src/components/modal/submit-modal.test.tsx

@@ -1,22 +1,17 @@
-import rootReducer from '../../redux';
-import { createMockRootStore } from '../../setupTests';
+import rootReducer, { RootStore } from '../../redux';
+import { createTestStore } from '../../setupTests';
 import { PaletteEntryWithTranslationEntry, TranslationEntry } from '../../redux/ticket/util';
 import { MonoColour } from '@railmapgen/rmg-palette-resources';
-import { render, TestingProvider } from '../../test-utils';
+import { render } from '../../test-utils';
 import ColourEntryCard from './colour-entry-card';
-import { act, fireEvent, render as originalRender, screen } from '@testing-library/react';
+import { act, fireEvent, screen } from '@testing-library/react';
 import { vi } from 'vitest';
+import { setPantoneReady } from '../../redux/app/app-slice';
 
 const initialTranslation: TranslationEntry[] = [['en', '']];
 
 const realStore = rootReducer.getState();
-const mockStore = createMockRootStore({
-    ...realStore,
-    app: {
-        ...realStore.app,
-        pantoneReady: true,
-    },
-});
+let mockStore: RootStore;
 
 const mockLineDetail: PaletteEntryWithTranslationEntry = {
     id: '002',
@@ -34,26 +29,18 @@ const originalFetch = global.fetch;
 
 describe('ColourEntryCard', () => {
     describe('ColourEntryCard - rerender', () => {
-        it('Can hide pantone input if pantone service is not ready', () => {
-            const notReadyStore = createMockRootStore({
-                ...realStore,
-            });
-            const { rerender } = originalRender(
-                <TestingProvider store={notReadyStore}>
-                    <ColourEntryCard lineDetail={mockLineDetail} {...mockCallbacks} />
-                </TestingProvider>
-            );
+        it('Can hide pantone input if pantone service is not ready', async () => {
+            const mockStore = createTestStore();
+            render(<ColourEntryCard lineDetail={mockLineDetail} {...mockCallbacks} />, { store: mockStore });
 
             // only rgb is available
             expect(screen.queryByRole('group', { name: 'Use Pantone' })).not.toBeInTheDocument();
             expect(screen.getByRole('combobox', { name: 'Background colour' })).not.toBeDisabled();
             expect(screen.queryByRole('group', { name: 'Pantone code' })).not.toBeInTheDocument();
 
-            rerender(
-                <TestingProvider store={mockStore}>
-                    <ColourEntryCard lineDetail={mockLineDetail} {...mockCallbacks} />
-                </TestingProvider>
-            );
+            await act(async () => {
+                mockStore.dispatch(setPantoneReady(true));
+            });
 
             // colour mode switch is available
             expect(screen.getByRole('group', { name: 'Use Pantone' })).toBeInTheDocument();
@@ -63,6 +50,15 @@ describe('ColourEntryCard', () => {
     });
 
     describe('ColourEntryCard - Pantone input', () => {
+        beforeEach(() => {
+            mockStore = createTestStore({
+                app: {
+                    ...realStore.app,
+                    pantoneReady: true,
+                },
+            });
+        });
+
         afterEach(() => {
             global.fetch = originalFetch;
             vi.resetAllMocks();
@@ -89,6 +85,7 @@ describe('ColourEntryCard', () => {
 
         it('Do not update store if pantone colour is failed to fetch', async () => {
             global.fetch = mockFetch.mockRejectedValue('Failed to fetch');
+            const prevState = mockStore.getState().ticket;
             render(<ColourEntryCard lineDetail={mockLineDetail} {...mockCallbacks} />, { store: mockStore });
 
             vi.useFakeTimers();
@@ -98,9 +95,8 @@ describe('ColourEntryCard', () => {
             });
 
             expect(mockFetch).toBeCalledTimes(1);
-            const actions = mockStore.getActions();
-            expect(actions).toHaveLength(0);
 
+            expect(mockStore.getState().ticket).toEqual(prevState);
             expect(screen.getByRole('combobox', { name: 'Pantone code' })).toHaveValue('130 C');
         });
     });

src/components/picker-view/city-picker.test.tsx

@@ -1,36 +1,17 @@
-import { TestingProvider } from '../../test-utils';
+import { render } from '../../test-utils';
 import CountrySection from './country-section';
-import { render, screen } from '@testing-library/react';
-import rootReducer from '../../redux';
-import { createMockRootStore } from '../../setupTests';
-
-const realStore = rootReducer.getState();
-const mockStore = createMockRootStore({ ...realStore });
+import { screen } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
 
 describe('CountrySection', () => {
-    it('Can show custom country code and name fields if add a country option is selected', () => {
-        const { rerender } = render(
-            <TestingProvider store={mockStore}>
-                <CountrySection />
-            </TestingProvider>
-        );
+    it('Can show custom country code and name fields if add a country option is selected', async () => {
+        const user = userEvent.setup();
+        render(<CountrySection />);
 
         expect(screen.queryByDisplayValue(/Add a new country/)).not.toBeInTheDocument();
         expect(screen.queryByRole('combobox', { name: 'Country code' })).not.toBeInTheDocument();
 
-        const mockStoreWithNewCountry = createMockRootStore({
-            ...realStore,
-            ticket: {
-                ...realStore.ticket,
-                country: 'new',
-            },
-        });
-
-        rerender(
-            <TestingProvider store={mockStoreWithNewCountry}>
-                <CountrySection />
-            </TestingProvider>
-        );
+        await user.selectOptions(screen.getByRole('combobox', { name: 'Country/Region' }), 'new');
 
         // 'add a country' selected
         expect(screen.getByDisplayValue(/Add a country/)).toBeInTheDocument();