better test coverage

theKashey · Jul 18, 2018 · c37839d · c37839d
1 parent dee3c30
commit c37839d
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -27,10 +27,11 @@ To schedule events one-after another. To play _lazy_ animations in order, correl
   - `stepDelay` - delay between two events
   - `[reverse]` - reverses the queue
   - `[source]` - priority calculation function
-  - `[noSideEffect]` - indicates than Scheduler has no sideEffects, and disables autoupdate on task execution. 
+  - `[withSideEffect]` - indicates that Scheduler has  side effects, and enabled auto update(re-render) on task execution. __Affects performance__. 
   - `[observe]` - cache buster property. Scheduler sorts queue only on element change, in case of using `source` you might need "inform"
   it to resort queue.
 
+
 ```js
 import {Scheduler} from 'react-queue';
 
@@ -129,8 +130,9 @@ import {Trigger} from 'recondition';
 </Scheduler>
 ```  
 
-## Example
+## Examples
 [react-remock + react-queue](https://codesandbox.io/s/q89q2jm8qw) - simple and complex example - "jquery like" image lazy loading with queued execution.
+[react-visibility-sensor + react-queue](https://codesandbox.io/s/6xvr42y6xr) - animate element appearance based on visibility check.
 
 # Licence
  MIT

diff --git a/__tests__/index.tsx b/__tests__/index.tsx
@@ -60,7 +60,10 @@ describe('Queue', () => {
   it('Dynamic Ordered Queue', (done) => {
     const set: number[] = [];
     mount(
-      <Scheduler stepDelay={1} onEmptyQueue={() => {
+      <Scheduler
+        withSideEffect
+        stepDelay={1}
+        onEmptyQueue={() => {
         expect(set).toEqual([1, 2, 3, 4]);
         done();
       }}>
@@ -76,6 +79,27 @@ describe('Queue', () => {
     );
   });
 
+  it('No sideEffect Dynamic Ordered Queue', (done) => {
+    const set: number[] = [];
+    mount(
+      <Scheduler
+        stepDelay={1}
+        onEmptyQueue={() => {
+          expect(set).toEqual([1, 4, 3, 2]);
+          done();
+        }}>
+        {channel => (
+          <div>
+            <Queue channel={channel} priority={1} callback={() => set.push(1)}/>
+            <Queue channel={channel} priority={set.length == 0 ? 30 : 1} callback={() => set.push(2)}/>
+            <Queue channel={channel} priority={set.length == 0 ? 20 : 2} callback={() => set.push(3)}/>
+            <Queue channel={channel} priority={set.length == 0 ? 10 : 3} callback={() => set.push(4)}/>
+          </div>
+        )}
+      </Scheduler>
+    );
+  });
+
   it('N-Ordered Queue', (done) => {
     const set: number[] = [];
     mount(
@@ -114,11 +138,32 @@ describe('Promised', () => {
     );
   });
 
+  it('Side-effect Executed Promise', (done) => {
+    const set: number[] = [];
+    mount(
+      <Scheduler
+        stepDelay={1}
+        withSideEffect
+        onEmptyQueue={() => {
+        expect(set).toEqual([1, 1, 2, 1, 2, 3, 1, 2, 3]);
+        done();
+      }}>
+        {channel => (
+          <div>
+            <Promised autoexecuted channel={channel}>{({executed}) => executed && set.push(1)}</Promised>
+            <Promised autoexecuted channel={channel}>{({executed}) => executed && set.push(2)}</Promised>
+            <Promised autoexecuted channel={channel}>{({executed}) => executed && set.push(3)}</Promised>
+          </div>
+        )}
+      </Scheduler>
+    );
+  });
+
   it('Executed Promise', (done) => {
     const set: number[] = [];
     mount(
       <Scheduler stepDelay={1} onEmptyQueue={() => {
-        expect(set).toEqual([1, 1, 2, 1, 2, 3, 1, 2, 3]);
+        expect(set).toEqual([1, 2, 3]);
         done();
       }}>
         {channel => (
@@ -135,7 +180,10 @@ describe('Promised', () => {
   it('Pri-Promise', (done) => {
     const set: number[] = [];
     mount(
-      <Scheduler stepDelay={1} onEmptyQueue={() => {
+      <Scheduler
+        withSideEffect
+        stepDelay={1}
+        onEmptyQueue={() => {
         expect(set).toEqual([1, 3, 2]);
         done();
       }}>
@@ -156,6 +204,27 @@ describe('Promised', () => {
     const set: number[] = [];
     mount(
       <Scheduler stepDelay={1} onEmptyQueue={() => {
+        expect(set).toEqual([1, 1, 2, 2, 3, 3]);
+        done();
+      }}>
+        {channel => (
+          <div>
+            <Promised autoexecuted channel={channel}>{({fired}) => fired && set.push(1)}</Promised>
+            <Promised autoexecuted channel={channel}>{({fired}) => fired && set.push(2)}</Promised>
+            <Promised autoexecuted channel={channel}>{({fired}) => fired && set.push(3)}</Promised>
+          </div>
+        )}
+      </Scheduler>
+    );
+  });
+
+  it('sideEffect Ordered Mixed Promise', (done) => {
+    const set: number[] = [];
+    mount(
+      <Scheduler
+        stepDelay={1}
+        withSideEffect
+        onEmptyQueue={() => {
         expect(set).toEqual([1, 1, 1, 2, 2, 1, 2, 3, 3, 1, 2, 3]);
         done();
       }}>

diff --git a/src/Scheduler.tsx b/src/Scheduler.tsx
@@ -74,7 +74,7 @@ export class Scheduler extends React.Component<ISchedulerProps, {
   };
 
   replace = (q: any, cb: CB, priority: number, ref: any) => {
-    if(q) {
+    if (q) {
       const changedPriority = q.priority !== priority;
       const changedRef = q.ref !== ref;
       q.cb = cb;
@@ -101,7 +101,7 @@ export class Scheduler extends React.Component<ISchedulerProps, {
 
   sortQ() {
     if (this.props.source) {
-      this.queue.forEach(q => q.sortOrder = this.props.source!(q));
+      this.queue.forEach(q => q.sortOrder = q.priority < Infinity ? this.props.source!(q) : q.priority);
     } else {
       this.queue.forEach(q => q.sortOrder = q.priority);
     }
@@ -127,7 +127,7 @@ export class Scheduler extends React.Component<ISchedulerProps, {
           const dt = (typeof result === "number" ? result : 0) || 0;
           const when = Math.max(0, this.props.stepDelay + dt);
           this.scheduleQ(when);
-          if(!this.props.noSideEffect){
+          if (this.props.withSideEffect) {
             this.setState({
               recalculate: 1
             })

diff --git a/src/Types.tsx b/src/Types.tsx
@@ -48,7 +48,7 @@ export interface ISchedulerProps {
   stepDelay: number;
   reverse?: boolean;
   observe?: string | number | boolean;
-  noSideEffect?: boolean;
+  withSideEffect?: boolean;
   source?: (q: Q) => number;
   onEmptyQueue?: () => any;
 }