Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ReferenceError: _objectSpread is not defined after update #10179

Closed
jenniferlynparsons opened this issue Jul 8, 2019 · 50 comments · Fixed by #10200
Closed

ReferenceError: _objectSpread is not defined after update #10179

jenniferlynparsons opened this issue Jul 8, 2019 · 50 comments · Fixed by #10200
Labels
i: bug outdated A closed issue/PR that is archived due to age. Recommended to make a new issue

Comments

@jenniferlynparsons
Copy link

jenniferlynparsons commented Jul 8, 2019

Bug Report

Current Behavior
I've updated to 7.5 and have been following the developments with issues that should have been resolved with https://github.com/babel/babel/releases/tag/v7.5.1 however after stripping and reinstalling everything babel-related, I'm still getting this error.

Babel packages
@babel/cli: "^7.5.0"
@babel/core: "^7.5.0"
@babel/helpers: "^7.5.1"
@babel/plugin-proposal-object-rest-spread: "^7.5.1"
@babel/plugin-transform-runtime: "^7.5.0"
@babel/polyfill: "^7.4.4"
@babel/preset-env: "^7.5.0"
@babel/preset-react: "^7.0.0"
babel-eslint: "^10.0.2"
babel-jest: "^24.8.0"
babel-loader: "^8.0.6"
babel-plugin-dynamic-import-node: "^2.3.0"
babel-plugin-jsx-remove-data-test-id: "^2.0.0"
babel-plugin-transform-class-properties: "^6.24.1"
babel-plugin-transform-decorators-legacy: "^1.3.5"
babel-plugin-transform-export-extensions: "^6.22.0"
babel-plugin-transform-object-rest-spread: "^6.26.0"

Babel Configuration (.babelrc, package.json, cli command)

{
  "env": {
    "test": {
      "plugins": [
        "transform-class-properties",
        "dynamic-import-node",
        "@babel/plugin-transform-runtime"
      ]
    },
    "production": {
      "plugins": ["babel-plugin-jsx-remove-data-test-id"]
    }
  },
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["transform-class-properties"]
}

Environment

  • Babel version(s): 7.5.0
  • Node/npm version: 6.5.0
  • OS: Linux Mint Cinnamon
  • Monorepo: yes
@babel-bot
Copy link
Collaborator

Hey @jenniferlynparsons! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community
that typically always has someone willing to help. You can sign-up here
for an invite.

@nicolo-ribaudo
Copy link
Member

nicolo-ribaudo commented Jul 8, 2019

Can you post your webpack config?
Also, you are using a lot of different v6 plugins, which are very likely to cause problems when mixed with Babel 7. Please update them.

{
  "env": {
    "test": {
      "plugins": [
        "@babel/plugin-proposal-dynamic-import",
        "@babel/plugin-transform-runtime"
      ]
    },
    "production": {
      "plugins": ["babel-plugin-jsx-remove-data-test-id"]
    }
  },
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babe/plugin-transform-class-properties"]
}

@jenniferlynparsons
Copy link
Author

jenniferlynparsons commented Jul 8, 2019

I installed the plugins from scratch without indicating version number, so I'll have to see if there are updated versions available somewhere or if 7 allows me to drop them entirely. Here's my webpack config:

/*
    ./webpack.config.js
*/
const path = require("path");

const HtmlWebpackPlugin = require("html-webpack-plugin");
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: "./client/src/index.html",
  filename: "index.html",
  inject: "body"
});

module.exports = {
  entry: "./client/src/index.js",
  output: {
    path: path.resolve("dist"),
    filename: "index_bundle.js",
    publicPath: "/"
  },
  module: {
    rules: [
      {
        test: /\.(sass|scss)$/,
        use: ["style-loader", "css-loader", "sass-loader"]
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: "babel-loader"
      },
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: "babel-loader"
      },
      {
        test: /\.svg$/,
        use: [
          {
            loader: "babel-loader"
          },
          {
            loader: "react-svg-loader",
            options: {
              jsx: true // true outputs JSX tags
            }
          }
        ]
      }
    ]
  },
  resolve: {
    extensions: [".js", ".jsx"]
  },
  devServer: {
    historyApiFallback: true
  },
  plugins: [HtmlWebpackPluginConfig]
};

@jenniferlynparsons
Copy link
Author

A bit more investigation leads to Jest being part of the problem. That's where I'm getting that error, specifically. It requires things like babel-plugin-transform-class-properties: "^6.24.1". I'm going to see if there's any way to update that.

@jenniferlynparsons
Copy link
Author

Further update: Earlier today I had rolled back to my previous branch and everything worked correctly. The only difference between the two branches is that I installed Yup (https://github.com/jquense/yup) for some error validation.

@nicolo-ribaudo
Copy link
Member

Installing a new package might have changed other things in your lockfile.

Recent versions of Jest use Babel 7, which version are you using?

@jenniferlynparsons
Copy link
Author

jenniferlynparsons commented Jul 8, 2019

I'm on the most current version of Jest. The project I'm working on is fairly new (started in October/November) and I had just updated everything last week, so it's all current versions, or as close as possible.

The only difference, package-wise, between my previous branch and the current one where things are broken, is that I installed Yup.

@mstruensee
Copy link

mstruensee commented Jul 8, 2019

I am getting this same issue ... downgrading fixed the issue (my previous version was 7.4.4).

My issue does not deal with Jest, it prevents my app from rendering locally.

@nicolo-ribaudo
Copy link
Member

Can someone of you share a small repository which reproduces the issue?

@mstruensee
Copy link

I would have to make one, currently it is happening on internal private repositories.

@nicolo-ribaudo
Copy link
Member

Hopefully you would only need the same config and a one-line sample file to transpile.

@jenniferlynparsons
Copy link
Author

jenniferlynparsons commented Jul 8, 2019

@nicolo-ribaudo here's my current branch where it's failing https://github.com/jenniferlynparsons/cuppa-webpack/tree/feature/login-form-validation

I've got it narrowed down at the moment to the AuthReducer.js file where I've added the "LOGIN_ERRORS" case. The case before that ("USER_LOADING") is the one that's failing in the AuthReducers.test.js file. Sorry I can't get it narrowed down any further than that.

I've also noticed that if I remove the "LOGIN_ERRORS" case, the tests pass. There's no reason that I can see why that would have any effect unless there's some edge case I'm hitting that I'm unaware of.

@nicolo-ribaudo
Copy link
Member

nicolo-ribaudo commented Jul 8, 2019

I tried downloading that branch, updating Babel plugins to v7 and npm test worked.

cuppa-webpack on  feature/login-form-validation [!] is 📦 v1.0.0 via ⬢ v11.14.0 took 8s 
➜ npm test

> cuppa-webpack@1.0.0 test /home/nicolo/Documenti/dev/babel-bugs/cuppa-webpack
> jest

 PASS  client/src/reducers/__tests__/errorReducers.test.js
  error reducer
    ✓ returns default state when there is no action type (10ms)
    ✓ returns error state when action.payload is not empty (1ms)

 PASS  client/src/reducers/__tests__/typesReducers.test.js
  types reducer
    ✓ returns default state when there is no action type (7ms)

 PASS  client/src/reducers/__tests__/flashReducers.test.js
  flash reducer
    ✓ returns default state when there is no action type (6ms)
    ✓ returns 'on' state when action.payload is 'on' (1ms)

 PASS  client/src/components/FormComponents/InputField/__tests__/InputField.test.jsx
  InputField rendering
    ✓ index field renders without errors (56ms)

  console.error node_modules/prop-types/checkPropTypes.js:20
    Warning: Failed prop type: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.
        in input
        in div
        in Unknown

 PASS  client/src/reducers/__tests__/authReducers.test.js
  auth reducer
    ✓ returns default state when there is no action type (7ms)
    ✓ returns loading state true when the action type is 'USER_LOADING' (1ms)
    ✓ returns logged in user state when the action type is 'SET_CURRENT_USER' (1ms)

 PASS  client/src/reducers/__tests__/teaReducers.test.js
  tea reducer
    ✓ returns default state when there is no action type (7ms)
    ✓ returns default state when the action type is 'GET_TEAS' (2ms)
    ✓ returns a state with a new tea when the action type is 'ADD_TEA' (1ms)
    ✓ returns a state with an updated tea when the action type is 'EDIT_TEA' (1ms)
    ✓ returns a state with an updated teaIDs array when the action type is 'DELETE_TEA' (1ms)

 PASS  client/src/components/Landing/__tests__/Landing.test.jsx
  Landing rendering
    ✓ Landing renders without error (71ms)

 PASS  client/src/components/Template/Footer/__tests__/Footer.test.js
  footer rendering
    ✓ footer renders without error (25ms)

 PASS  client/src/actions/__tests__/flashActions.test.js
  editTeaFlash
    ✓ returns an object (2ms)
    ✓ it returns the EDIT_TEA_FLASH action type and payload (2ms)

 PASS  client/src/components/Dashboard/__tests__/Dashboard.test.jsx
  Dashboard rendering
    ✓ dashboard renders without error when logged in (33ms)
  Dashboard interaction
    ✓ dashboard logout click logs out user (15ms)

 PASS  client/src/components/Template/NavBar/__tests__/NavBar.test.jsx
  NavBar rendering
    ✓ renders without error when logged out (39ms)
    ✓ renders without error when logged in (18ms)
  NavBar interactions
    ✓ user click logout button triggers logout function (16ms)

 PASS  client/src/actions/__tests__/authActions.test.js
  loginAction
    ✓ returns a function (2ms)
    dispatching the returned function
      ✓ it calls 'post' on the API with the correct path and the user data (3ms)
      when the POST call is successful
        ✓ it sets the JWT token to the response from the POST (2ms)
        ✓ it decodes the token with jwt_decode (1ms)
        ✓ it sets the current user action (2ms)
  registerUser
    ✓ returns a function (1ms)
    dispatching the returned function
      ✓ it calls 'post' on the API with the correct path and the user data (1ms)
      when the POST call is successful
        ✓ it sets the JWT token to the response from the POST (1ms)
        ✓ it decodes the token with jwt_decode (1ms)
        ✓ it sets the current user action (1ms)
  logoutUser
    ✓ returns a function
    ✓ it resets the authToken (1ms)
  setCurrentUser
    ✓ returns an object (1ms)
    ✓ it returns the SET_CURRENT_USER action type and decoded payload (1ms)

 PASS  client/src/components/Auth/Register/__tests__/Register.test.jsx
  Register rendering
    ✓ Register renders without error (54ms)
  Register form updates
    ✓ onSubmit submits the form with valid data (41ms)

 PASS  client/src/components/Tea/TeaDetails/__tests__/TeaDetailsContainer.test.jsx
  TeaDetailsContainer rendering
    ✓ renders the component with redux without errors (51ms)
  TeaDetailsContainer flash
    ✓ tea detail renders with flash message after update (8ms)
    ✓ user clicks on delete flash fires click handler (23ms)
  teaDetails interactions
    ✓ user clicks edit to update tea (12ms)

 PASS  client/src/actions/__tests__/teaActions.test.js
  addTea
    ✓ returns a function (1ms)
    ✓ it calls 'post' on the API with the correct path and the tea data (2ms)
    ✓ it returns the ADD_TEA action type and payload (2ms)
  editTea
    ✓ returns a function
    ✓ it calls 'put' on the API with the correct path and the tea data
    ✓ it returns the EDIT_TEA action type and payload (1ms)
  deleteTea
    ✓ returns a function
    ✓ it calls 'post' on the API with the correct path and the tea data
    ✓ it returns the DELETE_TEA action type and payload (1ms)
  getTeas
    ✓ returns a function
    ✓ it calls 'post' on the API with the correct path and the tea data
    ✓ it returns the GET_TEAS action type and payload (1ms)

 PASS  client/src/components/Auth/Login/__tests__/Login.test.jsx
  Login rendering
    ✓ login renders without error (39ms)
  Login form success
    ✓ onSubmit submits the form with valid data (43ms)
  Login form failure
    onSubmit returns an error message if data is invalid
      ✓ invalid email address (4ms)
      ✓ mismatched email or password (6ms)

 PASS  client/src/components/Tea/TeaEditor/__tests__/TeaEditorContainer.test.jsx
  TeaEditorContainer rendering
    ✓ renders the component with redux without errors (39ms)
  teaEditor form submit
    ✓ editor form submit succesfully adds tea (36ms)
    ✓ editor form succesfully updates tea (15ms)

 PASS  client/src/components/App/__tests__/App.test.jsx
  App loading
    ✓ renders without crashing (34ms)

  console.error node_modules/prop-types/checkPropTypes.js:20
    Warning: Failed prop type: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.
        in select (created by TeaCollectionTable)
        in span (created by TeaCollectionTable)
        in div (created by TeaCollectionTable)
        in div (created by TeaCollectionTable)
        in form (created by TeaCollectionTable)
        in div (created by TeaCollectionTable)
        in div (created by TeaCollectionTable)
        in TeaCollectionTable (created by TeaCollectionTableContainer)
        in TeaCollectionTableContainer (created by ConnectFunction)
        in ConnectFunction
        in Router

 PASS  client/src/components/Tea/TeaCollectionTable/__tests__/TeaCollectionTableContainer.test.jsx
  TeaCollectionTableContainer rendering
    ✓ renders the component with redux without errors (75ms)
  TeaCollectionTableContainerClass interactions
    individual tea interactions
      ✓ user clicks delete removes the tea from list (21ms)
      ✓ user clicks name link redirects to detail page (19ms)
      ✓ user clicks edit link redirects to tea editor (19ms)
    sorting
      ✓ user clicks sort arrow sorts by that category (22ms)
      ✓ user clicks sort arrow a second time reverses sort order (22ms)
      ✓ user clicks a different arrow on sorted table re-sorts to new sort order (24ms)
    filtering
      ✓ user can filter by alpha character criteria (36ms)
      ✓ user can filter by number criteria (27ms)
      ✓ user can clear filter (30ms)
      ✓ if user does not choose filter category, filter does not work (17ms)
      ✓ if user does not enter filter criteria, filter does not work (14ms)

Test Suites: 19 passed, 19 total
Tests:       75 passed, 75 total
Snapshots:   0 total
Time:        4.398s
Ran all test suites.

@jenniferlynparsons
Copy link
Author

jenniferlynparsons commented Jul 8, 2019

Well, that's encouraging! @nicolo-ribaudo can you clarify which plugins should be updated? And is it enough to run npm update pluginX for each of them?

I ask because when i run npm outdated nothing related to babel or plugins shows up in the list.

@nicolo-ribaudo
Copy link
Member

nicolo-ribaudo commented Jul 8, 2019

Oh yeah, sorry for not being clear. We renamed the packages in Babel 7:

package.json

  "devDependencies": {
    "@babel/cli": "^7.4.3",
    "@babel/core": "^7.4.3",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/plugin-transform-runtime": "^7.4.4",
    "@babel/preset-env": "^7.5.2",
    "@babel/preset-react": "^7.0.0",
    "@testing-library/react": "^8.0.1",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^24.7.1",
    "babel-loader": "^8.0.5",
    "babel-plugin-jsx-remove-data-test-id": "^2.0.0",
    "eslint": "^5.16.0",
    "eslint-config-prettier": "^4.1.0",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-prettier": "^3.0.1",
    "eslint-plugin-react": "^7.12.4",
    "html-webpack-plugin": "^3.2.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^24.8.0",
    "jest-dom": "^3.5.0",
    "jsdoc": "^3.6.2",
    "lodash": "^4.17.11",
    "moxios": "^0.4.0",
    "nodemon": "^1.18.11",
    "prettier": "^1.16.4",
    "react-svg-loader": "^2.1.0",
    "react-test-renderer": "^16.8.6",
    "redux-devtools-extension": "^2.13.8",
    "redux-mock-store": "^1.5.3",
    "sass": "^1.18.0",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.3.1"
  },

.babelrc

{
  "env": {
    "test": {
      "plugins": ["@babel/transform-runtime"]
    },
    "production": {
      "plugins": ["babel-plugin-jsx-remove-data-test-id"]
    }
  },
  "presets": ["@babel/env", "@babel/react"],
  "plugins": ["@babel/proposal-class-properties"]
}

@mstruensee
Copy link

@jenniferlynparsons where is @babel/plugin-proposal-object-rest-spread in your .babelrc?

@jenniferlynparsons
Copy link
Author

Thanks for the clarification @nicolo-ribaudo ! Looks like I'm still having issues, but I can move forward with more confidence that it's not a babel issue. Time to try restarting the machine. :D

@jenniferlynparsons
Copy link
Author

@mstruensee I didn't have it in mine. Just tried adding it and wow that made everything so much worse. lol.

Now I'm not just getting the error on the one test, but on most of them.

@jenniferlynparsons
Copy link
Author

Okay, I think (fingers crossed) I have it fixed. For me, it took uninstalling jest and jest-cli globally and reinstalling them. That seems to have finally resolved the issue.

@nicolo-ribaudo
Copy link
Member

I suggest never I stalling packages globally, always use the local copy.

@HsuTing
Copy link

HsuTing commented Jul 9, 2019

I had the same problem. I use this with next.js.
The source code like this:

In:

export const handlePages = (pages, removeIcon = false) =>
  (pages || []).map(
    ({ pages: subPages, newWindow, params, icon, ...page }) => ({
      ...page,
      newWindow: !!newWindow,
      params: params || {},
      pages: handlePages(subPages),
      icon:
        removeIcon && !icon?.use
          ? null
          : {
              direction: icon?.direction || 'right',
              font: icon?.font || null,
              image: icon?.image || null,
            },
    }),
  );

export default ({ design, pages, ...menu }) => ({
  ...menu,
  pages: handlePages(pages),
  design: {
    ...design,
    showLogo: design?.showLogo || false,
    ...
});

Out:

var handlePages = function handlePages(pages) {
  var removeIcon = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  return (pages || []).map(function (_ref) {
    var subPages = _ref.pages,
        newWindow = _ref.newWindow,
        params = _ref.params,
        icon = _ref.icon,
        page = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1___default()(_ref, ["pages", "newWindow", "params", "icon"]);

    return _babel_runtime_helpers_objectSpread__WEBPACK_IMPORTED_MODULE_0___default()({}, page, {
      newWindow: !!newWindow,
      params: params || {},
      pages: handlePages(subPages),
      icon: removeIcon && !(icon === null || icon === void 0 ? void 0 : icon.use) ? null : {
        direction: (icon === null || icon === void 0 ? void 0 : icon.direction) || 'right',
        font: (icon === null || icon === void 0 ? void 0 : icon.font) || null,
        image: (icon === null || icon === void 0 ? void 0 : icon.image) || null
      }
    });
  });
};
/* harmony default export */ __webpack_exports__["a"] = (function (_ref2) {
  var design = _ref2.design,
      pages = _ref2.pages,
      menu = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1___default()(_ref2, ["design", "pages"]);

  return _objectSpread({}, menu, {
    pages: handlePages(pages),
    design: _objectSpread({}, design, {
     ...

Some _objectSpread had changed to _babel_runtime_helpers_objectSpread__WEBPACK_IMPORTED_MODULE_0___default, but others did not change.

babel.config.js

module.exports = {
  presets: [
    [
      '@babel/env',
      {
        useBuiltIns: 'usage',
        corejs: '2.6.9',
      },
    ],
    '@babel/react',
    '@babel/preset-typescript',
  ],
  plugins: [
    '@babel/transform-runtime',
    '@babel/proposal-optional-chaining',
    '@babel/proposal-export-default-from',
    [
      '@babel/proposal-decorators',
      {
        legacy: true, // TODO: remove, typescript not support
      },
    ],
    '@babel/proposal-class-properties',
    [
      'transform-imports',
      {
        /* eslint-disable no-template-curly-in-string */
        antd: {
          transform: 'antd/lib/${member}',
          kebabCase: true,
        },
        lodash: {
          transform: 'lodash/${member}',
        },
        fbjs: {
          transform: 'fbjs/lib/${member}',
        },
        validator: {
          transform: 'validator/lib/${member}',
        },
        'react-icons/fa': {
          transform: 'react-icons/lib/fa/${member}',
          kebabCase: true,
        },
        'react-icons/md': {
          transform: 'react-icons/lib/md/${member}',
          kebabCase: true,
        },
        /* eslint-enable no-template-curly-in-string */
      },
    ],
    'idx',
    [
      'module-resolver',
      {
        root: ['./src'],
        cwd: 'packagejson',
      },
    ],
    'css-modules-transform',
  ],
};

@nicolo-ribaudo do you have any idea?

@nicolo-ribaudo
Copy link
Member

This seems like a problem with webpack, which only transpiles some usages of the imported helper and not all of them.

@HsuTing
Copy link

HsuTing commented Jul 9, 2019

After I tested, this work correctly when I downgrade to @babel/plugin-proposal-object-rest-spread@7.4.4 and @babel/helpers@7.5.1.

@v-angolenko
Copy link

i have similar problem, but my config has only 2 plugins

['@babel/plugin-transform-modules-commonjs'],
['@babel/plugin-proposal-object-rest-spread'],

babel generate function _objectSpread2 but tries to use _objectSpread2 and _objectSpread, and it causes error "_objectSpread is not defined"

@nicolo-ribaudo nicolo-ribaudo reopened this Jul 9, 2019
@nicolo-ribaudo
Copy link
Member

@v-angolenko @HsuTing Can you provide a repository which shows the issue?

itaylor added a commit to itaylor/thunk-centric-redux that referenced this issue Jul 16, 2019
AdamRamberg pushed a commit to AdamRamberg/babel that referenced this issue Jul 17, 2019
@nicolo-ribaudo nicolo-ribaudo unpinned this issue Jul 17, 2019
reykjalin added a commit to Automattic/woocommerce-payments that referenced this issue Jul 22, 2019
Babel seems to need a specific package to support the `...` operator for
now.
See: babel/babel#10179 (comment)

npm i --save-dev @babel/plugin-proposal-object-rest-spread is sufficient
as a fix.
iamssen pushed a commit to rocket-hangar/rocket-scripts that referenced this issue Jul 23, 2019
@FeXd
Copy link

FeXd commented Jul 25, 2019

Just wanted to confirm for others struggling with this issue that @jenniferlynparsons recommendation fixed my issue.

Time to try restarting the machine.

Was fighting with our CI machine and followed many of the above suggestions, but a reboot finally fixed the issue.

@thinkkevin
Copy link

thinkkevin commented Aug 2, 2019

I had similar issue when I tried to upgrade babel to v7 and my unit test with jest failed with such error.

Eventually, I found I had to set BABEL_ENV=test in env vars.

And I don't have to add @babel/plugin-transform-runtime plugin.

reykjalin added a commit to Automattic/woocommerce-payments that referenced this issue Aug 5, 2019
Babel seems to need a specific package to support the `...` operator for
now.
See: babel/babel#10179 (comment)

npm i --save-dev @babel/plugin-proposal-object-rest-spread is sufficient
as a fix.
reykjalin added a commit to Automattic/woocommerce-payments that referenced this issue Aug 7, 2019
* Add reducer with some basic actions

The reducer does define some actions, but never produces a different
state.

* Add function to initalize the data store for fresh-data

* Add function to initialize the fresh-data API client

* Add empty Payments API spec

This will be filled in as we go, but can remain empty for now since
we're not actually calling any Payments endpoints for data.

* Add dependencies to package.json

* Add function to initialize the Payments data store API

* Include the fresh-data Payments data store in web app

* Refactor TransactionsList to React Component class

This is necessary to use the component with fresh-data. Currently the
component always shows an empty table.

* Add withSelect function

This is used to wrap components before exporting them, and allows
components to access the fresh-data data store.

* Wrap TransactionsList export with `withSelect`

This will allow us to access the fresh-data data store.

* Add hard coded test data to transactions fresh-data selector

The selector really shouldn't be using hard coded data, but this is for
testing! All for the greater good, I'm sure.

* Add transactions selector to the Payments API spec

* Retrieve data to display in TransactionsList using transactions selector

By retrieving the relevant selectors we can access the data from the
fresh-data data store, and use that to populate the transactions table.

As far as I understand this (@coderkevin would be a better person to
ask) the `withSelect` method basically injects data from the selector
into the component's `this.props`, allowing us to use the data in the
component.

* Update package-lock.json

* Fix wrong parameter name in `createApiClient`

* Add reducer for `fresh-data`

* Add lodash to dependencies

* Add read operation for transactions list

This operation defines how requests are sent for `fresh-data`
transactions resources, i.e. how the transactions list is retrieved.

* Expose the transactions list 'read' operation to `fresh-data`

* Add transactions list selector

The selector can be used to retrieve transactions list for components.
This commit also adapts the code to fit the new selector better.

* Add code to determine if the table loading view should be displayed

* Fix `getTransactionsLoading` function

Incorrectly accessing the resource object caused the timestamps to be
undefined when evaluating whether the transactions request is loading or
not.

* Update fresh-data version in package.json

* Change loading status selector to not specify requirements

* Export transactions operations to improve testability

* Remove unnecessary setup code from fresh-data data store initialization

* Add packages necessary to run tests

For some reason jest can't find '@wordpress/api-fetch' unless it's
installed. Even though the test doesn't actually _use_ api-fetch, it
complains because one of the included files imports api-fetch.

* Fix transactions operations

* Add transactions operation tests

* Add transactions selector tests

* Merge changes to transactions-list.js from master

* Add `showTransactionsPlaceholder` selector

Used to indicate whether the `TableCard` in the transactions list should
show the loading placeholder view or not.

* Fix `...` (spread operator) missing error.

Babel seems to need a specific package to support the `...` operator for
now.
See: babel/babel#10179 (comment)

npm i --save-dev @babel/plugin-proposal-object-rest-spread is sufficient
as a fix.
reykjalin added a commit to Automattic/woocommerce-payments that referenced this issue Aug 7, 2019
Babel seems to need a specific package to support the `...` operator for
now.
See: babel/babel#10179 (comment)

npm i --save-dev @babel/plugin-proposal-object-rest-spread is sufficient
as a fix.
reykjalin added a commit to Automattic/woocommerce-payments that referenced this issue Aug 9, 2019
* Add packages necessary to run tests

For some reason jest can't find '@wordpress/api-fetch' unless it's
installed. Even though the test doesn't actually _use_ api-fetch, it
complains because one of the included files imports api-fetch.

* Fix `...` (spread operator) missing error.

Babel seems to need a specific package to support the `...` operator for
now.
See: babel/babel#10179 (comment)

npm i --save-dev @babel/plugin-proposal-object-rest-spread is sufficient
as a fix.

* Fix transactions UI snapshot

* Change from named test import to default import

* Fix exports to accommodate snapshot tests

* Configure jest and snapshot to use same timezone

* Rename jest config files to better represent their purpose

Renamed `setup-globals.js` to `jest-file-setup.js` to reflect the fact
that it contains configurations run before each test file.

Renamed `global-setup-jest.js` to `jest-global-setup.js` to fit the
naming pattern used for the aforementioned rename. This file includes
a global configuration run before each test suite.
@lock lock bot added the outdated A closed issue/PR that is archived due to age. Recommended to make a new issue label Nov 1, 2019
@lock lock bot locked as resolved and limited conversation to collaborators Nov 1, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
i: bug outdated A closed issue/PR that is archived due to age. Recommended to make a new issue
Projects
None yet
Development

Successfully merging a pull request may close this issue.