ninja-squad / ngx-speculoos Goto Github PK

Hi,

First of all (and like the last time I saw you), thanks for the job done inside the pro pack and for this libs (and valdemort too).

I'm currently writing slides for VoxxedDays Luxembourg and I think this lib is a must have for me in my presentation. But I'm currently trying to replace the default test written by the CLI with some using the ComponentTester

https://github.com/davinkevin/angular42/blob/master/demo/demo-ngx-speculoos/src/app/app.component.spec.ts

But, I think a complete example project is something missing in this repository.
Examples in compodoc are a bit too short and some ... hide things not trivial for everyone.

In my case, I had to use the method detectChanges(). Without this call, the component template doesn't have its text bindings initialised.

So, without this detectChanges(), I have this error:

Expected element to contain text 'Welcome to app!', but had text ' Welcome to '
	    at UserContext.<anonymous> src/app/app.component.spec.ts:39:26)
	    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke node_modules/zone.js/dist/zone.js:388:1)
	    at AsyncTestZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.AsyncTestZoneSpec.onInvoke node_modules/zone.js/dist/zone-testing.js:713:1)
	    at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke node_modules/zone.js/dist/zone-testing.js:285:1)

For a very simple component :

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

With template :

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="...">
</div>

So, I would like to know if this is a correct way to use the ComponentTester<T> in this kind of test ?

/cc @Neonox31 @dabbid @Yann29

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• chore(deps): lock file maintenance

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• chore(deps): update node.js to v21

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

Seen in https://github.com/Ninja-Squad/ngx-speculoos/blob/master/README.md#ngx-speculoos

It also provides utilities to make writing Angular unit tests.

There is probably a missing word.
"utilities to make writing Angular unit tests easier", maybe?

It exists for buttons, but not for those TestXxx classes

Hi,

Like previously exposed (on twitter), I'm working with Jest on Angular. Are you interested in migrating the current matchers for the Jest world?

I will do a PR if you're ok.

Thanks

In the documentation, code blocks seems to not be displayed correcly (see screenshot below).

It seems to come from a regression in compodoc 1.1.9 :
compodoc/compodoc#765

We should add a basic example on home page, like the one we have in the readme.
Currently when you land on https://ngx-speculoos.ninja-squad.com/ you don't really know what it's about, whereas we have examples on https://ngx-valdemort.ninja-squad.com/#/

When reading the doc (https://ngx-speculoos.ninja-squad.com/documentation/index.html), the last chapter mention filling issues or PRs, but there are no links to repository.

• The "hero" section does not looks good on iPhone (not enough width for logo + ngx-speculoos)
• The hamburger icon for menu is stacked on left

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: undefined. Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

My test case: I have a radiobutton group, with two options:
"allStatus" or "inProgressStatus"

The following test will fail

    it('should update criteria model when changing criteria', () => {
      // Given
      loadTester();

      // When
      tester.inProgressStatus.check();
      tester.allStatus.uncheck();

      // Then
      expect(tester.componentInstance.form.getRawValue()).toEqual({
        inProgress: 'true'
      });
    });

while the following (just inverting uncheck/check) will pass

    it('should update criteria model when changing criteria', () => {
      // Given
      loadTester();

      // When
      tester.allStatus.uncheck();
      tester.inProgressStatus.check();

      // Then
      expect(tester.componentInstance.form.getRawValue()).toEqual({
        inProgress: 'true'
      });
    });

(thanks for this great library by the way)