diff --git a/README.md b/README.md index db82723..16d5909 100644 --- a/README.md +++ b/README.md @@ -135,3 +135,13 @@ onClick={(e) => { | `showSpinner` | `boolean` | Determines whether to accompany the loading bar with a spinner. Turned off by default. | `false` | | `ignoreSearchParams` | `boolean` | Determines whether to ignore search parameters in the URL when triggering the loader. Turned off by default. | `false` | | `dir` | `ltr` or `rtl` | Sets the direction of the top-loading bar. | `ltr` | + +## Playground + +A simple playground page is available for testing HolyLoader. + +### Instructions + +1. Navigate to the `src/pages/Playground.tsx` file. +2. Modify the `Playground` component as needed to test different configurations of HolyLoader. +3. Run the application and visit the playground page to see the changes in action. diff --git a/biome.json b/biome.json index 39743bc..7898575 100644 --- a/biome.json +++ b/biome.json @@ -1,7 +1,7 @@ { "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json", "files": { - "include": ["src/**/*.ts"], + "include": ["src/**/*.ts", "src/**/*.tsx", "src/pages/Playground.tsx"], "ignore": ["dist", ".github", "node_modules"] }, "formatter": { diff --git a/src/__tests__/Playground.test.tsx b/src/__tests__/Playground.test.tsx new file mode 100644 index 0000000..85b30e7 --- /dev/null +++ b/src/__tests__/Playground.test.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import Playground from '../pages/Playground'; + +describe('Playground', () => { + it('renders the Playground component', () => { + render(); + const heading = screen.getByText(/Playground/i); + expect(heading).toBeInTheDocument(); + }); + + it('renders the HolyLoader component', () => { + render(); + const loader = screen.getByText(/This is a simple playground page for testing HolyLoader./i); + expect(loader).toBeInTheDocument(); + }); +}); diff --git a/src/pages/Playground.tsx b/src/pages/Playground.tsx new file mode 100644 index 0000000..c0edc58 --- /dev/null +++ b/src/pages/Playground.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import HolyLoader from 'holy-loader'; + +const Playground: React.FC = () => { + return ( +
+

Playground

+ +

This is a simple playground page for testing HolyLoader.

+
+ ); +}; + +export default Playground;