For slotting custom content into the header use the
<omni-tab-header> component that targets the header slot of the
<omni-tab-group> component by setting
slot="header" and ensure you have a
<omni-tab> component which has an
id attribute that matches the
<omni-tab-header> for attribute to display slotted content.
- `,
- play: async (context) => {
- const tabGroupElement = within(context.canvasElement).getByTestId('test-tab-group');
- // Get the tab bar element
- const tabBar = (await querySelectorAsync(tabGroupElement.shadowRoot as ShadowRoot, '.tab-bar')) as HTMLElement;
- await expect(tabBar).toBeTruthy();
-
- // Check for the slot then check the content of the slot
- const slotElement = tabBar.querySelector('slot[name="header"]');
- await expect(slotElement).toBeTruthy();
-
- //Get all the tab headers in the header slot.
- const tabHeaders = slotElement?.assignedElements().filter((e) => e.tagName.toLowerCase() === 'omni-tab-header') as HTMLElement[];
- await expect(tabHeaders).toBeTruthy();
-
- //Get the active tab header.
- const activeTabHeader = tabHeaders?.find((c) => c.hasAttribute('data-active'));
- await expect(activeTabHeader).toBeTruthy();
-
- //Get nested omni-icon.
- const omniIcon = activeTabHeader?.querySelector('omni-icon');
- await expect(omniIcon).toBeTruthy();
-
- //Get nested svg
- const svgElement = activeTabHeader?.querySelector('svg');
- await expect(svgElement).toBeTruthy();
-
- //Click the second tab.
- await userEvent.click(tabHeaders[1]);
- const nextActiveTab = tabHeaders.find((c) => c.hasAttribute('data-active'));
- await expect(nextActiveTab).toBeTruthy();
- }
+ `
};
diff --git a/src/text-field/TextField.spec.ts b/src/text-field/TextField.spec.ts
index 329d3c11c..fb791e092 100644
--- a/src/text-field/TextField.spec.ts
+++ b/src/text-field/TextField.spec.ts
@@ -1,4 +1,3 @@
-import * as jestMock from 'jest-mock';
import {
testLabelBehaviour,
testHintBehaviour,
@@ -10,10 +9,10 @@ import {
testSuffixBehaviour,
testDisabledBehaviour
} from '../core/OmniInputPlaywright.js';
-import { test, expect, withCoverage, type Page } from '../utils/JestPlaywright.js';
+import { test, expect, mockEventListener, withCoverage } from '../utils/JestPlaywright.js';
import type { TextField } from './TextField.js';
-test(`Text Field - Interactive`, async ({ page, browserName }) => {
+test(`Text Field - Visual and Behaviour`, async ({ page }) => {
await withCoverage(page, async () => {
await page.goto('/components/text-field/');
await page.evaluate(() => document.fonts.ready);
@@ -26,12 +25,7 @@ test(`Text Field - Interactive`, async ({ page, browserName }) => {
await t.updateComplete;
});
await expect(textField).toHaveScreenshot('text-field.png');
-
- const inputFn = jestMock.fn();
- await page.exposeFunction('jestInput', () => inputFn());
- await textField.evaluate((node) => {
- node.addEventListener('input', () => (window as any).jestInput());
- });
+ const inputFn = await mockEventListener(textField, 'input');
const inputField = textField.locator('#inputField');
@@ -45,12 +39,12 @@ test(`Text Field - Interactive`, async ({ page, browserName }) => {
});
});
-testLabelBehaviour('omni-text-field');
-testHintBehaviour('omni-text-field');
-testErrorBehaviour('omni-text-field');
-testValueBehaviour('omni-text-field');
-testClearableBehaviour('omni-text-field');
-testCustomClearableSlotBehaviour('omni-text-field');
-testPrefixBehaviour('omni-text-field');
-testSuffixBehaviour('omni-text-field');
-testDisabledBehaviour('omni-text-field');
+test('Text Field - Label Behaviour', testLabelBehaviour('omni-text-field'));
+test('Text Field - Hint Behaviour', testHintBehaviour('omni-text-field'));
+test('Text Field - Error Behaviour', testErrorBehaviour('omni-text-field'));
+test('Text Field - Value Behaviour', testValueBehaviour('omni-text-field'));
+test('Text Field - Clearable Behaviour', testClearableBehaviour('omni-text-field'));
+test('Text Field - Custom Clear Slot Behaviour', testCustomClearableSlotBehaviour('omni-text-field'));
+test('Text Field - Prefix Behaviour', testPrefixBehaviour('omni-text-field'));
+test('Text Field - Suffix Behaviour', testSuffixBehaviour('omni-text-field'));
+test('Text Field - Disabled Behaviour', testDisabledBehaviour('omni-text-field'));
diff --git a/src/text-field/TextField.stories.ts b/src/text-field/TextField.stories.ts
index 3ce25643d..17c1bb5ad 100644
--- a/src/text-field/TextField.stories.ts
+++ b/src/text-field/TextField.stories.ts
@@ -1,7 +1,3 @@
-import { within } from '@testing-library/dom';
-import userEvent from '@testing-library/user-event';
-import { setUIValueClean } from '@testing-library/user-event/dist/esm/document/UI.js';
-import * as jest from 'jest-mock';
import { html, nothing } from 'lit';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import {
@@ -17,17 +13,11 @@ import {
SuffixStory
} from '../core/OmniInputStories.js';
import { ifNotEmpty } from '../utils/Directives.js';
-import expect from '../utils/ExpectDOM.js';
-import { assignToSlot, ComponentStoryFormat, CSFIdentifier, getSourceFromLit } from '../utils/StoryUtils.js';
+import { assignToSlot, ComponentStoryFormat, getSourceFromLit } from '../utils/StoryUtils.js';
import { TextField } from './TextField.js';
import './TextField.js';
-export default {
- title: 'UI Components/Text Field',
- component: 'omni-text-field'
-} as CSFIdentifier;
-
export const Interactive: ComponentStoryFormat = {
render: (args: BaseArgs) => html`
{
});
});
-/* 'success' | 'warning' | 'error' | 'info' | 'none' */
test(`Toast - Success Type`, async ({ page }) => {
await withCoverage(page, async () => {
await page.goto('/components/toast/');
@@ -121,3 +120,57 @@ test(`Toast - No Type`, async ({ page }) => {
await expect(toast).toHaveScreenshot('toast-type.png');
});
});
+
+test(`Toast - Show Behaviour`, async ({ page }) => {
+ await withCoverage(page, async () => {
+ await page.goto('/components/toast/');
+
+ const toast = await page.evaluateHandle(async () => {
+ await customElements.whenDefined('omni-toast');
+
+ const toastClass = customElements.get('omni-toast') as typeof Toast;
+ return toastClass.show({
+ type: 'info',
+ header: 'Test Header',
+ detail: 'Test Detail.'
+ });
+ });
+
+ await expect(await toast.screenshot()).toMatchSnapshot('toast-shown.png');
+ });
+});
+
+test(`Toast - Configure Behaviour`, async ({ page }) => {
+ await withCoverage(page, async () => {
+ await page.goto('/components/toast/');
+
+ const toastStack = await page.evaluateHandle(async () => {
+ await customElements.whenDefined('omni-toast');
+
+ const toastClass = customElements.get('omni-toast') as typeof Toast;
+
+ toastClass.configure({
+ closeable: true,
+ duration: 0,
+ position: 'top',
+ reverse: true,
+ stack: true
+ });
+
+ toastClass.show({
+ type: 'info',
+ header: 'Test Header 1',
+ detail: 'Test First Detail.'
+ });
+ toastClass.show({
+ type: 'success',
+ header: 'Test Header 2',
+ detail: 'Test Second Detail.'
+ });
+
+ return toastClass.current;
+ });
+
+ await expect(await toastStack.screenshot()).toMatchSnapshot('toasts-configured-shown.png');
+ });
+});
diff --git a/src/toast/Toast.stories.ts b/src/toast/Toast.stories.ts
index bed911520..cd02995c5 100644
--- a/src/toast/Toast.stories.ts
+++ b/src/toast/Toast.stories.ts
@@ -1,21 +1,12 @@
-import { within, fireEvent } from '@testing-library/dom';
-import userEvent from '@testing-library/user-event';
-import * as jest from 'jest-mock';
import { html, nothing } from 'lit';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import { ifNotEmpty } from '../utils/Directives.js';
-import expect from '../utils/ExpectDOM.js';
-import { assignToSlot, ComponentStoryFormat, CSFIdentifier, getSourceFromLit, raw } from '../utils/StoryUtils.js';
+import { assignToSlot, ComponentStoryFormat, getSourceFromLit, raw } from '../utils/StoryUtils.js';
import { Toast } from './Toast.js';
import './Toast.js';
import '../button/Button.js';
-export default {
- title: 'UI Components/Toast',
- component: 'omni-toast'
-} as CSFIdentifier;
-
interface Args {
type: 'success' | 'warning' | 'error' | 'info' | 'none';
header?: string;
diff --git a/src/toast/ToastStack.spec.ts b/src/toast/ToastStack.spec.ts
index fdaf649b3..38de344eb 100644
--- a/src/toast/ToastStack.spec.ts
+++ b/src/toast/ToastStack.spec.ts
@@ -1,7 +1,5 @@
-import * as jestMock from 'jest-mock';
-import { test, expect, withCoverage } from '../utils/JestPlaywright.js';
-import type { Toast } from './Toast.js';
-import type { ToastStack, ShowToastInit, ToastStackInit, toastDurationAttribute } from './ToastStack.js';
+import { test, expect, mockEventListener, withCoverage } from '../utils/JestPlaywright.js';
+import type { ToastStack } from './ToastStack.js';
test(`Toast Stack - Visual and Behaviour`, async ({ page }) => {
// Mark test as slow due to 6 second wait for toasts to close
@@ -14,12 +12,7 @@ test(`Toast Stack - Visual and Behaviour`, async ({ page }) => {
btn.click();
const toastStack = page.getByTestId('test-toast-stack');
-
- const toastRemove = jestMock.fn();
- await page.exposeFunction('jestToastRemove', () => toastRemove());
- await toastStack.evaluate((node) => {
- node.addEventListener('toast-remove', () => window.jestToastRemove());
- });
+ const toastRemove = await mockEventListener(toastStack, 'toast-remove');
await toastStack.focus();
await expect(toastStack).toHaveScreenshot('toast-stack-initial.png');
@@ -31,11 +24,7 @@ test(`Toast Stack - Visual and Behaviour`, async ({ page }) => {
await expect(shown).toBeTruthy();
await expect(await shown?.screenshot()).toMatchSnapshot('toast-shown.png');
- const toastStackRemove = jestMock.fn();
- await page.exposeFunction('jestToastStackRemove', () => toastStackRemove());
- await shown?.evaluate((node) => {
- node.addEventListener('toast-stack-remove', () => window.jestToastStackRemove());
- });
+ const toastStackRemove = await mockEventListener(shown, 'toast-stack-remove');
await toastStack.evaluate((ts: ToastStack) => {
ts.showToast({
@@ -52,7 +41,7 @@ test(`Toast Stack - Visual and Behaviour`, async ({ page }) => {
await expect(toastStack).toHaveScreenshot('toast-stack-more.png');
// Wait for toast removals
- await new Promise((resolve) => setTimeout(resolve, 6000));
+ await page.waitForTimeout(6000);
await expect(toastRemove).toBeCalledTimes(5);
await expect(toastStackRemove).toBeCalled();
@@ -110,9 +99,6 @@ test(`Toast Stack - Reverse Visual and Behaviour`, async ({ page }) => {
});
});
- // Wait for fade in
- await page.waitForTimeout(1000);
-
await expect(toastStack).toHaveScreenshot('toast-stack-reversed.png');
await toastStack.evaluate(async (ts: ToastStack) => {
@@ -173,9 +159,6 @@ test(`Toast Stack - Bottom Right Position Visual and Behaviour`, async ({ page }
});
});
- // Wait for fade in
- await page.waitForTimeout(1000);
-
await expect(toastStack).toHaveScreenshot('toast-stack-top.png');
await expect(page).toHaveScreenshot('toast-stack-page-top.png');
});
@@ -229,9 +212,6 @@ test(`Toast Stack - Bottom Left Position Visual and Behaviour`, async ({ page })
});
});
- // Wait for fade in
- await page.waitForTimeout(1000);
-
await expect(toastStack).toHaveScreenshot('toast-stack-top.png');
await expect(page).toHaveScreenshot('toast-stack-page-top.png');
});
@@ -285,9 +265,6 @@ test(`Toast Stack - Top Right Position Visual and Behaviour`, async ({ page }) =
});
});
- // Wait for fade in
- await page.waitForTimeout(1000);
-
await expect(toastStack).toHaveScreenshot('toast-stack-top.png');
await expect(page).toHaveScreenshot('toast-stack-page-top.png');
});
@@ -341,9 +318,6 @@ test(`Toast Stack - Top Left Position Visual and Behaviour`, async ({ page }) =>
});
});
- // Wait for fade in
- await page.waitForTimeout(1000);
-
await expect(toastStack).toHaveScreenshot('toast-stack-top.png');
await expect(page).toHaveScreenshot('toast-stack-page-top.png');
});
@@ -397,9 +371,6 @@ test(`Toast Stack - Right Position Visual and Behaviour`, async ({ page }) => {
});
});
- // Wait for fade in
- await page.waitForTimeout(1000);
-
await expect(toastStack).toHaveScreenshot('toast-stack-top.png');
await expect(page).toHaveScreenshot('toast-stack-page-top.png');
});
@@ -453,9 +424,6 @@ test(`Toast Stack - Left Position Visual and Behaviour`, async ({ page }) => {
});
});
- // Wait for fade in
- await page.waitForTimeout(1000);
-
await expect(toastStack).toHaveScreenshot('toast-stack-top.png');
await expect(page).toHaveScreenshot('toast-stack-page-top.png');
});
@@ -509,9 +477,6 @@ test(`Toast Stack - Bottom Position Visual and Behaviour`, async ({ page }) => {
});
});
- // Wait for fade in
- await page.waitForTimeout(1000);
-
await expect(toastStack).toHaveScreenshot('toast-stack-top.png');
await expect(page).toHaveScreenshot('toast-stack-page-top.png');
});
@@ -565,17 +530,7 @@ test(`Toast Stack - Top Position Visual and Behaviour`, async ({ page }) => {
});
});
- // Wait for fade in
- await page.waitForTimeout(1000);
-
await expect(toastStack).toHaveScreenshot('toast-stack-top.png');
await expect(page).toHaveScreenshot('toast-stack-page-top.png');
});
});
-
-declare global {
- interface Window {
- jestToastRemove: () => void;
- jestToastStackRemove: () => void;
- }
-}
diff --git a/src/toast/ToastStack.stories.ts b/src/toast/ToastStack.stories.ts
index f758d66dd..0e512b9ba 100644
--- a/src/toast/ToastStack.stories.ts
+++ b/src/toast/ToastStack.stories.ts
@@ -1,24 +1,14 @@
-import { within, fireEvent } from '@testing-library/dom';
-import userEvent from '@testing-library/user-event';
-import * as jest from 'jest-mock';
import { html, nothing, render as renderToElement } from 'lit';
import { ref } from 'lit/directives/ref.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import { ifNotEmpty } from '../utils/Directives.js';
-import expect from '../utils/ExpectDOM.js';
-import { assignToSlot, ComponentStoryFormat, CSFIdentifier, getSourceFromLit, raw } from '../utils/StoryUtils.js';
-import { Toast } from './Toast.js';
+import { ComponentStoryFormat, getSourceFromLit, raw } from '../utils/StoryUtils.js';
import { ToastStack } from './ToastStack.js';
import './Toast.js';
import './ToastStack.js';
import '../button/Button.js';
-export default {
- title: 'UI Components/Toast Stack',
- component: 'omni-toast-stack'
-} as CSFIdentifier;
-
interface Args {
'[Default Slot]': string;
reverse: boolean;
diff --git a/src/toast/ToastStack.ts b/src/toast/ToastStack.ts
index 40da5f0a4..78b43c150 100644
--- a/src/toast/ToastStack.ts
+++ b/src/toast/ToastStack.ts
@@ -152,7 +152,7 @@ export class ToastStack extends OmniElement {
}
/**
- * Push a toast instance onto the toast stack.
+ * Push an existing toast instance onto the toast stack.
*/
public showInstance(instance: Toast, options?: ShowToastOptions) {
if (options?.duration) {
diff --git a/src/utils/JestPlaywright.ts b/src/utils/JestPlaywright.ts
index 3e3371f02..404fe1852 100644
--- a/src/utils/JestPlaywright.ts
+++ b/src/utils/JestPlaywright.ts
@@ -1,8 +1,18 @@
/* eslint-disable @typescript-eslint/ban-ts-comment */
import fs from 'fs';
// import { platform } from 'os';
-import { expect as expectPatched, test, type Locator, type Page, type PageScreenshotOptions, type LocatorScreenshotOptions } from '@playwright/test';
+import {
+ expect as expectPatched,
+ test,
+ type Locator,
+ type Page,
+ type PageScreenshotOptions,
+ type LocatorScreenshotOptions,
+ JSHandle,
+ ElementHandle
+} from '@playwright/test';
export * from '@playwright/test';
+import { fn } from 'jest-mock';
//@ts-ignore
import jsdom from 'jsdom';
//@ts-ignore
@@ -144,6 +154,57 @@ async function withCoverage(this: any, page: Page, testAction: () => T | Prom
return result;
}
+/**
+ * Read story args from story renderer with provided key
+ */
+async function getStoryArgs(page: Page, key: string, readySelector = '[data-testid]') {
+ await page.waitForSelector(readySelector);
+
+ const args = await page.locator(`story-renderer[key=${key}]`).evaluate((storyRenderer: any) => storyRenderer?.story?.args as T);
+ return args;
+}
+
+async function mockEventListener(locatorOrHandle: Locator | ElementHandle | null | undefined, eventName: string) {
+ const tempFunction = `mock_${v4()}`;
+ const eventFunction = fn();
+
+ if (!locatorOrHandle) {
+ return eventFunction;
+ }
+
+ let page: Page;
+ const evalFunc = (node: HTMLElement, { tempFunction, eventName }: { tempFunction: string; eventName: string }) => {
+ //@ts-ignore
+ node.addEventListener(eventName, () => window[tempFunction]());
+ };
+
+ if ((locatorOrHandle as ElementHandle).ownerFrame) {
+ const handle = locatorOrHandle as ElementHandle;
+
+ page = (await handle.ownerFrame())?.page() as Page;
+ await page.exposeFunction(tempFunction, () => eventFunction());
+
+ await handle.evaluate(evalFunc, { tempFunction, eventName });
+ } else {
+ const locator = locatorOrHandle as Locator;
+
+ page = locator.page() as Page;
+ await page.exposeFunction(tempFunction, () => eventFunction());
+
+ await locator.evaluate(evalFunc, { tempFunction, eventName });
+ }
+
+ return eventFunction;
+}
+
+/*
+ const valueChange = jestMock.fn();
+ await page.exposeFunction('jestChange', () => valueChange());
+ await selectComponent.evaluate((node) => {
+ node.addEventListener('change', () => window.jestChange());
+ });
+
+*/
// TODO: Revisit once playwright clipboard support is completed
/*
clipboard isolation: [feature] clipboard isolation: https://github.com/microsoft/playwright/issues/13097
@@ -178,4 +239,4 @@ declare global {
}
}
-export { expect, withCoverage /*keyboardCopy, keyboardPaste, clipboardCopy*/ };
+export { expect, withCoverage, getStoryArgs, mockEventListener /*keyboardCopy, keyboardPaste, clipboardCopy*/ };
+
+ 
+
+ 
+3. Add a `PROTECTED_TOKEN` secret for workflow runs with a [personal access token](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens#creating-a-fine-grained-personal-access-token) as its value. (Optional)
+ - This is to enable re-triggering of workflows when a workflow commits screenshots. If this is not set a new code commit will be required to trigger the next workflow as it uses the default `GITHUB_TOKEN` instead.
+ - See [Automatic token authentication](https://docs.github.com/en/actions/security-guides/automatic-token-authentication#using-the-github_token-in-a-workflow) for detail.
+
+ 
+4. Clone the forked repo, checkout your branch, and run `npm ci` inside the repository root.
+5. Install the testing dependencies with `npx playwright install --with-deps`.
+6. Start up the dev server with `npm run serve` (or by launching debugging in VS Code).
### Directory Structure
When adding or editing components, please note the following key directories:
```
+
├── src
│ ├── button
│ │ ├── Button.stories.ts
+│ │ ├── Button.spec.ts
│ │ ├── Button.ts
│ │ ├── index.ts
│ │ ├── README.md
│ ├── ...
├── ...
+
```
* `src` - Contains all components in a flat structure, each named after a component, e.g. `button`. Contents:
* `Button.stories.ts` - The stories for the component.
+ * `Button.spec.ts` - The tests for the component.
* `Button.ts` - The component. *(NOTE: There might be multiple, depending on complexity and composition)*
* `index.ts` - The directory-level index, containing one or more component exports.
* `README.md` - The README for the component *(NOTE: Generated when Pull Request is merged)*.
@@ -94,6 +107,7 @@ When adding or editing components, please note the following key directories:
* **Do** use *lower case* [kebab-case](https://en.wikipedia.org/wiki/Letter_case#Kebab_case) for component folder names, e.g. `some-component`. 🍢
* **Do** use uppercase first letter [CamelCase](https://en.wikipedia.org/wiki/Camel_case) for component file names, e.g. `SomeComponent.ts`.
* **Do** use the name of the component, suffixed with `.stories` for component story file names, e.g. `SomeComponent.stories.ts`.
+* **Do** use the name of the component, suffixed with `.spec` for component test file names, e.g. `SomeComponent.spec.ts`.
* **Do** match component name with its file name, e.g. `SomeComponent.ts` contains `export class SomeComponent { ... }`.
* **Do** prefix the custom element name with `omni-`.
* **Do not** use any verbs or prefixes within component property names, instead **do** use nouns, e.g. `mode`, `position`.
@@ -126,9 +140,23 @@ Here's a *non-exhaustive* list of requirements that are key to contributing to t
#### Stories
* **Do** use [Component Story Format (CSF) 3](https://github.com/capitec/omni-components/blob/develop/src/utils/ComponentStoryFormat.ts).
-* **Do** implement a [play function](https://github.com/capitec/omni-components/blob/develop/src/utils/PlayFunction.ts) per story to test story-specific component state and event behaviors.
* **Do** set the `data-testid` within every story template.
* **Do** ensure that stories are authored to be both dark and light theme friendly (test via the hosted documentation).
+* **Do** ensure that stories have their respective framework templates authored for each story where required.
+
+#### Tests
+* **Do** cater for behavioral testing for components that covers interaction and visual testing.
+ * **Test** the attributes of the component using assertions.
+ * **Test** visual behaviour by interactions. (Ensure mobile rendering differences are catered for)
+ * Take a screenshot of the initial state of the component.
+ * Perform interactions with the component.
+ * Take a screenshot of every change in state during the interactions.
+ * **Test** the events of the component using mock functions.
+* **Do** ensure that the test name is unique and descriptive of what will be tested.
+* **Do** ensure that the tests written result in at least 80% code coverage for the component.
+* **Do** ensure that the tests focus on user facing features of the component, not the internal workings of the component.
+* **Do** ensure that all tests pass.
+
#### Themes
* **Do** maintain each built-in theme, by ensuring all `--omni-theme-*` CSS custom properties are implemented.
@@ -136,6 +164,49 @@ Here's a *non-exhaustive* list of requirements that are key to contributing to t
> 💡 TIP: Refer to existing components, stories and themes for examples for any of the above.
+
+## Testing
+
+Tests are conducted via [Playwright](https://playwright.dev).
+
+### Running tests from shell
+
+- To run the end-to-end tests for all components on all configured browsers
+
+```sh
+npm run test
+```
+
+- To only run the end-to-end tests for all components on all configured browsers. (`npm run serve` must be run separately)
+
+```sh
+npm run test:only
+```
+
+- To run the end-to-end tests for all components only on Chromium. (`npm run serve` must be run separately)
+```sh
+npx playwright test --project=chromium
+```
+- To run the tests of a specific component on all configured browsers. (`npm run serve` must be run separately)
+```sh
+npx playwright test Component.spec.ts
+```
+
+### Running tests from Playwright Test Explorer within VSCode
+
+- Ensure that `npm run serve` is running separately.
+- Refer to the [Playwright Test Explorer](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright) extension.
+
+### Viewing the test report
+
+- To view the latest test report.
+```sh
+npm run test-results
+```
+
+
+> 🔶 NOTE: Screenshot testing only asserts during CI workflows, the report will locally only show current screenshots taken, but not perform any comparisons.
+
## Pull Requests
### Requirements
* **Do** ensure the branch is up to date with the `develop` branch.
@@ -149,7 +220,5 @@ Here's a *non-exhaustive* list of requirements that are key to contributing to t
> 💡 TIP: Analyze changes locally with `npm run lint`.
* Format validation passes.
> 💡 TIP: Apply changes locally with `npm run format`.
-* All story play function tests pass.
-> 💡 TIP: Run tests locally with `npm run test`.
+* All tests pass.
-
diff --git a/README.md b/README.md
index a1d8f01fe..ec0fa5f73 100644
--- a/README.md
+++ b/README.md
@@ -641,17 +641,17 @@ See the [`CONTRIBUTING.md`](./CONTRIBUTING.md) guide to get involved.