cypress-io / cypress-realworld-testing

Next.js project for learn.cypress.io
https://learn.cypress.io
MIT License
77 stars 63 forks source link

Images don't match what is told to install #327

Open jeffsnff opened 8 months ago

jeffsnff commented 8 months ago

The images and the directions after installing cypress references TypeScript, but it is never presented how to install Cypress and configure it for TypeScript.

jeffsnff commented 8 months ago

I was able to figure out how to setup TypeScript for Cypress. However, I don't know if it is perfect, I wonder if this is something that I could add with someones help. I would love to write out how to do it and then get it merged into this. I think it would be really cool.

MikeMcC399 commented 8 months ago

@jeffsnff

You don't say what instructions you were following, however if you start at

https://learn.cypress.io/testing-your-first-application/app-install-and-overview

the instructions say

git clone https://github.com/cypress-io/cypress-realworld-testing-course-app.git

The repo https://github.com/cypress-io/cypress-realworld-testing-course-app is already set up for TypeScript.

jeffsnff commented 8 months ago

Sorry I didn't explain it very well, I will do that here.

I think I might have set it up wrong @MikeMcC399. I set it up like Scenario 1 below, keeping things separate and that is why even though I had the repo installed, it came in as JavaScript.

I did set it up as a test using Scenario 2 ( basically following the directions better ) and it came in as TypeScript. However, it does already have all the Cypress test already, so technically a user would have to delete those, but that isn't that big of a deal. Unless again, I did something wrong which is a strong possibility. https://learn.cypress.io/testing-your-first-application/installing-cypress-and-writing-your-first-test#installing-cypress

Is there anywhere I can read up on the folder structure and what are best practices?

Scenario 1 You set up the test site and cypress like so:

MikeMcC399 commented 8 months ago

@jeffsnff

If you are looking for generic instructions you can follow the Cypress documentation Getting started.

You can find the folder structure documented for JavaScript and TypeScript.

jeffsnff commented 8 months ago

I am not really looking for generic instructions. I want to follow the directions from https://learn.cypress.io/#courses which says to use this repo https://github.com/cypress-io/cypress-realworld-testing

However, I just found some weird things with the directions in https://learn.cypress.io/testing-your-first-application/installing-cypress-and-writing-your-first-test because it never explicitly says where to install Cypress and if you install it outside of the repo like my last comment says it installs the Cypress files as JavaScript. If you install Cypress inside this repo which again I explained in my last comment it does install the Cypress files as TypeScript, HOWEVER, a user would have to go through and delete those files to begin the training documentation as per https://learn.cypress.io/#courses

There are other issues that I have found as well. When testing https://learn.cypress.io/testing-your-first-application/how-to-test-forms-and-custom-cypress-commands#test-invalid-email-address it doesn't actually prevent you from entering the same email address multiple times. Running the test in the Cypress application as well, it doesn't let you just enter an email without the @ but it does let you enter an email without some sort of .endpoint

I bring these to you attention not because I want to just be annoying, but it you are going to have training documentation they should be held up to a high standard. I offered my assistance in helping fix these things and make them better, it is something that I really enjoy doing, but I don't appreciate that you kinda just wave it away and tell me to go look at another repo. The Github link at the bottom of this page https://learn.cypress.io/ goes to goes to this repo and that, in my eyes means it should be maintained here.

MikeMcC399 commented 8 months ago

@jeffsnff

I'm sorry that I misunderstood your issue about folders. You should not be cloning the repo cypress-realworld-testing. You only need the repo cypress-realworld-testing-course-app and the folder structure looks like this:

image

You need to be following the 5 lessons on https://learn.cypress.io/testing-your-first-application in order

image

You are right that the instructions do not tell you where to install Cypress in the text. This could be improved. The video however does lead you through it step-by step and shows that you should be installing Cypress inside the cloned repo cypress-realworld-testing-course-app.