Skip to content

Commit

Permalink
update hoc/loading baselines
Browse files Browse the repository at this point in the history
  • Loading branch information
@brainkim
brainkim committed Aug 9, 2021
1 parent 95179a8 commit 9d33727
Showing 1 changed file with 109 additions and 52 deletions.
161 changes: 109 additions & 52 deletions src/react/hoc/__tests__/queries/loading.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { render, wait } from '@testing-library/react';
import gql from 'graphql-tag';
import { DocumentNode } from 'graphql';

import { ApolloClient } from '../../../../core';
import { ApolloClient, NetworkStatus } from '../../../../core';
import { ApolloProvider } from '../../../context';
import { InMemoryCache as Cache } from '../../../../cache';
import { itAsync, mockSingleLink } from '../../../../testing';
Expand Down Expand Up @@ -181,18 +181,62 @@ describe('[queries] loading', () => {
})(
class extends React.Component<ChildProps<Vars, Data, Vars>> {
componentDidUpdate(prevProps: ChildProps<Vars, Data, Vars>) {
const { data } = this.props;
// variables changed, new query is loading, but old data is still there
if (count === 1) {
if (data!.loading) {
expect(data!.networkStatus).toBe(2);
expect(data!.allPeople).toBeUndefined();
} else {
expect(prevProps.data!.loading).toBe(true);
expect(data!.networkStatus).toBe(7);
expect(data!.allPeople).toEqual(data2.allPeople);
done = true;
try {
// variables changed, new query is loading, but old data is still there
switch (count) {
case 0:
expect(prevProps.data!.loading).toBe(true);
expect(prevProps.data!.variables).toEqual(variables1);
expect(prevProps.data!.allPeople).toBe(undefined);
expect(prevProps.data!.error).toBe(undefined);
expect(prevProps.data!.networkStatus).toBe(NetworkStatus.loading);
expect(this.props.data!.loading).toBe(false);
expect(this.props.data!.variables).toEqual(variables1);
expect(this.props.data!.allPeople).toEqual(data1.allPeople);
expect(this.props.data!.error).toBe(undefined);
expect(this.props.data!.networkStatus).toBe(NetworkStatus.ready);
break;
case 1:
// TODO: What is this extra render
expect(prevProps.data!.loading).toBe(false);
expect(prevProps.data!.variables).toEqual(variables1);
expect(prevProps.data!.allPeople).toEqual(data1.allPeople);
expect(prevProps.data!.error).toBe(undefined);
expect(prevProps.data!.networkStatus).toBe(NetworkStatus.ready);
expect(this.props.data!.loading).toBe(false);
expect(this.props.data!.variables).toEqual(variables1);
expect(this.props.data!.allPeople).toEqual(data1.allPeople);
expect(this.props.data!.error).toBe(undefined);
expect(prevProps.data!.networkStatus).toBe(NetworkStatus.ready);
break;
case 2:
expect(prevProps.data!.loading).toBe(false);
expect(prevProps.data!.variables).toEqual(variables1);
expect(prevProps.data!.allPeople).toEqual(data1.allPeople);
expect(prevProps.data!.error).toBe(undefined);
expect(this.props.data!.loading).toBe(true);
expect(this.props.data!.variables).toEqual(variables2);
expect(this.props.data!.allPeople).toBe(undefined);
expect(this.props.data!.error).toBe(undefined);
expect(this.props.data!.networkStatus).toBe(NetworkStatus.setVariables);
break;
case 3:
expect(prevProps.data!.loading).toBe(true);
expect(prevProps.data!.variables).toEqual(variables2);
expect(prevProps.data!.allPeople).toBe(undefined);
expect(prevProps.data!.error).toBe(undefined);
expect(prevProps.data!.networkStatus).toBe(NetworkStatus.setVariables);
expect(this.props.data!.loading).toBe(false);
expect(this.props.data!.variables).toEqual(variables2);
expect(this.props.data!.allPeople).toEqual(data2.allPeople);
expect(this.props.data!.error).toBe(undefined);
expect(this.props.data!.networkStatus).toBe(NetworkStatus.ready);
done = true;
break;
}
count++;
} catch (err) {
reject(err);
}
}
render() {
Expand All @@ -206,7 +250,6 @@ describe('[queries] loading', () => {

componentDidMount() {
setTimeout(() => {
count++;
this.setState({ first: 2 });
}, 50);
}
Expand All @@ -222,7 +265,7 @@ describe('[queries] loading', () => {
</ApolloProvider>
);

return wait(() => expect(done).toBeTruthy()).then(resolve, reject);
wait(() => expect(done).toBe(true)).then(resolve, reject);
});

itAsync('resets the loading state after a refetched query', (resolve, reject) => {
Expand Down Expand Up @@ -592,25 +635,32 @@ describe('[queries] loading', () => {
})(
class extends React.Component<ChildProps<Props, Data, Vars>> {
render() {
if (count === 0) {
expect(this.props.data!.loading).toBeTruthy(); // has initial data
}

if (count === 1) {
expect(this.props.data!.loading).toBeFalsy();
setTimeout(() => {
this.props.setFirst(2);
});
}

if (count === 2) {
expect(this.props.data!.loading).toBeTruthy(); // on variables change
try {
switch (count) {
case 0:
expect(this.props.data!.loading).toBeTruthy(); // has initial data
break;
case 1:
expect(this.props.data!.loading).toBeFalsy();
setTimeout(() => {
this.props.setFirst(2);
});
break;
case 2:
expect(this.props.data!.loading).toBeFalsy(); // on variables change
break;
case 3:
expect(this.props.data!.loading).toBeTruthy(); // on variables change
break;
case 4:
// new data after fetch
expect(this.props.data!.loading).toBeFalsy();
break;
}
} catch (err) {
reject(err);
}

if (count === 3) {
// new data after fetch
expect(this.props.data!.loading).toBeFalsy();
}
count++;

return null;
Expand All @@ -625,7 +675,7 @@ describe('[queries] loading', () => {
</ApolloProvider>
);

return wait(() => expect(count).toBe(4)).then(resolve, reject);
return wait(() => expect(count).toBe(5)).then(resolve, reject);
});

itAsync(
Expand Down Expand Up @@ -706,27 +756,34 @@ describe('[queries] loading', () => {
class extends React.Component<ChildProps<Props, Data, Vars>> {
render() {
const { props } = this;
if (count === 0) {
expect(props.data!.loading).toBeTruthy();
try {
switch (count) {
case 0:
expect(props.data!.loading).toBeTruthy();
break;
case 1:
setTimeout(() => {
this.props.setFirst(2);
});
//fallthrough
case 2:
expect(props.data!.loading).toBeFalsy(); // has initial data
expect(props.data!.allPeople).toEqual(data.allPeople);
break;

case 3:
expect(props.data!.loading).toBeTruthy(); // on variables change
break;
case 4:
// new data after fetch
expect(props.data!.loading).toBeFalsy();
expect(props.data!.allPeople).toEqual(data.allPeople);
break;
}
} catch (err) {
reject(err);
}

if (count === 1) {
expect(props.data!.loading).toBeFalsy(); // has initial data
expect(props.data!.allPeople).toEqual(data.allPeople);
setTimeout(() => {
this.props.setFirst(2);
});
}

if (count === 2) {
expect(props.data!.loading).toBeTruthy(); // on variables change
}

if (count === 3) {
// new data after fetch
expect(props.data!.loading).toBeFalsy();
expect(props.data!.allPeople).toEqual(data.allPeople);
}
count++;
return null;
}
Expand All @@ -740,7 +797,7 @@ describe('[queries] loading', () => {
</ApolloProvider>
);

return wait(() => expect(count).toBe(4)).then(resolve, reject);
return wait(() => expect(count).toBe(5)).then(resolve, reject);
}
);
});

0 comments on commit 9d33727

Please sign in to comment.