feat(compare): add layoutSettings state persistence (#1519) (#1538)

compare/src/components/molecules/SettingsPopup.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import styled from 'styled-components';
-import { updateSettings, toggleAllImages, toggleTextInfo } from '../../actions';
+import { updateSettings, toggleAllImages } from '../../actions';
 
 import { colors, shadows } from '../../styles';
 
@@ -117,9 +117,6 @@ const mapDispatchToProps = dispatch => {
     },
     toggleAll: value => {
       dispatch(toggleAllImages(value));
-    },
-    toogleTextInfo: value => {
-      dispatch(toggleTextInfo(value));
     }
   };
 };

compare/src/store.js

@@ -1,6 +1,43 @@
 import { createStore } from 'redux';
 import rootReducer from './reducers';
 
+/**
+ * Parses a JSON string from local storage and handles any errors.
+ *
+ * This function attempts to parse a JSON string provided in `localStorageItem`.
+ * If the parsing fails (typically due to corrupt or invalid JSON data),
+ * it logs the error, warns the user, and removes the corrupted item from
+ * local storage. If parsing is successful, it returns the parsed object.
+ * In the case of an error, it returns `false`.
+ *
+ * @param {string} localStorageItem - The JSON string to parse, typically retrieved from local storage.
+ * @returns {object|boolean} The parsed JSON object, or `false` if settings aren't set or parsing fails.
+ */
+function parseLocalStorage (localStorageItem) {
+  let data;
+  try {
+    data = JSON.parse(localStorageItem);
+  } catch (error) {
+    console.error(error);
+    console.warn('BackstopJS LocalStorage settings appear to be corrupted. Let me fix that for you.');
+    localStorage.removeItem('backstopjs');
+    data = false;
+  }
+  return data;
+}
+
+/**
+ * Retrieves the state from local storage, if available.
+ * @returns {object|boolean} The persisted state object or false if not available.
+ */
+const localState = localStorage.getItem('backstopjs');
+const persistedState = localState
+  ? parseLocalStorage(localState)
+  : false;
+
+/**
+ * Default state for the Redux store.
+ */
 const defaultState = {
   suiteInfo: {
     testSuiteName: window.tests.testSuite,
@@ -24,10 +61,35 @@ const defaultState = {
   }
 };
 
+/**
+ * Merges persisted state with default state if available, otherwise uses default state.
+ */
+const state = persistedState
+  ? {
+      ...defaultState,
+      ...persistedState
+    }
+  : defaultState;
+
+/**
+ * Creates the Redux store with root reducer, initial state, and devtools extension.
+ * TODO: Consider using Redux Toolkit for more efficient and modern state management.
+ */
 const store = createStore(
   rootReducer,
-  defaultState,
+  state,
   window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
 );
 
+/**
+ * Subscribes to store changes to persist layout settings in local storage.
+ */
+store.subscribe(function () {
+  const layoutSettings = store.getState().layoutSettings;
+  const localStateItems = JSON.stringify({
+    layoutSettings
+  });
+  localStorage.setItem('backstopjs', localStateItems);
+});
+
 export default store;

compare/webpack.config.js

@@ -3,6 +3,28 @@ const path = require('path');
 module.exports = {
   mode: 'production',
   entry: path.join(__dirname, 'src', 'index.js'),
+  devServer: {
+    static: [
+      {
+        directory: path.resolve(__dirname, 'output'),
+        serveIndex: true
+      }, {
+        directory: path.join(__dirname, '../test/configs/backstop_data/html_report'),
+        publicPath: '/'
+      }, {
+        directory: path.join(__dirname, '../test/configs/backstop_data'),
+        publicPath: '/'
+      }
+    ],
+    client: {
+      overlay: {
+        errors: true,
+        warnings: false,
+        runtimeErrors: true
+      }
+    },
+    webSocketServer: false
+  },
   output: {
     path: path.resolve(__dirname, 'output'),
     filename: 'index_bundle.js'

package.json

@@ -22,7 +22,7 @@
     "unit-test": "mocha --reporter spec --recursive \"test/**/*_spec.js\" && npm run -s success-message || npm run -s fail-message",
     "precommit": "lint-staged",
     "build-compare": "cp ./node_modules/diverged/src/diverged.js ./compare/output/ && cp ./node_modules/diff/dist/diff.js ./compare/output/ && webpack --config ./compare/webpack.config.js && npm run -s lint",
-    "dev-compare": "webpack-dev-server --content-base ./compare/output --config ./compare/webpack.config.js",
+    "dev-compare": "webpack-dev-server --config ./compare/webpack.config.js",
     "integration-test": "rm -rf integrationTestDir && mkdir integrationTestDir && cd integrationTestDir && node ../cli/index.js init && node ../cli/index.js reference && node ../cli/index.js test && node -e \"require('../')('test')\" && npm --prefix ../ run -s success-message || npm --prefix ../ run -s fail-message",
     "smoke-test": "cd test/configs/ && node ../../cli/index.js test --config=backstop_features && npm --prefix ../../ run -s success-message || npm --prefix ../../ run -s caution-message",
     "smoke-test-playwright": "cd test/configs/ && node ../../cli/index.js test --config=backstop_features_pw && npm --prefix ../../ run -s fail-message || npm --prefix ../../ run -s caution-message",