Git Product home page Git Product logo

psangularunittestingcourse's Introduction

=======

Pluralsight's Unit Testing in Angular Course

This course is up to date.

To get started, clone the repo or download it from Github

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

psangularunittestingcourse's People

Contributors

aaronfrost avatar joeeames avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

psangularunittestingcourse's Issues

Code is outdated

Last updates on the code files was (currently) 2 years ago.
I cloned the repo and ran npm i. This gives me multiple warnings that packages are deprecated and reports 39 vulnerabilities (8 critical, 21 high). "npm audit fix" does not fix that.
Running the app ("npm start") results in errors:
"error digital envelope routines::unsupported opensslErrorStack:
[ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}"
(OpenSSl had some CVE's which were patched, and I assume the JS/TS library versions predate those.)

Running npm test also results in the same error, but caused by the karma server: [karma-server: UnhandledRejection: Error digital envelope routines::unsupported
I have a fully updated Win11 x64 machine , w node.js 18.14.2, npm 8.12.2, (globally) angular CLI 15.2.4

0 Specs

Hello,

I downloaded this angular project

Executed the code "npm install npm test"

Executed another code "ng test"

I get 0 specs.

What part am I missing?

Is it possibly that you can update this source code to angualr 10 and apply it again at your github profile?

Thank you!

node-sass failure on npm install

Fresh clone of the repo on my machine produces a failure on npm install. The error message is one I would expect if the node-sass repo was blocked by a proxy (I've encountered this at work), but I'm on a personal machine and network for this so I'm confused as to why it's happening. It appears to be this issue and just the version of some package or another is pointing to an unavailable node-sass version. Regardless, the details and error are below. I do not have this problem when creating new Angular app, so I wonder if version bumping this repo would solve it, but that can be challenging for sure. I'm going to try to continue the course using a WSL 2 Ubuntu instance and see how that goes.

Windows Version: 10.0.19041 Build 19041
Node Version: 12.18.2
NPM Version: 6.14.5
Angular CLI Vesion: 10.0.1

Error Output:

npm install

[email protected] install C:\Users\Wesle\repos\PSAngularUnitTestingCourse\node_modules\node-sass
node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.10.0/win32-x64-72_binding.node
Cannot download "https://github.com/sass/node-sass/releases/download/v4.10.0/win32-x64-72_binding.node":

HTTP error 404 Not Found

Hint: If github.com is not accessible in your location
try setting a proxy via HTTP_PROXY, e.g.

  export HTTP_PROXY=http://example.com:1234

or configure npm proxy via

  npm config set proxy http://example.com:8080

[email protected] postinstall C:\Users\Wesle\repos\PSAngularUnitTestingCourse\node_modules\node-sass
node scripts/build.js

Building: C:\Program Files\nodejs\node.exe C:\Users\Wesle\repos\PSAngularUnitTestingCourse\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
gyp info it worked if it ends with ok
gyp verb cli [
gyp verb cli 'C:\Program Files\nodejs\node.exe',
gyp verb cli 'C:\Users\Wesle\repos\PSAngularUnitTestingCourse\node_modules\node-gyp\bin\node-gyp.js',
gyp verb cli 'rebuild',
gyp verb cli '--verbose',
gyp verb cli '--libsass_ext=',
gyp verb cli '--libsass_cflags=',
gyp verb cli '--libsass_ldflags=',
gyp verb cli '--libsass_library='
gyp verb cli ]
gyp info using [email protected]
gyp info using [email protected] | win32 | x64
gyp verb command rebuild []
gyp verb command clean []
gyp verb clean removing "build" directory
gyp verb command configure []
gyp verb check python checking for Python executable "python2" in the PATH
gyp verb which failed Error: not found: python2
gyp verb which failed at getNotFoundError (C:\Users\Wesle\repos\PSAngularUnitTestingCourse\node_modules\which\which.js:13:12)
gyp verb which failed at F (C:\Users\Wesle\repos\PSAngularUnitTestingCourse\node_modules\which\which.js:68:19)
gyp verb which failed at E (C:\Users\Wesle\repos\PSAngularUnitTestingCourse\node_modules\which\which.js:80:29)
gyp verb which failed at C:\Users\Wesle\repos\PSAngularUnitTestingCourse\node_modules\which\which.js:89:16
gyp verb which failed at C:\Users\Wesle\repos\PSAngularUnitTestingCourse\node_modules\isexe\index.js:42:5
gyp verb which failed at C:\Users\Wesle\repos\PSAngularUnitTestingCourse\node_modules\isexe\windows.js:36:5
gyp verb which failed at FSReqCallback.oncomplete (fs.js:167:21)
gyp verb which failed python2 Error: not found: python2
gyp verb which failed at getNotFoundError (C:\Users\Wesle\repos\PSAngularUnitTestingCourse\node_modules\which\which.js:13:12)
gyp verb which failed at F (C:\Users\Wesle\repos\PSAngularUnitTestingCourse\node_modules\which\which.js:68:19)
gyp verb which failed at E (C:\Users\Wesle\repos\PSAngularUnitTestingCourse\node_modules\which\which.js:80:29)
gyp verb which failed at C:\Users\Wesle\repos\PSAngularUnitTestingCourse\node_modules\which\which.js:89:16
gyp verb which failed at C:\Users\Wesle\repos\PSAngularUnitTestingCourse\node_modules\isexe\index.js:42:5
gyp verb which failed at C:\Users\Wesle\repos\PSAngularUnitTestingCourse\node_modules\isexe\windows.js:36:5
gyp verb which failed at FSReqCallback.oncomplete (fs.js:167:21) {
gyp verb which failed code: 'ENOENT'
gyp verb which failed }
gyp verb check python checking for Python executable "python" in the PATH
gyp verb which failed Error: not found: python
gyp verb which failed at getNotFoundError (C:\Users\Wesle\repos\PSAngularUnitTestingCourse\node_modules\which\which.js:13:12)
gyp verb which failed at F (C:\Users\Wesle\repos\PSAngularUnitTestingCourse\node_modules\which\which.js:68:19)
gyp verb which failed at E (C:\Users\Wesle\repos\PSAngularUnitTestingCourse\node_modules\which\which.js:80:29)
gyp verb which failed at C:\Users\Wesle\repos\PSAngularUnitTestingCourse\node_modules\which\which.js:89:16
gyp verb which failed at C:\Users\Wesle\repos\PSAngularUnitTestingCourse\node_modules\isexe\index.js:42:5
gyp verb which failed at C:\Users\Wesle\repos\PSAngularUnitTestingCourse\node_modules\isexe\windows.js:36:5
gyp verb which failed at FSReqCallback.oncomplete (fs.js:167:21)
gyp verb which failed python Error: not found: python
gyp verb which failed at getNotFoundError (C:\Users\Wesle\repos\PSAngularUnitTestingCourse\node_modules\which\which.js:13:12)
gyp verb which failed at F (C:\Users\Wesle\repos\PSAngularUnitTestingCourse\node_modules\which\which.js:68:19)
gyp verb which failed at E (C:\Users\Wesle\repos\PSAngularUnitTestingCourse\node_modules\which\which.js:80:29)
gyp verb which failed at C:\Users\Wesle\repos\PSAngularUnitTestingCourse\node_modules\which\which.js:89:16
gyp verb which failed at C:\Users\Wesle\repos\PSAngularUnitTestingCourse\node_modules\isexe\index.js:42:5
gyp verb which failed at C:\Users\Wesle\repos\PSAngularUnitTestingCourse\node_modules\isexe\windows.js:36:5
gyp verb which failed at FSReqCallback.oncomplete (fs.js:167:21) {
gyp verb which failed code: 'ENOENT'
gyp verb which failed }
gyp verb could not find "python". checking python launcher
gyp verb could not find "python". guessing location
gyp verb ensuring that file exists: C:\Python27\python.exe
gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
gyp ERR! stack at PythonFinder.failNoPython (C:\Users\Wesle\repos\PSAngularUnitTestingCourse\node_modules\node-gyp\lib\configure.js:484:19)
gyp ERR! stack at PythonFinder. (C:\Users\Wesle\repos\PSAngularUnitTestingCourse\node_modules\node-gyp\lib\configure.js:509:16)
gyp ERR! stack at C:\Users\Wesle\repos\PSAngularUnitTestingCourse\node_modules\graceful-fs\polyfills.js:282:31
gyp ERR! stack at FSReqCallback.oncomplete (fs.js:167:21)
gyp ERR! System Windows_NT 10.0.19041
gyp ERR! command "C:\Program Files\nodejs\node.exe" "C:\Users\Wesle\repos\PSAngularUnitTestingCourse\node_modules\node-gyp\bin\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd C:\Users\Wesle\repos\PSAngularUnitTestingCourse\node_modules\node-sass
gyp ERR! node -v v12.18.2
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
Build failed with error code: 1
npm WARN [email protected] requires a peer of popper.js@^1.14.3 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\node-sass):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] postinstall: node scripts/build.js
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Exit status 1

audited 1178 packages in 7.006s
found 2347 vulnerabilities (1718 low, 16 moderate, 611 high, 2 critical)
run npm audit fix to fix them, or npm audit for details

Getting errors when running npm i

I run npm i command and I get the following errors:

gyp ERR! configure error 
gyp ERR! stack Error: EACCES: permission denied, mkdir '/Users/[my-username]/Desktop/ngUnitTestingDemo/node_modules/node-sass/build'
gyp ERR! System Darwin 17.5.0
gyp ERR! command "/usr/local/bin/node" "/Users/[my-username]/Desktop/ngUnitTestingDemo/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /Users/[my-username]/Desktop/ngUnitTestingDemo/node_modules/node-sass
gyp ERR! node -v v8.11.2
gyp ERR! node-gyp -v v3.6.2
gyp ERR! not ok 
Build failed with error code: 1

And this error when editing demo-test.spec.ts file:

TSLint: TypeError: Cannot read property 'AbstractRule' of undefined

Does not install or run on fresh clone

TO Repro:
git clone
npm i

Results:

  • old lockfile upgrade occurs
  • will not run due to source map error
  • subsequent npm i fails on peer dependency errors.

Error: Cannot find module './lib/source-map-generator'
Require stack:

  • /Users/coolusername/dev/tutorial/angular/PSAngularUnitTestingCourse/node_modules/source-map/source-map.js
  • /Users/coolusername/dev/tutorial/angular/PSAngularUnitTestingCourse/node_modules/@angular/cli/node_modules/@angular-devkit/core/src/utils/template.js
  • /Users/coolusername/dev/tutorial/angular/PSAngularUnitTestingCourse/node_modules/@angular/cli/node_modules/@angular-devkit/core/src/utils/index.js
  • /Users/coolusername/dev/tutorial/angular/PSAngularUnitTestingCourse/node_modules/@angular/cli/node_modules/@angular-devkit/core/src/experimental/jobs/create-job-handler.js
  • /Users/coolusername/dev/tutorial/angular/PSAngularUnitTestingCourse/node_modules/@angular/cli/node_modules/@angular-devkit/core/src/experimental/jobs/index.js
  • /Users/coolusername/dev/tutorial/angular/PSAngularUnitTestingCourse/node_modules/@angular/cli/node_modules/@angular-devkit/core/src/experimental.js
  • /Users/coolusername/dev/tutorial/angular/PSAngularUnitTestingCourse/node_modules/@angular/cli/node_modules/@angular-devkit/core/src/index.js
  • /Users/coolusername/dev/tutorial/angular/PSAngularUnitTestingCourse/node_modules/@angular/cli/utilities/config.js
  • /Users/coolusername/dev/tutorial/angular/PSAngularUnitTestingCourse/node_modules/@angular/cli/lib/init.js
  • /Users/coolusername/dev/tutorial/angular/PSAngularUnitTestingCourse/node_modules/@angular/cli/bin/ng
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object. (/Users/coolusername/dev/tutorial/angular/PSAngularUnitTestingCourse/node_modules/source-map/source-map.js:6:30)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19) {

npm i
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/jasmine-core
npm ERR! dev jasmine-core@"~3.6.0" from the root project
npm ERR! jasmine-core@"^3.6.0" from [email protected]
npm ERR! node_modules/karma-jasmine
npm ERR! dev karma-jasmine@"~4.0.0" from the root project
npm ERR! peer karma-jasmine@">=1.1" from [email protected]
npm ERR! node_modules/karma-jasmine-html-reporter
npm ERR! dev karma-jasmine-html-reporter@"^1.5.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer jasmine-core@">=3.7.1" from [email protected]
npm ERR! node_modules/karma-jasmine-html-reporter
npm ERR! dev karma-jasmine-html-reporter@"^1.5.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/jasmine-core
npm ERR! peer jasmine-core@">=3.7.1" from [email protected]
npm ERR! node_modules/karma-jasmine-html-reporter
npm ERR! dev karma-jasmine-html-reporter@"^1.5.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

ERROR in src/app/hero/hero.component.shallow.spec.ts(7,16): error TS2314: Generic type 'ComponentFixture<T>' requires 1 type argument(s).

I run into this error following the course at Pluralsight. All tests (11 so far) pass, but this error is thrown in the terminal (webstorm).

This concerns chapter 4, mocking child components.

My code:

import {ComponentFixture, TestBed} from '@angular/core/testing';
import {HeroesComponent} from './heroes.component';
import {HeroService} from '../hero.service';
import {Component, EventEmitter, Input, NO_ERRORS_SCHEMA, Output} from '@angular/core';
import {of} from 'rxjs/internal/observable/of';
import {Hero} from '../hero';
import {By} from '@angular/platform-browser';

describe('HeroesComponent', () => {
  let fixture: ComponentFixture<HeroesComponent>;
  let mockHeroService;
  let HEROES;

  @Component({
    selector: 'app-hero',
    template: '<div></div>',
  })
  class FakeHeroComponent {
    @Input() hero: Hero;
    // @Output() delete = new EventEmitter();
  }

    beforeEach(() => {
    HEROES = [
      {id: 1, name: 'SpiderDude', strength: 8},
      {id: 2, name: 'Wonderful Woman', strength: 24},
      {id: 3, name: 'SuperDude', strength: 55}
    ];
    mockHeroService = jasmine.createSpyObj(['getHeroes', 'addHero', 'deleteHero']);
    TestBed.configureTestingModule({
      declarations: [HeroesComponent, FakeHeroComponent],
      providers: [
        { provide: HeroService, useValue: mockHeroService }
      ]
      // schemas: [NO_ERRORS_SCHEMA]    // ignore child component
    });
    fixture = TestBed.createComponent(HeroesComponent);
  });

  it('should set heroes correctly from the service', () => {
    mockHeroService.getHeroes.and.returnValue(of(HEROES));
    fixture.detectChanges();
    expect(fixture.componentInstance.heroes.length).toBe(3);
  });

  it('should create one li for each hero', () => {
    mockHeroService.getHeroes.and.returnValue(of(HEROES));
    fixture.detectChanges();
    expect(fixture.debugElement.queryAll(By.css('li')).length).toBe(3);
  });
});

npm start - multiple errors

Im having troubles running the angular unit test project on multiple machines... Maybe you have a lot of global installs that i dont. My friend are having the excact same problem.
npm i runs without problems
npm start => Cannot find module 'webpack'
Error: Cannot find module 'webpack'
at Function.Module._resolveFilename (module.js:547:15)

running npm i webpack i can move on but are stopped by:
ENOENT... cannot find jquery.min.js (in fact node_modules holds no jquery folder at all after npm i)
running npm i jquery and then npm start brings me to
ENOENT ... cannot find toastr.min.js
another install and start later
ENOENT ... cannot find bootstrap.js
npm i bootstrap finally brings me to:
ERROR in multi ./node_modules/toastr/build/toastr.min.css ./node_modules/ngf-bootstrap/dist/bootstrap.min.css ./src/styles.css

so i give up...

I should mention that i have run dkuratas beginning ngrx and several other ng-courses on plural without any problems

Regards
Per Høyer

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.