https://github.com/frlow/estridi-docs
https://github.com/frlow/estridi-docs
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/frlow/estridi-docs
- Owner: frlow
- Created: 2024-06-13T07:15:13.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-18T21:25:55.000Z (almost 2 years ago)
- Last Synced: 2025-11-17T07:09:37.101Z (7 months ago)
- Language: HTML
- Size: 103 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Estridi tutorial
## Jam file
## Config file
create config file
```json5
// estridi.json
{
"token": "your_access_token_here",
"fileId": "figjam_board_file_id",
"mode": "playwright"
}
```
## Create root node
In figma add root:tutorial to out arrow on start node
## Run estridi binary
```bash
npx estridi
```
After you have run the command successfully you should notice 3 new files
- **someName.spec.ts**
- This is where you run and debug your tests from. This file will update everytime you run the estridi command
- **someName.handles.ts**
- This file contains 5 methods:
- handleSetup: method for setting up for example environment
- handleStart: method for starting up test
- handleServiceCall: method for implementing service calls
- handleAction: method for implementing actions
- handleTestNode: method for implementing tests
- **scraped.json**
## Install playwright
```bash
npx playwright install
```
## Your first test
now it is time to implement your first test. So in
- handleSetup, no need to implement anything here just add, `return {}`
- handleStart, implement `await args.page.goto("/")`
- handleTestNode, implement your first test, make a new `case '':` and hopefully you'll get correct key as a suggestion, then inside implement the test
```
await expect(args.page.locator('h1:has-text("Hello World!")')).toBeVisible()
```
## Change requirement
- Change the title requirement in FigJam from "Hello World!" => "Estridi tutorial"
- Rerun estridi binary
- Rerun your tests and hopefully they will not pass
- Now you'll se that because the requirement has changed, you also need to change the implementation of your test
- Change implementation
## Link first sub-flow
- To link you subflows, in figma add the "Name of subflow" to out arrow on sub flow start node. Like you did for the root node
- Rerun estridi binary
## Link table
- When linking tables we often have a subflow that has a name like this: Display fields: Some Fields or Validate fields: Some Fields
- Then to link you table to the subflow in figma, add ".Name" to top left corner of the table. In this case you would add .Some Fields
- Rerun estridi binary
## Test Table rows
Implement test that checks for input fields with labels attached to them
```javascript
switch(args.key){
// ...
case "1:205: Display fields Some Fields": {
const table = args.getTable("1:663: Some Fields")
for (const row of table.values) {
const label = row.Id
const inputType = row["Input Type"]
await expect(
args.page.getByLabel(label).and(
args.page.locator(`input[type="${inputType}"]`)
)).toBeVisible()
}
break
}
}
```
## Protect table from requirement changes
```javascript
expect(table.signature).toEqual(`
8877|9739
2420|3556
1134|3076
`)
```
## Actions
- Link actions subflow
- Rerun estridi
- Implement action
```javascript
switch(args.key){
// ...
case "12:809: Clear clicked":
break
}
```
Implement corresponding input fields in the html
## Gateways
- Link gateways subflow
- Rerun estridi
- Validate subflow doesn't do anything an can be skipped.
The handleAction function has access to the gateways object
that has the gateway options for the current path.
This can be used to determine the behavior of the action.
```javascript
switch (args.key) {
// ...
case "12:810: Submit clicked":
if(args.gateways["24:1050: Any validation errors"]==="no"){
await args.page.getByLabel("Name").fill("Namn Namnsson")
await args.page.getByLabel("Birthday").fill('2024-06-13')
await args.page.locator("#submit").click()
}
else{
await args.page.locator("#submit").click()
}
break
}
```
## Mock serviceCall
- Link serviceCalls subflow
- Rerun estridi
- Mock the service call
```javascript
switch (args.key) {
// ...
case "25:1172: submit": {
const gwValue = args.gateways['3895:5989: Error from validate service']
if (gwValue === 'yes')
await args.context.route(
"/submit",
async (route: Route) => {
await route.fulfill({
status: 400,
})
}
)
else {
await args.context.route(
"/submit",
async (route: Route) => {
await route.fulfill({
contentType: 'application/json',
json: {message: "Well done!"},
})
}
)
}
break
}
}
```
# Advanced features
## Filter paths
```typescript
filterPaths: ({allPaths, getGateways}) =>
allPaths.filter(path => {
const gateways = getGateways(path)
if (gateways
.filter(g => g.text === "A selected")
.some((g, _, arr) => g.value !== arr[0].value))
return false
// Maybe more filters??
return true
})
```
## Variants
```typescript
switch(args) {
case "112:621: Show dropdown Values": {
const table = args.getTable("112:620: Dropdown")
for (const row of table.values) {
await expect(args.page.locator("#numbers")
.locator(`option:has-text('${row.Id}')`)).toBeAttached()
}
break
}
}
```
## Breaking out separate files
You can define a function with types based on Handles
```typescript
const actionHandles: DemoHandles["handleAction"] = async args => {}
```
## Concepts demoed
- [x] Estridi config file
- [x] Connecting root nodes
- [x] Running estridi binary
- [x] Setup
- [x] Start
- [x] Test
- [x] Changing requirements
- [x] Linking sub-flows
- [x] Including tables
- [x] Table requirements changing
- [x] Testing non-linked sub-flows
- [x] Skipping tests
- [x] Reading tables
- [x] Action
- [x] Gateways
- [x] ServiceCall
## Advanced
- [x] Variants
- [x] Filter paths
- [x] Breaking out separate files
- [ ] Setup-state