Skip to content

Commit

Permalink
Update ufo-architecture.md
Browse files Browse the repository at this point in the history
- If running the current .user-flowrc.json config it does not run and asks to set up the URL.

- user-flow directory was changed to user-flows as it may and probably will contain multiple. 

- Comment/Question.
There is a typescript error when passing the page to a Ufo, I have been passing the ctx but I won't work in a Ufo that uses another Ufo. 
The error in question is:
```ts
Argument of type '{ page: Page; }' is not assignable to parameter of type 'UserFlowContext'.
  Type '{ page: Page; }' is missing the following properties from type 'UserFlowContext': browser, flow, collectOptions
```
And the code in question is this:
```
export declare class Ufo {
    protected page: Page;
    constructor({ page }: UserFlowContext);
}
```
We can either grow the class to expose ctx `UserFlowContext` or reduce it by only passing the page. 
Or maybe there is a smarter way of doing this, some typescript magic.
  • Loading branch information
ChristopherPHolder authored Aug 30, 2022
1 parent 1f658bc commit 7c67315
Showing 1 changed file with 11 additions and 6 deletions.
17 changes: 11 additions & 6 deletions packages/cli/docs/ufo-architecture.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
## Write lighthouse user flows with UFO's 🛸

When writing tests for multiple interactions or pages, or even for different platforms you are forced to organize your code propperly.
Otherwise, the amount of low-level code get's a night mare to maintain...
Otherwise, the amount of low-level code becomes a night mare to maintain...


**This is the reason we introduced UFO's!**
Expand Down Expand Up @@ -38,7 +38,7 @@ Let's first think about the folder structure and how we organize the different p
┣ ┣ 📜sidebar.ufo.ts
┣ ┣ 📜list.ufo.ts
┣ ┗ 📜list-page.ufo.ts
┗ 📂user-flow
┗ 📂user-flows
┗ 📜my-user-flow.uf.ts
```

Expand All @@ -48,9 +48,14 @@ Move `.user-flowrc.json` into `my-app-user-flows` and change the configuration t
**./my-app-user-flows/.user-flowrc.json**
```json
{
"ufPath": "./my-app-user-flows/user-flow",
"outPath": "./dist/my-app-user-flows",
"targetUrl": "https://localhost"
"collect": {
"url": "http:localhost:4200/",
"ufPath": "./my-app-user-flows/user-flows"
},
"persist": {
"outPath": "./dist/my-app-user-flows",
"format": ["html"]
}
}
```

Expand Down Expand Up @@ -129,7 +134,7 @@ export class ListPage extends Ufo {

### User Flows

**./user-flow/my-user-flow.uf.ts**
**./user-flows/my-user-flow.uf.ts**
```typescript
import {
UserFlowOptions,
Expand Down

0 comments on commit 7c67315

Please sign in to comment.