feat: replacing visit/mount directive with custom component

Author: elylucas

components/global/E2eOrCt.vue

@@ -0,0 +1,10 @@
+<template>
+  <code-group sync-group="e2e-ct">
+    <code-block label="End-to-End Test" active>
+      <slot name="e2e"></slot>
+    </code-block>
+    <code-block label="Component Test">
+      <slot name="ct"></slot>
+    </code-block>    
+  </code-group>
+</template>

content/api/commands/clock.md

@@ -152,25 +152,30 @@ cy.get('.timer').then(($timer) => {
 
 #### Specify a now timestamp
 
-:::visit-mount-test-example
+<e2e-or-ct>
+<template #e2e>
 
 ```js
+const now = new Date(2021, 3, 14) // month is 0-indexed
+
+cy.clock(now)
 cy.visit('/index.html')
+cy.get('#date').should('have.value', '04/14/2021')
 ```
 
-```js
-cy.mount(<DatePicker id="date" />)
-```
+</template>
+<template #ct>
 
 ```js
 const now = new Date(2021, 3, 14) // month is 0-indexed
 
 cy.clock(now)
-__VISIT_MOUNT_PLACEHOLDER__
+cy.mount(<DatePicker id="date" />)
 cy.get('#date').should('have.value', '04/14/2021')
 ```
 
-:::
+</template>
+</e2e-or-ct>
 
 ### Function names
 

content/api/commands/fixture.md

@@ -183,29 +183,38 @@ cy.fixture('users').then((json) => {
 You can modify fixture data directly before visiting a URL or mounting a
 component that makes a network request to that URL.
 
-:::visit-mount-test-example
+<e2e-or-ct>
+<template #e2e>
 
 ```js
+cy.fixture('user').then((user) => {
+  user.firstName = 'Jane'
+  cy.intercept('GET', '/users/1', user).as('getUser')
+})
+
 cy.visit('/users')
+cy.wait('@getUser').then(({ request }) => {
+  expect(request.body.firstName).to.eq('Jane')
+})
 ```
 
-```js
-cy.mount(<Users />)
-```
+</template>
+<template #ct>
 
 ```js
 cy.fixture('user').then((user) => {
   user.firstName = 'Jane'
   cy.intercept('GET', '/users/1', user).as('getUser')
 })
 
-__VISIT_MOUNT_PLACEHOLDER__
+cy.mount(<Users />)
 cy.wait('@getUser').then(({ request }) => {
   expect(request.body.firstName).to.eq('Jane')
 })
 ```
 
-:::
+</template>
+</e2e-or-ct>
 
 ## Notes
 

content/api/commands/viewport.md

@@ -132,16 +132,33 @@ describe('Nav Menus', () => {
 
 #### Dynamically test multiple viewports
 
-:::visit-mount-test-example
+<e2e-or-ct>
+<template #e2e>
 
 ```js
-cy.visit('https://www.cypress.io')
-```
+const sizes = ['iphone-6', 'ipad-2', [1024, 768]]
 
-```js
-cy.mount(<MyComponent />)
+describe('Logo', () => {
+  sizes.forEach((size) => {
+    // make assertions on the logo using
+    // an array of different viewports
+    it(`Should display logo on ${size} screen`, () => {
+      if (Cypress._.isArray(size)) {
+        cy.viewport(size[0], size[1])
+      } else {
+        cy.viewport(size)
+      }
+
+      cy.visit('https://www.cypress.io')
+      cy.get('#logo').should('be.visible')
+    })
+  })
+})
 ```
 
+</template>
+<template #ct>
+
 ```js
 const sizes = ['iphone-6', 'ipad-2', [1024, 768]]
 
@@ -156,14 +173,15 @@ describe('Logo', () => {
         cy.viewport(size)
       }
 
-      __VISIT_MOUNT_PLACEHOLDER__
+      cy.mount(<MyComponent />)
       cy.get('#logo').should('be.visible')
     })
   })
 })
 ```
 
-:::
+</template>
+</e2e-or-ct>
 
 <DocsImage src="/img/api/viewport/loop-through-an-array-of-multiple-viewports.png" alt="Command Log of multiple viewports" ></DocsImage>
 

content/api/commands/wait.md

@@ -104,29 +104,38 @@ For a detailed explanation of aliasing,
 
 #### Wait for a specific request to respond
 
-:::visit-mount-test-example
+<e2e-or-ct>
+<template #e2e>
 
 ```js
+// Wait for the alias 'getAccount' to respond
+// without changing or stubbing its response
+cy.intercept('/accounts/*').as('getAccount')
 cy.visit('/accounts/123')
+cy.wait('@getAccount').then((interception) => {
+  // we can now access the low level interception
+  // that contains the request body,
+  // response body, status, etc
+})
 ```
 
-```js
-cy.mount(<Account />)
-```
+</template>
+<template #ct>
 
 ```js
 // Wait for the alias 'getAccount' to respond
 // without changing or stubbing its response
 cy.intercept('/accounts/*').as('getAccount')
-__VISIT_MOUNT_PLACEHOLDER__
+cy.mount(<Account />)
 cy.wait('@getAccount').then((interception) => {
   // we can now access the low level interception
   // that contains the request body,
   // response body, status, etc
 })
 ```
 
-:::
+</template>
+</e2e-or-ct>
 
 #### Wait automatically increments responses
 
@@ -165,21 +174,33 @@ cy.get('#book-results').should('have.length', 1)
 When passing an array of aliases to `cy.wait()`, Cypress will wait for all
 requests to complete within the given `requestTimeout` and `responseTimeout`.
 
-:::visit-mount-test-example
+<e2e-or-ct>
+<template #e2e>
 
 ```js
+cy.intercept('/users/*').as('getUsers')
+cy.intercept('/activities/*').as('getActivities')
+cy.intercept('/comments/*').as('getComments')
 cy.visit('/dashboard')
-```
 
-```js
-cy.mount(<Dashboard />)
+cy.wait(['@getUsers', '@getActivities', '@getComments']).then(
+  (interceptions) => {
+    // interceptions will now be an array of matching requests
+    // interceptions[0] <-- getUsers
+    // interceptions[1] <-- getActivities
+    // interceptions[2] <-- getComments
+  }
+)
 ```
 
+</template>
+<template #ct>
+
 ```js
 cy.intercept('/users/*').as('getUsers')
 cy.intercept('/activities/*').as('getActivities')
 cy.intercept('/comments/*').as('getComments')
-__VISIT_MOUNT_PLACEHOLDER__
+cy.mount(<Dashboard />)
 
 cy.wait(['@getUsers', '@getActivities', '@getComments']).then(
   (interceptions) => {
@@ -191,7 +212,8 @@ cy.wait(['@getUsers', '@getActivities', '@getComments']).then(
 )
 ```
 
-:::
+</template>
+</e2e-or-ct>
 
 #### Using [`.spread()`](/api/commands/spread) to spread the array into multiple arguments.
 

content/api/commands/window.md

@@ -40,24 +40,28 @@ Pass in an options object to change the default behavior of `cy.window()`.
 
 #### Yield the remote window object
 
-:::visit-mount-test-example
+<e2e-or-ct>
+<template #e2e>
 
 ```js
 cy.visit('http://localhost:8080/app')
+cy.window().then((win) => {
+  // win is the remote window
+})
 ```
 
-```js
-cy.mount(<MyComponent />)
-```
+</template>
+<template #ct>
 
 ```js
-__VISIT_MOUNT_PLACEHOLDER__
+cy.mount(<MyComponent />)
 cy.window().then((win) => {
   // win is the remote window
 })
 ```
 
-:::
+</template>
+</e2e-or-ct>
 
 #### Check a custom property