tessceciliaj/tests-mouseclicker

Mouse Tracker x Testing

A collaboration between Therese Johansson and Ida Mäkelä

The application

This application is a small SPA that displays different UI elemnts depending on where the user clicks or move the mouse.

Acceptance criterias

• App

  • Coordinates from the mouse(onMouseMove) on the screen.
  • Header, Footer and Card components.

• Header

  • Cointains title and subtitle for the page and a count of how many times the user has clicked the button component "GetAStar"

• Main

  • Render main element.

• Card

  • Title
  • Information Text
  • Result Box
  • Get A Star button
  • Clicky Button

• ClickyButton

  • Result for ClickyButton event.
  • Button with a fireevent.

• Footer

  • Footer text

Project Overview

Components

1. Header Component (Header.jsx)

• This component represents the header of the web application.

2. Footer Component (Footer.jsx)

• The footer component.

3. Card Component (Card.jsx)

• Represents a card-like section within the application.
• Contains a title and information text.
• Includes two buttons labeled 'Get a Star' and 'Clicky button'.

4. ClickyButton Component (ClickyButton.jsx)

• A button component, inferred from the 'Clicky button' button within the Card component.

5. MouseTracker Component (MouseTracker.jsx)

• Tracks mouse movements and displays the X and Y coordinates.