cypress-component-testing-examples

cypress-component-testing-examples copied to clipboard

Patch and update the vite-react PR example to enable Cypress code coverage.

For UNIFY-71

@cowboy When I run vite-react.sh to generate the latest, there's an issue running the original 1.patch.

It is not clear what should be fixed when looking atApp.jsx.rej

***************
*** 1,19 ****
- import React, { useState } from 'react'
  import logo from './logo.svg'
  import './App.css'

  function App() {
-   const [count, setCount] = useState(0)
-
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>Hello Vite + React!</p>
          <p>
-           <button type="button" onClick={() => setCount((count) => count + 1)}>
-             count is: {count}
-           </button>
          </p>
          <p>
            Edit <code>App.jsx</code> and save to test HMR updates.
--- 1,16 ----
+ import React from 'react'
  import logo from './logo.svg'
+ import { Counter } from './Counter'
  import './App.css'

  function App() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>Hello Vite + React!</p>
          <p>
+           <Counter />
          </p>
          <p>
            Edit <code>App.jsx</code> and save to test HMR updates.

Thoughts?

Thoughts?

(I updated your code block to be of type diff)

When a patch fails to apply, we need to compare our local file with the last known working pre-patch file.

Running git log origin/main -- vite-react/src/App.jsx will give us the commit history for that file as it exists in origin/main (on GitHub). When I run that command, I see this output:

commit 0ad82e93b94deb803d82ddb4f6cb62052b2e3b0c
Author: Ben Alman <[email protected]>
Date:   Wed Aug 4 14:35:59 2021 -0400

    Refactor app into separate components, adjust global styles

commit 5e0c93a7df87ff05c8e9ddb422a423d0f504b0cb
Author: Ben Alman <[email protected]>
Date:   Wed Aug 4 14:35:55 2021 -0400

    Run: yarn create vite vite-react --template react

Because 0ad82e93b94deb803d82ddb4f6cb62052b2e3b0c is the commit where this change was made, we want the commit before that, 5e0c93a7df87ff05c8e9ddb422a423d0f504b0cb.

Now, if we look at the diff between our working copy of vite-react/src/App.jsx and the one in that commit by running git diff 5e0c93a7df87ff05c8e9ddb422a423d0f504b0cb vite-react/src/App.jsx we get this:

diff --git a/vite-react/src/App.jsx b/vite-react/src/App.jsx
index 0939547..7d4eb10 100644
--- a/vite-react/src/App.jsx
+++ b/vite-react/src/App.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 import logo from './logo.svg'
 import './App.css'

So we can see there's a minor difference that's preventing the patch from applying. In this case, the easiest thing to do would be to manually update the patch file and re-try, but if the change were more involved, it might be easier to recreate the patch file from scratch.

@cowboy Thanks for this information. I see my confusion now, in that I thought the diff output itself was the final diff between the current patch and 5e0c93a7df87ff05c8e9ddb422a423d0f504b0cb.

How should the update to 1.patch be committed to the repo? A separate PR or as part of this?

How should the update to 1.patch be committed to the repo? A separate PR or as part of this?

Might as well just do it alongside all other script changes in this PR!

@cowboy Updating the patch is proving to be non-trival in that I continue to get "malformed patch" errors despite throwing all my Git (and diff) knowledge at the issue to try to create the proper patch with the right metadata/index and/or commit references, etc.

Would you share your thoughts on how you envisioned these patches being updated?