heanfig

Instalación y configuracion de Jest + React Testing Library

En proyectos de React + Vite

1. Instalaciones:

yarn add --dev jest babel-jest @babel/preset-env @babel/preset-react 
yarn add --dev @testing-library/react @types/jest jest-environment-jsdom

2. Opcional: Si usamos Fetch API en el proyecto:

heanfig

[Unit]
Description=fallas masivas
Documentation=https://claro.com.co
After=network.target

[Service]
Environment=PORT=451
Type=simple
User=root
ExecStart=/usr/bin/node /opt/node/fallas-masivas/fallamasiva_back/dist/main.js

heanfig

Calificación 7.5 / 10: Se evidencia que trabajó en la prueba y que la prueba tecnica es completamente funcional e impelemnto estructuras HTML y de JSX

Observaciones Positivas

Uso tailwind como dependencia

Interfaz intuitiva

Posiblemente todos los casos de uso quedaron funcionales

Implemento getServerSideProps y getStaticPaths

Hizo uso de efectos

Lo desplegó en vercel

Implementó los hooks de GraphQL

heanfig

// see https://stackoverflow.com/questions/26356899/is-it-possible-to-add-a-dynamic-unit-to-a-unitless-number-in-sass
@function length($number, $unit) {
  $strings: 'px' 'cm' 'mm' '%' 'ch' 'pica' 'in' 'em' 'rem' 'pt' 'pc' 'ex' 'vw' 'vh' 'vmin' 'vmax';
  $units:   1px  1cm  1mm  1%  1ch  1pica  1in  1em  1rem  1pt  1pc  1ex  1vw  1vh  1vmin  1vmax;
  $index: index($strings, $unit);

  @if not $index {
    @warn "Unknown unit `#{$unit}`.";
    @return false;
  }

heanfig

@function length($number, $unit) {
  $strings: 'px' 'cm' 'mm' '%' 'ch' 'pica' 'in' 'em' 'rem' 'pt' 'pc' 'ex' 'vw' 'vh' 'vmin' 'vmax';
  $units:   1px  1cm  1mm  1%  1ch  1pica  1in  1em  1rem  1pt  1pc  1ex  1vw  1vh  1vmin  1vmax;
  $index: index($strings, $unit);

  @if not $index {
    @warn "Unknown unit `#{$unit}`.";
    @return false;
  }

heanfig

@mixin flex($justify-content:false, $align-items:false){
    display:flex;
    @if $justify-content{
        justify-content:$justify-content;
    }
    @if $align-items{
        align-items:$align-items;
    }
}

heanfig

@mixin flex($justify-content:false,$align-items:false){
    display:flex;
    @if $justify-content {
        justify-content: $justify-content;
    }
    @if $align-items {
        align-items: $align-items;
    }
}

heanfig

@mixin flex($justify-content:false){
    display:flex;
    @if $justify-content {
        justify-content: $justify-content;
    }
}

body{
    @include flex;
}

heanfig

function sym(...args) {
    return args.reduce( (a,b,i) => {
        return [...new Set([
            ...a.filter(item => !b.find(aux=>aux===item)),
            ...b.filter(item => !a.find(aux=>aux===item) )
        ].sort((a,b)=>a-b))]
    },[]);
}
  

heanfig

function sym(...args) {
    return args.reduce( (a,b,i) => {
        const valoresA = a.filter(item => !b.find(aux=>aux===item));
        const valoresB = b.filter(item => !a.find(aux=>aux===item));
        const resultado = new Set([...valoresA, ...valoresB]);
        return [...resultado].sort((a,b)=>a-b) 
    },[]);
}

console.log(sym([3, 3, 3, 2, 5], [2, 1, 5, 7], [3, 4, 6, 6])); //[1, 4, 6, 7]