refs https://github.com/TryGhost/Team/issues/1780
This commit adds some Cypress tests as a POC to the project. If we decide to go with Cypress, we can add more tests to cover the rest of the codebase. The main reason to have a E2E framework is that some editor related UI is hard to test with the React tests because it uses JSDOM.
no issue
When the state of a comment changes (e.g., after a like) the relative time would update. This is not desirable because it looks glitchy. If the relative time doesn't update every second, then it is better to never update it after the initial render.
ref https://github.com/TryGhost/Team/issues/1772
- all references of "Bio" to "Expertise" for Comments
- this commit is a breaking change as it relies on the API that returns `expertise` instead of `bio`.
refs https://github.com/TryGhost/Team/issues/1858
- PopupBox better reflects that it contains a Popup and is not a Popup
- In line with ContentBox, that contains the iframe with the comments content
refs https://github.com/TryGhost/Team/issues/1858
fixes https://github.com/TryGhost/Team/issues/1789
- Split up the Comment component in many small Components to make it easier to read and maintain
- Added support for synchronous actions, which are required for actions that affect the context state based on the current value (e.g., increasing a value by one) because of the asynchronous nature of setState:
Before this change
```
// Context state: {hello: 0};
dispatchAction('increaseHelloByOne')
dispatchAction('increaseHelloByOne')
```
Could end up having a state `{hello: 1}` instead of the expected `{hello: 2}`, because underlying this would resolve into:
```
// Context state: {hello: 0};
const hello = {hello: 0};
setState({hello: hello + 1});
setState({hello: hello + 1});
```
Instead of
```
// Context state: {hello: 0};
setState(({hello}) => {hello: hello + 1});
setState(({hello}) => {hello: hello + 1});
```
Synchronous actions now support this.
- Removed deprecated `onAction` context state function
- Replaced the boolean based form checking by the more reliable counter based checking that uses synchronous actions (reason we needed synchronous actions) (fixes https://github.com/TryGhost/Team/issues/1789)
- Prevent creating a new `dispatchAction` function every time the context state changes, by using bind. This prevents infinte updates in `useEffect` hooks that depend on `dispatchAction` and also update the context via actions.
refs https://ghost.slack.com/archives/C02G9E68C/p1660323308235919
- When opening and closing a popup very fast, it will stay in DOM, blocking all pointer events.
- The Headless UI component <Transition show={show}> is not removed from DOM when show is set to true, and false very fast
- Fixed this by forcing a popup to get removed from DOM after 250ms after is has been closed.
- Updated HeadlessUI version
- Moved testing packges to dev dependencies
