Merge pull request #6 from cypress-io/jordanpowell88/update-docs-and-props

chore: update documentation and props to align to new docs

Author: jordanpowell88

react/my-awesome-app/src/components/Stepper.cy.jsx

@@ -1,36 +1,36 @@
-import Stepper from './Stepper';
+import Stepper from "./Stepper";
 
-describe('<Stepper>', () => {
-  it('mounts', () => {
+describe("<Stepper>", () => {
+  it("mounts", () => {
     cy.mount(<Stepper />);
   });
 
-  it('stepper should default to 0', () => {
+  it("stepper should default to 0", () => {
     cy.mount(<Stepper />);
-    cy.get('[data-cy=counter]').should('have.text', '0');
+    cy.get("[data-cy=counter]").should("have.text", "0");
   });
 
-  it('supports an "initial" prop to set the value', () => {
-    cy.mount(<Stepper initial={100} />);
-    cy.get('[data-cy=counter]').should('have.text', '100');
+  it('supports a "count" prop to set the value', () => {
+    cy.mount(<Stepper count={100} />);
+    cy.get("[data-cy=counter]").should("have.text", "100");
   });
 
-  it('when the increment button is pressed, the counter is incremented', () => {
+  it("when the increment button is pressed, the counter is incremented", () => {
     cy.mount(<Stepper />);
-    cy.get('[data-cy=increment]').click();
-    cy.get('[data-cy=counter]').should('have.text', '1');
+    cy.get("[data-cy=increment]").click();
+    cy.get("[data-cy=counter]").should("have.text", "1");
   });
 
-  it('when the decrement button is pressed, the counter is decremented', () => {
+  it("when the decrement button is pressed, the counter is decremented", () => {
     cy.mount(<Stepper />);
-    cy.get('[data-cy=decrement]').click();
-    cy.get('[data-cy=counter]').should('have.text', '-1');
+    cy.get("[data-cy=decrement]").click();
+    cy.get("[data-cy=counter]").should("have.text", "-1");
   });
 
-  it('clicking + fires a change event with the incremented value', () => {
-    const onChangeSpy = cy.spy().as('onChangeSpy');
+  it("clicking + fires a change event with the incremented value", () => {
+    const onChangeSpy = cy.spy().as("onChangeSpy");
     cy.mount(<Stepper onChange={onChangeSpy} />);
-    cy.get('[data-cy=increment]').click();
-    cy.get('@onChangeSpy').should('have.been.calledWith', 1);
+    cy.get("[data-cy=increment]").click();
+    cy.get("@onChangeSpy").should("have.been.calledWith", 1);
   });
 });

react/my-awesome-app/src/components/Stepper.jsx

@@ -1,7 +1,7 @@
-import { useState } from 'react';
+import { useState } from "react";
 
-export default function Stepper({ initial = 0, onChange = () => {} }) {
-  const [count, setCount] = useState(initial);
+export default function Stepper({ count: _count = 0, onChange = () => {} }) {
+  const [count, setCount] = useState(_count);
 
   const handleIncrement = () => {
     const newCount = count + 1;

react/readme.md

@@ -1,7 +1,7 @@
 # Cypress Component Testing Quickstart App for React.
 
 This is a completed version of the app from the
-[quickstart](https://docs.cypress.io/guides/component-testing/react/quickstart)
+[quickstart](https://docs.cypress.io/guides/component-testing/getting-started)
 guide for writing component tests for Cypress with React.
 
 To try the app locally, first clone the quickstart repo:

readme.md

@@ -1,16 +1,7 @@
 # Cypress Component Testing Quickstart Apps
 
 This repo contains completed versions of the quickstart apps from the component
-testing quickstart guides on docs.cypress.io:
-
-- [Angular Guide](https://docs.cypress.io/guides/component-testing/angular/quickstart) -
-  [Completed Example App](/angular/my-awesome-app)
-- [React Guide](https://docs.cypress.io/guides/component-testing/react/quickstart) -
-  [Completed Example App](/react/my-awesome-app)
-- [Svelte Guide](https://docs.cypress.io/guides/component-testing/svelte/quickstart) -
-  [Completed Example App](/svelte/my-awesome-app)
-- [Vue Guide](https://docs.cypress.io/guides/component-testing/vue/quickstart) -
-  [Completed Example App](/vue/my-awesome-app)
+testing quickstart guides at [https://docs.cypress.io/guides/component-testing/getting-started](https://docs.cypress.io/guides/component-testing/getting-started)
 
 Visit [docs.cypress.io](https://docs.cypress.io) for more information on
 component testing with Cypress.

svelte/my-awesome-app/src/lib/Stepper.cy.js

@@ -10,7 +10,7 @@ describe('Stepper', () => {
     cy.get('[data-cy=counter]').should('have.text', '0');
   });
 
-  it('supports an "initial" prop to set the value', () => {
+  it('supports a "count" prop to set the value', () => {
     cy.mount(Stepper, { props: { count: 100 } });
     cy.get('[data-cy=counter]').should('have.text', '100');
   });

svelte/readme.md

@@ -1,7 +1,7 @@
 # Cypress Component Testing Quickstart App for Svelte.
 
 This is a completed version of the app from the
-[quickstart](https://docs.cypress.io/guides/component-testing/svelte/quickstart)
+[quickstart](https://docs.cypress.io/guides/component-testing/getting-started)
 guide for writing component tests for Cypress with Svelte.
 
 To try the app locally, first clone the quickstart repo:

vue/my-awesome-app/src/components/Stepper.cy.js

@@ -11,8 +11,8 @@ describe('<Stepper />', () => {
     cy.get('[data-cy=counter]').should('have.text', '0');
   });
 
-  it('supports an "initial" prop to set the value', () => {
-    cy.mount(Stepper, { props: { initial: 100 } });
+  it('supports a "count" prop to set the value', () => {
+    cy.mount(Stepper, { props: { count: 100 } });
     cy.get('[data-cy=counter]').should('have.text', '100');
   });
 

vue/my-awesome-app/src/components/Stepper.vue

@@ -8,11 +8,11 @@
 
 <script setup>
   import { ref } from 'vue'
-  const props = defineProps(['initial'])
+  const props = defineProps(['count'])
 
   const emit = defineEmits(['change'])
 
-  const count = ref(props.initial || 0)
+  const count = ref(props.count || 0)
 
   const increment = () => {
     count.value++

vue/readme.md

@@ -1,7 +1,7 @@
 # Cypress Component Testing Quickstart App for Vue.
 
 This is a completed version of the app from the
-[quickstart](https://docs.cypress.io/guides/component-testing/vue/quickstart)
+[quickstart](https://docs.cypress.io/guides/component-testing/getting-started)
 guide for writing component tests for Cypress with Vue.
 
 To try the app locally, first clone the quickstart repo: