https://github.com/vladimirrotariu/oop-components-testing

We created some components using solely OOP/SOLID principles, WITHOUT the help of any web framework/library. Component tests with JEST included.
https://github.com/vladimirrotariu/oop-components-testing

Last synced: about 1 month ago
JSON representation

We created some components using solely OOP/SOLID principles, WITHOUT the help of any web framework/library. Component tests with JEST included.

• Host: GitHub
• URL: https://github.com/vladimirrotariu/oop-components-testing
• Owner: vladimirrotariu
• Created: 2023-07-28T17:25:22.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-09-03T07:31:07.000Z (over 1 year ago)
• Last Synced: 2024-10-17T13:32:48.909Z (3 months ago)
• Language: TypeScript
• Homepage: https://oop-components-testing-ofq15ebub-vladimirrotariu.vercel.app/
• Size: 208 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        






  













# PokeDex Components

## Description

We created some components using solely OOP/SOLID principles, WITHOUT the help of any web framework/library, such as React, Angular etc. We took extra care for the components to have a single functionality, i.e. of showing the information passed to them, and we tested them accordingly with JEST. The information we passed has a demonstrative role, and it comes from the  [RESTful PokeApi](https://pokeapi.co/).

* Example of navbar element component

```

class NavigationElementComponent extends Component {

  constructor(

    parentElement: Element,

    private readonly textNavigationElement: string,

    private readonly redirectPageUrl = "",

    private readonly actionOnClick = console.clear,

  ) {

    const tag = "li";

    const className = "controls__navigation-element";

    super(parentElement, tag, className);

  }

  render() {

    this.parentElement.append(this.element);

    

    const text = this.textNavigationElement;

    this.element.innerHTML = `

    ${text}

    `;

    const buttonElement = this.element.querySelector(".button")!;

    buttonElement.addEventListener("click", () => {

      this.actionOnClick();

    });

  }

}

``` 

* Companion website to visualize components: [COMPANION_WEBSITE_OOP_components](https://oop-components-testing-ofq15ebub-vladimirrotariu.vercel.app/).

## Tech stack:

* Web: TypeScript, HTML5, CSS3/Sass.

* Testing: JEST

* CI/CD: GitHub Actions, SonarCloud.

* Interacting with a RESTful API

## Testing

We included here ONLY istanbul report for component-wise testing. If one wishes to generate the individual istanbul reports, the following script might come handy after cloning the repository and installing the node packages:

```

npm run test:coverage

```