Dispatch event when project identifier changes

[floehopper]

See this issue.

The integrated version of the editor in editor-ui redirects to the new project identifier URL after a project is remixed. However, the editor-standalone version which uses the editor web component was unable to detect changes in the project identifier and so the redirect was not working.

I've addressed this by making a new custom event ("editor-projectIdentifierChanged") available from the web component with the idea that we'll add an event listener in ProjectComponentLoader which redirects to the remixed project identifier URL (see https://github.com/RaspberryPiFoundation/editor-standalone/pull/63). The custom event is not dispatched when the project identifier is not set, because that's not currently useful in editor-standalone, but it would be easy enough to change.

This change should not change the behaviour of the projects-ui app which also uses the web component, because it is not listening for the new custom event. However, it would be easy enough to change that if it was desirable.

Note that I've added a separate integration test for WebComponentProject, because I wanted to use a real Redux store rather than the mock store that's being used in the unit test. This is the approach recommended in the Redux docs:

Our recommendation for testing Redux-connected React components is via integration tests that include everything working together, with assertions aimed at verifying that the app behaves the way you expect when the user interacts with it in a given manner.

I hope the directory/file-naming convention I've used makes sense: src/components/WebComponentProject/WebComponentProject.integration.test.js.

[github-actions[bot]]

• Github Run 8831472162
• Test coverage: 77%

[github-actions[bot]]

• Github Run 8831656251
• Test coverage: 77%

[github-actions[bot]]

• Github Run 8831732133
• Test coverage: 77%