Virtual Automation Engineer Website Application UI Prototype Challenge

• Briefing about the application
  We need your help to create a prototype for a workflow-based application (web) which serves as a Virtual Automation Engineer, it will be an Intelligent automation system powered by Artificial Intelligence (Machine Learning), which enables autonomous generation, intelligent self-healing for changes and execution of automation scripts aligned with contextual test data, that has the potential to disrupt the approach towards test automation, with a goal of higher efficiency, productivity, and quality.

• Basic goal of the challenge
  The goal of this challenge is to develop an Angular based prototype which will run on desktop only (browser).

• Technology and Framework details

  • Angular (latest stable version).
  • HTML
  • CSS/SCSS

Project Background

• Prior to this challenge, we created a UI design you will follow as requirements guidelines (attached in forums).
• After this challenge, we will integrate backend services into the prototype.

General requirements

• HTML: use standard W3C validator https://validator.w3.org/
• CSS: http://jigsaw.w3.org/
• Linter: for TS code.

• Must support desktop (browser).
• Tablet and mobile views out of scope.
• Layout width should be fluid.
• Header/footer backgrounds must extend to the edges of the viewport no matter the screen dimension. Content must stay centered for large screen scenarios.
• Desktop breakpoint: 1025px and higher.

• Must support retina display.

• For creating this application custom fonts as in the storyboard should be used. The fonts are attached to the challenge.

• Most of the common functions such as sorting, filtering, pagination, etc, are out of scope.
• UI data must be pulled from JSON files in order to easily integrate with API calls.

• Desktop: IE11+ (Windows)
• Latest Firefox (Mac & Windows)
• Latest Safari (Mac)
• Chrome Browsers (Mac & Windows)

Application development requirements

• Custom scroll bar not needed.

• User should be able to login with the username and password.
• Show password feature should be functional (clicking eye icon displays the password int the input box).
• Provide error validation use case (screen 01).

• Implement tooltips and hover menus (hover on ‘...’ icon).
• Reuse modals for renaming and deleting confirmation, as in screens 10 and 13 respectively.
• For screen 42, implement a dark/light mode environment. For this challenge, all pages must be dark mode. Light mode will be available only for home page; however, keep in mind in the future the light mode styling will be completed, so you should provide a flexible way to keep adding CSS code to skin the light mode.
• Clicking project (icon + title) from any of the recent projects opens Modeling page (screen 05).

• Clicking home icon goes back to the home page.
• Model view link is a dead link, not in scope.
• This page should have the following panels. 
  • Models (must support collapse/expand feature)
  • Modeling Canvas.
  • Shape Properties (must support collapse/expand feature)
  • Steps (must support collapse/expand feature)
• Models panel:
  • Remove list/grid icons (not needed). Extend the search box to fill up the space from the removed icons.
  • Clicking add models opens a modal (screen 10). After entering the name the item gets added to the list.
  • Items can be renamed (screens 11-12).
  • Items can be deleted from the list (screen 13). Items gets removed from the list after confirming.
  • The search must be functional. Simple algorithm, just for demonstration purposes.
  • Double-clicking on the model name should open the model inside Modelling Canvas. Every model should be opened in a new tab.
• Modeling Canvas:
  • This panel should open new tabs on double-clicking a model name.
  • Analyze and save button features are out of scope.
  • Provide dropdown feature for Edit and Layout options (screens 7 and 8).
  • Clicking the edit icon (pencil) in the tab name allows renaming the model/tab (reuse renaming modal - screen 11).
  • Clicking the close icon (x) closes the selected tab.
  • Clicking the plus icon opens the new model modal (screen 10). After entering the model name it should be opened in a new tab.
  • Grid:
    • Pointer, square, circle and question tools must be selectable. The only functional one should be square.
    • Once the user selects the square she can draw a non-resizable square (dimensions of the Rectangle_101 box).
    • User can move/drag the box, which should be pinned to the grid/canvas.
    • User can scroll the canvas when the number of elements can’t fit the window view height.
  • User stories:
    • Clicking the user stories button opens the dialog to link user stories to a model (screen 09).
    • There is check/uncheck all feature, implement it.
    • Search feature is out of scope.
• Shape panel:
  • Text color, shape color, border color, text color, and link color (these elements) should have hover effect: open a color picker (not designed, up to you)
  • Add the following to the bottom of the list (missing from design):
    • ForeColor 
    • Text Font
    • BorderColor.
  • BackColor, ForeColor and BorderColor should open a color picker.
  • Text Font should open a font picker
• Steps panel:
  • Select dropdown options are: Given, When, Then, And, But.
  • When user enters a name in the textbox, clicks ‘Enter’ key or save icon (bottom right), a new item is added based on the entered information. The new item gets added on the top of the list. The list should scroll for more than six items. 
  • Buttons/icons from the bottom row should have a hover effect. Plus, delete and arrow buttons features are out of scope.

• Pagination is out of scope.
• Implement check/uncheck all scenarios.
• Once at least one item from the list is selected, the ‘upload’ option in the top right are must show up (hiding the previous buttons).
• Clicking edit shows screen 18 modal.
• Clicking delete shows a delete confirmation modal.
• Clicking view out of scope.

• A scenario will have a sequence of pages. During Add/ Edit Scenario only one page that is selected should be expanded (displayed) and the objects listed. On moving to another screen/page, the earlier expanded page objects screen should automatically collapse.
• There should be only one active page at a time.
• User can drag/drop pages from the Pages panel to the Page Sequence panel.
• Pages and Page Objects should be sortable through dragging in both pages panels.
• Page Sequence panel is scrollable after 5 items.
• Grab objects button feature is out of scope.
• Form should be common for both add new scenario and edit scenario option on Scenario Manager page with below fields:
  • Scenario Name.
  • Scenario description.
  • Page Name (dropdown list with search capability)
  • Control object (dropdown list with search capability). 
    • Submit
    • Search
    • Login
    • Signout
    • Register
  • Page Objects
    • Object Name (dropdown)
    • Action (dropdown):
      • Input
      • Click
      • Select
      • Assert
      • Highlight
      • Launch
    • Xpath
    • Test Data - editable (user will input this value)

• In scenarios panel, only one element can be selected at a time.
• Iterations panel is collapsible/expandable, as well as the individual iterations within.
• Iteration name is automatically created (can’t be changed). User can add N amount of parameters which are editable/deletable.
• User can delete several iterations at a time through the checkbox selection. Implement check/uncheck all feature.

• Test Suites panel:
  • Copy feature is out scope.
  • Check/uncheck all feature is required.
  • Plus icon triggers a modal to enter suite case name (reuse screen 10).
  • Edit (pencil) triggers a rename modal for a selected suite case.
  • Delete icon triggers a delete confirmation modal.
• Scenarios panel:
  • Panel is collapsable/expandable.
  • User can drag one scenario with one single iteration (screen 25 and 26). Scenario gets automatically added to the execution grid.
  • User can drag one scenario with multiple iterations to the execution grid. Once dropped, a list of iteration should be displayed so the user can select which ones to place in (screen 27).
• Execution panel:
  • Check/uncheck all feature is required.
  • All buttons features from top right of this panel are out of scope.
  • View is out of scope.
  • Clicking delete should trigger a delete confirmation modal.

Deployment & maintainability

• Add a README.md file to document environment and deployment details.
• Document how to access all the specific scenarios of the wireframes.
• After winning the challenge, you will be invited to host the application in a heroku environment. Make sure your deployment is heroku-friendly
• The following command must not generate any errors `ng build --prod`.
• Use this template.

HTML requirements

• HTML should be valid HTML5 compliant.
• Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
• Please use clean INDENTATION for all HTML code so future developers can follow the code.
• All HTML code naming should not have any conflicts or errors.
• Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
• Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
• No inline CSS styles- all styles must be placed in an external stylesheet.
• Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.

CSS requirements

• Use CSS3 Media Queries to load different styles for each page. Do not build different page for different device/layout.
• You may use SCSS in the project.
• Autoprefixer can be set up as a part of build process.
• You may use Stylelint in the project.
• Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
• Please use clean INDENTATION for all CSS so developers can follow the code.
• All CSS naming should not have any conflicts.
• As possible use CSS3 style when create all styling.
• Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page.
• Only use table tags for tables of data/information and not for page layout.

JS requirements

Angular requirements

• Code should follow the best practices of ECMAScript 5 (ES5) or above.
• Use Angular-CLI to create the project structure. Unite tests are not necessary, don’t include that.
• Split the code into Reusable components.
• These are the expected modules:  Core, Shared and lazy-loaded Feature modules.
• Core Modules:  All services which have to have one and only one instance per application (singleton services) should be implemented here.
• SharedModule: All the “dumb” components and pipes should be implemented here.
• Lazy Loading: We should lazy load our feature modules whenever possible. 
• If the official framework documentation says specific way or approach to do something, and you did differently with no solid reason, that's valid for scoring down.

Licenses & attribution

• Third-party assets used to build your item must be properly licensed or free for commercial use. MIT, some modified BSD, Apache 2 licenses are ok. If a library is not commercial friendly you will need to get our approval first.
• Sufficient information regarding third-party assets must be present in your documentation. This includes the author, license info and a direct link to the asset online.

Final Submission Guidelines

Deliverables
Provide all your files within a zip container.