-
-Details
-
-
-Not Found
-
-
-### Navegación
-
-Al buscar un usuario por el login de búsqueda de github, acceda a la página de resultados de la búsqueda con los detalles del usuario, de lo contrario, mostrará la página de Not Found (Layout NotFound).
-
-### Requisitos
-
-- Yo, como usuario, quiero buscar un usuario de GitHub;
-- Yo, como usuario, deseo ver los detalles de aquel usuario que fue buscado (número de seguidores, imagen del avatar, e-mail y bio);
-- Yo, como usuario, en la pantalla de detalhes puedo hacer una nueva busca;
-- Yo, como usuario, deseo ver la lista de repositorios de aquel usuario que fue buscado, ordenada por el número decreciente de estrellas;
-- Yo, como usuario, en la pantalla de detalhes puedo hacer click en nombre de repositorio e ir para pantalla del repositorio en github;
-- Yo, como usuario, en la pantalla de detalhes puedo hacer click en nombre usuariio y imagem del perfil, y ir para pantalla de perfil en github;
-
-**Definición de listo**
-
-El proyecto debe ser implementado de acuerdo con las especificaciones de Zeplin, no es obligatorio usar una estructura, pero recomendamos el React.js, Angular, Vue, o algún FW más actual. El uso de rutas es obligatorio (Ex: / users / {username} / repos).
-
-### Criterios de evaluación
-
-Buscamos personas que buscan siempre aprender cosas nuevas y estar actualizadas con el Mercado, disfrutar de buenas prácticas y calidad.
-
-- Organización del proyecto: La estructura del proyecto, documentación y uso del control de versión;
-- Innovación tecnológica: el uso de nuevas tecnologías, siempre que sean estables;
-- Consistencia: Si se cumplen los requisitos;
-- Buenas prácticas: Si el proyecto sigue buenas prácticas de desarrollo, incluyendo seguridad, optimización, código limpio y reutilizable, etc;
-- Control de Calidad: Si el proyecto tiene calidad asegurada por pruebas unitarias (por ejemplo, Jasmine, Mocha, Chai, Jest, etc).
-- No utilice Frameworks CSS (Boostrap, Material Angular, etc). Queremos entender cuál es su conocimiento con CSS.
-- El uso de preprocesador es muy bienvenido (Sass, Less) y ganará puntos.
-- El layout propuesto es bastante simple, pero tiene puntos que pueden ser reutilizados, reflexione sobre lo que se puede crear como componente. Analice bien el diseño y lo que se repite. Monte su biblioteca de componentes. Sugerencia, un término muy utilizado es webcomponent.
-- Documentación del proyecto, en el README.md debe ser creado y explicadar como se puede levantar la aplicacion en ambiente local, ejecutar pruebas unitarias, etc.
-- Git, el control de versión se analizará también, por lo que los commits, descripciones que se hizo en aquel commit también contará en el análisis.
-- Nomenclatura, el idioma para el código base debe estar en inglés y el idioma dirigido para el usuario en Español.
-- Requerimiento obligatorio: la página de busqueda debe pertenecer a un modulo diferente de la página de detalle.
-- El layout que esta en Zeplin se comparte cuando nuestro Recursos Humanos entran en contacto, y el css que es generado por él no debe ser utilizado. El foco es crear algo de cero y pensando en los webcomponentes reutilizables.
-
-Cada ítem arriba será evaluado y contará puntos en la evaluación final, por lo tanto aplique todo su conocimiento.
-
-### Entrega
-
-Siga los siguientes pasos para implementar y enviar este desafío:
-- Haga un **Fork** a este repositorio. Puedes mirar esta guía para mayores informaciones: [Como hacer fork de un repositorio](https://help.github.com/en/articles/fork-a-repo).
-- Implemente el desafío.
-- Después de completar el desafío, realice un **Pull Request** a este repositorio, utilizando la interface de **Github**. [Creando un Pull Request](https://help.github.com/en/articles/creating-a-pull-request-from-a-fork).
-- Si es posible, deja tu repositorio publico para hacer la revisión de código más sencilla.
-
-Ademas de eso, la aplicación debe alojarse (Heroku, Netlify, Firebase, Plunker, etc.) y cumplir con los requerimientos. Las direcciones URL deben ser agregadas a el README del proyecto.
-
-### Plazo
-
-El tiempo de entrega de 7 días.
-
-Si el equipo de Recursos Humanos no te ha contactado, escribe a trabajeconnosotros@concrete.com.br
-
-¡Buena suerte!
+* abrir la consola y ubicarse en la carpeta raíz del proyecto
+* ejecutar ```npm install``` para instalar las dependencias
+* ejecutar ```npm start``` para correr el proyecto
+* El proyecto se desplegara en http://localhost:4200/ por defecto
diff --git a/angular.json b/angular.json
new file mode 100644
index 00000000..d23ea655
--- /dev/null
+++ b/angular.json
@@ -0,0 +1,128 @@
+{
+ "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+ "version": 1,
+ "newProjectRoot": "projects",
+ "projects": {
+ "frontend-recruiting-hsa": {
+ "projectType": "application",
+ "schematics": {
+ "@schematics/angular:component": {
+ "style": "scss"
+ }
+ },
+ "root": "",
+ "sourceRoot": "src",
+ "prefix": "app",
+ "architect": {
+ "build": {
+ "builder": "@angular-devkit/build-angular:browser",
+ "options": {
+ "outputPath": "dist/frontend-recruiting-hsa",
+ "index": "src/index.html",
+ "main": "src/main.ts",
+ "polyfills": "src/polyfills.ts",
+ "tsConfig": "tsconfig.app.json",
+ "aot": true,
+ "assets": [
+ "src/favicon.ico",
+ "src/assets"
+ ],
+ "styles": [
+ "src/styles.scss"
+ ],
+ "scripts": []
+ },
+ "configurations": {
+ "production": {
+ "fileReplacements": [
+ {
+ "replace": "src/environments/environment.ts",
+ "with": "src/environments/environment.prod.ts"
+ }
+ ],
+ "optimization": true,
+ "outputHashing": "all",
+ "sourceMap": false,
+ "extractCss": true,
+ "namedChunks": false,
+ "extractLicenses": true,
+ "vendorChunk": false,
+ "buildOptimizer": true,
+ "budgets": [
+ {
+ "type": "initial",
+ "maximumWarning": "2mb",
+ "maximumError": "5mb"
+ },
+ {
+ "type": "anyComponentStyle",
+ "maximumWarning": "6kb",
+ "maximumError": "10kb"
+ }
+ ]
+ }
+ }
+ },
+ "serve": {
+ "builder": "@angular-devkit/build-angular:dev-server",
+ "options": {
+ "browserTarget": "frontend-recruiting-hsa:build"
+ },
+ "configurations": {
+ "production": {
+ "browserTarget": "frontend-recruiting-hsa:build:production"
+ }
+ }
+ },
+ "extract-i18n": {
+ "builder": "@angular-devkit/build-angular:extract-i18n",
+ "options": {
+ "browserTarget": "frontend-recruiting-hsa:build"
+ }
+ },
+ "test": {
+ "builder": "@angular-devkit/build-angular:karma",
+ "options": {
+ "main": "src/test.ts",
+ "polyfills": "src/polyfills.ts",
+ "tsConfig": "tsconfig.spec.json",
+ "karmaConfig": "karma.conf.js",
+ "assets": [
+ "src/favicon.ico",
+ "src/assets"
+ ],
+ "styles": [
+ "src/styles.scss"
+ ],
+ "scripts": []
+ }
+ },
+ "lint": {
+ "builder": "@angular-devkit/build-angular:tslint",
+ "options": {
+ "tsConfig": [
+ "tsconfig.app.json",
+ "tsconfig.spec.json",
+ "e2e/tsconfig.json"
+ ],
+ "exclude": [
+ "**/node_modules/**"
+ ]
+ }
+ },
+ "e2e": {
+ "builder": "@angular-devkit/build-angular:protractor",
+ "options": {
+ "protractorConfig": "e2e/protractor.conf.js",
+ "devServerTarget": "frontend-recruiting-hsa:serve"
+ },
+ "configurations": {
+ "production": {
+ "devServerTarget": "frontend-recruiting-hsa:serve:production"
+ }
+ }
+ }
+ }
+ }},
+ "defaultProject": "frontend-recruiting-hsa"
+}
diff --git a/e2e/protractor.conf.js b/e2e/protractor.conf.js
new file mode 100644
index 00000000..f238c0bb
--- /dev/null
+++ b/e2e/protractor.conf.js
@@ -0,0 +1,36 @@
+// @ts-check
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter, StacktraceOption } = require('jasmine-spec-reporter');
+
+/**
+ * @type { import("protractor").Config }
+ */
+exports.config = {
+ allScriptsTimeout: 11000,
+ specs: [
+ './src/**/*.e2e-spec.ts'
+ ],
+ capabilities: {
+ browserName: 'chrome'
+ },
+ directConnect: true,
+ baseUrl: 'http://localhost:4200/',
+ framework: 'jasmine',
+ jasmineNodeOpts: {
+ showColors: true,
+ defaultTimeoutInterval: 30000,
+ print: function() {}
+ },
+ onPrepare() {
+ require('ts-node').register({
+ project: require('path').join(__dirname, './tsconfig.json')
+ });
+ jasmine.getEnv().addReporter(new SpecReporter({
+ spec: {
+ displayStacktrace: StacktraceOption.PRETTY
+ }
+ }));
+ }
+};
\ No newline at end of file
diff --git a/e2e/src/app.e2e-spec.ts b/e2e/src/app.e2e-spec.ts
new file mode 100644
index 00000000..5ee44e26
--- /dev/null
+++ b/e2e/src/app.e2e-spec.ts
@@ -0,0 +1,23 @@
+import { AppPage } from './app.po';
+import { browser, logging } from 'protractor';
+
+describe('workspace-project App', () => {
+ let page: AppPage;
+
+ beforeEach(() => {
+ page = new AppPage();
+ });
+
+ it('should display welcome message', () => {
+ page.navigateTo();
+ expect(page.getTitleText()).toEqual('frontend-recruiting-hsa app is running!');
+ });
+
+ afterEach(async () => {
+ // Assert that there are no errors emitted from the browser
+ const logs = await browser.manage().logs().get(logging.Type.BROWSER);
+ expect(logs).not.toContain(jasmine.objectContaining({
+ level: logging.Level.SEVERE,
+ } as logging.Entry));
+ });
+});
diff --git a/e2e/src/app.po.ts b/e2e/src/app.po.ts
new file mode 100644
index 00000000..b68475e0
--- /dev/null
+++ b/e2e/src/app.po.ts
@@ -0,0 +1,11 @@
+import { browser, by, element } from 'protractor';
+
+export class AppPage {
+ navigateTo(): Promise
+
diff --git a/src/app/details/details.component.scss b/src/app/details/details.component.scss
new file mode 100644
index 00000000..961783a9
--- /dev/null
+++ b/src/app/details/details.component.scss
@@ -0,0 +1,29 @@
+@import "~src/app/styles/variables";
+
+img {
+ width: 100%;
+}
+
+p {
+ font-size: 20px;
+ color: $lightgray;
+ margin: 0 0 10px;
+ font-weight: 300;
+
+ img {
+ margin-right: 8px;
+ width: 18px;
+ }
+}
+
+a {
+ text-decoration: none;
+ display: block;
+ font-size: 35px;
+ margin-bottom: 10px;
+ color: black;
+}
+
+.user {
+ margin-bottom: 20px;
+}
diff --git a/src/app/details/details.component.spec.ts b/src/app/details/details.component.spec.ts
new file mode 100644
index 00000000..3505e504
--- /dev/null
+++ b/src/app/details/details.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DetailsComponent } from './details.component';
+
+describe('DetailsComponent', () => {
+ let component: DetailsComponent;
+ let fixture: ComponentFixture
+ 
+ {{ user.company }}
+
+ 
+ {{ user.location }}
+
+ 
+ {{ user.public_repos }}
+
+ 
+ {{ user.followers }}
+
{{ repo.description }}
+ +
{{ repo.stargazers_count }}
+
diff --git a/src/app/repo/repo.component.scss b/src/app/repo/repo.component.scss
new file mode 100644
index 00000000..7cc3bca3
--- /dev/null
+++ b/src/app/repo/repo.component.scss
@@ -0,0 +1,32 @@
+@import "~src/app/styles/variables";
+
+:host {
+ display: block;
+ margin-bottom: 35px;
+}
+
+a {
+ font-size: 35px;
+ color: $purple;
+ text-decoration: none;
+ margin-bottom: 10px;
+ display: block;
+}
+
+p {
+ font-size: 20px;
+ margin: 0 0 15px;
+ font-weight: 300;
+}
+
+span {
+ font-size: 20px;
+ color: $lightgray;
+ font-weight: 300;
+ display: flex;
+
+ img {
+ margin-right: 8px;
+ width: 25px;
+ }
+}
diff --git a/src/app/repo/repo.component.spec.ts b/src/app/repo/repo.component.spec.ts
new file mode 100644
index 00000000..ed6437d3
--- /dev/null
+++ b/src/app/repo/repo.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RepoComponent } from './repo.component';
+
+describe('RepoComponent', () => {
+ let component: RepoComponent;
+ let fixture: ComponentFixtureGithub Search
diff --git a/src/app/title/title.component.scss b/src/app/title/title.component.scss new file mode 100644 index 00000000..c9d15997 --- /dev/null +++ b/src/app/title/title.component.scss @@ -0,0 +1,12 @@ +h1 { + width: 100%; + text-align: center; + margin: 0 auto; + font-size: 42px; + font-family: "Monaco", sans-serif; + + em { + font-weight: 200; + font-family: "Raleway", sans-serif; + } +} diff --git a/src/app/title/title.component.spec.ts b/src/app/title/title.component.spec.ts new file mode 100644 index 00000000..79e4f28f --- /dev/null +++ b/src/app/title/title.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TitleComponent } from './title.component'; + +describe('TitleComponent', () => { + let component: TitleComponent; + let fixture: ComponentFixture
+
+
+
+
+
+