From 9c1549c543730c1a0e47b760a1d94f9ec76832d0 Mon Sep 17 00:00:00 2001 From: Mihovil Ilakovac Date: Fri, 11 Aug 2023 16:46:30 +0200 Subject: [PATCH] Fixing links --- web/blog/2021-12-02-waspello.md | 4 +- .../2022-06-15-jobs-feature-announcement.md | 2 +- ...24-ML-code-gen-vs-coding-by-hand-future.md | 2 +- .../2022-09-05-dev-excuses-app-tutrial.md | 2 +- .../2022-11-15-auth-feature-announcement.md | 2 +- ...-optimistic-update-feature-announcement.md | 2 +- web/blog/2023-01-18-wasp-beta-update-dec.md | 4 +- web/blog/2023-04-11-wasp-launch-week-two.md | 2 +- ...2023-06-28-what-can-you-build-with-wasp.md | 4 +- ...-voting-app-websockets-react-typescript.md | 2 +- web/docs/_addExternalAuthEnvVarsReminder.md | 5 - web/docs/advanced/deployment/manually.md | 2 +- web/docs/advanced/jobs.md | 2 +- web/docs/data-model/crud.md | 4 +- web/docs/project/testing.md | 335 +++++++++--------- web/docs/tutorial/07-auth.md | 2 +- web/docs/typescript.md | 2 +- web/src/components/Features.js | 10 +- 18 files changed, 201 insertions(+), 187 deletions(-) delete mode 100644 web/docs/_addExternalAuthEnvVarsReminder.md diff --git a/web/blog/2021-12-02-waspello.md b/web/blog/2021-12-02-waspello.md index aaa9bcd94b..6e1dace35b 100644 --- a/web/blog/2021-12-02-waspello.md +++ b/web/blog/2021-12-02-waspello.md @@ -139,7 +139,7 @@ page Main { } ``` -All pretty straightforward so far! As you can see here, Wasp also provides [authentication out-of-the-box](/docs/language/features#authentication--authorization). +All pretty straightforward so far! As you can see here, Wasp also provides [authentication out-of-the-box](/docs/auth/overview). Currently, the majority of the client logic of Waspello is contained in `src/client/MainPage.js` (we should break it down a little 😅 - [you can help us!](https://github.com/wasp-lang/wasp/issues/334)). Just to give you an idea, here's a quick glimpse into it: @@ -163,7 +163,7 @@ const MainPage = ({ user }) => { ) } ``` -Once you've defined a query or action as described above, you can immediately import it into your client code as shown in the code sample, by using the `@wasp` prefix in the import path. `useQuery` ensures reactivity so once the data changes the query will get re-fetched. You can find more details about it [here](/docs/language/features#usequery). +Once you've defined a query or action as described above, you can immediately import it into your client code as shown in the code sample, by using the `@wasp` prefix in the import path. `useQuery` ensures reactivity so once the data changes the query will get re-fetched. You can find more details about it [here](/docs/data-model/operations/queries#the-usequery-hook-1). This is pretty much it from the stuff that works 😄 ! I kinda rushed a bit through things here - for more details on all Wasp features and to build your first app with Wasp, check out our [docs](/docs/). diff --git a/web/blog/2022-06-15-jobs-feature-announcement.md b/web/blog/2022-06-15-jobs-feature-announcement.md index 2c6fb920d6..26ef9bb099 100644 --- a/web/blog/2022-06-15-jobs-feature-announcement.md +++ b/web/blog/2022-06-15-jobs-feature-announcement.md @@ -144,7 +144,7 @@ For those interested, check out the [full diff here](https://github.com/wasp-lan ## Looks neat! What’s next? -First off, please check out our docs for Jobs: [https://wasp-lang.dev/docs/language/features#jobs](https://wasp-lang.dev/docs/language/features#jobs) There, you will find all the info you need to start using them. Next, if you want to see the code for this example in full, you can find it here: [https://github.com/wasp-lang/wasp/tree/release/examples/waspleau](https://github.com/wasp-lang/wasp/tree/release/examples/waspleau) +First off, please check out our docs for [Jobs](/docs/advanced/jobs). There, you will find all the info you need to start using them. Next, if you want to see the code for this example in full, you can find it here: [https://github.com/wasp-lang/wasp/tree/release/examples/waspleau](https://github.com/wasp-lang/wasp/tree/release/examples/waspleau) In the future, we plan to add more job executors, including support for polyglot workers (imagine running your Python ML function from Wasp!). We are also open to any other ideas on how jobs can become more useful to you (like client-side access to server-side jobs, or client-side jobs using similar abstractions?). Let us know what you think! diff --git a/web/blog/2022-06-24-ML-code-gen-vs-coding-by-hand-future.md b/web/blog/2022-06-24-ML-code-gen-vs-coding-by-hand-future.md index 5423f493b6..49625af673 100644 --- a/web/blog/2022-06-24-ML-code-gen-vs-coding-by-hand-future.md +++ b/web/blog/2022-06-24-ML-code-gen-vs-coding-by-hand-future.md @@ -184,7 +184,7 @@ auth: { onAuthSucceededRedirectTo: "/dashboard" } ``` -Based on this, the computer/compiler could take care of all the stuff mentioned above, and then depending on the level of abstraction, provide some sort of interface (e.g. form components, or functions) to “hook” in with our own e.g. React/Node.js code (btw this is how it actually [works in Wasp](/docs/language/features#authentication--authorization)). +Based on this, the computer/compiler could take care of all the stuff mentioned above, and then depending on the level of abstraction, provide some sort of interface (e.g. form components, or functions) to “hook” in with our own e.g. React/Node.js code (btw this is how it actually [works in Wasp](/docs/auth/overview)). We don’t need to care what exact packages or encryption methods are used beneath the hood - it is the responsibility we trust with the authors and maintainers of the abstraction layer, just like we trust that Python knows the best how to sum two numbers on the assembly level and that it is kept in sync with the latest advancements in the field. The same happens when we rely on the built-in data structures or count on the garbage collector to manage our program’s memory well. diff --git a/web/blog/2022-09-05-dev-excuses-app-tutrial.md b/web/blog/2022-09-05-dev-excuses-app-tutrial.md index 2b5d3e6d77..ef3e68b05d 100644 --- a/web/blog/2022-09-05-dev-excuses-app-tutrial.md +++ b/web/blog/2022-09-05-dev-excuses-app-tutrial.md @@ -137,7 +137,7 @@ We’ve added Tailwind to make our UI more pretty and Axios for making API reque Also, we’ve declared a database entity called `Excuse`, queries, and action. The `Excuse` entity consists of the entity’s ID and the text. -`Queries` are here when we need to fetch/read something, while `actions` are here when we need to change/update data. Both query and action declaration consists of two lines – a reference to the file that contains implementation and a data model to operate on. You can find more info [in the docs](#). So let’s proceed with queries/actions. +`Queries` are here when we need to fetch/read something, while `actions` are here when we need to change/update data. Both query and action declaration consists of two lines – a reference to the file that contains implementation and a data model to operate on. You can find more info [in the docs](/docs/data-model/operations/overview). So let’s proceed with queries/actions. **2) Create two files: “actions.js” and “queries.js” in the `src/server` folder.** diff --git a/web/blog/2022-11-15-auth-feature-announcement.md b/web/blog/2022-11-15-auth-feature-announcement.md index 26b68b7bd3..d15f3c363f 100644 --- a/web/blog/2022-11-15-auth-feature-announcement.md +++ b/web/blog/2022-11-15-auth-feature-announcement.md @@ -113,4 +113,4 @@ export default Login ## Epilogue -No need to move off the grid out of frustration when adding authentication and social login to your web app. [Here](https://github.com/shayneczyzewski/authExample) is a complete, minimal example if you want to jump right in, and [here](https://wasp-lang.dev/docs/language/features#authentication--authorization) are the full docs for more info. With just a few simple steps above, we've added authentication with best practices baked into our app so we can move on to solving problems that add value to our users! +No need to move off the grid out of frustration when adding authentication and social login to your web app. [Here](https://github.com/shayneczyzewski/authExample) is a complete, minimal example if you want to jump right in, and [here](/docs/auth/overview) are the full docs for more info. With just a few simple steps above, we've added authentication with best practices baked into our app so we can move on to solving problems that add value to our users! diff --git a/web/blog/2022-11-30-optimistic-update-feature-announcement.md b/web/blog/2022-11-30-optimistic-update-feature-announcement.md index 181453c2c9..44095a3c06 100644 --- a/web/blog/2022-11-30-optimistic-update-feature-announcement.md +++ b/web/blog/2022-11-30-optimistic-update-feature-announcement.md @@ -157,7 +157,7 @@ function Task({ id, isDone, description }) { ) } ``` -Those are all the changes we need, the rest of the code (i.e., `main.wasp`, `queries.js` and `actions.js`) remains the same. We won't describe the API in detail, but if you're curious, everything is covered by [our official docs](/docs/language/features#the-useaction-hook). +Those are all the changes we need, the rest of the code (i.e., `main.wasp`, `queries.js` and `actions.js`) remains the same. We won't describe the API in detail, but if you're curious, everything is covered by [our official docs](/docs/data-model/operations/actions#the-useaction-hook-and-optimistic-updates). Finally, let's see how this version of the app looks in action: diff --git a/web/blog/2023-01-18-wasp-beta-update-dec.md b/web/blog/2023-01-18-wasp-beta-update-dec.md index f63f6f3a3b..c3aaf7e16d 100644 --- a/web/blog/2023-01-18-wasp-beta-update-dec.md +++ b/web/blog/2023-01-18-wasp-beta-update-dec.md @@ -49,7 +49,7 @@ To check out the winning projects and see where devs found Wasp most helpful, ta ## 🔑 New auth method - GitHub! 🐙 -Next to [username/password](/docs/language/features#username-and-password) and [Google](/docs/language/features#google), **Wasp now also supports [GitHub](/docs/language/features#github)** as an authentication method! +Next to [username/password](/docs/auth/username-and-pass) and [Google](/docs/auth/social-auth/google), **Wasp now also supports [GitHub](/docs/auth/social-auth/github)** as an authentication method! -Although for typical CRUD you don't have to define an API since Wasp offers a typesafe RPC layer via [operations](#), sometimes you need extra flexibility (e.g. for implementing webhooks). Now you can easily do it, in a typical boilerplate-free Wasp style! +Although for typical CRUD you don't have to define an API since Wasp offers a typesafe RPC layer via [operations](/docs/data-model/operations/overview), sometimes you need extra flexibility (e.g. for implementing webhooks). Now you can easily do it, in a typical boilerplate-free Wasp style. ### Email sending: Wasp + Sendgrid/Mailgun/... diff --git a/web/blog/2023-06-28-what-can-you-build-with-wasp.md b/web/blog/2023-06-28-what-can-you-build-with-wasp.md index 55a90e5bb3..1ef327a109 100644 --- a/web/blog/2023-06-28-what-can-you-build-with-wasp.md +++ b/web/blog/2023-06-28-what-can-you-build-with-wasp.md @@ -55,7 +55,7 @@ Try it out and have fun or use it as an inspiration for your next project! **Try it out**: [amicus.work](https://www.amicus.work/) -**Wasp features used**: [Authentication](https://wasp-lang.dev/docs/language/features#authentication--authorization), [email sending](/docs/advanced/email), [async/cron jobs](https://wasp-lang.dev/docs/language/features#jobs) +**Wasp features used**: [Authentication](/docs/auth/overview), [email sending](/docs/advanced/email), [async/cron jobs](/docs/advanced/jobs) **UI Framework**: [Material UI](https://mui.com/) @@ -89,7 +89,7 @@ What's special about Description Generator is that it was recently sold , making **Source code**: https://github.com/vincanger/banger-tweet-bot -**Wasp features used**:[Authentication](https://wasp-lang.dev/docs/language/features#authentication--authorization), [async/cron jobs](https://wasp-lang.dev/docs/language/features#jobs) +**Wasp features used**:[Authentication](/docs/auth/overview), [async/cron jobs](/docs/advanced/jobs) **UI Framework**: [Tailwind](https://tailwindcss.com/) diff --git a/web/blog/2023-08-09-build-real-time-voting-app-websockets-react-typescript.md b/web/blog/2023-08-09-build-real-time-voting-app-websockets-react-typescript.md index 96d770c67d..f7f23187a3 100644 --- a/web/blog/2023-08-09-build-real-time-voting-app-websockets-react-typescript.md +++ b/web/blog/2023-08-09-build-real-time-voting-app-websockets-react-typescript.md @@ -710,7 +710,7 @@ You should see a login screen this time. Go ahead and first register a user, the Once logged in, you’ll see the same hardcoded poll data as in the previous example, because, again, we haven’t set up the [Socket.IO](http://Socket.IO) client on the frontend. But this time it should be much easier. -Why? Well, besides less configuration, another nice benefit of working with [TypeScript with Wasp](https://wasp-lang.dev/docs/typescript#websocket-full-stack-type-support), is that you just have to define payload types with matching event names on the server, and those types will get exposed automatically on the client! +Why? Well, besides less configuration, another nice benefit of working with [TypeScript with Wasp](/docs/typescript#websocket-full-stack-type-support), is that you just have to define payload types with matching event names on the server, and those types will get exposed automatically on the client! Let’s take a look at how that works now. diff --git a/web/docs/_addExternalAuthEnvVarsReminder.md b/web/docs/_addExternalAuthEnvVarsReminder.md deleted file mode 100644 index a4ec07201b..0000000000 --- a/web/docs/_addExternalAuthEnvVarsReminder.md +++ /dev/null @@ -1,5 +0,0 @@ -:::tip Using an external auth method? - -if your app is using an external authentication method(s) supported by Wasp (such as [Google](/docs/language/features#google) or [GitHub](/docs/language/features#github)), make sure to set the necessary environment variables. - -::: diff --git a/web/docs/advanced/deployment/manually.md b/web/docs/advanced/deployment/manually.md index 1e2dad1afb..e2d53e0f67 100644 --- a/web/docs/advanced/deployment/manually.md +++ b/web/docs/advanced/deployment/manually.md @@ -34,7 +34,7 @@ wasp build :::caution PostgreSQL in production You won't be able to build the app if you are using SQLite as a database (which is the default database). -You'll have to [switch to PostgreSQL](#) before deploying to production. +You'll have to [switch to PostgreSQL](/docs/data-model/backends#migrating-from-sqlite-to-postgresql) before deploying to production. ::: ### 2. Deploying the API Server (backend) diff --git a/web/docs/advanced/jobs.md b/web/docs/advanced/jobs.md index cf253caff9..dc858a990e 100644 --- a/web/docs/advanced/jobs.md +++ b/web/docs/advanced/jobs.md @@ -43,7 +43,7 @@ job mySpecialJob { -Then, in your [Operations](/docs/language/features#queries-and-actions-aka-operations) or [setupFn](/docs/language/features#setupfn-serverimport-optional) (or any other NodeJS code), you can submit work to be done: +Then, in your [Operations](/docs/data-model/operations/overview) or [setupFn](/docs/project/server-config#setup-function) (or any other NodeJS code), you can submit work to be done: diff --git a/web/docs/data-model/crud.md b/web/docs/data-model/crud.md index b300541b38..41c0b61c19 100644 --- a/web/docs/data-model/crud.md +++ b/web/docs/data-model/crud.md @@ -13,7 +13,7 @@ Wasp makes handling these boring bits easy by offering a higher-level concept ca With a single declaration, you can tell Wasp to automatically generate server-side logic (i.e., Queries and Actions) for creating, reading, updating and deleting [Entities](/docs/data-model/entities). As you update definitions for your Entities, Wasp automatically regenerates the backend logic. :::caution Early preview -This feature is currently in early preview and we are actively working on it. Read more about [our plans](/docs/language/features#crud-operations-on-top-of-entities) for CRUD operations. +This feature is currently in early preview and we are actively working on it. Read more about [our plans](#future-of-crud-operations-in-wasp) for CRUD operations. ::: ## Overview @@ -62,7 +62,7 @@ Keep reading for an example of Automatic CRUD in action, or skip ahead for the [ ## Example: A Simple TODO App -Let's create a full-app example that uses automatic CRUD. We'll stick to using the `Task` entity from the previous example, but we'll add a `User` entity and enable [username and password](/docs/language/features#username-and-password) based auth. +Let's create a full-app example that uses automatic CRUD. We'll stick to using the `Task` entity from the previous example, but we'll add a `User` entity and enable [username and password](/docs/auth/username-and-pass) based auth. diff --git a/web/docs/project/testing.md b/web/docs/project/testing.md index d9911514d0..b64f2ed0bc 100644 --- a/web/docs/project/testing.md +++ b/web/docs/project/testing.md @@ -14,22 +14,22 @@ Wasp enables you to quickly and easily write both unit tests and React component Included Libraries
- [`vitest`](https://www.npmjs.com/package/vitest): Unit test framework with native Vite support. +[`vitest`](https://www.npmjs.com/package/vitest): Unit test framework with native Vite support. - [`@vitest/ui`](https://www.npmjs.com/package/@vitest/ui): A nice UI for seeing your test results. +[`@vitest/ui`](https://www.npmjs.com/package/@vitest/ui): A nice UI for seeing your test results. - [`jsdom`](https://www.npmjs.com/package/jsdom): A web browser test environment for Node.js. +[`jsdom`](https://www.npmjs.com/package/jsdom): A web browser test environment for Node.js. - [`@testing-library/react`](https://www.npmjs.com/package/@testing-library/react) / [`@testing-library/jest-dom`](https://www.npmjs.com/package/@testing-library/jest-dom): Testing helpers. +[`@testing-library/react`](https://www.npmjs.com/package/@testing-library/react) / [`@testing-library/jest-dom`](https://www.npmjs.com/package/@testing-library/jest-dom): Testing helpers. - [`msw`](https://www.npmjs.com/package/msw): A server mocking library. +[`msw`](https://www.npmjs.com/package/msw): A server mocking library.
### Writing Tests -In order for Wasp to pick up your tests, they should be placed within the `src/client` directory and use an extension that matches [these glob patterns](https://vitest.dev/config#include). Some of the file names that Wasp will pick up as tests: +For Wasp to pick up your tests, they should be placed within the `src/client` directory and use an extension that matches [these glob patterns](https://vitest.dev/config#include). Some of the file names that Wasp will pick up as tests: - `yourFile.test.ts` - `YourComponent.spec.jsx` @@ -54,39 +54,44 @@ You should not run `wasp test` while `wasp start` is running. Both will try to c Wasp provides several functions to help you write React tests: - `renderInContext`: Takes a React component, wraps it inside a `QueryClientProvider` and `Router`, and renders it. This is the function you should use to render components in your React component tests. + ```js - import { renderInContext } from '@wasp/test' + import { renderInContext } from "@wasp/test"; - renderInContext() + renderInContext(); ``` - `mockServer`: Sets up the mock server and returns an object containing the `mockQuery` and `mockApi` utilities. This should be called outside of any test case, in each file that wants to use those helpers. - ```js - import { mockServer } from '@wasp/test' - const { mockQuery, mockApi } = mockServer() - ``` + ```js + import { mockServer } from "@wasp/test"; + + const { mockQuery, mockApi } = mockServer(); + ``` - `mockQuery`: Takes a Wasp [query](/docs/data-model/operations/queries) to mock and the JSON data it should return. + ```js - import getTasks from '@wasp/queries/getTasks' - - mockQuery(getTasks, []) + import getTasks from "@wasp/queries/getTasks"; + + mockQuery(getTasks, []); ``` + - Helpful when your component uses `useQuery`. - Behind the scenes, Wasp uses [`msw`](https://npmjs.com/package/msw) to create a server request handle that responds with the specified data. - Mock are cleared between each test. - `mockApi`: Similar to `mockQuery`, but for [APIs](/docs/advanced/apis). Instead of a Wasp query, it takes a route containing an HTTP method and a path. + ```js - import { HttpMethod } from '@wasp/types' + import { HttpMethod } from "@wasp/types"; - mockApi({ method: HttpMethod.Get, path: '/foor/bar' }, { res: 'hello' }) + mockApi({ method: HttpMethod.Get, path: "/foor/bar" }, { res: "hello" }); ``` ## Testing Your Server-Side Code -Wasp currently does not provide a way to test your server-side code, but we will be adding support soon. You can track the progress at [this GitHub issue](https://github.com/waps-lang/wasp/issues/110) and express your interest by commenting. +Wasp currently does not provide a way to test your server-side code, but we will be adding support soon. You can track the progress at [this GitHub issue](https://github.com/wasp-lang/wasp/issues/110) and express your interest by commenting. ## Examples @@ -99,39 +104,39 @@ You can see some tests in a Wasp project [here](https://github.com/wasp-lang/was ```js title="src/client/helpers.js" export function areThereAnyTasks(tasks) { - return tasks.length === 0 + return tasks.length === 0; } ``` ```js title="src/client/helpers.test.js" -import { test, expect } from 'vitest' +import { test, expect } from "vitest"; -import { areThereAnyTasks } from './helpers' +import { areThereAnyTasks } from "./helpers"; -test('areThereAnyTasks', () => { - expect(areThereAnyTasks([])).toBe(false) -}) +test("areThereAnyTasks", () => { + expect(areThereAnyTasks([])).toBe(false); +}); ``` ```ts title="src/client/helpers.ts" -import { Task } from '@wasp/entities' +import { Task } from "@wasp/entities"; export function areThereAnyTasks(tasks: Task[]): boolean { - return tasks.length === 0 + return tasks.length === 0; } ``` ```ts title="src/client/helpers.test.ts" -import { test, expect } from 'vitest' +import { test, expect } from "vitest"; -import { areThereAnyTasks } from './helpers' +import { areThereAnyTasks } from "./helpers"; -test('areThereAnyTasks', () => { - expect(areThereAnyTasks([])).toBe(false) -}) +test("areThereAnyTasks", () => { + expect(areThereAnyTasks([])).toBe(false); +}); ``` @@ -143,105 +148,111 @@ test('areThereAnyTasks', () => { ```jsx title="src/client/Todo.jsx" -import { useQuery } from '@wasp/queries' -import getTasks from '@wasp/queries/getTasks' +import { useQuery } from "@wasp/queries"; +import getTasks from "@wasp/queries/getTasks"; const Todo = (_props) => { - const { data: tasks } = useQuery(getTasks) + const { data: tasks } = useQuery(getTasks); return (
    - {tasks && tasks.map(task => ( -
  • - - {task.description} -
    • - ))} + {tasks && + tasks.map((task) => ( +
  • + + {task.description} +
    • + ))}
- ) -} + ); +}; ``` ```js title=src/client/Todo.test.jsx -import { test, expect } from 'vitest' -import { screen } from '@testing-library/react' +import { test, expect } from "vitest"; +import { screen } from "@testing-library/react"; -import { mockServer, renderInContext } from '@wasp/test' -import getTasks from '@wasp/queries/getTasks' -import Todo from './Todo' +import { mockServer, renderInContext } from "@wasp/test"; +import getTasks from "@wasp/queries/getTasks"; +import Todo from "./Todo"; -const { mockQuery } = mockServer() +const { mockQuery } = mockServer(); -const mockTasks = [{ - id: 1, - description: 'test todo 1', - isDone: true, - userId: 1 -}] +const mockTasks = [ + { + id: 1, + description: "test todo 1", + isDone: true, + userId: 1, + }, +]; -test('handles mock data', async () => { - mockQuery(getTasks, mockTasks) +test("handles mock data", async () => { + mockQuery(getTasks, mockTasks); - renderInContext() + renderInContext(); - await screen.findByText('test todo 1') + await screen.findByText("test todo 1"); - expect(screen.getByRole('checkbox')).toBeChecked() + expect(screen.getByRole("checkbox")).toBeChecked(); - screen.debug() -}) + screen.debug(); +}); ``` ```tsx title="src/client/Todo.tsx" -import { useQuery } from '@wasp/queries' -import getTasks from '@wasp/queries/getTasks' +import { useQuery } from "@wasp/queries"; +import getTasks from "@wasp/queries/getTasks"; const Todo = (_props: {}) => { - const { data: tasks } = useQuery(getTasks) + const { data: tasks } = useQuery(getTasks); return (
    - {tasks && tasks.map(task => ( -
  • - - {task.description} -
    • - ))} + {tasks && + tasks.map((task) => ( +
  • + + {task.description} +
    • + ))}
- ) -} + ); +}; ``` ```tsx title=src/client/Todo.test.tsx -import { test, expect } from 'vitest' -import { screen } from '@testing-library/react' +import { test, expect } from "vitest"; +import { screen } from "@testing-library/react"; -import { mockServer, renderInContext } from '@wasp/test' -import getTasks from '@wasp/queries/getTasks' -import Todo from './Todo' +import { mockServer, renderInContext } from "@wasp/test"; +import getTasks from "@wasp/queries/getTasks"; +import Todo from "./Todo"; -const { mockQuery } = mockServer() +const { mockQuery } = mockServer(); -const mockTasks = [{ - id: 1, - description: 'test todo 1', - isDone: true, - userId: 1 -}] +const mockTasks = [ + { + id: 1, + description: "test todo 1", + isDone: true, + userId: 1, + }, +]; -test('handles mock data', async () => { - mockQuery(getTasks, mockTasks) +test("handles mock data", async () => { + mockQuery(getTasks, mockTasks); - renderInContext() + renderInContext(); - await screen.findByText('test todo 1') + await screen.findByText("test todo 1"); - expect(screen.getByRole('checkbox')).toBeChecked() + expect(screen.getByRole("checkbox")).toBeChecked(); - screen.debug() -}) + screen.debug(); +}); ``` @@ -253,115 +264,123 @@ test('handles mock data', async () => { ```jsx title="src/client/Todo.jsx" -import api from '@wasp/api' +import api from "@wasp/api"; const Todo = (_props) => { - const [tasks, setTasks] = useState([]) + const [tasks, setTasks] = useState([]); useEffect(() => { - api.get('/tasks') - .then(res => res.json()) - .then(tasks => setTasks(tasks)) - .catch(err => window.alert(err)) - }) + api + .get("/tasks") + .then((res) => res.json()) + .then((tasks) => setTasks(tasks)) + .catch((err) => window.alert(err)); + }); return (
    - {tasks && tasks.map(task => ( -
  • - - {task.description} -
    • - ))} + {tasks && + tasks.map((task) => ( +
  • + + {task.description} +
    • + ))}
- ) -} + ); +}; ``` ```jsx title=src/client/Todo.test.jsx -import { test, expect } from 'vitest' -import { screen } from '@testing-library/react' +import { test, expect } from "vitest"; +import { screen } from "@testing-library/react"; -import { mockServer, renderInContext } from '@wasp/test' -import Todo from './Todo' +import { mockServer, renderInContext } from "@wasp/test"; +import Todo from "./Todo"; -const { mockApi } = mockServer() +const { mockApi } = mockServer(); -const mockTasks = [{ - id: 1, - description: 'test todo 1', - isDone: true, - userId: 1 -}] +const mockTasks = [ + { + id: 1, + description: "test todo 1", + isDone: true, + userId: 1, + }, +]; -test('handles mock data', async () => { - mockApi('/tasks', { res: mockTasks }) +test("handles mock data", async () => { + mockApi("/tasks", { res: mockTasks }); - renderInContext() + renderInContext(); - await screen.findByText('test todo 1') + await screen.findByText("test todo 1"); - expect(screen.getByRole('checkbox')).toBeChecked() + expect(screen.getByRole("checkbox")).toBeChecked(); - screen.debug() -}) + screen.debug(); +}); ``` ```tsx title="src/client/Todo.tsx" -import { Task } from '@wasp/entities' -import api from '@wasp/api' +import { Task } from "@wasp/entities"; +import api from "@wasp/api"; const Todo = (_props: {}) => { - const [tasks, setTasks] = useState([]) + const [tasks, setTasks] = useState([]); useEffect(() => { - api.get('/tasks') - .then(res => res.json() as Task[]) - .then(tasks => setTasks(tasks)) - .catch(err => window.alert(err)) - }) + api + .get("/tasks") + .then((res) => res.json() as Task[]) + .then((tasks) => setTasks(tasks)) + .catch((err) => window.alert(err)); + }); return (
    - {tasks && tasks.map(task => ( -
  • - - {task.description} -
    • - ))} + {tasks && + tasks.map((task) => ( +
  • + + {task.description} +
    • + ))}
- ) -} + ); +}; ``` ```tsx title=src/client/Todo.test.tsx -import { test, expect } from 'vitest' -import { screen } from '@testing-library/react' +import { test, expect } from "vitest"; +import { screen } from "@testing-library/react"; -import { mockServer, renderInContext } from '@wasp/test' -import Todo from './Todo' +import { mockServer, renderInContext } from "@wasp/test"; +import Todo from "./Todo"; -const { mockApi } = mockServer() +const { mockApi } = mockServer(); -const mockTasks = [{ - id: 1, - description: 'test todo 1', - isDone: true, - userId: 1 -}] +const mockTasks = [ + { + id: 1, + description: "test todo 1", + isDone: true, + userId: 1, + }, +]; -test('handles mock data', async () => { - mockApi('/tasks', mockTasks) +test("handles mock data", async () => { + mockApi("/tasks", mockTasks); - renderInContext() + renderInContext(); - await screen.findByText('test todo 1') + await screen.findByText("test todo 1"); - expect(screen.getByRole('checkbox')).toBeChecked() + expect(screen.getByRole("checkbox")).toBeChecked(); - screen.debug() -}) + screen.debug(); +}); ``` diff --git a/web/docs/tutorial/07-auth.md b/web/docs/tutorial/07-auth.md index bd0b833d8f..e5a570bcfe 100644 --- a/web/docs/tutorial/07-auth.md +++ b/web/docs/tutorial/07-auth.md @@ -70,7 +70,7 @@ By doing this, Wasp will create: - `context.user` for use in Queries and Actions. :::info -Wasp also supports authentication using Google, GitHub, and email, with more on the way! +Wasp also supports authentication using [Google](/docs/auth/social-auth/google), [GitHub](/docs/auth/social-auth/github), and [email](/docs/auth/email), with more on the way! ::: ## Adding Login and Signup Pages diff --git a/web/docs/typescript.md b/web/docs/typescript.md index 1a2c29919e..6f04d7277b 100644 --- a/web/docs/typescript.md +++ b/web/docs/typescript.md @@ -12,7 +12,7 @@ TypeScript is a programming language that brings static type analysis to JavaScr This document assumes you are familiar with TypeScript and primarily focuses on how to use it with Wasp. To learn more about TypeScript itself, we recommend reading [the official docs](https://www.typescriptlang.org/docs/). -The document also assumes a basic understanding of core Wasp features (e.g., Queries, Actions, Entities). You can read more about these features in [our feature docs](https://wasp-lang.dev/docs/language/features). +The document also assumes a basic understanding of core Wasp features (e.g., Queries, Actions, Entities). You can read more about these features in [our feature docs](/docs/language/features). Besides allowing you to write your code in TypeScript, Wasp also supports: diff --git a/web/src/components/Features.js b/web/src/components/Features.js index 1ba8dbf989..2b64b1a9a8 100644 --- a/web/src/components/Features.js +++ b/web/src/components/Features.js @@ -86,7 +86,7 @@ const Features = () => { { { { {