Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@apollo-elements/fast
Advanced tools
@apollo-elements/fast - npm Package Compare versions
Comparing version 1.1.1 to 1.1.2
@@ -7,3 +7,3 @@ import type { GraphQLError } from 'graphql'; | ||
| declare const ApolloElement_base: { | ||
| new <TData_1 = unknown, TVariables_1 = unknown>(): { | ||
| new <TData_1 = unknown, TVariables_1 = unknown>(...a: any[]): { | ||
| context?: Record<string, unknown>; | ||
@@ -26,3 +26,3 @@ data: TData_1; | ||
| variablesChanged?(variables: TVariables_1): void; | ||
| onMutation(): void; | ||
| onMutation(records: MutationRecord[]): void; | ||
| getDOMGraphQLDocument(): import("graphql").DocumentNode; | ||
@@ -49,5 +49,5 @@ getDOMVariables(): TVariables_1; | ||
| click(): void; | ||
| addEventListener<K extends "error" | "close" | "change" | "pause" | "abort" | "reset" | "resize" | "apollo-element-connected" | "apollo-element-disconnected" | "input" | "progress" | "select" | "blur" | "focus" | "scroll" | "waiting" | "toggle" | "load" | "fullscreenchange" | "fullscreenerror" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "cancel" | "canplay" | "canplaythrough" | "click" | "contextmenu" | "cuechange" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "focusin" | "focusout" | "gotpointercapture" | "invalid" | "keydown" | "keypress" | "keyup" | "loadeddata" | "loadedmetadata" | "loadstart" | "lostpointercapture" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "play" | "playing" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "ratechange" | "securitypolicyviolation" | "seeked" | "seeking" | "selectionchange" | "selectstart" | "stalled" | "submit" | "suspend" | "timeupdate" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "volumechange" | "wheel" | "copy" | "cut" | "paste">(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; | ||
| addEventListener<K extends "error" | "close" | "change" | "pause" | "abort" | "reset" | "resize" | "apollo-element-connected" | "apollo-element-disconnected" | "input" | "progress" | "select" | "click" | "scroll" | "blur" | "focus" | "cancel" | "waiting" | "toggle" | "load" | "fullscreenchange" | "fullscreenerror" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "canplay" | "canplaythrough" | "contextmenu" | "cuechange" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "focusin" | "focusout" | "gotpointercapture" | "invalid" | "keydown" | "keypress" | "keyup" | "loadeddata" | "loadedmetadata" | "loadstart" | "lostpointercapture" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "play" | "playing" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "ratechange" | "securitypolicyviolation" | "seeked" | "seeking" | "selectionchange" | "selectstart" | "stalled" | "submit" | "suspend" | "timeupdate" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "volumechange" | "wheel" | "copy" | "cut" | "paste">(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; | ||
| addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; | ||
| removeEventListener<K_1 extends "error" | "close" | "change" | "pause" | "abort" | "reset" | "resize" | "apollo-element-connected" | "apollo-element-disconnected" | "input" | "progress" | "select" | "blur" | "focus" | "scroll" | "waiting" | "toggle" | "load" | "fullscreenchange" | "fullscreenerror" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "cancel" | "canplay" | "canplaythrough" | "click" | "contextmenu" | "cuechange" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "focusin" | "focusout" | "gotpointercapture" | "invalid" | "keydown" | "keypress" | "keyup" | "loadeddata" | "loadedmetadata" | "loadstart" | "lostpointercapture" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "play" | "playing" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "ratechange" | "securitypolicyviolation" | "seeked" | "seeking" | "selectionchange" | "selectstart" | "stalled" | "submit" | "suspend" | "timeupdate" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "volumechange" | "wheel" | "copy" | "cut" | "paste">(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions): void; | ||
| removeEventListener<K_1 extends "error" | "close" | "change" | "pause" | "abort" | "reset" | "resize" | "apollo-element-connected" | "apollo-element-disconnected" | "input" | "progress" | "select" | "click" | "scroll" | "blur" | "focus" | "cancel" | "waiting" | "toggle" | "load" | "fullscreenchange" | "fullscreenerror" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "canplay" | "canplaythrough" | "contextmenu" | "cuechange" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "focusin" | "focusout" | "gotpointercapture" | "invalid" | "keydown" | "keypress" | "keyup" | "loadeddata" | "loadedmetadata" | "loadstart" | "lostpointercapture" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "play" | "playing" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "ratechange" | "securitypolicyviolation" | "seeked" | "seeking" | "selectionchange" | "selectstart" | "stalled" | "submit" | "suspend" | "timeupdate" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "volumechange" | "wheel" | "copy" | "cut" | "paste">(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions): void; | ||
| removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; | ||
@@ -296,9 +296,9 @@ readonly assignedSlot: HTMLSlotElement; | ||
| context?: Record<string, unknown>; | ||
| variables: TVariables; | ||
| client: ApolloClient<NormalizedCacheObject>; | ||
| data: TData; | ||
| variables: TVariables; | ||
| error: ApolloError | Error; | ||
| errors: readonly GraphQLError[]; | ||
| client: ApolloClient<NormalizedCacheObject>; | ||
| loading: boolean; | ||
| } | ||
| export {}; |
@@ -6,8 +6,8 @@ import { __decorate } from "tslib"; | ||
| constructor() { | ||
| var _a; | ||
| super(...arguments); | ||
| this.client = (_a = window.__APOLLO_CLIENT__) !== null && _a !== void 0 ? _a : null; | ||
| this.data = null; | ||
| this.variables = null; | ||
| this.error = null; | ||
| this.errors = null; | ||
| this.client = window.__APOLLO_CLIENT__; | ||
| this.loading = false; | ||
@@ -18,6 +18,6 @@ } | ||
| observable | ||
| ], ApolloElement.prototype, "data", void 0); | ||
| ], ApolloElement.prototype, "client", void 0); | ||
| __decorate([ | ||
| observable | ||
| ], ApolloElement.prototype, "variables", void 0); | ||
| ], ApolloElement.prototype, "data", void 0); | ||
| __decorate([ | ||
@@ -30,7 +30,4 @@ observable | ||
| __decorate([ | ||
| observable | ||
| ], ApolloElement.prototype, "client", void 0); | ||
| __decorate([ | ||
| attr({ mode: 'boolean' }) | ||
| ], ApolloElement.prototype, "loading", void 0); | ||
| //# sourceMappingURL=apollo-element.js.map |
| import { __decorate } from "tslib"; | ||
| import { expect, fixture, unsafeStatic, html as fhtml, } from '@open-wc/testing'; | ||
| import { expect, fixture, unsafeStatic, html as fhtml } from '@open-wc/testing'; | ||
| import { ApolloElement } from './apollo-element'; | ||
| import { customElement, DOM, FASTElement, html } from '@microsoft/fast-element'; | ||
| import { assertType, isApolloError } from '@apollo-elements/test-helpers'; | ||
| class TypeCheck extends ApolloElement { | ||
| render() { | ||
| /* eslint-disable func-call-spacing, no-multi-spaces */ | ||
| assertType(this); | ||
| // ApolloElementInterface | ||
| assertType(this.client); | ||
| assertType(this.context); | ||
| assertType(this.loading); | ||
| assertType(this.document); | ||
| assertType(this.error); | ||
| assertType(this.errors); | ||
| assertType(this.data); | ||
| assertType(this.error.message); | ||
| assertType(this.data.a); | ||
| // @ts-expect-error: b as number type | ||
| assertType(this.data.b); | ||
| if (isApolloError(this.error)) | ||
| assertType(this.error.graphQLErrors); | ||
| /* eslint-enable func-call-spacing, no-multi-spaces */ | ||
| } | ||
| } | ||
| describe('[fast] ApolloElement', function describeApolloElement() { | ||
@@ -96,2 +75,24 @@ it('is an instance of FASTElement', async function () { | ||
| }); | ||
| class TypeCheck extends ApolloElement { | ||
| typeCheck() { | ||
| /* eslint-disable func-call-spacing, no-multi-spaces */ | ||
| assertType(this); | ||
| assertType(this); | ||
| // ApolloElementInterface | ||
| assertType(this.client); | ||
| assertType(this.context); | ||
| assertType(this.loading); | ||
| assertType(this.document); | ||
| assertType(this.error); | ||
| assertType(this.errors); | ||
| assertType(this.data); | ||
| assertType(this.error.message); | ||
| assertType(this.data.a); | ||
| // @ts-expect-error: b as number type | ||
| assertType(this.data.b); | ||
| if (isApolloError(this.error)) | ||
| assertType(this.error.graphQLErrors); | ||
| /* eslint-enable func-call-spacing, no-multi-spaces */ | ||
| } | ||
| } | ||
| //# sourceMappingURL=apollo-element.test.js.map |
| import type { DocumentNode, GraphQLError } from 'graphql'; | ||
| import type { ApolloClient, NormalizedCacheObject } from '@apollo/client/core'; | ||
| import { | ||
| expect, | ||
| fixture, | ||
| unsafeStatic, | ||
| html as fhtml, | ||
| } from '@open-wc/testing'; | ||
| import { expect, fixture, unsafeStatic, html as fhtml } from '@open-wc/testing'; | ||
@@ -14,28 +9,2 @@ import { ApolloElement } from './apollo-element'; | ||
| type TypeCheckData = { a: 'a', b: number }; | ||
| class TypeCheck extends ApolloElement<TypeCheckData> { | ||
| render() { | ||
| /* eslint-disable func-call-spacing, no-multi-spaces */ | ||
| assertType<HTMLElement> (this); | ||
| // ApolloElementInterface | ||
| assertType<ApolloClient<NormalizedCacheObject>> (this.client); | ||
| assertType<Record<string, unknown>> (this.context); | ||
| assertType<boolean> (this.loading); | ||
| assertType<DocumentNode> (this.document); | ||
| assertType<Error> (this.error); | ||
| assertType<readonly GraphQLError[]> (this.errors); | ||
| assertType<TypeCheckData> (this.data); | ||
| assertType<string> (this.error.message); | ||
| assertType<'a'> (this.data.a); | ||
| // @ts-expect-error: b as number type | ||
| assertType<'a'> (this.data.b); | ||
| if (isApolloError(this.error)) | ||
| assertType<readonly GraphQLError[]> (this.error.graphQLErrors); | ||
| /* eslint-enable func-call-spacing, no-multi-spaces */ | ||
| } | ||
| } | ||
| describe('[fast] ApolloElement', function describeApolloElement() { | ||
@@ -97,1 +66,28 @@ it('is an instance of FASTElement', async function() { | ||
| }); | ||
| type TypeCheckData = { a: 'a', b: number }; | ||
| class TypeCheck extends ApolloElement<TypeCheckData> { | ||
| typeCheck() { | ||
| /* eslint-disable func-call-spacing, no-multi-spaces */ | ||
| assertType<HTMLElement> (this); | ||
| assertType<FASTElement> (this); | ||
| // ApolloElementInterface | ||
| assertType<ApolloClient<NormalizedCacheObject>> (this.client); | ||
| assertType<Record<string, unknown>> (this.context); | ||
| assertType<boolean> (this.loading); | ||
| assertType<DocumentNode> (this.document); | ||
| assertType<Error> (this.error); | ||
| assertType<readonly GraphQLError[]> (this.errors); | ||
| assertType<TypeCheckData> (this.data); | ||
| assertType<string> (this.error.message); | ||
| assertType<'a'> (this.data.a); | ||
| // @ts-expect-error: b as number type | ||
| assertType<'a'> (this.data.b); | ||
| if (isApolloError(this.error)) | ||
| assertType<readonly GraphQLError[]> (this.error.graphQLErrors); | ||
| /* eslint-enable func-call-spacing, no-multi-spaces */ | ||
| } | ||
| } |
@@ -16,6 +16,9 @@ import type { GraphQLError } from 'graphql'; | ||
| declare variables: TVariables; | ||
| @observable client: ApolloClient<NormalizedCacheObject> = | ||
| window.__APOLLO_CLIENT__ ?? null; | ||
| @observable data: TData = null; | ||
| @observable variables: TVariables = null; | ||
| @observable error: ApolloError | Error = null; | ||
@@ -25,6 +28,3 @@ | ||
| @observable client: ApolloClient<NormalizedCacheObject> = | ||
| window.__APOLLO_CLIENT__; | ||
| @attr({ mode: 'boolean' }) loading = false; | ||
| } |
@@ -26,2 +26,3 @@ import type { MutationOptions, MutationUpdaterFn, FetchResult } from '@apollo/client/core'; | ||
| mostRecentMutationId: number; | ||
| connectedCallback(): void; | ||
| mutate(params?: Partial<MutationOptions<TData_1, TVariables_1>>): Promise<FetchResult<TData_1, Record<string, any>, Record<string, any>>>; | ||
@@ -38,7 +39,6 @@ generateMutationId(): number; | ||
| document: DocumentNode; | ||
| connectedCallback: (() => void) & (() => void); | ||
| disconnectedCallback: (() => void) & (() => void); | ||
| documentChanged?(document: DocumentNode): void; | ||
| variablesChanged?(variables: TVariables_1): void; | ||
| onMutation(): void; | ||
| onMutation(records: MutationRecord[]): void; | ||
| getDOMGraphQLDocument(): DocumentNode; | ||
@@ -65,5 +65,5 @@ getDOMVariables(): TVariables_1; | ||
| click(): void; | ||
| addEventListener<K extends "error" | "close" | "change" | "pause" | "abort" | "reset" | "resize" | "apollo-element-connected" | "apollo-element-disconnected" | "input" | "progress" | "select" | "blur" | "focus" | "scroll" | "waiting" | "toggle" | "load" | "fullscreenchange" | "fullscreenerror" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "cancel" | "canplay" | "canplaythrough" | "click" | "contextmenu" | "cuechange" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "focusin" | "focusout" | "gotpointercapture" | "invalid" | "keydown" | "keypress" | "keyup" | "loadeddata" | "loadedmetadata" | "loadstart" | "lostpointercapture" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "play" | "playing" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "ratechange" | "securitypolicyviolation" | "seeked" | "seeking" | "selectionchange" | "selectstart" | "stalled" | "submit" | "suspend" | "timeupdate" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "volumechange" | "wheel" | "copy" | "cut" | "paste">(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; | ||
| addEventListener<K extends "error" | "close" | "change" | "pause" | "abort" | "reset" | "resize" | "apollo-element-connected" | "apollo-element-disconnected" | "input" | "progress" | "select" | "click" | "scroll" | "blur" | "focus" | "cancel" | "waiting" | "toggle" | "load" | "fullscreenchange" | "fullscreenerror" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "canplay" | "canplaythrough" | "contextmenu" | "cuechange" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "focusin" | "focusout" | "gotpointercapture" | "invalid" | "keydown" | "keypress" | "keyup" | "loadeddata" | "loadedmetadata" | "loadstart" | "lostpointercapture" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "play" | "playing" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "ratechange" | "securitypolicyviolation" | "seeked" | "seeking" | "selectionchange" | "selectstart" | "stalled" | "submit" | "suspend" | "timeupdate" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "volumechange" | "wheel" | "copy" | "cut" | "paste">(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; | ||
| addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; | ||
| removeEventListener<K_1 extends "error" | "close" | "change" | "pause" | "abort" | "reset" | "resize" | "apollo-element-connected" | "apollo-element-disconnected" | "input" | "progress" | "select" | "blur" | "focus" | "scroll" | "waiting" | "toggle" | "load" | "fullscreenchange" | "fullscreenerror" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "cancel" | "canplay" | "canplaythrough" | "click" | "contextmenu" | "cuechange" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "focusin" | "focusout" | "gotpointercapture" | "invalid" | "keydown" | "keypress" | "keyup" | "loadeddata" | "loadedmetadata" | "loadstart" | "lostpointercapture" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "play" | "playing" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "ratechange" | "securitypolicyviolation" | "seeked" | "seeking" | "selectionchange" | "selectstart" | "stalled" | "submit" | "suspend" | "timeupdate" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "volumechange" | "wheel" | "copy" | "cut" | "paste">(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions): void; | ||
| removeEventListener<K_1 extends "error" | "close" | "change" | "pause" | "abort" | "reset" | "resize" | "apollo-element-connected" | "apollo-element-disconnected" | "input" | "progress" | "select" | "click" | "scroll" | "blur" | "focus" | "cancel" | "waiting" | "toggle" | "load" | "fullscreenchange" | "fullscreenerror" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "canplay" | "canplaythrough" | "contextmenu" | "cuechange" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "focusin" | "focusout" | "gotpointercapture" | "invalid" | "keydown" | "keypress" | "keyup" | "loadeddata" | "loadedmetadata" | "loadstart" | "lostpointercapture" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "play" | "playing" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "ratechange" | "securitypolicyviolation" | "seeked" | "seeking" | "selectionchange" | "selectstart" | "stalled" | "submit" | "suspend" | "timeupdate" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "volumechange" | "wheel" | "copy" | "cut" | "paste">(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions): void; | ||
| removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; | ||
@@ -70,0 +70,0 @@ readonly assignedSlot: HTMLSlotElement; |
| import { __decorate } from "tslib"; | ||
| import { unsafeStatic, fixture, expect, html as fhtml } from '@open-wc/testing'; | ||
| import sinon from 'sinon'; | ||
| import 'sinon-chai'; | ||
| import { client, setupClient, teardownClient, isApolloError, assertType, } from '@apollo-elements/test-helpers'; | ||
| import { fixture, expect, nextFrame, aTimeout } from '@open-wc/testing'; | ||
| import { spy, stub } from 'sinon'; | ||
| import { setupClient, teardownClient, isApolloError, assertType, } from '@apollo-elements/test-helpers'; | ||
| import { ApolloMutation } from './apollo-mutation'; | ||
| import { FASTElement, html, customElement, DOM } from '@microsoft/fast-element'; | ||
| import NoParamMutation from '../test-helpers/NoParam.mutation.graphql'; | ||
| import { describeMutation } from '@apollo-elements/test-helpers/mutation.test'; | ||
| import 'sinon-chai'; | ||
| const template = html ` | ||
| <output id="called">${x => x.stringify(x.called)}</output> | ||
| <output id="data">${x => x.stringify(x.data)}</output> | ||
| <output id="error">${x => x.stringify(x.error)}</output> | ||
| <output id="errors">${x => x.stringify(x.errors)}</output> | ||
| <output id="loading">${x => x.stringify(x.loading)}</output> | ||
| `; | ||
| let counter = -1; | ||
| let TestableApolloMutation = class TestableApolloMutation extends ApolloMutation { | ||
| async hasRendered() { | ||
| await nextFrame(); | ||
| await DOM.nextUpdate(); | ||
| await nextFrame(); | ||
| await aTimeout(50); | ||
| return this; | ||
| } | ||
| stringify(x) { | ||
| return JSON.stringify(x, null, 2); | ||
| } | ||
| }; | ||
| TestableApolloMutation = __decorate([ | ||
| customElement({ name: 'fast-testable-apollo-mutation-class', template }) | ||
| ], TestableApolloMutation); | ||
| describe('[fast] ApolloMutation', function describeApolloMutation() { | ||
| describeMutation({ | ||
| async setupFunction(options = {}) { | ||
| var _a, _b; | ||
| const name = `fast-setup-function-element-${counter++}`; | ||
| const { properties, attributes, innerHTML = '' } = options; | ||
| let Test = class Test extends TestableApolloMutation { | ||
| }; | ||
| Test = __decorate([ | ||
| customElement({ name, template }) | ||
| ], Test); | ||
| const attrs = attributes ? ` ${attributes}` : ''; | ||
| // for mutation components, which don't fetch on connect, | ||
| // and have optional instance callbacks, | ||
| // we must ensure spies are created *after* properties are applied | ||
| if (properties === null || properties === void 0 ? void 0 : properties.onCompleted) | ||
| Test.prototype.onCompleted = properties.onCompleted; | ||
| if (properties === null || properties === void 0 ? void 0 : properties.onError) | ||
| Test.prototype.onError = properties.onError; | ||
| const element = await fixture(`<${name}${attrs}>${innerHTML}</${name}>`); | ||
| const spies = Object.fromEntries(((_a = options === null || options === void 0 ? void 0 : options.spy) !== null && _a !== void 0 ? _a : []).map(method => [method, spy(Test.prototype, method)])); | ||
| const stubs = Object.fromEntries(((_b = options === null || options === void 0 ? void 0 : options.stub) !== null && _b !== void 0 ? _b : []).map(method => [method, stub(Test.prototype, method)])); | ||
| for (const [key, val] of Object.entries(properties !== null && properties !== void 0 ? properties : {})) | ||
| key !== 'onCompleted' && key !== 'onError' && (element[key] = val); | ||
| await DOM.nextUpdate(); | ||
| return { element, spies, stubs }; | ||
| }, | ||
| }); | ||
| describe('subclassing', function () { | ||
| beforeEach(setupClient); | ||
| afterEach(teardownClient); | ||
| it('is an instance of FASTElement', async function () { | ||
| const name = 'is-an-instance-of-f-a-s-t-element'; | ||
| let Test = class Test extends ApolloMutation { | ||
| }; | ||
| Test = __decorate([ | ||
| customElement({ name }) | ||
| ], Test); | ||
| const el = await fixture(`<${name}></${name}>`); | ||
| expect(el).to.be.an.instanceOf(FASTElement); | ||
| }); | ||
| describe('refetchQueries', function () { | ||
| let element; | ||
| class Test extends ApolloMutation { | ||
| } | ||
| describe(`when refetch-queries attribute set with comma-separated, badly-formatted query names`, function () { | ||
| beforeEach(async function () { | ||
| const name = `refetch-queries-attribute-${Date.now()}`; | ||
| let Klass = class Klass extends Test { | ||
| }; | ||
| Klass = __decorate([ | ||
| customElement({ name }) | ||
| ], Klass); | ||
| element = await fixture(`<${name} refetch-queries="A, B,C, D"></${name}>`); | ||
| await DOM.nextUpdate(); | ||
| }); | ||
| it('sets the property as an array of query names', function () { | ||
| expect(element.refetchQueries) | ||
| .to.deep.equal(['A', 'B', 'C', 'D']); | ||
| }); | ||
| }); | ||
| describe(`when refetchQueries property set as array of query names`, function () { | ||
| const refetchQueries = ['A', 'B', 'C', 'D']; | ||
| beforeEach(async function setupElement() { | ||
| const name = `refetch-queries-property-${counter++}-${Math.floor(Math.random() * Date.now())}`; | ||
| let Klass = class Klass extends Test { | ||
| }; | ||
| Klass = __decorate([ | ||
| customElement({ name }) | ||
| ], Klass); | ||
| element = await fixture(`<${name}></${name}>`); | ||
| }); | ||
| beforeEach(async function setRefetchQueries() { | ||
| element.refetchQueries = refetchQueries; | ||
| await DOM.nextUpdate(); | ||
| }); | ||
| it('sets the property as an array of query names', function () { | ||
| expect(element.refetchQueries).to.deep.equal(refetchQueries); | ||
| }); | ||
| it('does not reflect', function () { | ||
| expect(element.getAttribute('refetch-queries')).to.be.null; | ||
| }); | ||
| }); | ||
| }); | ||
| }); | ||
| }); | ||
| class TypeCheck extends ApolloMutation { | ||
| render() { | ||
| typeCheck() { | ||
| /* eslint-disable max-len, func-call-spacing, no-multi-spaces */ | ||
@@ -66,127 +175,2 @@ assertType(this); | ||
| } | ||
| describe('[fast] ApolloMutation', function describeApolloMutation() { | ||
| beforeEach(setupClient); | ||
| afterEach(teardownClient); | ||
| it('is an instance of FASTElement', async function () { | ||
| const name = 'is-an-instance-of-f-a-s-t-element'; | ||
| let Test = class Test extends ApolloMutation { | ||
| }; | ||
| Test = __decorate([ | ||
| customElement({ name }) | ||
| ], Test); | ||
| const tag = unsafeStatic(name); | ||
| const el = await fixture(fhtml `<${tag}></${tag}>`); | ||
| expect(el).to.be.an.instanceOf(FASTElement); | ||
| }); | ||
| it('renders when called is set', async function rendersOnCalled() { | ||
| const name = 'renders-when-called-is-set'; | ||
| const template = html `${x => x.called ? 'CALLED' : 'FAIL'}`; | ||
| let Test = class Test extends ApolloMutation { | ||
| }; | ||
| Test = __decorate([ | ||
| customElement({ name, template }) | ||
| ], Test); | ||
| const tag = unsafeStatic(name); | ||
| const element = await fixture(fhtml `<${tag} .called="${true}"></${tag}>`); | ||
| expect(element).shadowDom.to.equal('CALLED'); | ||
| }); | ||
| it('uses element\'s updater method for mutation\'s `update` option by default', async function () { | ||
| const name = 'uses-elements-updater-1'; | ||
| const template = html `${x => { var _a; return JSON.stringify((_a = x.data) !== null && _a !== void 0 ? _a : {}, null, 2); }}`; | ||
| const mutation = NoParamMutation; | ||
| let Test = class Test extends ApolloMutation { | ||
| constructor() { | ||
| super(...arguments); | ||
| this.client = client; | ||
| this.mutation = mutation; | ||
| } | ||
| updater() { | ||
| '💩'; | ||
| } | ||
| }; | ||
| Test = __decorate([ | ||
| customElement({ name, template }) | ||
| ], Test); | ||
| const tag = unsafeStatic(name); | ||
| const element = await fixture(fhtml `<${tag}></${tag}>`); | ||
| const clientSpy = sinon.spy(element.client, 'mutate'); | ||
| await element.mutate(); | ||
| expect(clientSpy).to.have.been.calledWith(sinon.match({ update: element.updater })); | ||
| clientSpy.restore(); | ||
| }); | ||
| it('allows passing custom update function', async function customUpdate() { | ||
| const name = 'allows-passing-custom-update-function'; | ||
| const template = html `${x => { var _a; return JSON.stringify((_a = x.data) !== null && _a !== void 0 ? _a : {}, null, 2); }}`; | ||
| const mutation = NoParamMutation; | ||
| let Test = class Test extends ApolloMutation { | ||
| constructor() { | ||
| super(...arguments); | ||
| this.client = client; | ||
| this.mutation = mutation; | ||
| } | ||
| updater() { | ||
| '💩'; | ||
| } | ||
| }; | ||
| Test = __decorate([ | ||
| customElement({ name, template }) | ||
| ], Test); | ||
| const update = sinon.stub(); | ||
| const tag = unsafeStatic(name); | ||
| const element = await fixture(fhtml `<${tag}></${tag}>`); | ||
| const clientSpy = sinon.spy(element.client, 'mutate'); | ||
| await element.mutate({ update }); | ||
| expect(clientSpy).to.have.been.calledWith(sinon.match({ update })); | ||
| clientSpy.restore(); | ||
| }); | ||
| describe('refetchQueries', function () { | ||
| let element; | ||
| class Test extends ApolloMutation { | ||
| } | ||
| describe('when refetch-queries attribute set with comma-separated, badly-formatted query names', function () { | ||
| beforeEach(async function () { | ||
| const name = `refetch-queries-attribute-${Date.now()}`; | ||
| let Klass = class Klass extends Test { | ||
| }; | ||
| Klass = __decorate([ | ||
| customElement({ name }) | ||
| ], Klass); | ||
| Klass; | ||
| const tag = unsafeStatic(name); | ||
| const attrVal = 'QueryA, QueryB,QueryC, QueryD'; | ||
| element = | ||
| await fixture(fhtml `<${tag} refetch-queries="${attrVal}"></${tag}>`); | ||
| await DOM.nextUpdate(); | ||
| }); | ||
| it('sets the property as an array of query names', function () { | ||
| expect(element.refetchQueries).to.deep.equal(['QueryA', 'QueryB', 'QueryC', 'QueryD']); | ||
| }); | ||
| }); | ||
| describe('when refetchQueries property set as array of query names', function () { | ||
| beforeEach(async function () { | ||
| const name = `refetch-queries-property-${Math.floor(Math.random() * Date.now())}`; | ||
| let Klass = class Klass extends Test { | ||
| }; | ||
| Klass = __decorate([ | ||
| customElement({ name }) | ||
| ], Klass); | ||
| Klass; | ||
| const tag = unsafeStatic(name); | ||
| element = | ||
| await fixture(fhtml ` | ||
| <${tag} | ||
| .refetchQueries="${['QueryA', 'QueryB', 'QueryC', 'QueryD']}" | ||
| ></${tag}> | ||
| `); | ||
| await DOM.nextUpdate(); | ||
| }); | ||
| it('sets the property as an array of query names', function () { | ||
| expect(element.refetchQueries).to.deep.equal(['QueryA', 'QueryB', 'QueryC', 'QueryD']); | ||
| }); | ||
| it('does not reflect', function () { | ||
| expect(element.getAttribute('refetch-queries')).to.be.null; | ||
| }); | ||
| }); | ||
| }); | ||
| }); | ||
| //# sourceMappingURL=apollo-mutation.test.js.map |
@@ -6,6 +6,11 @@ import type { | ||
| FetchResult, | ||
| MutationUpdaterFn, | ||
| NormalizedCacheObject, | ||
| } from '@apollo/client/core'; | ||
| import type { | ||
| NonNullableParamMutationData, | ||
| NonNullableParamMutationVariables, | ||
| SetupOptions, | ||
| } from '@apollo-elements/test-helpers'; | ||
| import type { RefetchQueryDescription } from '@apollo/client/core/watchQueryOptions'; | ||
@@ -15,13 +20,9 @@ | ||
| import { unsafeStatic, fixture, expect, html as fhtml } from '@open-wc/testing'; | ||
| import sinon from 'sinon'; | ||
| import 'sinon-chai'; | ||
| import { fixture, expect, nextFrame, aTimeout } from '@open-wc/testing'; | ||
| import { spy, stub, SinonSpy, SinonStub } from 'sinon'; | ||
| import { | ||
| client, | ||
| setupClient, | ||
| teardownClient, | ||
| NoParamMutationData, | ||
| NonNullableParamMutationData, | ||
| NonNullableParamMutationVariables, | ||
| NoParamMutationVariables, | ||
| isApolloError, | ||
@@ -34,8 +35,138 @@ assertType, | ||
| import NoParamMutation from '../test-helpers/NoParam.mutation.graphql'; | ||
| import { MutationElement, describeMutation } from '@apollo-elements/test-helpers/mutation.test'; | ||
| import 'sinon-chai'; | ||
| const template = html<TestableApolloMutation>` | ||
| <output id="called">${x => x.stringify(x.called)}</output> | ||
| <output id="data">${x => x.stringify(x.data)}</output> | ||
| <output id="error">${x => x.stringify(x.error)}</output> | ||
| <output id="errors">${x => x.stringify(x.errors)}</output> | ||
| <output id="loading">${x => x.stringify(x.loading)}</output> | ||
| `; | ||
| let counter = -1; | ||
| @customElement({ name: 'fast-testable-apollo-mutation-class', template }) | ||
| class TestableApolloMutation<D = unknown, V = unknown> | ||
| extends ApolloMutation<D, V> | ||
| implements MutationElement<D, V> { | ||
| async hasRendered() { | ||
| await nextFrame(); | ||
| await DOM.nextUpdate(); | ||
| await nextFrame(); | ||
| await aTimeout(50); | ||
| return this; | ||
| } | ||
| stringify(x: unknown) { | ||
| return JSON.stringify(x, null, 2); | ||
| } | ||
| } | ||
| describe('[fast] ApolloMutation', function describeApolloMutation() { | ||
| describeMutation({ | ||
| async setupFunction<T extends MutationElement>(options: SetupOptions<T> = {}) { | ||
| const name = `fast-setup-function-element-${counter++}`; | ||
| const { properties, attributes, innerHTML = '' } = options; | ||
| @customElement({ name, template }) | ||
| class Test extends TestableApolloMutation { } | ||
| const attrs = attributes ? ` ${attributes}` : ''; | ||
| // for mutation components, which don't fetch on connect, | ||
| // and have optional instance callbacks, | ||
| // we must ensure spies are created *after* properties are applied | ||
| if (properties?.onCompleted) | ||
| Test.prototype.onCompleted = properties.onCompleted as unknown as Test['onCompleted']; | ||
| if (properties?.onError) | ||
| Test.prototype.onError = properties.onError as unknown as Test['onError']; | ||
| const element = await fixture<T>(`<${name}${attrs}>${innerHTML}</${name}>`); | ||
| const spies = Object.fromEntries((options?.spy ?? []).map(method => | ||
| [method, spy(Test.prototype, method as keyof Test)]) | ||
| ) as Record<keyof T | string, SinonSpy>; | ||
| const stubs = Object.fromEntries((options?.stub ?? []).map(method => | ||
| [method, stub(Test.prototype, method as keyof Test)]) | ||
| ) as Record<keyof T | string, SinonStub>; | ||
| for (const [key, val] of Object.entries(properties ?? {})) | ||
| key !== 'onCompleted' && key !== 'onError' && (element[key] = val); | ||
| await DOM.nextUpdate(); | ||
| return { element, spies, stubs }; | ||
| }, | ||
| }); | ||
| describe('subclassing', function() { | ||
| beforeEach(setupClient); | ||
| afterEach(teardownClient); | ||
| it('is an instance of FASTElement', async function() { | ||
| const name = 'is-an-instance-of-f-a-s-t-element'; | ||
| @customElement({ name }) | ||
| class Test extends ApolloMutation<unknown, unknown> { } | ||
| const el = await fixture<Test>(`<${name}></${name}>`); | ||
| expect(el).to.be.an.instanceOf(FASTElement); | ||
| }); | ||
| describe('refetchQueries', function() { | ||
| let element: Test; | ||
| class Test extends ApolloMutation<unknown, unknown> { } | ||
| describe(`when refetch-queries attribute set with comma-separated, badly-formatted query names`, function() { | ||
| beforeEach(async function() { | ||
| const name = `refetch-queries-attribute-${Date.now()}`; | ||
| @customElement({ name }) | ||
| class Klass extends Test { } | ||
| element = await fixture<Klass>(`<${name} refetch-queries="A, B,C, D"></${name}>`); | ||
| await DOM.nextUpdate(); | ||
| }); | ||
| it('sets the property as an array of query names', function() { | ||
| expect(element.refetchQueries) | ||
| .to.deep.equal(['A', 'B', 'C', 'D']); | ||
| }); | ||
| } | ||
| ); | ||
| describe(`when refetchQueries property set as array of query names`, function() { | ||
| const refetchQueries = ['A', 'B', 'C', 'D']; | ||
| beforeEach(async function setupElement() { | ||
| const name = `refetch-queries-property-${counter++}-${Math.floor(Math.random() * Date.now())}`; | ||
| @customElement({ name }) | ||
| class Klass extends Test { } | ||
| element = await fixture<Klass>(`<${name}></${name}>`); | ||
| }); | ||
| beforeEach(async function setRefetchQueries() { | ||
| element.refetchQueries = refetchQueries; | ||
| await DOM.nextUpdate(); | ||
| }); | ||
| it('sets the property as an array of query names', function() { | ||
| expect(element.refetchQueries).to.deep.equal(refetchQueries); | ||
| }); | ||
| it('does not reflect', function() { | ||
| expect(element.getAttribute('refetch-queries')).to.be.null; | ||
| }); | ||
| }); | ||
| }); | ||
| }); | ||
| }); | ||
| type TypeCheckData = { a: 'a', b: number }; | ||
| type TypeCheckVars = { d: 'd', e: number }; | ||
| class TypeCheck extends ApolloMutation<TypeCheckData, TypeCheckVars> { | ||
| render() { | ||
| typeCheck() { | ||
| /* eslint-disable max-len, func-call-spacing, no-multi-spaces */ | ||
@@ -108,136 +239,1 @@ | ||
| } | ||
| describe('[fast] ApolloMutation', function describeApolloMutation() { | ||
| beforeEach(setupClient); | ||
| afterEach(teardownClient); | ||
| it('is an instance of FASTElement', async function() { | ||
| const name = 'is-an-instance-of-f-a-s-t-element'; | ||
| @customElement({ name }) class Test extends ApolloMutation<unknown, unknown> { } | ||
| const tag = unsafeStatic(name); | ||
| const el = await fixture<Test>(fhtml`<${tag}></${tag}>`); | ||
| expect(el).to.be.an.instanceOf(FASTElement); | ||
| }); | ||
| it('renders when called is set', async function rendersOnCalled() { | ||
| const name = 'renders-when-called-is-set'; | ||
| const template = html<Test>`${x => x.called ? 'CALLED' : 'FAIL'}`; | ||
| @customElement({ name, template }) class Test extends ApolloMutation<unknown, unknown> { } | ||
| const tag = unsafeStatic(name); | ||
| const element = await fixture<Test>(fhtml`<${tag} .called="${true}"></${tag}>`); | ||
| expect(element).shadowDom.to.equal('CALLED'); | ||
| }); | ||
| it('uses element\'s updater method for mutation\'s `update` option by default', async function() { | ||
| const name = 'uses-elements-updater-1'; | ||
| const template = html<Test>`${x => JSON.stringify(x.data ?? {}, null, 2)}`; | ||
| const mutation = NoParamMutation; | ||
| @customElement({ name, template }) | ||
| class Test extends ApolloMutation<NoParamMutationData, NoParamMutationVariables> { | ||
| client = client; | ||
| mutation = mutation; | ||
| updater(): void { '💩'; } | ||
| } | ||
| const tag = unsafeStatic(name); | ||
| const element = | ||
| await fixture<Test>(fhtml`<${tag}></${tag}>`); | ||
| const clientSpy = | ||
| sinon.spy(element.client, 'mutate'); | ||
| await element.mutate(); | ||
| expect(clientSpy).to.have.been.calledWith(sinon.match({ update: element.updater })); | ||
| clientSpy.restore(); | ||
| }); | ||
| it('allows passing custom update function', async function customUpdate() { | ||
| const name = 'allows-passing-custom-update-function'; | ||
| const template = html<Test>`${x => JSON.stringify(x.data ?? {}, null, 2)}`; | ||
| const mutation = NoParamMutation; | ||
| @customElement({ name, template }) | ||
| class Test extends ApolloMutation<NoParamMutationData, unknown> { | ||
| client = client; | ||
| mutation = mutation; | ||
| updater(): void { '💩'; } | ||
| } | ||
| const update = sinon.stub() as MutationUpdaterFn; | ||
| const tag = unsafeStatic(name); | ||
| const element = await fixture<Test>(fhtml`<${tag}></${tag}>`); | ||
| const clientSpy = sinon.spy(element.client, 'mutate'); | ||
| await element.mutate({ update }); | ||
| expect(clientSpy).to.have.been.calledWith(sinon.match({ update })); | ||
| clientSpy.restore(); | ||
| }); | ||
| describe('refetchQueries', function() { | ||
| let element: Test; | ||
| class Test extends ApolloMutation<unknown, unknown> { } | ||
| describe( | ||
| 'when refetch-queries attribute set with comma-separated, badly-formatted query names', | ||
| function() { | ||
| beforeEach(async function() { | ||
| const name = `refetch-queries-attribute-${Date.now()}`; | ||
| @customElement({ name }) class Klass extends Test { } | ||
| Klass; | ||
| const tag = unsafeStatic(name); | ||
| const attrVal = 'QueryA, QueryB,QueryC, QueryD'; | ||
| element = | ||
| await fixture<Test>(fhtml`<${tag} refetch-queries="${attrVal}"></${tag}>`); | ||
| await DOM.nextUpdate(); | ||
| }); | ||
| it('sets the property as an array of query names', function() { | ||
| expect(element.refetchQueries).to.deep.equal(['QueryA', 'QueryB', 'QueryC', 'QueryD']); | ||
| }); | ||
| } | ||
| ); | ||
| describe( | ||
| 'when refetchQueries property set as array of query names', | ||
| function() { | ||
| beforeEach(async function() { | ||
| const name = `refetch-queries-property-${Math.floor(Math.random() * Date.now())}`; | ||
| @customElement({ name }) class Klass extends Test { } | ||
| Klass; | ||
| const tag = unsafeStatic(name); | ||
| element = | ||
| await fixture<Test>(fhtml` | ||
| <${tag} | ||
| .refetchQueries="${['QueryA', 'QueryB', 'QueryC', 'QueryD']}" | ||
| ></${tag}> | ||
| `); | ||
| await DOM.nextUpdate(); | ||
| }); | ||
| it('sets the property as an array of query names', function() { | ||
| expect(element.refetchQueries).to.deep.equal(['QueryA', 'QueryB', 'QueryC', 'QueryD']); | ||
| }); | ||
| it('does not reflect', function() { | ||
| expect(element.getAttribute('refetch-queries')).to.be.null; | ||
| }); | ||
| }); | ||
| }); | ||
| }); |
| /// <reference types="zen-observable" /> | ||
| import type { NetworkStatus } from '@apollo/client/core'; | ||
| import { NetworkStatus } from '@apollo/client/core'; | ||
| import { ApolloElement } from './apollo-element'; | ||
| import { ApolloQueryInterface, Constructor } from '@apollo-elements/interfaces'; | ||
| declare const ApolloQuery_base: { | ||
| new <TData, TVariables>(): { | ||
| data: TData; | ||
| new <TData, TVariables>(...a: any[]): { | ||
| query: import("graphql/language/ast").DocumentNode; | ||
| variables: TVariables; | ||
| fetchPolicy: import("@apollo/client/core").FetchPolicy; | ||
@@ -25,2 +23,3 @@ partial: boolean; | ||
| __options: Partial<import("@apollo/client/core").WatchQueryOptions<Record<string, any>, any>>; | ||
| __networkStatus: NetworkStatus; | ||
| connectedCallback(): void; | ||
@@ -40,2 +39,4 @@ documentChanged(query: import("graphql/language/ast").DocumentNode): void; | ||
| context?: Record<string, unknown>; | ||
| data: TData; | ||
| variables: TVariables; | ||
| error: Error | import("@apollo/client/errors").ApolloError; | ||
@@ -52,3 +53,3 @@ errors: readonly import("graphql").GraphQLError[]; | ||
| disconnectedCallback: (() => void) & (() => void); | ||
| onMutation(): void; | ||
| onMutation(records: MutationRecord[]): void; | ||
| getDOMGraphQLDocument(): import("graphql/language/ast").DocumentNode; | ||
@@ -75,5 +76,5 @@ getDOMVariables(): TVariables; | ||
| click(): void; | ||
| addEventListener<K extends "error" | "close" | "change" | "pause" | "abort" | "reset" | "resize" | "apollo-element-connected" | "apollo-element-disconnected" | "input" | "progress" | "select" | "blur" | "focus" | "scroll" | "waiting" | "toggle" | "load" | "fullscreenchange" | "fullscreenerror" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "cancel" | "canplay" | "canplaythrough" | "click" | "contextmenu" | "cuechange" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "focusin" | "focusout" | "gotpointercapture" | "invalid" | "keydown" | "keypress" | "keyup" | "loadeddata" | "loadedmetadata" | "loadstart" | "lostpointercapture" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "play" | "playing" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "ratechange" | "securitypolicyviolation" | "seeked" | "seeking" | "selectionchange" | "selectstart" | "stalled" | "submit" | "suspend" | "timeupdate" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "volumechange" | "wheel" | "copy" | "cut" | "paste">(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; | ||
| addEventListener<K extends "error" | "close" | "change" | "pause" | "abort" | "reset" | "resize" | "apollo-element-connected" | "apollo-element-disconnected" | "input" | "progress" | "select" | "click" | "scroll" | "blur" | "focus" | "cancel" | "waiting" | "toggle" | "load" | "fullscreenchange" | "fullscreenerror" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "canplay" | "canplaythrough" | "contextmenu" | "cuechange" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "focusin" | "focusout" | "gotpointercapture" | "invalid" | "keydown" | "keypress" | "keyup" | "loadeddata" | "loadedmetadata" | "loadstart" | "lostpointercapture" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "play" | "playing" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "ratechange" | "securitypolicyviolation" | "seeked" | "seeking" | "selectionchange" | "selectstart" | "stalled" | "submit" | "suspend" | "timeupdate" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "volumechange" | "wheel" | "copy" | "cut" | "paste">(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; | ||
| addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; | ||
| removeEventListener<K_1 extends "error" | "close" | "change" | "pause" | "abort" | "reset" | "resize" | "apollo-element-connected" | "apollo-element-disconnected" | "input" | "progress" | "select" | "blur" | "focus" | "scroll" | "waiting" | "toggle" | "load" | "fullscreenchange" | "fullscreenerror" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "cancel" | "canplay" | "canplaythrough" | "click" | "contextmenu" | "cuechange" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "focusin" | "focusout" | "gotpointercapture" | "invalid" | "keydown" | "keypress" | "keyup" | "loadeddata" | "loadedmetadata" | "loadstart" | "lostpointercapture" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "play" | "playing" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "ratechange" | "securitypolicyviolation" | "seeked" | "seeking" | "selectionchange" | "selectstart" | "stalled" | "submit" | "suspend" | "timeupdate" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "volumechange" | "wheel" | "copy" | "cut" | "paste">(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions): void; | ||
| removeEventListener<K_1 extends "error" | "close" | "change" | "pause" | "abort" | "reset" | "resize" | "apollo-element-connected" | "apollo-element-disconnected" | "input" | "progress" | "select" | "click" | "scroll" | "blur" | "focus" | "cancel" | "waiting" | "toggle" | "load" | "fullscreenchange" | "fullscreenerror" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "canplay" | "canplaythrough" | "contextmenu" | "cuechange" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "focusin" | "focusout" | "gotpointercapture" | "invalid" | "keydown" | "keypress" | "keyup" | "loadeddata" | "loadedmetadata" | "loadstart" | "lostpointercapture" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "play" | "playing" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "ratechange" | "securitypolicyviolation" | "seeked" | "seeking" | "selectionchange" | "selectstart" | "stalled" | "submit" | "suspend" | "timeupdate" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "volumechange" | "wheel" | "copy" | "cut" | "paste">(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions): void; | ||
| removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; | ||
@@ -80,0 +81,0 @@ readonly assignedSlot: HTMLSlotElement; |
| import { __decorate } from "tslib"; | ||
| import { NetworkStatus } from '@apollo/client/core'; | ||
| import { ApolloElement } from './apollo-element'; | ||
@@ -13,2 +14,6 @@ import { attr, nullableNumberConverter } from '@microsoft/fast-element'; | ||
| extends ApolloQueryMixin(ApolloElement) { | ||
| constructor() { | ||
| super(...arguments); | ||
| this.networkStatus = NetworkStatus.ready; | ||
| } | ||
| } | ||
@@ -15,0 +20,0 @@ __decorate([ |
| import { __decorate } from "tslib"; | ||
| import { fixture, unsafeStatic, expect, html as fhtml } from '@open-wc/testing'; | ||
| import { fixture, unsafeStatic, expect, html as fhtml, nextFrame, aTimeout, } from '@open-wc/testing'; | ||
| import { ApolloQuery } from './apollo-query'; | ||
| import { FASTElement, customElement, html } from '@microsoft/fast-element'; | ||
| import { NetworkStatus } from '@apollo/client/core'; | ||
| import { FASTElement, customElement, html, DOM } from '@microsoft/fast-element'; | ||
| import { spy, stub } from 'sinon'; | ||
| import { assertType, isApolloError } from '@apollo-elements/test-helpers'; | ||
| import { describeQuery } from '@apollo-elements/test-helpers/query.test'; | ||
| const template = html ` | ||
| <output id="data">${x => x.stringify(x.data)}</output> | ||
| <output id="error">${x => x.stringify(x.error)}</output> | ||
| <output id="errors">${x => x.stringify(x.errors)}</output> | ||
| <output id="loading">${x => x.stringify(x.loading)}</output> | ||
| <output id="networkStatus">${x => x.stringify(x.networkStatus)}</output> | ||
| `; | ||
| let TestableApolloQuery = class TestableApolloQuery extends ApolloQuery { | ||
| async hasRendered() { | ||
| await nextFrame(); | ||
| await DOM.nextUpdate(); | ||
| await nextFrame(); | ||
| await aTimeout(50); | ||
| return this; | ||
| } | ||
| stringify(x) { | ||
| return JSON.stringify(x, null, 2); | ||
| } | ||
| }; | ||
| TestableApolloQuery = __decorate([ | ||
| customElement({ name: 'fast-testable-apollo-query-class', template }) | ||
| ], TestableApolloQuery); | ||
| let counter = -1; | ||
| describe('[fast] ApolloQuery', function () { | ||
| describeQuery({ | ||
| async setupFunction(opts) { | ||
| var _a, _b, _c, _d; | ||
| const name = `fast-setup-function-element-${counter++}`; | ||
| let Test = class Test extends TestableApolloQuery { | ||
| }; | ||
| Test = __decorate([ | ||
| customElement({ name, template }) | ||
| ], Test); | ||
| const attrs = (opts === null || opts === void 0 ? void 0 : opts.attributes) ? ` ${opts.attributes}` : ''; | ||
| const innerHTML = (_a = opts === null || opts === void 0 ? void 0 : opts.innerHTML) !== null && _a !== void 0 ? _a : ''; | ||
| const spies = Object.fromEntries(((_b = opts === null || opts === void 0 ? void 0 : opts.spy) !== null && _b !== void 0 ? _b : []).map(key => [key, spy(Test.prototype, key)])); | ||
| const stubs = Object.fromEntries(((_c = opts === null || opts === void 0 ? void 0 : opts.stub) !== null && _c !== void 0 ? _c : []).map(key => [key, stub(Test.prototype, key)])); | ||
| const element = await fixture(`<${name}${attrs}>${innerHTML}</${name}>`); | ||
| for (const [key, val] of Object.entries((_d = opts === null || opts === void 0 ? void 0 : opts.properties) !== null && _d !== void 0 ? _d : {})) | ||
| element[key] = val; | ||
| await DOM.nextUpdate(); | ||
| return { element, spies, stubs }; | ||
| }, | ||
| }); | ||
| describe('subclassing', function () { | ||
| it('is an instance of FASTElement', async function () { | ||
| const name = 'is-an-instance-of-f-a-s-t-element'; | ||
| let Test = class Test extends ApolloQuery { | ||
| }; | ||
| Test = __decorate([ | ||
| customElement({ name }) | ||
| ], Test); | ||
| const tag = unsafeStatic(name); | ||
| const el = await fixture(fhtml `<${tag}></${tag}>`); | ||
| expect(el).to.be.an.instanceOf(FASTElement); | ||
| }); | ||
| }); | ||
| }); | ||
| class TypeCheck extends ApolloQuery { | ||
| render() { | ||
| typeCheck() { | ||
| /* eslint-disable max-len, func-call-spacing, no-multi-spaces */ | ||
| assertType(this); | ||
| assertType(this); | ||
| // ApolloElementInterface | ||
@@ -21,3 +81,2 @@ assertType(this.client); | ||
| assertType(this.data.a); | ||
| // @ts-expect-error: b as number type | ||
| assertType(this.data.b); | ||
@@ -52,75 +111,2 @@ if (isApolloError(this.error)) | ||
| } | ||
| describe('[fast] ApolloQuery', function describeApolloQuery() { | ||
| it('is an instance of FASTElement', async function () { | ||
| const name = 'is-an-instance-of-f-a-s-t-element'; | ||
| let Test = class Test extends ApolloQuery { | ||
| }; | ||
| Test = __decorate([ | ||
| customElement({ name }) | ||
| ], Test); | ||
| const tag = unsafeStatic(name); | ||
| const el = await fixture(fhtml `<${tag}></${tag}>`); | ||
| expect(el).to.be.an.instanceOf(FASTElement); | ||
| }); | ||
| it('renders when networkStatus is set', async function rendersOnNetworkStatus() { | ||
| const name = 'renders-when-network-status-is-set'; | ||
| const template = html `${x => x.networkStatus === NetworkStatus.error ? 'SUCCESS' : 'FAIL'}`; | ||
| let Test = class Test extends ApolloQuery { | ||
| }; | ||
| Test = __decorate([ | ||
| customElement({ name, template }) | ||
| ], Test); | ||
| const tag = unsafeStatic(name); | ||
| const element = await fixture(fhtml `<${tag} .networkStatus="${NetworkStatus.error}"></${tag}>`); | ||
| expect(element).shadowDom.to.equal('SUCCESS'); | ||
| }); | ||
| it('renders by default', async function noRender() { | ||
| const name = 'renders-by-default'; | ||
| const template = html `${() => 'RENDERED'}`; | ||
| let Test = class Test extends ApolloQuery { | ||
| }; | ||
| Test = __decorate([ | ||
| customElement({ name, template }) | ||
| ], Test); | ||
| const tag = unsafeStatic(name); | ||
| const element = await fixture(fhtml `<${tag}></${tag}>`); | ||
| expect(element).shadowDom.to.equal('RENDERED'); | ||
| }); | ||
| it('does render when data is set', async function dataRender() { | ||
| const name = 'does-renders-when-data-is-set'; | ||
| const template = html `${x => x.data.test}`; | ||
| let Test = class Test extends ApolloQuery { | ||
| }; | ||
| Test = __decorate([ | ||
| customElement({ name, template }) | ||
| ], Test); | ||
| const tag = unsafeStatic(name); | ||
| const el = await fixture(fhtml `<${tag} .data="${{ test: 'RENDERED' }}"></${tag}>`); | ||
| expect(el).shadowDom.to.equal('RENDERED'); | ||
| }); | ||
| it('does render when error is set', async function errorRender() { | ||
| const name = 'does-renders-when-error-is-set'; | ||
| const template = html `${x => x.error}`; | ||
| let Test = class Test extends ApolloQuery { | ||
| }; | ||
| Test = __decorate([ | ||
| customElement({ name, template }) | ||
| ], Test); | ||
| const tag = unsafeStatic(name); | ||
| const el = await fixture(fhtml `<${tag} .error="${'ERROR'}"></${tag}>`); | ||
| expect(el).shadowDom.to.equal('ERROR'); | ||
| }); | ||
| it('does render when loading is set', async function loadingRender() { | ||
| const name = 'renders-when-loading-is-set'; | ||
| const template = html `${x => { var _a; return ((_a = x.loading) !== null && _a !== void 0 ? _a : false) ? 'LOADING' : 'FAIL'; }}`; | ||
| let Test = class Test extends ApolloQuery { | ||
| }; | ||
| Test = __decorate([ | ||
| customElement({ name, template }) | ||
| ], Test); | ||
| const tag = unsafeStatic(name); | ||
| const element = await fixture(fhtml `<${tag} .loading="${true}"></${tag}>`); | ||
| expect(element).shadowDom.to.equal('LOADING'); | ||
| }); | ||
| }); | ||
| //# sourceMappingURL=apollo-query.test.js.map |
@@ -12,16 +12,96 @@ import type { | ||
| import { fixture, unsafeStatic, expect, html as fhtml } from '@open-wc/testing'; | ||
| import { | ||
| fixture, | ||
| unsafeStatic, | ||
| expect, | ||
| html as fhtml, | ||
| nextFrame, | ||
| aTimeout, | ||
| } from '@open-wc/testing'; | ||
| import { ApolloQuery } from './apollo-query'; | ||
| import { FASTElement, customElement, html } from '@microsoft/fast-element'; | ||
| import { FASTElement, customElement, html, DOM } from '@microsoft/fast-element'; | ||
| import { NetworkStatus } from '@apollo/client/core'; | ||
| import { assertType, isApolloError } from '@apollo-elements/test-helpers'; | ||
| import { spy, stub, SinonSpy, SinonStub } from 'sinon'; | ||
| import { SetupOptions, assertType, isApolloError } from '@apollo-elements/test-helpers'; | ||
| import { QueryElement, describeQuery } from '@apollo-elements/test-helpers/query.test'; | ||
| const template = html<TestableApolloQuery>` | ||
| <output id="data">${x => x.stringify(x.data)}</output> | ||
| <output id="error">${x => x.stringify(x.error)}</output> | ||
| <output id="errors">${x => x.stringify(x.errors)}</output> | ||
| <output id="loading">${x => x.stringify(x.loading)}</output> | ||
| <output id="networkStatus">${x => x.stringify(x.networkStatus)}</output> | ||
| `; | ||
| @customElement({ name: 'fast-testable-apollo-query-class', template }) | ||
| class TestableApolloQuery<D = unknown, V = unknown> | ||
| extends ApolloQuery<D, V> | ||
| implements QueryElement<D, V> { | ||
| async hasRendered() { | ||
| await nextFrame(); | ||
| await DOM.nextUpdate(); | ||
| await nextFrame(); | ||
| await aTimeout(50); | ||
| return this; | ||
| } | ||
| stringify(x: unknown) { | ||
| return JSON.stringify(x, null, 2); | ||
| } | ||
| } | ||
| let counter = -1; | ||
| describe('[fast] ApolloQuery', function() { | ||
| describeQuery({ | ||
| async setupFunction<T extends QueryElement>(opts?: SetupOptions<T>) { | ||
| const name = `fast-setup-function-element-${counter++}`; | ||
| @customElement({ name, template }) | ||
| class Test extends TestableApolloQuery { } | ||
| const attrs = opts?.attributes ? ` ${opts.attributes}` : ''; | ||
| const innerHTML = opts?.innerHTML ?? ''; | ||
| const spies = Object.fromEntries((opts?.spy ?? []).map(key => | ||
| [key, spy(Test.prototype, key as keyof Test)])) as Record<keyof T | string, SinonSpy>; | ||
| const stubs = Object.fromEntries((opts?.stub ?? []).map(key => | ||
| [key, stub(Test.prototype, key as keyof Test)])) as Record<keyof T | string, SinonStub>; | ||
| const element = await fixture<T>( | ||
| `<${name}${attrs}>${innerHTML}</${name}>`); | ||
| for (const [key, val] of Object.entries(opts?.properties ?? {})) | ||
| element[key] = val; | ||
| await DOM.nextUpdate(); | ||
| return { element, spies, stubs }; | ||
| }, | ||
| }); | ||
| describe('subclassing', function() { | ||
| it('is an instance of FASTElement', async function() { | ||
| const name = 'is-an-instance-of-f-a-s-t-element'; | ||
| @customElement({ name }) | ||
| class Test extends ApolloQuery<unknown, unknown> { } | ||
| const tag = unsafeStatic(name); | ||
| const el = await fixture<Test>(fhtml`<${tag}></${tag}>`); | ||
| expect(el).to.be.an.instanceOf(FASTElement); | ||
| }); | ||
| }); | ||
| }); | ||
| type TypeCheckData = { a: 'a', b: number }; | ||
| type TypeCheckVars = { d: 'd', e: number }; | ||
| class TypeCheck extends ApolloQuery<TypeCheckData, TypeCheckVars> { | ||
| render() { | ||
| typeCheck() { | ||
| /* eslint-disable max-len, func-call-spacing, no-multi-spaces */ | ||
| assertType<HTMLElement> (this); | ||
| assertType<FASTElement> (this); | ||
@@ -38,4 +118,3 @@ // ApolloElementInterface | ||
| assertType<'a'> (this.data.a); | ||
| // @ts-expect-error: b as number type | ||
| assertType<'a'> (this.data.b); | ||
| assertType<number> (this.data.b); | ||
| if (isApolloError(this.error)) | ||
@@ -71,57 +150,1 @@ assertType<readonly GraphQLError[]> (this.error.graphQLErrors); | ||
| } | ||
| describe('[fast] ApolloQuery', function describeApolloQuery() { | ||
| it('is an instance of FASTElement', async function() { | ||
| const name = 'is-an-instance-of-f-a-s-t-element'; | ||
| @customElement({ name }) class Test extends ApolloQuery<unknown, unknown> { } | ||
| const tag = unsafeStatic(name); | ||
| const el = await fixture<Test>(fhtml`<${tag}></${tag}>`); | ||
| expect(el).to.be.an.instanceOf(FASTElement); | ||
| }); | ||
| it('renders when networkStatus is set', async function rendersOnNetworkStatus() { | ||
| const name = 'renders-when-network-status-is-set'; | ||
| const template = html<Test>`${x => x.networkStatus === NetworkStatus.error ? 'SUCCESS' : 'FAIL'}`; | ||
| @customElement({ name, template }) class Test extends ApolloQuery<unknown, unknown> { } | ||
| const tag = unsafeStatic(name); | ||
| const element = await fixture<Test>(fhtml`<${tag} .networkStatus="${NetworkStatus.error}"></${tag}>`); | ||
| expect(element).shadowDom.to.equal('SUCCESS'); | ||
| }); | ||
| it('renders by default', async function noRender() { | ||
| const name = 'renders-by-default'; | ||
| const template = html<Test>`${() => 'RENDERED'}`; | ||
| @customElement({ name, template }) class Test extends ApolloQuery<unknown, unknown> { } | ||
| const tag = unsafeStatic(name); | ||
| const element = await fixture<Test>(fhtml`<${tag}></${tag}>`); | ||
| expect(element).shadowDom.to.equal('RENDERED'); | ||
| }); | ||
| it('does render when data is set', async function dataRender() { | ||
| const name = 'does-renders-when-data-is-set'; | ||
| const template = html<Test>`${x => x.data.test}`; | ||
| @customElement({ name, template }) class Test extends ApolloQuery<{ test: string }, unknown> { } | ||
| const tag = unsafeStatic(name); | ||
| const el = await fixture<Test>(fhtml`<${tag} .data="${{ test: 'RENDERED' }}"></${tag}>`); | ||
| expect(el).shadowDom.to.equal('RENDERED'); | ||
| }); | ||
| it('does render when error is set', async function errorRender() { | ||
| const name = 'does-renders-when-error-is-set'; | ||
| const template = html<Test>`${x => x.error}`; | ||
| @customElement({ name, template }) class Test extends ApolloQuery<unknown, unknown> { } | ||
| const tag = unsafeStatic(name); | ||
| const el = await fixture<Test>(fhtml`<${tag} .error="${'ERROR'}"></${tag}>`); | ||
| expect(el).shadowDom.to.equal('ERROR'); | ||
| }); | ||
| it('does render when loading is set', async function loadingRender() { | ||
| const name = 'renders-when-loading-is-set'; | ||
| const template = html`${x => x.loading ?? false ? 'LOADING' : 'FAIL'}`; | ||
| @customElement({ name, template }) class Test extends ApolloQuery<unknown, unknown> { } | ||
| const tag = unsafeStatic(name); | ||
| const element = await fixture<Test>(fhtml`<${tag} .loading="${true}"></${tag}>`); | ||
| expect(element).shadowDom.to.equal('LOADING'); | ||
| }); | ||
| }); |
@@ -1,2 +0,2 @@ | ||
| import type { NetworkStatus } from '@apollo/client/core'; | ||
| import { NetworkStatus } from '@apollo/client/core'; | ||
@@ -17,3 +17,3 @@ import { ApolloElement } from './apollo-element'; | ||
| implements ApolloQueryInterface<Data, Variables> { | ||
| @attr({ converter: nullableNumberConverter }) networkStatus: NetworkStatus; | ||
| @attr({ converter: nullableNumberConverter }) networkStatus: NetworkStatus = NetworkStatus.ready; | ||
| } |
@@ -5,6 +5,5 @@ /// <reference types="zen-observable" /> | ||
| declare const ApolloSubscription_base: { | ||
| new <TData_1, TVariables_1>(): { | ||
| new <TData_1, TVariables_1>(...a: any[]): { | ||
| data: TData_1; | ||
| fetchPolicy: import("@apollo/client/core").FetchPolicy; | ||
| fetchResults: boolean; | ||
| pollInterval: number; | ||
@@ -16,4 +15,5 @@ noAutoSubscribe: boolean; | ||
| variables: TVariables_1; | ||
| notifyOnNetworkStatusChange: boolean; | ||
| shouldResubscribe: boolean | ((options: import("@apollo-elements/interfaces").SubscriptionDataOptions<unknown, Record<string, any>>) => boolean); | ||
| skip: boolean; | ||
| notifyOnNetworkStatusChange: boolean; | ||
| onSubscriptionData?(_result: import("@apollo-elements/interfaces").OnSubscriptionDataParams<TData_1>): void; | ||
@@ -46,3 +46,3 @@ onSubscriptionComplete?(): void; | ||
| document: import("graphql").DocumentNode; | ||
| onMutation(): void; | ||
| onMutation(records: MutationRecord[]): void; | ||
| getDOMGraphQLDocument(): import("graphql").DocumentNode; | ||
@@ -69,5 +69,5 @@ getDOMVariables(): unknown; | ||
| click(): void; | ||
| addEventListener<K extends "error" | "close" | "change" | "pause" | "abort" | "reset" | "resize" | "apollo-element-connected" | "apollo-element-disconnected" | "input" | "progress" | "select" | "blur" | "focus" | "scroll" | "waiting" | "toggle" | "load" | "fullscreenchange" | "fullscreenerror" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "cancel" | "canplay" | "canplaythrough" | "click" | "contextmenu" | "cuechange" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "focusin" | "focusout" | "gotpointercapture" | "invalid" | "keydown" | "keypress" | "keyup" | "loadeddata" | "loadedmetadata" | "loadstart" | "lostpointercapture" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "play" | "playing" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "ratechange" | "securitypolicyviolation" | "seeked" | "seeking" | "selectionchange" | "selectstart" | "stalled" | "submit" | "suspend" | "timeupdate" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "volumechange" | "wheel" | "copy" | "cut" | "paste">(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; | ||
| addEventListener<K extends "error" | "close" | "change" | "pause" | "abort" | "reset" | "resize" | "apollo-element-connected" | "apollo-element-disconnected" | "input" | "progress" | "select" | "click" | "scroll" | "blur" | "focus" | "cancel" | "waiting" | "toggle" | "load" | "fullscreenchange" | "fullscreenerror" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "canplay" | "canplaythrough" | "contextmenu" | "cuechange" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "focusin" | "focusout" | "gotpointercapture" | "invalid" | "keydown" | "keypress" | "keyup" | "loadeddata" | "loadedmetadata" | "loadstart" | "lostpointercapture" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "play" | "playing" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "ratechange" | "securitypolicyviolation" | "seeked" | "seeking" | "selectionchange" | "selectstart" | "stalled" | "submit" | "suspend" | "timeupdate" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "volumechange" | "wheel" | "copy" | "cut" | "paste">(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; | ||
| addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; | ||
| removeEventListener<K_1 extends "error" | "close" | "change" | "pause" | "abort" | "reset" | "resize" | "apollo-element-connected" | "apollo-element-disconnected" | "input" | "progress" | "select" | "blur" | "focus" | "scroll" | "waiting" | "toggle" | "load" | "fullscreenchange" | "fullscreenerror" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "cancel" | "canplay" | "canplaythrough" | "click" | "contextmenu" | "cuechange" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "focusin" | "focusout" | "gotpointercapture" | "invalid" | "keydown" | "keypress" | "keyup" | "loadeddata" | "loadedmetadata" | "loadstart" | "lostpointercapture" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "play" | "playing" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "ratechange" | "securitypolicyviolation" | "seeked" | "seeking" | "selectionchange" | "selectstart" | "stalled" | "submit" | "suspend" | "timeupdate" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "volumechange" | "wheel" | "copy" | "cut" | "paste">(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions): void; | ||
| removeEventListener<K_1 extends "error" | "close" | "change" | "pause" | "abort" | "reset" | "resize" | "apollo-element-connected" | "apollo-element-disconnected" | "input" | "progress" | "select" | "click" | "scroll" | "blur" | "focus" | "cancel" | "waiting" | "toggle" | "load" | "fullscreenchange" | "fullscreenerror" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "canplay" | "canplaythrough" | "contextmenu" | "cuechange" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "focusin" | "focusout" | "gotpointercapture" | "invalid" | "keydown" | "keypress" | "keyup" | "loadeddata" | "loadedmetadata" | "loadstart" | "lostpointercapture" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "play" | "playing" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "ratechange" | "securitypolicyviolation" | "seeked" | "seeking" | "selectionchange" | "selectstart" | "stalled" | "submit" | "suspend" | "timeupdate" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "volumechange" | "wheel" | "copy" | "cut" | "paste">(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions): void; | ||
| removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; | ||
@@ -74,0 +74,0 @@ readonly assignedSlot: HTMLSlotElement; |
| import { __decorate } from "tslib"; | ||
| import { unsafeStatic, fixture, expect, html as fhtml } from '@open-wc/testing'; | ||
| import { fixture, expect, nextFrame, aTimeout } from '@open-wc/testing'; | ||
| import { FASTElement, customElement, DOM, html } from '@microsoft/fast-element'; | ||
| import { assertType, isApolloError } from '@apollo-elements/test-helpers'; | ||
| import { describeSubscription } from '@apollo-elements/test-helpers/subscription.test'; | ||
| import { ApolloSubscription } from './apollo-subscription'; | ||
| import { FASTElement, customElement } from '@microsoft/fast-element'; | ||
| import { assertType, isApolloError } from '@apollo-elements/test-helpers'; | ||
| import { spy, stub } from 'sinon'; | ||
| const template = html ` | ||
| <output id="data">${x => x.stringify(x.data)}</output> | ||
| <output id="error">${x => x.stringify(x.error)}</output> | ||
| <output id="loading">${x => x.stringify(x.loading)}</output> | ||
| `; | ||
| let TestableApolloSubscription = class TestableApolloSubscription extends ApolloSubscription { | ||
| async hasRendered() { | ||
| await nextFrame(); | ||
| await DOM.nextUpdate(); | ||
| await nextFrame(); | ||
| await aTimeout(50); | ||
| return this; | ||
| } | ||
| stringify(x) { | ||
| return JSON.stringify(x, null, 2); | ||
| } | ||
| }; | ||
| TestableApolloSubscription = __decorate([ | ||
| customElement({ name: 'testable-apollo-subscription', template }) | ||
| ], TestableApolloSubscription); | ||
| let counter = 1; | ||
| describe('[fast] ApolloSubscription', function () { | ||
| describeSubscription({ | ||
| async setupFunction(opts) { | ||
| var _a, _b, _c, _d; | ||
| const name = `fast-setup-function-element-${counter++}`; | ||
| let Test = class Test extends TestableApolloSubscription { | ||
| }; | ||
| Test = __decorate([ | ||
| customElement({ name, template }) | ||
| ], Test); | ||
| const attrs = (opts === null || opts === void 0 ? void 0 : opts.attributes) ? ` ${opts.attributes}` : ''; | ||
| const innerHTML = (_a = opts === null || opts === void 0 ? void 0 : opts.innerHTML) !== null && _a !== void 0 ? _a : ''; | ||
| const spies = Object.fromEntries(((_b = opts === null || opts === void 0 ? void 0 : opts.spy) !== null && _b !== void 0 ? _b : []).map(key => [key, spy(Test.prototype, key)])); | ||
| const stubs = Object.fromEntries(((_c = opts === null || opts === void 0 ? void 0 : opts.stub) !== null && _c !== void 0 ? _c : []).map(key => [key, stub(Test.prototype, key)])); | ||
| const element = await fixture(`<${name}${attrs}>${innerHTML}</${name}>`); | ||
| for (const [key, val] of Object.entries((_d = opts === null || opts === void 0 ? void 0 : opts.properties) !== null && _d !== void 0 ? _d : {})) | ||
| element[key] = val; | ||
| await DOM.nextUpdate(); | ||
| return { element, spies, stubs }; | ||
| }, | ||
| }); | ||
| describe('subclassing', function () { | ||
| it('is an instance of FASTElement', async function () { | ||
| const name = 'is-an-instance-of-f-a-s-t-element'; | ||
| let Klass = class Klass extends TestableApolloSubscription { | ||
| }; | ||
| Klass = __decorate([ | ||
| customElement({ name }) | ||
| ], Klass); | ||
| const el = await fixture(`<${name}></${name}>`); | ||
| expect(el).to.be.an.instanceOf(FASTElement); | ||
| }); | ||
| }); | ||
| }); | ||
| class TypeCheck extends ApolloSubscription { | ||
| render() { | ||
| typeCheck() { | ||
| /* eslint-disable max-len, func-call-spacing, no-multi-spaces */ | ||
| assertType(this); | ||
| assertType(this); | ||
| // ApolloElementInterface | ||
@@ -38,39 +96,2 @@ assertType(this.client); | ||
| } | ||
| class Test extends ApolloSubscription { | ||
| set thing(v) { | ||
| // Check for FASTElement interface | ||
| this.$emit('thing', v); | ||
| // Check for HTMLElement interface | ||
| this.dispatchEvent(new CustomEvent('thing', { detail: { thing: v } })); | ||
| } | ||
| } | ||
| describe('[fast] ApolloSubscription', function describeApolloSubscription() { | ||
| it('is an instance of FASTElement', async function () { | ||
| const name = 'is-an-instance-of-f-a-s-t-element'; | ||
| let Klass = class Klass extends Test { | ||
| }; | ||
| Klass = __decorate([ | ||
| customElement({ name }) | ||
| ], Klass); | ||
| const tag = unsafeStatic(name); | ||
| const el = await fixture(fhtml `<${tag}></${tag}>`); | ||
| expect(el).to.be.an.instanceOf(FASTElement); | ||
| }); | ||
| it('defines default properties', async function definesObserveProperties() { | ||
| const name = 'defines-default-properties'; | ||
| const tag = unsafeStatic(name); | ||
| let Klass = class Klass extends Test { | ||
| }; | ||
| Klass = __decorate([ | ||
| customElement({ name }) | ||
| ], Klass); | ||
| const el = await fixture(fhtml `<${tag}></${tag}>`); | ||
| expect(el.data, 'data').to.be.null; | ||
| expect(el.error, 'error').to.be.null; | ||
| expect(el.errors, 'error').to.be.null; | ||
| expect(el.loading, 'loading').to.be.false; | ||
| expect(el.subscription, 'subscription').to.be.null; | ||
| expect(el.client, 'client').to.equal(window.__APOLLO_CLIENT__); | ||
| }); | ||
| }); | ||
| //# sourceMappingURL=apollo-subscription.test.js.map |
@@ -10,16 +10,87 @@ import type { | ||
| import type { DocumentNode, GraphQLError } from 'graphql'; | ||
| import type { SetupOptions, SetupResult } from '@apollo-elements/test-helpers'; | ||
| import type { SubscriptionElement } from '@apollo-elements/test-helpers/subscription.test'; | ||
| import { unsafeStatic, fixture, expect, html as fhtml } from '@open-wc/testing'; | ||
| import { fixture, expect, nextFrame, aTimeout } from '@open-wc/testing'; | ||
| import { FASTElement, customElement, DOM, html } from '@microsoft/fast-element'; | ||
| import { assertType, isApolloError } from '@apollo-elements/test-helpers'; | ||
| import { describeSubscription } from '@apollo-elements/test-helpers/subscription.test'; | ||
| import { ApolloSubscription } from './apollo-subscription'; | ||
| import { FASTElement, customElement } from '@microsoft/fast-element'; | ||
| import { assertType, isApolloError } from '@apollo-elements/test-helpers'; | ||
| import { spy, stub, SinonSpy, SinonStub } from 'sinon'; | ||
| const template = html<TestableApolloSubscription>` | ||
| <output id="data">${x => x.stringify(x.data)}</output> | ||
| <output id="error">${x => x.stringify(x.error)}</output> | ||
| <output id="loading">${x => x.stringify(x.loading)}</output> | ||
| `; | ||
| @customElement({ name: 'testable-apollo-subscription', template }) | ||
| class TestableApolloSubscription<D = unknown, V = unknown> | ||
| extends ApolloSubscription<D, V> | ||
| implements SubscriptionElement<D, V> { | ||
| async hasRendered() { | ||
| await nextFrame(); | ||
| await DOM.nextUpdate(); | ||
| await nextFrame(); | ||
| await aTimeout(50); | ||
| return this; | ||
| } | ||
| stringify(x: unknown) { | ||
| return JSON.stringify(x, null, 2); | ||
| } | ||
| } | ||
| let counter = 1; | ||
| describe('[fast] ApolloSubscription', function() { | ||
| describeSubscription({ | ||
| async setupFunction<T extends SubscriptionElement>(opts?: SetupOptions<T>) { | ||
| const name = `fast-setup-function-element-${counter++}`; | ||
| @customElement({ name, template }) | ||
| class Test extends TestableApolloSubscription { } | ||
| const attrs = opts?.attributes ? ` ${opts.attributes}` : ''; | ||
| const innerHTML = opts?.innerHTML ?? ''; | ||
| const spies = Object.fromEntries((opts?.spy ?? []).map(key => | ||
| [key, spy(Test.prototype, key as keyof Test)])) as Record<keyof T | string, SinonSpy>; | ||
| const stubs = Object.fromEntries((opts?.stub ?? []).map(key => | ||
| [key, stub(Test.prototype, key as keyof Test)])) as Record<keyof T | string, SinonStub>; | ||
| const element = await fixture<T>( | ||
| `<${name}${attrs}>${innerHTML}</${name}>`); | ||
| for (const [key, val] of Object.entries(opts?.properties ?? {})) | ||
| element[key] = val; | ||
| await DOM.nextUpdate(); | ||
| return { element, spies, stubs }; | ||
| }, | ||
| }); | ||
| describe('subclassing', function() { | ||
| it('is an instance of FASTElement', async function() { | ||
| const name = 'is-an-instance-of-f-a-s-t-element'; | ||
| @customElement({ name }) | ||
| class Klass extends TestableApolloSubscription { } | ||
| const el = await fixture<Klass>(`<${name}></${name}>`); | ||
| expect(el).to.be.an.instanceOf(FASTElement); | ||
| }); | ||
| }); | ||
| }); | ||
| type TypeCheckData = { a: 'a', b: number }; | ||
| type TypeCheckVars = { d: 'd', e: number }; | ||
| class TypeCheck extends ApolloSubscription<TypeCheckData, TypeCheckVars> { | ||
| render() { | ||
| typeCheck() { | ||
| /* eslint-disable max-len, func-call-spacing, no-multi-spaces */ | ||
| assertType<HTMLElement> (this); | ||
| assertType<FASTElement> (this); | ||
@@ -56,33 +127,1 @@ // ApolloElementInterface | ||
| } | ||
| class Test extends ApolloSubscription<unknown, unknown> { | ||
| set thing(v: unknown) { | ||
| // Check for FASTElement interface | ||
| this.$emit('thing', v); | ||
| // Check for HTMLElement interface | ||
| this.dispatchEvent(new CustomEvent('thing', { detail: { thing: v } })); | ||
| } | ||
| } | ||
| describe('[fast] ApolloSubscription', function describeApolloSubscription() { | ||
| it('is an instance of FASTElement', async function() { | ||
| const name = 'is-an-instance-of-f-a-s-t-element'; | ||
| @customElement({ name }) class Klass extends Test {} | ||
| const tag = unsafeStatic(name); | ||
| const el = await fixture<Klass>(fhtml`<${tag}></${tag}>`); | ||
| expect(el).to.be.an.instanceOf(FASTElement); | ||
| }); | ||
| it('defines default properties', async function definesObserveProperties() { | ||
| const name = 'defines-default-properties'; | ||
| const tag = unsafeStatic(name); | ||
| @customElement({ name }) class Klass extends Test {} | ||
| const el = await fixture<Klass>(fhtml`<${tag}></${tag}>`); | ||
| expect(el.data, 'data').to.be.null; | ||
| expect(el.error, 'error').to.be.null; | ||
| expect(el.errors, 'error').to.be.null; | ||
| expect(el.loading, 'loading').to.be.false; | ||
| expect(el.subscription, 'subscription').to.be.null; | ||
| expect(el.client, 'client').to.equal(window.__APOLLO_CLIENT__); | ||
| }); | ||
| }); |
@@ -6,2 +6,14 @@ # Change Log | ||
| ## [1.1.2](https://github.com/apollo-elements/apollo-elements/compare/@apollo-elements/fast@1.1.1...@apollo-elements/fast@1.1.2) (2020-11-08) | ||
| ### Bug Fixes | ||
| * **fast:** property descriptors ([adad450](https://github.com/apollo-elements/apollo-elements/commit/adad4504e80e260b334eb88049871f8049d970ef)) | ||
| * **fast:** set default for networkStatus ([28c75e7](https://github.com/apollo-elements/apollo-elements/commit/28c75e78cf169cd5f7ec13a3bb8f3953902fc988)) | ||
| ## [1.1.1](https://github.com/apollo-elements/apollo-elements/compare/@apollo-elements/fast@1.1.0...@apollo-elements/fast@1.1.1) (2020-10-30) | ||
@@ -8,0 +20,0 @@ |
| { | ||
| "name": "@apollo-elements/fast", | ||
| "version": "1.1.1", | ||
| "version": "1.1.2", | ||
| "description": "👩🚀🌛 FastElements for Apollo GraphQL 🚀👨🚀", | ||
@@ -51,7 +51,7 @@ "main": "index.js", | ||
| "dependencies": { | ||
| "@apollo-elements/mixins": "^3.1.1", | ||
| "@apollo-elements/mixins": "^3.2.0", | ||
| "@microsoft/fast-element": "^0.18.0", | ||
| "tslib": "^2.0.1" | ||
| }, | ||
| "gitHead": "55e943d3eca62541a52881ab4a43ae7bf587a6d1" | ||
| "gitHead": "67158bd9a971965dd0d14129f5d00fb366ac28db" | ||
| } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.59%
197848
- Lines of code
- increased by1.18%
2581