Front-End

Window.postMessage() is introduced to handle communication between components that has no connection other then the need to communicate/trigger events. Eg. its used to communicate with the syncBar to get it to perform a new status check. To read more see: Window.postMessage Usage Dispatching a message event is done the following way: // variables should be used for messages var SAVED_EVENT = 'SAVED' window.postMessage(SAVED_EVENT, window.location.href); Catching the event is done by adding an event listener to the component one needs to communicate with: »

Summary Styling in React is done per component using a combination of Material-UI and compatible JSS. Components shall not be styled with CSS classes in .CSS files. Different component types should use different styling methods, or a combination. Proposed order of styling methods The following order is proposed when considering styling methods: Styled Components (Accepts props, logic, theming) Material-UI’s JSS (Accepts theming) Inline Styling, the React way (Accepts props, logic, theming. »

When should you write tests? Unit testing includes testing of javascript functions and react/UI components. Listing of the highest priority of unit-testing: API calls with the correct formatted parameters Rendering of isolated components. Functions in general. Exporting and importing your component A quick way to get started testing your component is first to export the React Component: export class CloneServiceComponent extends React.Component<ICloneServiceComponentProps & RouteChildrenProps, ICloneServiceComponentState> { and then reference it in your test the following way: »

The frontends, both for Altinn Studio and Apps are set up as node modules, using a package.json to import external dependencies. In package.json for each package we can specify the version of the package. In this context, package refers to the different applications we are bulding, such as altinn-app-frontend, receipt, etc. Each time we make a change to a package, we need to update the version of the package to reflect the change. »