From dfd2593b15b8df1632a2680320cab8d054181bb2 Mon Sep 17 00:00:00 2001 From: Jafet Natanael Guzman Flores Date: Thu, 11 Apr 2024 00:40:57 -0400 Subject: [PATCH 1/8] FEAT(CONTRIBUTING.MD): added guide to using component test server --- CONTRIBUTING.md | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index dd839fbc8..609f33ef2 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -65,6 +65,35 @@ pnpm dev - Once you made some changes in either package (`headless` or `styled`) or the documentation website (`apps/website`), you will see them immediately reflected on the page. +- Alternitavely, if your only goal is to add a new component, or add new tests to an already exisiting component, you can run the component test server for significant speed gains: + +```shell +pnpm dev.ct +``` + +- This mode is a lot more barebones and requires more background knowledge to use effectively, so keep the folling things in mind: + +- 1. Familirize yourself with the following directory structure: + +```shell +apps/website/src/routes/docs/[KIT]/[COMPONENT]/examples/ +``` + +- This is the _only place_ where you can add files. So if you wanted to add a select component to the headless kit, you would add all your files to this directory: apps/website/src/routes/docs/headless/select/examples/hero.tsx + +- 2. Follow the component test server's URL structure +- The default message on the "home page" of the dev server is a reminder of how to use the address bar to actually view the file you want. By default it would have this structure: + +```shell +http://localhost:5173/[KIT]/[COMPONENT]/[EXAMPLE] +``` + +- So if you wanted to see the hero example for the headless select you would go here: + +```shell +http://localhost:5173/headless/select/hero/ +``` + Below is a list of other commands that you might find useful: - Build the qwik-ui documentation: From c6bba98aad170014db2636cba3008aa1a042acd0 Mon Sep 17 00:00:00 2001 From: Jafet Natanael Guzman Flores Date: Thu, 11 Apr 2024 00:49:03 -0400 Subject: [PATCH 2/8] FIX(CONTRIBUTING.MD): better formatting --- CONTRIBUTING.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 609f33ef2..138355715 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -73,7 +73,7 @@ pnpm dev.ct - This mode is a lot more barebones and requires more background knowledge to use effectively, so keep the folling things in mind: -- 1. Familirize yourself with the following directory structure: +- Familirize yourself with the following directory structure: ```shell apps/website/src/routes/docs/[KIT]/[COMPONENT]/examples/ @@ -81,7 +81,7 @@ apps/website/src/routes/docs/[KIT]/[COMPONENT]/examples/ - This is the _only place_ where you can add files. So if you wanted to add a select component to the headless kit, you would add all your files to this directory: apps/website/src/routes/docs/headless/select/examples/hero.tsx -- 2. Follow the component test server's URL structure +- Follow the component test server's URL structure - The default message on the "home page" of the dev server is a reminder of how to use the address bar to actually view the file you want. By default it would have this structure: ```shell From c52bec49735b2ab51a2e13b7a9ef647849c4e347 Mon Sep 17 00:00:00 2001 From: Jafet Natanael Guzman Flores Date: Thu, 11 Apr 2024 00:51:05 -0400 Subject: [PATCH 3/8] FIX(CONTRIBUTING.MD): improved clarity --- CONTRIBUTING.md | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 138355715..9728df2c8 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -79,10 +79,13 @@ pnpm dev.ct apps/website/src/routes/docs/[KIT]/[COMPONENT]/examples/ ``` -- This is the _only place_ where you can add files. So if you wanted to add a select component to the headless kit, you would add all your files to this directory: apps/website/src/routes/docs/headless/select/examples/hero.tsx +- This is the _only place_ where you can add files. So if you wanted to add a select component to the headless kit, you would add all your files to this directory: -- Follow the component test server's URL structure -- The default message on the "home page" of the dev server is a reminder of how to use the address bar to actually view the file you want. By default it would have this structure: +```shell +apps/website/src/routes/docs/headless/select/examples/hero.tsx +``` + +- Remenber to follow the component test server's URL structure. The default message on the "home page" of the dev server is a reminder of how to use the address bar to actually view the file you want. By default it would have this structure: ```shell http://localhost:5173/[KIT]/[COMPONENT]/[EXAMPLE] From 1cfc9e7629fa06c78ea820f3957008a3c9a64a02 Mon Sep 17 00:00:00 2001 From: Jafet Natanael Guzman Flores Date: Thu, 11 Apr 2024 15:14:57 -0400 Subject: [PATCH 4/8] FIX(CONTRIBUTING.MD): better tutorial on component test server --- CONTRIBUTING.md | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 9728df2c8..5436d3af2 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -79,24 +79,26 @@ pnpm dev.ct apps/website/src/routes/docs/[KIT]/[COMPONENT]/examples/ ``` -- This is the _only place_ where you can add files. So if you wanted to add a select component to the headless kit, you would add all your files to this directory: +- This is the _only place_ where you can add files. So if you wanted to add an example called 'hero' to the headless select component, that file needs to have the following structure: ```shell apps/website/src/routes/docs/headless/select/examples/hero.tsx ``` -- Remenber to follow the component test server's URL structure. The default message on the "home page" of the dev server is a reminder of how to use the address bar to actually view the file you want. By default it would have this structure: +- Remenber to follow the component test server's URL structure. The default message on the "home page" of the dev server is a reminder of how to use the address bar to view the file you want. By default it would have this structure: ```shell -http://localhost:5173/[KIT]/[COMPONENT]/[EXAMPLE] +http://localhost:5173/[KIT]/[COMPONENT]/[FILE] ``` - So if you wanted to see the hero example for the headless select you would go here: ```shell -http://localhost:5173/headless/select/hero/ +http://localhost:5173/headless/select/hero ``` +- TLDR: any file in 'apps/website/src/routes/docs/[KIT]/[COMPONENT]/examples/[FILE]' is served on '/[KIT]/[COMPONENT]/[FILE]' + Below is a list of other commands that you might find useful: - Build the qwik-ui documentation: @@ -125,13 +127,15 @@ pnpm preview.cloudflare ### 5. Make sure you add / modify tests -Run either command to make sure there aren't any errors. +Run either command to make sure there aren't any errors. Both commands run the Playwrigth tests, but the second one will open Playwrigth in [UI mode](https://playwright.dev/docs/test-ui-mode) ```shell -pnpm test.headless --skip-nx-cache +pnpm test.pw.headless --skip-nx-cache ``` -This will set up the Cypress component testing GUI. Please refer to official Cypress [documentation](https://docs.cypress.io/guides/overview/why-cypress) for further assistance. +```shell +pnpm test.pw.headless --skip-nx-cache --ui +``` ### 6. Added a "changeset" From 88e703c9688aa7736cba6a579a877d559487e95f Mon Sep 17 00:00:00 2001 From: Jafet Natanael Guzman Flores Date: Thu, 11 Apr 2024 15:22:32 -0400 Subject: [PATCH 5/8] FIX(CONTRIBUTING.MD): clarifies new naming convention for tests --- CONTRIBUTING.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 5436d3af2..c4d1982f3 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -137,6 +137,12 @@ pnpm test.pw.headless --skip-nx-cache pnpm test.pw.headless --skip-nx-cache --ui ``` +Keep in mind that currently all tests use playwrigth and use the follwing naming convention: + +```shell +component.test.ts +``` + ### 6. Added a "changeset" **6.1.** Run the following command to create a changeset: From 171b642a0feeb8b24ec520d4cda5dd7ff8aaea51 Mon Sep 17 00:00:00 2001 From: Jafet Natanael Guzman Flores Date: Thu, 11 Apr 2024 15:25:16 -0400 Subject: [PATCH 6/8] FIX(CONTRIBUTING.MD): replaces all mentions of Cypress for Playwright --- CONTRIBUTING.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index c4d1982f3..f14949009 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -127,7 +127,7 @@ pnpm preview.cloudflare ### 5. Make sure you add / modify tests -Run either command to make sure there aren't any errors. Both commands run the Playwrigth tests, but the second one will open Playwrigth in [UI mode](https://playwright.dev/docs/test-ui-mode) +Run either command to make sure there aren't any errors. Both commands run the Playwright tests, but the second one will open Playwright in [UI mode](https://playwright.dev/docs/test-ui-mode) ```shell pnpm test.pw.headless --skip-nx-cache @@ -137,7 +137,7 @@ pnpm test.pw.headless --skip-nx-cache pnpm test.pw.headless --skip-nx-cache --ui ``` -Keep in mind that currently all tests use playwrigth and use the follwing naming convention: +Keep in mind that currently all tests use Playwright and use the follwing naming convention: ```shell component.test.ts @@ -208,7 +208,7 @@ Make sure you check the following checkbox "Allow edits from maintainers" - - Re-run the tests to ensure tests are still passing: ```shell -pnpm test.headless --skip-nx-cache +pnpm test.pw.headless --skip-nx-cache ``` - Merge the `main` branch if your branch is out of date From 87b845bd898a9902be8f73d40c18271007b1da30 Mon Sep 17 00:00:00 2001 From: Jafet Natanael Guzman Flores Date: Thu, 11 Apr 2024 15:28:09 -0400 Subject: [PATCH 7/8] FIX(CONTRIBUTING.MD): better wording --- CONTRIBUTING.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index f14949009..fb2639054 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -65,7 +65,7 @@ pnpm dev - Once you made some changes in either package (`headless` or `styled`) or the documentation website (`apps/website`), you will see them immediately reflected on the page. -- Alternitavely, if your only goal is to add a new component, or add new tests to an already exisiting component, you can run the component test server for significant speed gains: +- Alternitavely, if your only goal is to add a new component, or add new tests to an already exisiting component, you can run the component test server for significant speed improvements: ```shell pnpm dev.ct From 5100f822ba1274b1ecf40cf7a7fc305e870558f8 Mon Sep 17 00:00:00 2001 From: Jafet Natanael Guzman Flores Date: Thu, 11 Apr 2024 15:37:03 -0400 Subject: [PATCH 8/8] FIX(CONTRIBUTING.MD): removed typos --- CONTRIBUTING.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index fb2639054..59db8680a 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -27,7 +27,7 @@ Discussing the design up front helps to ensure that we're ready to accept your w ### 3. Fork this repo and create a branch. -- Hit the "Fork" button (top-right of the github repository). +- Hit the "Fork" button (top-right of the GitHub repository). ![image](https://user-images.githubusercontent.com/1430726/95460679-ec014400-097d-11eb-9a7a-93e0262d37d9.png) @@ -65,15 +65,15 @@ pnpm dev - Once you made some changes in either package (`headless` or `styled`) or the documentation website (`apps/website`), you will see them immediately reflected on the page. -- Alternitavely, if your only goal is to add a new component, or add new tests to an already exisiting component, you can run the component test server for significant speed improvements: +Alternatively, if your only goal is to add a new component, or add new tests to an already existing component, you can run the component test server for significant speed improvements: ```shell pnpm dev.ct ``` -- This mode is a lot more barebones and requires more background knowledge to use effectively, so keep the folling things in mind: +This mode is a lot more bare bones and requires more background knowledge to use effectively, so keep the following things in mind: -- Familirize yourself with the following directory structure: +- Familiarize yourself with the following directory structure: ```shell apps/website/src/routes/docs/[KIT]/[COMPONENT]/examples/ @@ -85,7 +85,7 @@ apps/website/src/routes/docs/[KIT]/[COMPONENT]/examples/ apps/website/src/routes/docs/headless/select/examples/hero.tsx ``` -- Remenber to follow the component test server's URL structure. The default message on the "home page" of the dev server is a reminder of how to use the address bar to view the file you want. By default it would have this structure: +- Remember to follow the component test server's URL structure. The default message on the "home page" of the dev server is a reminder of how to use the address bar to view the file you want. By default it would have this structure: ```shell http://localhost:5173/[KIT]/[COMPONENT]/[FILE] @@ -137,7 +137,7 @@ pnpm test.pw.headless --skip-nx-cache pnpm test.pw.headless --skip-nx-cache --ui ``` -Keep in mind that currently all tests use Playwright and use the follwing naming convention: +Keep in mind that currently all tests use Playwright and use the following naming convention: ```shell component.test.ts @@ -170,7 +170,7 @@ pnpm change **6.5.** Modify the created MD file After the `change` command runs, a new MD file will be created under the `.changeset` folder. -ד + Please modify this file to include a descriptive message of the changes you made. You can even add code examples if you need do, to describe a new feature for example. (pun intended 😉)