Visual Scheduler: Run tests in devcontainer

[rreganjr]

see Angular Development in Docker with Dev Containers see Testing Section

• install chrome in container
• setup KarmaTestExplorer vscode extension lucono.karma-test-explorer

Documentation - Karma Test Explorer

[rreganjr]

Karma isn't starting

2022-04-08 23:52:06.594] [WARN] [KarmaCommandLineTestServerExecutor]: Could not find 'karma' local package install in root path '/workspaces/chichi-ng/projects/chichi-ng': Error: get-installed-path: module not found "karma" in path /workspaces/chichi-ng/projects/chichi-ng/node_modules/karma
[2022-04-08 23:52:06.594] [ERROR] [KarmaTestServer]: Failed to start server for requested karmaPort 9976 and karmaSocketPort 9999: Error: Karma does not seem to be installed - You may need to run 'npm install' in your project. Please install it and try again.

Running karma after installation results in 'karma' is not recognized as an internal or external command

do I need to npm install -g karma-cli?

[rreganjr]

Maybe this was the magic in .vscode/settings.json

"karmaTestExplorer.containerMode": "enabled"

after saving that vscode prompted to reload settings, bang. boom. bob's your uncle. prompted to open http://localhost:9976/ and I got a page: Karma v 6.3.17 - connected; test: complete;

[rreganjr]

The KarmaTestExplorer plug-in still isn't working.

[rreganjr]

What I did so far in branch issue-49:

• I updated Dockerfile to install google chrome
• a few extension updates in devcontainer.json, including the karma-test-explorer
• updated vscode settings.json to use eslint and the karma-test-explorer container mode enabled
• updated the karma configs for both projects to use ChromeHeadlessNoSandbox for browsers

[rreganjr]

I rebuilt the dev container and the karma text explorer output

[2022-04-09 00:34:36.347] [INFO] [MainFactory]: Using test framework: jasmine (auto-detected)
[2022-04-09 00:34:36.349] [INFO] [AngularFactory]: Using Angular project 'chichi-ng' at root path '/workspaces/chichi-ng/projects/chichi-ng' and karma config file '/workspaces/chichi-ng/projects/chichi-ng/karma.conf.js'
[2022-04-09 00:34:36.381] [INFO] [DefaultTestManager]: Using requested --> available karma port: 9976 --> 9976
[2022-04-09 00:34:36.382] [INFO] [DefaultTestManager]: Using requested --> available karma listener socket port: 9999 --> 9999
[2022-04-09 00:34:36.383] [INFO] [DefaultTestManager]: Using requested --> available debug port: 9222 --> 9222
[2022-04-09 00:34:36.386] [INFO] [KarmaTestServer]: Starting karma server
[2022-04-09 00:34:36.396] [INFO] [KarmaTestListener]: Waiting for Karma to connect on port 9999
[2022-04-09 00:34:41.933] [INFO] [KarmaTestListener]: Established new connection with Karma on port 9999
[2022-04-09 00:34:42.150] [INFO] [DefaultTestManager]: Discovering tests
[2022-04-09 00:34:42.233] [INFO] [Adapter]: Finished loading tests in 5.88 secs (0 tests loaded)
[2022-04-09 00:34:59.301] [ERROR] [KarmaTestRunProcessor]: Browser error while listening for test events: Browser Error - Disconnected Client disconnected from CONNECTED state (transport close)
[2022-04-09 00:34:59.303] [ERROR] [DefaultTestManager]: System component terminated with message: Karma disconnected unexpectedly: Browser Error - Disconnected Client disconnected from CONNECTED state (transport close)

[rreganjr]

I'll check out Debug Angular 12 Karma Tests in VSCode

[rreganjr]

The Karma Server had some messages about bad tests:

[stderr]: 
Error: src/lib/visual-scheduler/agenda-item-conflicts.error.spec.ts:5:12 - error TS2554: Expected 2 arguments, but got 0.

5     expect(new AgendaItemConflicts()).toBeTruthy();
             ~~~~~~~~~~~~~~~~~~~~~~~~~

  src/lib/visual-scheduler/agenda-item-conflicts.error.ts:8:17
    8     constructor(newItemInterval: Interval, conflictingItems: AgendaItem[]) {
                      ~~~~~~~~~~~~~~~~~~~~~~~~~
    An argument for 'newItemInterval' was not provided.

Error: src/lib/visual-scheduler/agenda-item-out-of-bounds.error.spec.ts:5:12 - error TS2554: Expected 2 arguments, but got 0.

5     expect(new AgendaItemOutOfBounds()).toBeTruthy();
             ~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/lib/visual-scheduler/agenda-item-out-of-bounds.error.ts:7:17
    7     constructor(newItemInterval: Interval, schedulerBounds: Interval) {
                      ~~~~~~~~~~~~~~~~~~~~~~~~~
    An argument for 'newItemInterval' was not provided.

Error: src/lib/visual-scheduler/resource/agenda-box/agenda-item.model.spec.ts:5:12 - error TS2554: Expected 5 arguments, but got 0.

5     expect(new AgendaItem()).toBeTruthy();
             ~~~~~~~~~~~~~~~~

  src/lib/visual-scheduler/resource/agenda-box/agenda-item.model.ts:12:9
    12         private _resource: string,
               ~~~~~~~~~~~~~~~~~~~~~~~~~
    An argument for '_resource' was not provided.

Error: src/lib/visual-scheduler/timescale-not-set-error.error.spec.ts:5:12 - error TS2554: Expected 1 arguments, but got 0.

5     expect(new TimescaleNotSetError()).toBeTruthy();
             ~~~~~~~~~~~~
[stderr]: ~~~~~~~~~~~~~~

  src/lib/visual-scheduler/timescale-not-set-error.error.ts:5:17
    5     constructor(whoYouGonnaCall: string) {
                      ~~~~~~~~~~~~~~~~~~~~~~~
    An argument for 'whoYouGonnaCall' was not provided.

Error: src/lib/visual-scheduler/timescale.model.spec.ts:5:12 - error TS2554: Expected 1-3 arguments, but got 0.

5     expect(new Timescale()).toBeTruthy();
             ~~~~~~~~~~~~~~~

  src/lib/visual-scheduler/timescale.model.ts:14:9
    14         private _boundsInterval: Interval, // The min and max date range in the visual scheduler
               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    An argument for '_boundsInterval' was not provided.

Error: src/lib/visual-scheduler/toolbox/tool/tool-event.model.spec.ts:5:12 - error TS2674: Constructor of class 'ToolEvent' is protected and only accessible within the class declaration.

5     expect(new ToolEvent()).toBeTruthy();
             ~~~~~~~~~~~~~~~

[rreganjr]

I had to fix up the tests to make sure providers and inputs were properly supplied for the visual scheduler component tests.

I added some notes to README.md

In the case of the bypass panel I made sure the rightPanelActive property was set and fixture.detectChanges() was called.

In the turning-globe I changed async to waitForAsync, but the real fix was adding BrowserAnimationsModule to the imports when configuring the testing module.

All the tests are passing, although for the scheduler they are just basic things are getting created tests.

[rreganjr]

I did some revamping of the Timescale model, made things more Duration oriented instead of hour as a number. more tests for Timescale model. The changes broke the timeline component when panning

core.mjs:6485 ERROR Error: Unknown datetime argument: undefined, of type undefined
    at friendlyDateTime (luxon.js:8471:1)
    at Function.fromDateTimes (luxon.js:4137:1)
    at Interval.intersection (luxon.js:4499:1)
    at TimelineComponent.makeOutOfBoundsElement (timeline.component.ts:163:77)
    at TimelineComponent.draw (timeline.component.ts:101:63)
    at timeline.component.ts:30:12
    at Object.next (Subscriber.js:110:1)
    at SafeSubscriber._next (Subscriber.js:60:1)
    at SafeSubscriber.next (Subscriber.js:31:1)
    at Subject.js:31:1

[rreganjr]

There is an issue with the outOfBoundsStartInterval becoming invalid with these cases

 it('something is messed up!', () => {
    const start: Date = new Date();
    start.setMinutes(15);
    start.setSeconds(0);
    start.setMilliseconds(0);
    const end: Date = new Date(start.getTime() + 10 * 24 * 60 * 60 * 1000);
    const boundsInterval = Interval.fromDateTimes(start, end);
    const visibleDuration = Duration.fromDurationLike({seconds: 1});
    const offsetDuration = boundsInterval.toDuration().minus({seconds: 1});
    let timescale: Timescale = new Timescale(boundsInterval, visibleDuration, offsetDuration);
    expect(timescale.outOfBoundsStartInterval.isValid).toBeTruthy();
  });

 it('the timelineBounds should start at the day before the start of the boundsInterval for visibleDuration of Timescale.MAX_VISIBLE_DURATION_FOR_HOUR_BASED_PRIMARY_DATE_TIME_UNIT plus 1 second and end at the start of the next day after the end of the boundsInterval', () => {
    const start: Date = new Date();
    start.setMinutes(15);
    start.setSeconds(0);
    start.setMilliseconds(0);
    const end: Date = new Date(start.getTime() + 10 * 24 * 60 * 60 * 1000);
    const boundsInterval = Interval.fromDateTimes(start, end);
    const visibleDuration = Timescale.MAX_VISIBLE_DURATION_FOR_HOUR_BASED_PRIMARY_DATE_TIME_UNIT.plus(Duration.fromDurationLike({seconds: 1}));
    const offsetDuration = boundsInterval.toDuration().minus(visibleDuration);
    let timescale: Timescale = new Timescale(boundsInterval, visibleDuration, offsetDuration);

    expect(timescale.timelineBounds).toEqual(Interval.fromDateTimes(boundsInterval.start.startOf('day'), boundsInterval.end.plus({days: 1}).startOf('day')));
  });

and fails the test in this case

  it('the timelineBounds should start at the hour before the start of the boundsInterval for visibleDuration of 1 second and end at the start of the next hour after the end of the boundsInterval when the offset equals the duration too', () => {
    const start: Date = new Date();
    start.setMinutes(59);
    start.setSeconds(0);
    start.setMilliseconds(0);
    const end: Date = new Date(start.getTime() + 10 * 24 * 60 * 60 * 1000);
    const boundsInterval = Interval.fromDateTimes(start, end);
    const visibleDuration = Duration.fromDurationLike({seconds: 1});
    const offsetDuration = Duration.fromDurationLike({seconds: 1});
    let timescale: Timescale = new Timescale(boundsInterval, visibleDuration, offsetDuration);

    // TODO: if the offsetDuration is 1 second it pushes the start of the timelineBounds out one second
    // making the timelineBounds.start 1 second later than it should be
    console.log(`timescale.timelineBounds.start = ${timescale.timelineBounds.toISO} boundsInterval.start.startOf('hour') = ${boundsInterval.start.startOf('hour')}`);
    expect(timescale.timelineBounds).toEqual(Interval.fromDateTimes(boundsInterval.start.startOf('hour')/*.plus({seconds: 1})*/, boundsInterval.end.plus({hours: 1}).startOf('hour')));
  })

[rreganjr]

this ticket expanded a bit into refactoring the Timescale.model, visualizing how it should work with a diagram and fixing the related tests and components. The remaining issue related to the refactor is when the visible duration is 3 hours the drop zones where no items are visible are getting sized to the whole scheduler bounds so dropping an item fails because it conflicts with all the items in the channel not visible in the view.

[rreganjr]

I fixed the broken drop zone. but now I see that when the visibleDuration goes over 2 days the view

[rreganjr]

making good progress on tests. I think I saw an issue running the demo changing the end date

[rreganjr]

getting close, got drop-zone tests done today. timeline will be a bit tricky

[rreganjr]

I finally have all the tests done and working with 100% coverage. I also fixed the zoom/scan issue where the offset was getting messed up when you're at the end of the bounds and then zoom out. the display of the offset in the scan UI is ugly .