Répare l'integration en iframe, et rajoute une page de test accessible depuis l'app ()

source/sites/embauche.gouv.fr/App.js

@@ -6,6 +6,7 @@ import { Redirect, Route, Switch } from 'react-router-dom'
 import 'Ui/index.css'
 import Provider from '../../Provider'
 import About from './pages/About'
+import IntegrationTest from './pages/IntegrationTest'
 import Contact from './pages/Contact'
 import Couleur from './pages/Couleur'
 import Contribution from './pages/Contribution'
@@ -34,6 +35,7 @@ class EmbaucheRoute extends Component {
 					<Route path="/intégrer" component={Integration} />
 					<Route path="/contribuer" component={Contribution} />
 					<Route path="/couleur" component={Couleur} />
+					<Route path="/integration-test" component={IntegrationTest} />
 					<Redirect from="/simulateur" to="/" />
 					<Route component={Route404} />
 				</Switch>

source/sites/embauche.gouv.fr/iframe-script.js

@@ -1,12 +1,22 @@
+
 // Get the "couleur" parameter passed to this script
 let script = document.getElementById('script-simulateur-embauche'),
-	couleur = script.dataset['couleur'],
-	src = script.getAttribute('src'),
+	couleur = script.dataset.couleur,
+	baseUrl = script.dataset.iframeUrl || script.getAttribute('src').split('dist')[0],
 	integratorUrl = encodeURIComponent(window.location.href.toString()),
-	lang = script.dataset['lang']
+	lang = script.dataset.lang,
+	src = baseUrl + `?couleur=${couleur}&iframe&integratorUrl=${integratorUrl}&lang=${lang}`
+
+const iframe = document.createElement('iframe')
+const iframeAttributes = {
+	id: 'simulateurEmbauche',
+	src,
+	style: "border: none; width: 100%; display: block; margin: 0 auto; height: 45em",
+	allowfullscreen : true,
+	webkitallowfullscreen: true,
+	mozallowfullscreen: true
+}
+Object.entries(iframeAttributes).forEach(([key, value]) => iframe.setAttribute(key, value));
+
+script.replaceWith(iframe, null);
 
-document.write(`
-<iframe id="simulateurEmbauche" src="${
-	src.split('dist')[0]
-}?couleur=${couleur}&iframe&integratorUrl=${integratorUrl}&lang=${lang}" style="border: none; width: 100%; display: block; margin: 0 auto; height: 45em" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>
-`)

source/sites/embauche.gouv.fr/pages/IntegrationTest.js

@@ -0,0 +1,19 @@
+import React, { Component } from 'react'
+import { withRouter } from 'react-router'
+
+@withRouter
+export default class IntegrationTest extends Component {
+	componentDidMount() {
+		const script = document.createElement('script')
+		script.id = 'script-simulateur-embauche'
+		script['data-couleur'] = script.src =
+			window.location.origin + '/dist/simulateur.js'
+		script.dataset.couleur = '#2975D1'
+		script.dataset.iframeUrl =
+			window.location.origin + this.props.history.createHref({})
+		this.DOMNode.appendChild(script)
+	}
+	render() {
+		return <div ref={ref => (this.DOMNode = ref)} />
+	}
+}

source/webpack.common.js

@@ -16,12 +16,14 @@ module.exports = {
 		}
 	},
 	entry: {
-		embauche: ['./source/sites/embauche.gouv.fr/entry.js'],
 		infrance: ['./source/sites/mycompanyinfrance.fr/entry.js'],
+		embauche: ['./source/sites/embauche.gouv.fr/entry.js'],
+		// To not introduce breaking into the iframe integration, we serve simulateur.js from a 'dist' subdirectory 
+		'dist/simulateur': ['./source/sites/embauche.gouv.fr/iframe-script.js'],
 	},
 	output: {
 		path: path.resolve('./dist/'),
-		filename: '[name].[hash].js'
+		filename: ({ chunk }) => chunk.name === 'dist/simulateur' ? '[name].js' : '[name].[hash].js'
 	},
 	module: {
 		rules: [