Skip to content

Commit

Permalink
Feat/testing (#17)
Browse files Browse the repository at this point in the history
  • Loading branch information
RockiRider authored Feb 27, 2024
1 parent c53dd1c commit 1f87c48
Show file tree
Hide file tree
Showing 20 changed files with 582 additions and 228 deletions.
34 changes: 34 additions & 0 deletions .github/workflows/triage.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
name: PR Workflow

on:
pull_request:
types: [opened, reopened, synchronize, ready_for_review]
branches:
- main

jobs:
build:
runs-on: ubuntu-latest
if: github.event.pull_request.draft == false
steps:
- name: Checkout code
uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: "20"
cache: npm
- run: npm ci
- name: Build Mui-Sonner
run: npm run build

- name: Install Playwright Browsers
run: npx playwright install --with-deps chromium

- name: Run tests
run: npm run test
- uses: actions/upload-artifact@v4
if: always()
with:
name: playwright-report
path: playwright-report/
retention-days: 5
2 changes: 1 addition & 1 deletion apps/example-vite/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
/>
</head>
<body>
<div id="root"></div>
<div id="app"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
5 changes: 4 additions & 1 deletion apps/example-vite/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,14 @@
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.15.11",
"@mui/material": "^5.15.6",
"@tanstack/react-router": "^1.17.4",
"mui-sonner": "*",
"react": "^18.2.0",
"react-dom": "^18.2.0"
"react-dom": "^18.2.0",
"zod": "^3.22.4"
},
"devDependencies": {
"@tanstack/router-vite-plugin": "^1.16.5",
"@types/react": "^18.2.43",
"@types/react-dom": "^18.2.17",
"@typescript-eslint/eslint-plugin": "^6.14.0",
Expand Down
42 changes: 0 additions & 42 deletions apps/example-vite/src/App.css

This file was deleted.

66 changes: 1 addition & 65 deletions apps/example-vite/src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,74 +1,10 @@
import "./App.css";

import { toast } from "mui-sonner";
import { Button, CssBaseline, Stack, ThemeProvider } from "@mui/material";
import { CssBaseline, ThemeProvider } from "@mui/material";
import { appTheme } from "./assets/theme";

function App() {
return (
<ThemeProvider theme={appTheme}>
<CssBaseline />
<Stack gap={2} alignItems="center" width={1}>
<h1>Vite + React</h1>
<Stack className="card" gap={2}>
<Button
onClick={() => {
toast("Update something", {
closeButton: true,
action: {
label: "Update",
onClick: () => {
alert("Updating...");
},
},
});
}}
>
Action + Close
</Button>
<Button
onClick={() =>
toast.success("Save Successful", {
description: "Your item has been saved.",
})
}
>
Success
</Button>
<Button
onClick={() => {
const prom = new Promise((resolve) => {
setTimeout(() => {
resolve("Success");
}, 3000);
});

toast.promise(prom, {
loading: "Saving...",
success: "Save Successful",
});
}}
>
Promise Success
</Button>
<Button
onClick={() => {
const prom = new Promise((_resolve, reject) => {
setTimeout(() => {
reject("Error");
}, 3000);
});

toast.promise(prom, {
loading: "Saving...",
error: "Save Failed",
});
}}
>
Promise Error
</Button>
</Stack>
</Stack>
</ThemeProvider>
);
}
Expand Down
35 changes: 35 additions & 0 deletions apps/example-vite/src/features/Advanced.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { Button } from "@mui/material";
import { toast } from "mui-sonner";
import { useState } from "react";

const Advanced = () => {
const [showAutoClose, setShowAutoClose] = useState(false);
const [showDismiss, setShowDismiss] = useState(false);

return (
<>
<Button
data-testid="auto_close_call_back_btn"
onClick={() =>
toast("Auto Close", {
onAutoClose: () => setShowAutoClose(true),
})
}
>
On Auto Close
</Button>
{showAutoClose && <div data-testid="auto_close_el"></div>}
<Button
data-testid="dismiss_toast_btn"
onClick={() =>
toast("On Dismiss", { onDismiss: () => setShowDismiss(true) })
}
>
On Dismiss
</Button>
{showDismiss && <div data-testid="dismiss_el"></div>}
</>
);
};

export default Advanced;
98 changes: 98 additions & 0 deletions apps/example-vite/src/features/Basic.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
import { Button } from "@mui/material";
import { toast } from "mui-sonner";

const Basic = () => {
return (
<>
<Button data-testid="basic_btn" onClick={() => toast("Hello World")}>
Basic
</Button>
<Button
data-testid="success_btn"
onClick={() => toast.success("My Success Toast")}
>
Success
</Button>
<Button
data-testid="error_btn"
onClick={() => toast.error("My Error Toast")}
>
Error
</Button>
<Button
data-testid="warning_btn"
onClick={() => toast.warning("My Warning Toast")}
>
Warning
</Button>
<Button
data-testid="info_btn"
onClick={() => toast.info("My Info Toast")}
>
Info
</Button>
<Button
data-testid="loading_btn"
onClick={() => toast.loading("My Loading Toast")}
>
Loading
</Button>
<Button
data-testid="promise_success_btn"
onClick={() => {
const prom = new Promise((resolve) => {
setTimeout(() => {
resolve("Success");
}, 200);
});

toast.promise(prom, {
loading: "Loading Success",
success: "Promise Success",
});
}}
>
Promise Success
</Button>
<Button
data-testid="promise_error_btn"
onClick={() => {
const prom = new Promise((_resolve, reject) => {
setTimeout(() => {
reject("Error");
}, 200);
});

toast.promise(prom, {
loading: "Loading Error",
error: "Promise Error",
});
}}
>
Promise Error
</Button>
<Button
data-testid="non_dismissible_btn"
onClick={() =>
toast("Non-dismissible", {
dismissible: false,
})
}
>
Non-dismissible
</Button>
<Button
data-testid="infinite_btn"
onClick={() =>
toast("Infinite", {
duration: Infinity,
})
}
>
Infinite
</Button>
</>
);
};

export default Basic;
48 changes: 25 additions & 23 deletions apps/example-vite/src/main.tsx
Original file line number Diff line number Diff line change
@@ -1,25 +1,27 @@
import React from "react";
import { StrictMode } from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import "./index.css";
import { Toaster } from "mui-sonner";
import { CircularProgress, Icon } from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
import { RouterProvider, createRouter } from "@tanstack/react-router";

ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<Toaster
toastOptions={{
closeIcon: (
<Icon sx={{ width: 24, height: 24 }}>
<CloseIcon />
</Icon>
),
loading: {
icon: <CircularProgress size={20} color="secondary" />,
},
}}
/>
<App />
</React.StrictMode>
);
// Import the generated route tree
import { routeTree } from "./routeTree.gen";

// Create a new router instance
const router = createRouter({ routeTree });

// Register the router instance for type safety
declare module "@tanstack/react-router" {
interface Register {
router: typeof router;
}
}

// Render the app
const rootElement = document.getElementById("app")!;
if (!rootElement.innerHTML) {
const root = ReactDOM.createRoot(rootElement);
root.render(
<StrictMode>
<RouterProvider router={router} />
</StrictMode>
);
}
Loading

0 comments on commit 1f87c48

Please sign in to comment.