);
}
-
-type LinkProps = {
- href: string;
- children: React.ReactNode;
-};
-function Link({ href, children }: LinkProps) {
- return (
-
- );
-}
diff --git a/docs/src/components/Mascot.tsx b/docs/src/components/Mascot.tsx
index d08faddb..4baaef4b 100644
--- a/docs/src/components/Mascot.tsx
+++ b/docs/src/components/Mascot.tsx
@@ -52,7 +52,6 @@ export function Mascot() {
"object-cover",
"object-left",
"block",
- "overflow-visible",
"animate-slide-and-fade",
"block",
"z-[-1]",
diff --git a/docs/src/components/Navigation/LanguageSelect.tsx b/docs/src/components/Navigation/LanguageSelect.tsx
new file mode 100644
index 00000000..dc70e594
--- /dev/null
+++ b/docs/src/components/Navigation/LanguageSelect.tsx
@@ -0,0 +1,72 @@
+import { LanguageSlug, languageSlugsToLabels } from "@/lib/languageFromPath";
+import { Listbox } from "@headlessui/react";
+import clsx from "clsx";
+import { Button } from "../Button";
+import { CaretBottom } from "../Icons/CaretBottom";
+
+type LanguageSelectProps = {
+ selectedLanguage: LanguageSlug;
+ handleChange(value: LanguageSlug): void;
+};
+
+export function LanguageSelect({
+ selectedLanguage,
+ handleChange,
+}: LanguageSelectProps) {
+ return (
+
+ );
+}
diff --git a/docs/src/components/Navigation/Navigation.tsx b/docs/src/components/Navigation/Navigation.tsx
new file mode 100644
index 00000000..3bb2793c
--- /dev/null
+++ b/docs/src/components/Navigation/Navigation.tsx
@@ -0,0 +1,105 @@
+import { LanguageSlug, getPathParts } from "@/lib/languageFromPath";
+import clsx from "clsx";
+import { useRouter } from "next/dist/client/router";
+import Link from "next/link";
+import { Button } from "../Button";
+import { Logo } from "../Logo";
+import { LanguageSelect } from "./LanguageSelect";
+
+export function Navigation() {
+ const router = useRouter();
+ const pathParts = getPathParts(router.pathname);
+
+ function handleChange(value: LanguageSlug) {
+ let nextRoute = "/" + value;
+ if (pathParts.subpath) {
+ nextRoute += "/" + pathParts.subpath;
+ }
+ router.push(nextRoute);
+ }
+
+ return (
+
+ );
+}
+
+const sharedClasses = clsx([
+ "h-[23px]",
+ "rounded-[4px]",
+ "text-[18px]",
+ "px-2",
+ "hover:text-white",
+ "hover:bg-blue",
+]);
+
+const pressedClasses = clsx([
+ "mt-[1px]",
+ "text-white",
+ "bg-blue",
+ "shadow-none",
+ "tablet:mt-[3px]",
+ sharedClasses,
+]);
+
+const unPressedClasses = clsx([
+ "text-black",
+ "bg-white",
+ "shadow-button",
+ "tablet:shadow-button-tablet",
+ sharedClasses,
+]);
diff --git a/docs/src/components/mdx.tsx b/docs/src/components/mdx.tsx
index b963d577..3060ad7f 100644
--- a/docs/src/components/mdx.tsx
+++ b/docs/src/components/mdx.tsx
@@ -39,7 +39,15 @@ export function code({ children, ...props }: ParentComponentProps) {
export function pre({ children, ...props }: ParentComponentProps) {
return (
-
+
{children}
diff --git a/docs/src/lib/languageFromPath.ts b/docs/src/lib/languageFromPath.ts
new file mode 100644
index 00000000..33c65df8
--- /dev/null
+++ b/docs/src/lib/languageFromPath.ts
@@ -0,0 +1,21 @@
+export const languageSlugsToLabels = {
+ jvm: "jvm",
+ js: "js",
+ go: "go",
+ "other-platforms": "...",
+};
+
+export type LanguageSlug = keyof typeof languageSlugsToLabels;
+
+export type PathParts = {
+ language: LanguageSlug;
+ subpath: "" | "get-started" | "advanced";
+};
+
+export function getPathParts(path: string): PathParts {
+ const splitPath = path.split("/");
+ return {
+ language: splitPath[1],
+ subpath: splitPath.length === 3 ? splitPath[2] : "",
+ } as PathParts;
+}
diff --git a/docs/src/pages/_app.tsx b/docs/src/pages/_app.tsx
index 9a160d31..d5a50492 100644
--- a/docs/src/pages/_app.tsx
+++ b/docs/src/pages/_app.tsx
@@ -1,11 +1,11 @@
-import { AppProps } from "next/app";
-import Head from "next/head";
-import { MDXProvider } from "@mdx-js/react";
-import clsx from "clsx";
-
+import { Hero } from "@/components/Hero";
+import { Navigation } from "@/components/Navigation/Navigation";
import * as mdxComponents from "@/components/mdx";
-
import "@/styles/tailwind.css";
+import { MDXProvider } from "@mdx-js/react";
+import clsx from "clsx";
+import { AppProps } from "next/app";
+import Head from "next/head";
export default function App({ Component, pageProps }: AppProps) {
return (
@@ -25,6 +25,9 @@ export default function App({ Component, pageProps }: AppProps) {
"wide-phone:py-2",
])}
>
+ {pageProps.showHero ?
:
}
+
+
diff --git a/docs/src/pages/index.mdx b/docs/src/pages/index.mdx
index f840e357..c3157a0a 100644
--- a/docs/src/pages/index.mdx
+++ b/docs/src/pages/index.mdx
@@ -1,7 +1,8 @@
import { Hero } from "@/components/Hero";
import { Selfie } from "@/components/Selfie";
-
+{/* show the homepage hero component and hide the navigation used everywhere else in the app */}
+export const showHero = true
##
is literal
diff --git a/docs/src/pages/js/advanced.mdx b/docs/src/pages/js/advanced.mdx
index 110c2431..a73017eb 100644
--- a/docs/src/pages/js/advanced.mdx
+++ b/docs/src/pages/js/advanced.mdx
@@ -1,4 +1,8 @@
-# Advanced Usage of Selfie: Dive Deeper into Snapshot Testing
+import { Advanced } from "@/components/Advanced";
+
+
+
+## Advanced Usage of Selfie: Dive Deeper into Snapshot Testing
Once you're familiar with the basics of Selfie, the snapshot testing library for JavaScript, you can explore its advanced features to enhance and fine-tune your testing processes. This guide will walk you through the more sophisticated functionalities Selfie offers.
@@ -32,11 +36,11 @@ registerSerializer(myCustomSerializer);
By default, Selfie uses a simple string comparison to differentiate snapshots. However, there might be cases where you want a more flexible or granular comparison:
```javascript
-import { setDiffOptions } from 'selfie-testing';
+import { setDiffOptions } from "selfie-testing";
setDiffOptions({
ignoreWhitespace: true, // Ignores whitespace changes
- ignoreOrder: false, // Treats changes in order as significant
+ ignoreOrder: false, // Treats changes in order as significant
// ... other options
});
```
@@ -46,11 +50,11 @@ setDiffOptions({
To improve the maintainability of your snapshot files, especially in larger projects, Selfie allows custom naming and organization strategies:
```javascript
-import { configure } from 'selfie-testing';
+import { configure } from "selfie-testing";
configure({
snapshotFileName: (componentName) => `${componentName}.snap.js`,
- snapshotDirectory: './my-custom-snapshots-directory',
+ snapshotDirectory: "./my-custom-snapshots-directory",
});
```
@@ -59,7 +63,7 @@ configure({
When updating multiple components at once, it can be tedious to review and update each snapshot manually. Selfie's interactive mode lets you review and accept or reject changes one by one:
```javascript
-import { interactiveUpdate } from 'selfie-testing';
+import { interactiveUpdate } from "selfie-testing";
// Run this after your tests
interactiveUpdate();
@@ -70,8 +74,8 @@ interactiveUpdate();
Components often rely on props or context for rendering. With Selfie, you can easily pass these when creating snapshots:
```javascript
-const props = { title: 'Test Title' };
-const context = { theme: 'dark' };
+const props = { title: "Test Title" };
+const context = { theme: "dark" };
const snapshot = createSnapshot(
, context);
```
@@ -90,4 +94,4 @@ The advanced features of Selfie bring snapshot testing to a new level, providing
Remember, the true power of snapshot testing lies not just in capturing changes, but in understanding and managing them. Enjoy your journey with Selfie!
-Need further assistance? Visit our GitHub repository for more examples, discussions, and support. 📸
\ No newline at end of file
+Need further assistance? Visit our GitHub repository for more examples, discussions, and support. 📸
diff --git a/docs/src/pages/js/get-started.mdx b/docs/src/pages/js/get-started.mdx
index b2409491..469726cc 100644
--- a/docs/src/pages/js/get-started.mdx
+++ b/docs/src/pages/js/get-started.mdx
@@ -1,4 +1,8 @@
-# Getting Started with Selfie: The Snapshot Testing Library
+import { GetStarted } from "@/components/GetStarted";
+
+
+
+## Getting Started with Selfie: The Snapshot Testing Library
Welcome to Selfie, an open-source snapshot testing library for JavaScript that simplifies and streamlines your testing processes. This guide will take you through the initial steps of setting up Selfie in your JavaScript project.
@@ -21,7 +25,7 @@ npm install selfie-testing --save-dev
First, you'll need to import Selfie into your testing file.
```javascript
- import { createSnapshot, compareWithSnapshot } from 'selfie-testing';
+ import { createSnapshot, compareWithSnapshot } from "selfie-testing";
```
2. **Capture the Initial Snapshot**
@@ -37,7 +41,7 @@ npm install selfie-testing --save-dev
In your tests, use the `compareWithSnapshot` function to ensure your component's current output matches the stored snapshot.
```javascript
- test('YourComponent should match the snapshot', () => {
+ test("YourComponent should match the snapshot", () => {
const currentOutput =
;
expect(compareWithSnapshot(currentOutput, initialSnapshot)).toBe(true);
});
@@ -58,7 +62,6 @@ npm install selfie-testing --save-dev
## Tips and Best Practices
- **Commit Snapshots**: Always commit your snapshot files to your version control system. This ensures that all team members are working with the same snapshots.
-
- **Review Snapshot Differences**: When a snapshot test fails, review the changes carefully. Make sure that any differences between the snapshots are intentional.
- **Regularly Update Snapshots**: As your codebase evolves, your components will change. Make it a habit to regularly update snapshots to reflect these changes.
@@ -69,4 +72,4 @@ Snapshot testing with Selfie offers a fast and effective way to ensure the consi
Thank you for choosing Selfie! If you have any feedback, issues, or suggestions, please feel free to contribute to our GitHub repository.
-Happy testing! 📸
\ No newline at end of file
+Happy testing! 📸
diff --git a/docs/src/pages/js/index.mdx b/docs/src/pages/js/index.mdx
index 4f7b08d1..d5b5e9b0 100644
--- a/docs/src/pages/js/index.mdx
+++ b/docs/src/pages/js/index.mdx
@@ -1,14 +1,21 @@
-## selfie is literal
+import { Selfie } from "@/components/Selfie";
+
+##
is literal
Sure, you could write your assertions like this.
```javascript
-describe('login', () => {
- it('should set the login cookie', () => {
- const response = request.post('/confirm/login/erjchFbCXxMlUfFXx3oYiO-Rj6zM7tRGdRV8ziqRn5Jh', {
- followRedirect: false
- });
- expect(response.cookies.login).toBe("eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxIiwiaXNzIjoiZGlmZnBsdWcuY29tIiwiYXVkIjoiZGlmZnBsdWcuY29tIiwiaWF0IjoxNTc3NjY0MDAsImVtYWlsIjoibHVrZS5za3l3YWxrZXJAZGlmZnBsdWcuY29tIiwic2FsZXMiOiJ0cnVlIn0.v7nes7_rTa0NiwTz6OLIAmRZJ-XzzGULRiAPWBiV5iI");
+describe("login", () => {
+ it("should set the login cookie", () => {
+ const response = request.post(
+ "/confirm/login/erjchFbCXxMlUfFXx3oYiO-Rj6zM7tRGdRV8ziqRn5Jh",
+ {
+ followRedirect: false,
+ }
+ );
+ expect(response.cookies.login).toBe(
+ "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxIiwiaXNzIjoiZGlmZnBsdWcuY29tIiwiYXVkIjoiZGlmZnBsdWcuY29tIiwiaWF0IjoxNTc3NjY0MDAsImVtYWlsIjoibHVrZS5za3l3YWxrZXJAZGlmZnBsdWcuY29tIiwic2FsZXMiOiJ0cnVlIn0.v7nes7_rTa0NiwTz6OLIAmRZJ-XzzGULRiAPWBiV5iI"
+ );
});
});
```
@@ -16,11 +23,14 @@ describe('login', () => {
But isn't this easier to read? And also more complete?
```javascript
-describe('login', () => {
- it('should match expected headers', () => {
- const response = request.post('/confirm/login/erjchFbCXxMlUfFXx3oYiO-Rj6zM7tRGdRV8ziqRn5Jh', {
- followRedirect: false
- });
+describe("login", () => {
+ it("should match expected headers", () => {
+ const response = request.post(
+ "/confirm/login/erjchFbCXxMlUfFXx3oYiO-Rj6zM7tRGdRV8ziqRn5Jh",
+ {
+ followRedirect: false,
+ }
+ );
expectSelfie(response.headers).toBe(`
content-type=text/plain
...
@@ -32,25 +42,25 @@ describe('login', () => {
... And so on ...
-## selfie is lensable
+##
is lensable
Some snapshots are so big that it would be cumbersome to put them inline into your test code. So selfie helps you put them on disk.
```javascript
-describe('gzipFavicon', () => {
- it('should match the disk content', () => {
- const response = request.get('/favicon.ico', { encoding: 'gzip' });
+describe("gzipFavicon", () => {
+ it("should match the disk content", () => {
+ const response = request.get("/favicon.ico", { encoding: "gzip" });
expectSelfie(response).toMatchDisk();
});
});
-describe('orderFlow', () => {
- it('should match the disk content', () => {
- let response = request.get('/orders');
- expectSelfie(response).toMatchDisk('initial');
+describe("orderFlow", () => {
+ it("should match the disk content", () => {
+ let response = request.get("/orders");
+ expectSelfie(response).toMatchDisk("initial");
postOrder();
- response = request.get('/orders');
- expectSelfie(response).toMatchDisk('ordered');
+ response = request.get("/orders");
+ expectSelfie(response).toMatchDisk("ordered");
});
});
```
diff --git a/docs/src/pages/jvm/advanced.mdx b/docs/src/pages/jvm/advanced.mdx
index c65b6cac..356894ec 100644
--- a/docs/src/pages/jvm/advanced.mdx
+++ b/docs/src/pages/jvm/advanced.mdx
@@ -1,4 +1,6 @@
-# Advanced
+import { Advanced } from "@/components/Advanced";
+
+
Diving deeper into Selfie's capabilities, this advanced usage guide will help you leverage the full potential of this robust Java snapshot testing library.
@@ -93,4 +95,4 @@ Your `CustomDiffViewer` should implement Selfie's `DiffViewer` interface.
---
-With these advanced features, Selfie provides you with an expansive toolkit to make snapshot testing precise, convenient, and adaptable to various scenarios. Dive in and enhance your testing experience!
\ No newline at end of file
+With these advanced features, Selfie provides you with an expansive toolkit to make snapshot testing precise, convenient, and adaptable to various scenarios. Dive in and enhance your testing experience!
diff --git a/docs/src/pages/jvm/get-started.mdx b/docs/src/pages/jvm/get-started.mdx
index a81b7647..0afaba8b 100644
--- a/docs/src/pages/jvm/get-started.mdx
+++ b/docs/src/pages/jvm/get-started.mdx
@@ -1,4 +1,6 @@
-# Get started
+import { GetStarted } from "@/components/GetStarted";
+
+
## Installation
@@ -21,7 +23,7 @@ Replace `LATEST_VERSION` with the latest available version of Selfie.
For Gradle users, add this to your `build.gradle` file:
-```gradle
+```bash
testImplementation 'com.yourdomain.selfie:selfie:LATEST_VERSION'
```
@@ -74,7 +76,6 @@ Again, replace `LATEST_VERSION` with the latest available version of Selfie.
## Tips and tricks
- **Folder Structure**: By default, Selfie saves snapshots in a directory named `__snapshots__` alongside your test files. Ensure you check this into your version control to keep reference snapshots consistent across different environments.
-
- **Named Snapshots**: You can name your snapshots to make it easier to identify them, especially if you have multiple snapshots in one test class.
## Contribute
@@ -83,4 +84,4 @@ Selfie is open source and we welcome contributions! Check out the project on [Gi
---
-We hope this guide has helped you get started with Selfie. Enjoy seamless snapshot testing in Java!
\ No newline at end of file
+We hope this guide has helped you get started with Selfie. Enjoy seamless snapshot testing in Java!
diff --git a/docs/src/pages/jvm/index.mdx b/docs/src/pages/jvm/index.mdx
index d9a2a613..b95e48fc 100644
--- a/docs/src/pages/jvm/index.mdx
+++ b/docs/src/pages/jvm/index.mdx
@@ -1,4 +1,6 @@
-## selfie is literal
+import { Selfie } from "@/components/Selfie";
+
+##
is literal
Sure, you could write your assertions like this.
@@ -55,7 +57,7 @@ public void preventCssBloat() {
}
```
-## selfie is lensable
+##
is lensable
Some snapshots are so big that it would be cumbersome to put them inline into your test code. So selfie helps you put them on disk.
@@ -91,8 +93,8 @@ H4sIAAAAAAAA/8pIzcnJVyjPL8pJUQQAlQYXAAAA
TODO.
-## selfie is like a filesystem
+##
is like a filesystem
Selfie's snapshot files `.ss` are incredibly simple to parse, and you can use `selfie-lib` to parse them for you if you want. You can treat them as an output deliverable of your code, and use them as an input to other tooling.
-
-TODO.
\ No newline at end of file
+
+TODO.
+ );
+}
diff --git a/docs/src/components/Button.tsx b/docs/src/components/Button.tsx
index beea5989..20a334b4 100644
--- a/docs/src/components/Button.tsx
+++ b/docs/src/components/Button.tsx
@@ -1,53 +1,34 @@
import clsx from "clsx";
-import { CSSProperties } from "react";
+import { ReactNode } from "react";
type ButtonProps = {
- text: string;
- isDepressed?: boolean;
- isWide?: boolean;
+ children: ReactNode;
+ className?: string;
};
-export function Button({
- text,
- isDepressed = false,
- isWide = false,
-}: ButtonProps) {
+export function Button({ children, className }: ButtonProps) {
return (
- 
+ );
+}
diff --git a/docs/src/components/Icons/CaretBottom.tsx b/docs/src/components/Icons/CaretBottom.tsx
new file mode 100644
index 00000000..70c84b6c
--- /dev/null
+++ b/docs/src/components/Icons/CaretBottom.tsx
@@ -0,0 +1,9 @@
+import { SVGProps } from "react";
+
+export function CaretBottom(props: SVGProps