Conversation
|
| @@ -0,0 +1,37 @@ | |||
| --- | |||
| name: FTextFieldPageObject:FLabel | |||
There was a problem hiding this comment.
name ska nog inte innehålla FTextFieldPageObject här
| layout: content-with-menu | ||
| --- | ||
|
|
||
| FTextFieldPageObject: FLabel property |
There was a problem hiding this comment.
Eftersom FLabelPageObject är sin egna grej ska vi nog försöka beskriva det som det.
| FTextFieldPageObject: FLabel property | |
| FTextFieldPageObject: FTextFieldPageObject() constructor |
| --- | ||
| name: FTextFieldPageObject:FLabel | ||
| title: FLabel | ||
| layout: content-with-menu |
There was a problem hiding this comment.
| layout: content-with-menu | |
| layout: article |
|
|
||
| FTextFieldPageObject: FLabel property | ||
|
|
||
| `FLabel` används för att visa etiketter för att filtera innehåll. |
There was a problem hiding this comment.
Texten ska kanske snarare beskriva att detta är pageobjektet som används för att testa mot FLabel, nu låter det som en förklaring av vad FLabel är.
| ## Syntax | ||
|
|
||
| ```ts | ||
| textfield.FLabel; |
There was a problem hiding this comment.
| textfield.FLabel; | |
| new FLabelPageObject(selector: string); |
| ```ts | ||
| const awesomeInput = new FTextFieldPageObject("[data-test=awesome-input]"); | ||
|
|
||
| awesomeInput.FLabel.el().should("contain.text", "My Awesome Input"); |
There was a problem hiding this comment.
Exemplet här är nog inte riktigt korrekt och vi bör nog gå direkt på FLabelPageObject istället för via FTextFieldPageObject även om den har en .label() metod som ger till tillgången till dess etikett. Det sista är något jag förväntar mig hitta under dokumentationen för FTextFieldPageObject inte FLabelPageObject.
| awesomeInput.FLabel.el().should("contain.text", "My Awesome Input"); | ||
| ``` | ||
|
|
||
| ## Examples |
|
|
||
| ## See also | ||
|
|
||
| - {@link inmatningsfalt} |
There was a problem hiding this comment.
Länka till FLabel istället?
There was a problem hiding this comment.
Här vore nice om vi kunde använda oss av snippets för att minimera hur mycket kod som läsaren behöver se, något likt:
import { FTextFieldPageObject } from "@fkui/vue/pageobject";
beforeEach(() => {
cy.visit("/components/label.html");
});
it("should have correct label", () => {
+ /* --- cut above --- */
const awesomeInput = new FTextFieldPageObject("[data-test=awesome-input]");
awesomeInput.label.el().should("contain.text", "My Awesome Input");
+ /* --- cut below --- */
});Resultatet är då att i dokumentationen så visas bara:
const awesomeInput = new FTextFieldPageObject("[data-test=awesome-input]");
awesomeInput.label.el().should("contain.text", "My Awesome Input");Och det är ju det som är det relevanta för läsaren, resten är nog ganska oviktigt.
There was a problem hiding this comment.
@NicklasWei Tror du vi kan få till det så detta är ett komponenttest istället? Vet inte exakt hur men jag tänker mig att:
- Vi skapar en
.vuefil som innehåller html/vue koden som dokumentationen visar, denna filen används både i md-filen och i komponenttestet. - Vi skapar en
.cy.tsfil som monterar upp vue-filen och med snippets likt ovan bara presenterar den relevanta delen ur testet men när an kör testet så körs såklart allt eftersom snippets bara är js kommentarer. - Katalog- och filstrukturen blir något likt:
docs/api/pageobjects/FLabel/FLabel.md
docs/api/pageobjects/FLabel/FLabel.vue
docs/api/pageobjects/FLabel/FLabel.cy.ts
docs/api/pageobjects/FLabel/FLabel-description.md
docs/api/pageobjects/FLabel/FLabel-description.vue
docs/api/pageobjects/FLabel/FLabel-description.cy.ts
Så 1:1 mappat där varje md-fil har exakt en svit med testfall (som antagligen bara innehåller exakt ett testfall).
There was a problem hiding this comment.
Det är en bra början för själva konstructorn till FLabel, utöver det så behöver vi också dokumentera dess egenskaper:
eldescriptiondiscreteDescriptionerrorMessageerrorIcon
Vi har också
trimmedText
Men tveksam till om vi ska dokumentera den, tycker den ska tas bort istället.
bd56ccb to
e1d3979
Compare
No description provided.