chore: Remove ChainableArray interface

Author: NicholasBoll

cli/types/index.d.ts

@@ -339,6 +339,7 @@ declare namespace Cypress {
      * @see https://on.cypress.io/each
      */
     each<E extends Node = HTMLElement>(fn: (element: JQuery<E>, index: number, $list: E[]) => void): Chainable<JQuery<E>> // Can't properly infer type without breaking down Chainable
+    each(fn: (item: any, index: number, $list: any[]) => void): Chainable<Subject>
 
     /**
      * End a chain of commands
@@ -425,7 +426,7 @@ declare namespace Cypress {
      *
      * @see https://on.cypress.io/getcookies
      */
-    getCookies(options?: Partial<Loggable & Timeoutable>): ChainableArray<Cookie>
+    getCookies(options?: Partial<Loggable & Timeoutable>): Chainable<Cookie[]>
 
     /**
      * Navigate back or forward to the previous or next URL in the browser’s history.
@@ -711,13 +712,15 @@ declare namespace Cypress {
      */
     submit(options?: Partial<Loggable & Timeoutable>): Chainable<Subject>
 
+    spread<S extends object | any[] | string | number | boolean>(fn: (...args: any[]) => S): Chainable<S>
+    spread(fn: (...args: any[]) => void): Chainable<Subject>
+
     /**
      * Enables you to work with the subject yielded from the previous command.
      *
      * @see https://on.cypress.io/then
      */
-    then<S extends any[]>(fn: (this: ObjectLike, currentSubject: Subject) => S, options?: Partial<Timeoutable>): ChainableArray<S>
-    then<S extends object | string | number | boolean>(fn: (this: ObjectLike, currentSubject: Subject) => S, options?: Partial<Timeoutable>): Chainable<S>
+    then<S extends object | any[] | string | number | boolean>(fn: (this: ObjectLike, currentSubject: Subject) => S, options?: Partial<Timeoutable>): Chainable<S>
     then(fn: (this: ObjectLike, currentSubject: Subject) => void, options?: Partial<Timeoutable>): Chainable<Subject>
 
     /**
@@ -804,7 +807,7 @@ declare namespace Cypress {
      */
     wait(ms: number, options?: Partial<Loggable & Timeoutable>): Chainable<undefined>
     wait(alias: string, options?: Partial<Loggable & Timeoutable>): Chainable<WaitXHR>
-    wait(alias: string[], options?: Partial<Loggable & Timeoutable>): ChainableArray<WaitXHR>
+    wait(alias: string[], options?: Partial<Loggable & Timeoutable>): Chainable<WaitXHR[]>
 
     /**
      * Get the window object of the page that is currently active.
@@ -834,7 +837,6 @@ declare namespace Cypress {
      * @see https://on.cypress.io/wrap
      */
     wrap<E extends Node = HTMLElement>(element: E | JQuery<E>, options?: Partial<Loggable & Timeoutable>): Chainable<JQuery<E>>
-    wrap<S>(objects: S[], options?: Partial<Loggable & Timeoutable>): ChainableArray<S>
     wrap<S>(object: S, options?: Partial<Loggable & Timeoutable>): Chainable<S>
 
     /**
@@ -846,59 +848,6 @@ declare namespace Cypress {
     writeFile<C extends FileContents>(filePath: string, contents: C, encoding: Encodings, options?: Partial<Loggable>): Chainable<C>
   }
 
-  /**
-   * Chainable interface with stronger typing for array subjects
-   */
-  interface ChainableArray<Subject> extends Omit<Chainable<Subject[]>, 'and' | 'as' | 'each' | 'should' | 'then'> {
-    /**
-     * Create an assertion. Assertions are automatically retried until they pass or time out.
-     *
-     * @alias should
-     * @see https://on.cypress.io/and
-     */
-    and: ChainerArray<Subject>
-
-    /**
-     * Assign an alias for later use. Reference the alias later within a
-     * [cy.get()](https://on.cypress.io/get) or
-     * [cy.wait()](https://on.cypress.io/wait) command with a `@` prefix.
-     *
-     * @see https://on.cypress.io/as
-     */
-    as(alias: string): ChainableArray<Subject>
-
-    /**
-     * Iterate through an array like structure (arrays or objects with a length property).
-     * @see https://on.cypress.io/api/each
-     */
-    each<S extends Subject>(fn: (element: S, index: number, $list: Subject[]) => void): ChainableArray<S>
-
-    /**
-     * Expand an array into multiple arguments.
-     * Identical to `.then()`, but always expects an array-like structure as its subject.
-     *
-     * @see https://on.cypress.io/spread
-     */
-    spread<S extends object | string | number | boolean>(fn: (...args: Subject[]) => S): Chainable<S>
-    spread(fn: (...args: Subject[]) => void): ChainableArray<Subject>
-
-    /**
-     * Create an assertion. Assertions are automatically retried until they pass or time out.
-     *
-     * @see https://on.cypress.io/should
-     */
-    should: ChainerArray<Subject>
-
-    /**
-     * Enables you to work with the subject yielded from the previous command.
-     *
-     * @see https://on.cypress.io/then
-     */
-    then<S extends any[]>(fn: (this: ObjectLike, currentSubject: Subject[]) => S, options?: Partial<Timeoutable>): ChainableArray<S>
-    then<S extends object | string | number | boolean>(fn: (this: ObjectLike, currentSubject: Subject[]) => S, options?: Partial<Timeoutable>): Chainable<S>
-    then(fn: (this: ObjectLike, currentSubject: Subject[]) => void, options?: Partial<Timeoutable>): ChainableArray<Subject>
-  }
-
   interface CookieDefaults {
     whitelist: string | string[] | RegExp | ((cookie: any) => boolean)
   }
@@ -1281,12 +1230,6 @@ declare namespace Cypress {
     (fn: (currentSubject: Subject) => void): Chainable<Subject>
   }
 
-  interface ChainerArray<Subject> {
-    (chainers: string, value?: any): ChainableArray<Subject>
-    (chainers: string, method: string, value: any): ChainableArray<Subject>
-    (fn: (currentSubject: Subject[]) => void): ChainableArray<Subject>
-  }
-
   /**
    * The clock starts at the unix epoch (timestamp of 0). This means that when you instantiate new Date in your application, it will have a time of January 1st, 1970.
    */

cli/types/tests/cypress-tests.ts

@@ -58,6 +58,33 @@ namespace CypressLogsTest {
   })
 }
 
+cy.wrap({ foo: [1, 2, 3] })
+  .its('foo')
+  .each((s: number) => {
+    s
+  })
+
+cy.wrap({ foo: ['bar', 'baz'] })
+  .its('foo')
+  .then(([first, second]) => {
+    first // $ExpectType string
+  })
+  .spread((first: string, second: string) => {
+    first // $ExpectType string
+    // return first as string
+  })
+  .each((s: string) => {
+    s // $ExpectType string
+  })
+  .then(s => {
+    s // $ExpectType string[]
+  })
+
+cy.wrap(['bar', 'baz'])
+  .spread((first, second) => {
+    first // $ExpectType any
+  })
+
 cy.wrap({ foo: 'bar' })
   .then(s => {
     s // $ExpectType { foo: string; }
@@ -72,28 +99,28 @@ cy.wrap({ foo: 'bar' })
   })
 
 cy.wait(['@foo', '@bar'])
-  .spread((first, second) => {
+  .then(([first, second]) => {
     first // $ExpectType WaitXHR
   })
 
 cy.wrap([{ foo: 'bar' }, { foo: 'baz' }])
   .then(subject => {
     subject // $ExpectType { foo: string; }[]
   })
-  .spread((first, second) => {
+  .then(([first, second]) => {
     first // $ExpectType { foo: string; }
   })
   .then(subject => {
     subject // $ExpectType { foo: string; }[]
   })
-  .spread((first, second) => {
+  .then(([first, second]) => {
     return first.foo + second.foo
   })
   .then(subject => {
     subject // $ExpectType string
   })
 
-  cy.wrap([1, 2, 3]).each((num, i, array) => {
+  cy.wrap([1, 2, 3]).each((num: number, i, array) => {
     return new Cypress.Promise((resolve) => {
       setTimeout(() => {
         resolve()