The process of changing out expandable elements in a large-scale web application
Vehabovic, Armin (2020)
Vehabovic, Armin
2020
All rights reserved. This publication is copyrighted. You may download, display and print it for Your own personal use. Commercial use is prohibited.
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi-fe202101061168
https://urn.fi/URN:NBN:fi-fe202101061168
Tiivistelmä
The Nordic insurance company IF is taking on a new company-wide image which will define its new visual identity. Given the large amount of work, the My Pages team which is responsible for the Nordic self-service portal in IF, is doing the work in smaller iterations. This will facilitate the transition to the new visual identity. While the overall work has already started, a major part of the project remains to be changed so that it adapts to the new visual identity. The work done in this thesis is a description of the process that I as part of the My Pages team followed to successfully achieve that goal.
An expandable element is a visual element that when collapsed has the most important information visible and can be clearly distinguished to be clickable. After clicking the expandable element, the content is pushed down, and a hidden area below the expandable element is toggled which contains more descriptive information. We describe here the work done to implement the new expandable elements from IF’s own visual identity library in My Pages. First, the incorporation of the expandable element from the Visual Identity Library is made. Then the implementation of the custom My Pages changes to the expandable elements is done. The custom functionality puts structure to more information in the expandable element and makes it more readable. Furthermore, the tests which fail after the implementation of the expandable elements are fixed and those that randomly fail are improved so that they run successfully throughout the runs.
My Pages web application is built upon multiple programming languages and libraries, such as HTML, SCSS, JavaScript, and jQuery, which are integrated into the ASP.NET web framework. The implementation of the new expandable elements required in-depth modification of the whole project and its components. The team works with an Agile methodology and the documenting of the work progress is done in Azure DevOps and it is followed up in daily team meetings. To successfully fix the feature tests we use the following technologies and libraries: Specflow (which is a Behavior Driven Development test framework that does the coupling of feature tests files with scenarios for each individual step), Selenium WebDriver (which does the automation of tests execution in the browser), Chromedriver (that is a bridge between the actions of the feature tests and the Chrome browser) and TeamCity which is a continuous integration server that hosts the execution of the feature tests and creates the CI Builds. Finally, the deployment of the solution to production use is done with Octopus setup (which deploys packages with scripts containing ARM templates to different environments).
An expandable element is a visual element that when collapsed has the most important information visible and can be clearly distinguished to be clickable. After clicking the expandable element, the content is pushed down, and a hidden area below the expandable element is toggled which contains more descriptive information. We describe here the work done to implement the new expandable elements from IF’s own visual identity library in My Pages. First, the incorporation of the expandable element from the Visual Identity Library is made. Then the implementation of the custom My Pages changes to the expandable elements is done. The custom functionality puts structure to more information in the expandable element and makes it more readable. Furthermore, the tests which fail after the implementation of the expandable elements are fixed and those that randomly fail are improved so that they run successfully throughout the runs.
My Pages web application is built upon multiple programming languages and libraries, such as HTML, SCSS, JavaScript, and jQuery, which are integrated into the ASP.NET web framework. The implementation of the new expandable elements required in-depth modification of the whole project and its components. The team works with an Agile methodology and the documenting of the work progress is done in Azure DevOps and it is followed up in daily team meetings. To successfully fix the feature tests we use the following technologies and libraries: Specflow (which is a Behavior Driven Development test framework that does the coupling of feature tests files with scenarios for each individual step), Selenium WebDriver (which does the automation of tests execution in the browser), Chromedriver (that is a bridge between the actions of the feature tests and the Chrome browser) and TeamCity which is a continuous integration server that hosts the execution of the feature tests and creates the CI Builds. Finally, the deployment of the solution to production use is done with Octopus setup (which deploys packages with scripts containing ARM templates to different environments).