documentation: preparing release article

articles/5.0.0.md

@@ -1,6 +1,6 @@
-# UI5 Test Runner version 5.0.0
+# UI5 Test Runner 5.0.0
 
-The version 5.0.0 is fresh out of the press.
+The version 5.0.0 of [`ui5-test-runner`](https://www.npmjs.com/package/ui5-test-runner) was just released and this is the perfect opportunity to re-explain the tool's purpose.
 
 In this article, we will assume that the reader has no knowledge of UI5 or testing. Hence the first two parts will make a **brief summary** of the framework and a **rapid overview** of testing strategies when developing UIs.
 
@@ -10,8 +10,7 @@ If you are already familiar with these concepts, it is then recommended to jump
 
 ### What is UI5 ?
 
-Because of the name itself, it sounds pretty obvious that UI5 is about **User Interface**.
-It's not a mystery, there are many UI development frameworks *(and libraries)* existing for JavaScript.
+Because of the name itself, it sounds pretty obvious that UI5 is about **User Interface**. It's not a mystery, the JavaScript ecosystem is huge and there are many UI development frameworks *(and libraries)*.
 
 A quick look to [state of JS](https://2022.stateofjs.com/en-US/libraries/front-end-frameworks/) illustrates that the most used are : [React](https://react.dev/), [Angular](https://angular.io/) and [Vue](https://vuejs.org/).
 
@@ -51,23 +50,32 @@ The next two screenshots are captured from the **same** [sample application](htt
 
 UI5 comes with a **different paradigm** : instead of letting the developers struggle with HTML *(like most popular frameworks)*, it is **widget-based**. It means that the developer focuses more on building the user interface in terms of **assembling components** rather than fine tuning HTML and CSS to create a decent look.
 
-The following example illustrates how to design login screen with an XML syntax.
+The following example illustrates how to design a dialog using the XML syntax.
 
 ```xml
-<core:View height="100%" controllerName="app.controllers.login" xmlns="sap.m" xmlns:core="sap.ui.core">   
-  <Page id="loginPage" enableScrolling="false" title="{i18n>LoginPageTitle}">
-    <VBox fitContainer="true" justifyContent="Center" alignItems="Center">
-      <Label id="lblLogin" text="{i18n>Login}" labelFor="inpLogin" />
-      <Input id="inpLogin" editable="true" />
-      <Label id="lblPassword" text="{i18n>Password}" labelFor="inpPassword" />
-      <Input id="inpPassword" type="Password" editable="true" />
-      <Button id="bntLogin" text="{i18n>Login}" press="onLogin" />
-    </VBox>
-  </Page>
-</core:View>
+<Dialog id="todoItem" title="{Title}" icon="{path: '', formatter: '.getIconSafe'}">
+  <form:SimpleForm layout="ResponsiveGridLayout" singleContainerFullSize="false">
+    <Label text="{i18n>form.Title}" />
+    <Input id="title" type="text" value="{Title}" visible="{= !${Completed} }" />
+    <Label text="{i18n>form.DueDate}" />
+    <DateTimePicker id="dueDate" dateValue="{DueDate}" editable="{= !${Completed} }" />
+    <Label text="{i18n>form.CompletionDate}" visible="{Completed}" />
+    <DateTimePicker id="completionDate" dateValue="{CompletionDate}" editable="false" visible="{Completed}" />
+  </form:SimpleForm>
+  <beginButton>
+    <Button id="btnOK" press="onFormOK" text="{i18n>form.OK}" type="Accept" visible="{= !${Completed} }" />
+  </beginButton>
+  <endButton>
+    <Button id="btnCancel" press="onFormCancel" text="{i18n>form.Cancel}" />
+  </endButton>
+</Dialog>
 ```
 
-> Login View expressed in XML
+> Example dialog expressed in XML
+
+![Example dialog](example-dialog.png)
+
+> Resulting dialog after bindings are applied
 
 ### A growing ecosystem
 
@@ -127,7 +135,7 @@ All the documentation about how to use TypeScript in UI5 can be found [here](htt
 
 ## Test
 
-The best way to summarize the **testing strategies** is to explain the **test pyramid** : this visual concept enumerates the **different types** of tests and **quantifies** how much of each type should be done in an ideal project.
+The best way to summarize the **testing strategies** is to recall the **test pyramid** : this visual concept enumerates the **different types** of tests and **quantifies** how much of each type should be done in an ideal project.
 
 ![Test pyramid](test-pyramid.png)
 
@@ -193,6 +201,9 @@ In order to execute these tests in a CI/CD pipeline, a karma runner was customiz
 
 Problems :
 
+* configuration file
+* all tests executed in one window
+
 
 ### UI5 Test Runner