From c0d25de62109c33268858479470521d22f6f3e25 Mon Sep 17 00:00:00 2001 From: DeAndre Harris <8107071+deandre@users.noreply.github.com> Date: Fri, 10 Jan 2025 11:02:35 -0600 Subject: [PATCH 1/3] Adds FAQ explaining why stories show as new --- .../faq/why-tests-show-as-new.md | 47 +++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 src/content/troubleshooting/faq/why-tests-show-as-new.md diff --git a/src/content/troubleshooting/faq/why-tests-show-as-new.md b/src/content/troubleshooting/faq/why-tests-show-as-new.md new file mode 100644 index 00000000..4a8e1b56 --- /dev/null +++ b/src/content/troubleshooting/faq/why-tests-show-as-new.md @@ -0,0 +1,47 @@ +--- +layout: "../../../layouts/FAQLayout.astro" +sidebar: { hide: true } +title: Why do tests show as new in builds? +section: "uiTestsAndReview" +--- + +# Why do tests show as new in builds? + +Tests are identified by their **story name**, which is a combination of key elements in the test file. If any of these elements change, the test will be considered new. Here's a breakdown of how story names are constructed and why they might change: + +## Story Name Construction + +The story name is generated from: + +1. **File Name**: The name of the test file (e.g., `spec.cy.ts`). +2. **Describe Block**: The names of `describe` blocks that organize and group related tests. +3. **It Block**: The name of the specific test within the `it` block. + +### Example + +Consider the following test file structure: + +- **File name**: `spec.cy.ts` +- **Describe block**: `template spec` +- **It block**: `loads homepage` + +The story name for this test would be: +`spec.cy.ts > template spec > loads homepage` + +## Why a Test Shows as New + +If **any** of these elements change—file name, `describe` block name, or `it` block name—the story name changes. As a result, Chromatic interprets the test as new because it no longer matches the previously known story name. + +### Examples of Changes: + +1. Renaming the file from `spec.cy.ts` to `home.cy.ts`. +2. Updating the `describe` block from `template spec` to `homepage spec`. +3. Modifying the `it` block from `loads homepage` to `renders homepage`. + +## How to Avoid Unintentional New Stories + +To prevent tests from showing as new unintentionally: + +- **Keep naming consistent**: Avoid renaming files, `describe` blocks, or `it` blocks unless necessary. +- **Refactor carefully**: If changes are needed, be aware that the story name will change, and Chromatic will treat it as a new story. +- **Review build diffs**: If a test appears as new, check whether the naming structure has been altered. From 2bb0156dd516f88df12bc0c0b8c88cd069725816 Mon Sep 17 00:00:00 2001 From: DeAndre Harris <8107071+deandre@users.noreply.github.com> Date: Fri, 10 Jan 2025 11:09:41 -0600 Subject: [PATCH 2/3] fix grammar --- src/content/troubleshooting/faq/why-tests-show-as-new.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/troubleshooting/faq/why-tests-show-as-new.md b/src/content/troubleshooting/faq/why-tests-show-as-new.md index 4a8e1b56..d9a18976 100644 --- a/src/content/troubleshooting/faq/why-tests-show-as-new.md +++ b/src/content/troubleshooting/faq/why-tests-show-as-new.md @@ -43,5 +43,5 @@ If **any** of these elements change—file name, `describe` block name, or `it` To prevent tests from showing as new unintentionally: - **Keep naming consistent**: Avoid renaming files, `describe` blocks, or `it` blocks unless necessary. -- **Refactor carefully**: If changes are needed, be aware that the story name will change, and Chromatic will treat it as a new story. +- **Refactor carefully**: If changes are needed, be aware that the story name will change, and Chromatic will treat it as new. - **Review build diffs**: If a test appears as new, check whether the naming structure has been altered. From 93cf4df175819c76de705e7baa32a3afbda041e4 Mon Sep 17 00:00:00 2001 From: DeAndre Harris <8107071+deandre@users.noreply.github.com> Date: Fri, 10 Jan 2025 12:18:08 -0600 Subject: [PATCH 3/3] Edits for concision --- .../troubleshooting/faq/why-tests-show-as-new.md | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/src/content/troubleshooting/faq/why-tests-show-as-new.md b/src/content/troubleshooting/faq/why-tests-show-as-new.md index d9a18976..192fa89b 100644 --- a/src/content/troubleshooting/faq/why-tests-show-as-new.md +++ b/src/content/troubleshooting/faq/why-tests-show-as-new.md @@ -7,7 +7,7 @@ section: "uiTestsAndReview" # Why do tests show as new in builds? -Tests are identified by their **story name**, which is a combination of key elements in the test file. If any of these elements change, the test will be considered new. Here's a breakdown of how story names are constructed and why they might change: +Tests are identified by their **story name**, which is a combination of key elements in the test file. If any of these elements change, the test will be considered new. Here's a breakdown of how story names are constructed and why they might change. ## Story Name Construction @@ -17,6 +17,8 @@ The story name is generated from: 2. **Describe Block**: The names of `describe` blocks that organize and group related tests. 3. **It Block**: The name of the specific test within the `it` block. +If **any** of these elements change—file name, `describe` block name, or `it` block name—the story name changes. As a result, Chromatic interprets the test as new because it no longer matches the previously known story name. + ### Example Consider the following test file structure: @@ -28,16 +30,6 @@ Consider the following test file structure: The story name for this test would be: `spec.cy.ts > template spec > loads homepage` -## Why a Test Shows as New - -If **any** of these elements change—file name, `describe` block name, or `it` block name—the story name changes. As a result, Chromatic interprets the test as new because it no longer matches the previously known story name. - -### Examples of Changes: - -1. Renaming the file from `spec.cy.ts` to `home.cy.ts`. -2. Updating the `describe` block from `template spec` to `homepage spec`. -3. Modifying the `it` block from `loads homepage` to `renders homepage`. - ## How to Avoid Unintentional New Stories To prevent tests from showing as new unintentionally: