Skip to content

Commit

Permalink
feat(testing): add support for hint, pagination, slider and snackbar
Browse files Browse the repository at this point in the history
  • Loading branch information
hirsch committed Sep 7, 2021
1 parent afc641c commit 13f882c
Show file tree
Hide file tree
Showing 39 changed files with 628 additions and 143 deletions.
58 changes: 44 additions & 14 deletions docs/src/components/components/bal-hint.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ sidebarDepth: 0

# Hint


<!-- START: human documentation top -->

A hint hides content with some additional description and shows it by clicking the icon.
Expand All @@ -14,35 +13,27 @@ It can easily combined with the `bal-data` or `bal-field` component.

<ClientOnly><docs-component-tabs></docs-component-tabs></ClientOnly>


## Examples

### Basic

<ClientOnly><docs-demo-bal-hint-54></docs-demo-bal-hint-54></ClientOnly>


### Field

<ClientOnly><docs-demo-bal-hint-55></docs-demo-bal-hint-55></ClientOnly>



## Code



### Properties


| Attribute | Description | Type | Default |
| :-------------- | :-------------------------------------------------- | :------------------- | :------------------- |
| **close-label** | Text for the close button. | <code>string</code> | <code>'Close'</code> |
| **disabled** | If `true`, the user cannot interact with the input. | <code>boolean</code> | <code>false</code> |

### Methods


| Method | Description | Signature |
| :--------- | :-------------------- | :------------------------------------------------- |
| **close** | Closes the hint box. | <code>close() =&#62; Promise&#60;void&#62;</code> |
Expand All @@ -55,20 +46,59 @@ The Baloise Design System provides a collection of custom cypress commands for o

- [More information about the installation and usage](/components/tooling/testing.html)

<!-- START: human documentation testing -->

```typescript
import { dataTestSelector } from '@baloise/design-system-testing'

describe('Hint', () => {
const hint = dataTestSelector('my-hint') // [data-test-id="my-hint"]
it('should ...', () => {
cy.get(hint)
.click()
.balHintFindOverlay()
.should('be.visible')

cy.get(hint)
.click()
.balHintFindOverlay()
.contains('Spider-Man')

cy.get(hint)
.balHintFindCloseButton()
.contains('Close')
.click()

cy.get(hint)
.balHintFindOverlay()
.should('not.be.visible')
})
})
```

<!-- END: human documentation testing -->

### Custom Commands

A list of the custom commands for this specific component.

| Command | Description | Signature |
| :------------------------- | :----------------------------------------------------------------------------- | :----------------------------------------- |
| **balHintFindOverlay** | Returns the hint content overlay with the title, content and the close button. | <code>(): Chainable&#60;JQuery&#62;</code> |
| **balHintFindCloseButton** | Returns the close button of the overlay content. | <code>(): Chainable&#60;JQuery&#62;</code> |

## Usage

<!-- START: human documentation usage -->

<!-- END: human documentation usage -->



## Edit this page on Github

* [Documentation on Github](https://github.com/baloise/design-system/blob/master/docs/src/components/components/bal-hint.md)
* [Implementation on Github](https://github.com/baloise/design-system/blob/master/packages/components/src/components/bal-hint)
- [Documentation on Github](https://github.com/baloise/design-system/blob/master/docs/src/components/components/bal-hint.md)
- [Implementation on Github](https://github.com/baloise/design-system/blob/master/packages/components/src/components/bal-hint)
- [Cypress commands on Github](https://github.com/baloise/design-system/blob/master/packages/testing/src/commands)

## Feedback

Help us improve this component by providing feedback, asking questions, and leaving any other comments on [GitHub](https://github.com/baloise/design-system/issues/new).

48 changes: 33 additions & 15 deletions docs/src/components/components/bal-input.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ sidebarDepth: 0

# Input <Badge text="Two-way binding"/>


<!-- START: human documentation top -->

The input component is a wrapper to the HTML input element with custom styling and additional functionality. It accepts most of the same properties as the HTML input, but works great on desktop devices and integrates with the keyboard on mobile devices.
Expand All @@ -14,16 +15,19 @@ It is meant for text type inputs only, such as "text", "password", "email", "num

<ClientOnly><docs-component-tabs></docs-component-tabs></ClientOnly>


## Examples

### Basic

<ClientOnly><docs-demo-bal-input-60></docs-demo-bal-input-60></ClientOnly>


### Inverted

<ClientOnly><docs-demo-bal-input-61></docs-demo-bal-input-61></ClientOnly>


### Number Input

With number-input property your can only enter valid numbers, if you start with dot (.) zero will be automatically added in front of it.
Expand All @@ -32,18 +36,25 @@ With decimal property you can set how many decimal places you want and number wi

<ClientOnly><docs-demo-bal-input-62></docs-demo-bal-input-62></ClientOnly>


### Suffix

<ClientOnly><docs-demo-bal-input-63></docs-demo-bal-input-63></ClientOnly>


### HTML input

<ClientOnly><docs-demo-bal-input-64></docs-demo-bal-input-64></ClientOnly>



## Code



### Properties


| Attribute | Description | Type | Default |
| :----------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------ |
| **accept** | If the value of the type attribute is `"file"`, then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers. | <code>string , undefined</code> | |
Expand Down Expand Up @@ -77,22 +88,24 @@ With decimal property you can set how many decimal places you want and number wi

### Events

| Event | Description | Type |
| :-------------- | :---------------------------------------- | :-------------------------------------------- |
| **balBlur** | Emitted when a keyboard input occurred. | <code>FocusEvent</code> |
| **balChange** | Emitted when the input value has changed. | <code>null &#124; number &#124; string</code> |
| **balClick** | Emitted when the input has clicked. | <code>MouseEvent</code> |
| **balFocus** | Emitted when the input has focus. | <code>FocusEvent</code> |
| **balInput** | Emitted when a keyboard input occurred. | <code>null &#124; number &#124; string</code> |
| **balKeyPress** | Emitted when a keyboard key has pressed. | <code>KeyboardEvent</code> |

| Event | Description | Type |
| :-------------- | :---------------------------------------- | :------------------------------------------------ |
| **balBlur** | Emitted when a keyboard input occurred. | <code>FocusEvent</code> |
| **balChange** | Emitted when the input value has changed. | <code>null &#124; number &#124; string</code> |
| **balClick** | Emitted when the input has clicked. | <code>MouseEvent</code> |
| **balFocus** | Emitted when the input has focus. | <code>FocusEvent</code> |
| **balInput** | Emitted when a keyboard input occurred. | <code>null &#124; number &#124; string</code> |
| **balKeyPress** | Emitted when a keyboard key has pressed. | <code>KeyboardEvent</code> |

### Methods

| Method | Description | Signature |
| :------------------ | :------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |
| **getInputElement** | Returns the native `<input>` element used under the hood. | <code>getInputElement() =&#62; Promise&#60;HTMLInputElement&#62;</code> |
| **setFocus** | Sets focus on the native `input` in `bal-input`. Use this method instead of the global |
| `input.focus()`. | <code>setFocus() =&#62; Promise&#60;void&#62;</code> |

| Method | Description | Signature |
| :------------------ | :------------------------------------------------------------------------------------------------------ | :---------------------------------------------------------------------- |
| **getInputElement** | Returns the native `<input>` element used under the hood. | <code>getInputElement() =&#62; Promise&#60;HTMLInputElement&#62;</code> |
| **setFocus** | Sets focus on the native `input` in `bal-input`. Use this method instead of the global
`input.focus()`. | <code>setFocus() =&#62; Promise&#60;void&#62;</code> |

## Testing

Expand Down Expand Up @@ -122,21 +135,26 @@ describe('Input', () => {

<!-- END: human documentation testing -->



## Usage

<!-- START: human documentation usage -->

<!-- END: human documentation usage -->



## Edit this page on Github

- [Documentation on Github](https://github.com/baloise/design-system/blob/master/docs/src/components/components/bal-input.md)
- [Implementation on Github](https://github.com/baloise/design-system/blob/master/packages/components/src/components/bal-input)
* [Documentation on Github](https://github.com/baloise/design-system/blob/master/docs/src/components/components/bal-input.md)
* [Implementation on Github](https://github.com/baloise/design-system/blob/master/packages/components/src/components/bal-input)

## Feedback

Help us improve this component by providing feedback, asking questions, and leaving any other comments on [GitHub](https://github.com/baloise/design-system/issues/new).


<ClientOnly>
<docs-component-script tag="balInput"></docs-component-script>
</ClientOnly>
17 changes: 14 additions & 3 deletions docs/src/components/components/bal-modal.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ sidebarDepth: 0

# Modal


<!-- START: human documentation top -->

A Modal is a dialog that appears on top of the app's body, and must be dismissed by
Expand All @@ -13,20 +14,25 @@ the app before interaction can resume.

<ClientOnly><docs-component-tabs></docs-component-tabs></ClientOnly>


## Examples

### Basic

<ClientOnly><docs-demo-bal-modal-70></docs-demo-bal-modal-70></ClientOnly>


### Customize width

<ClientOnly><docs-demo-bal-modal-71></docs-demo-bal-modal-71></ClientOnly>


### Modal card style

<ClientOnly><docs-demo-bal-modal-72></docs-demo-bal-modal-72></ClientOnly>



## Code

<!-- START: human documentation code -->
Expand Down Expand Up @@ -134,13 +140,15 @@ export default defineComponent({

### Properties


| Attribute | Description | Type | Default |
| :------------- | :---------------------------------------------------------------------------------------------- | :------------------- | :----------------- |
| **card** | Marks this modal as card-style modal, i.e. having visual lines separating head, body, and foot. | <code>boolean</code> | <code>false</code> |
| **no-overlay** | If `true` the modal does not run with a background overlay. | <code>boolean</code> | <code>false</code> |

### Methods


| Method | Description | Signature |
| :-------- | :---------------- | :------------------------------------------------ |
| **close** | Closes the modal. | <code>close() =&#62; Promise&#60;void&#62;</code> |
Expand Down Expand Up @@ -191,16 +199,19 @@ A list of the custom commands for this specific component.

<!-- END: human documentation usage -->



## Edit this page on Github

- [Documentation on Github](https://github.com/baloise/design-system/blob/master/docs/src/components/components/bal-modal.md)
- [Implementation on Github](https://github.com/baloise/design-system/blob/master/packages/components/src/components/bal-modal)
- [Cypress commands on Github](https://github.com/baloise/design-system/blob/master/packages/testing/src/commands)
* [Documentation on Github](https://github.com/baloise/design-system/blob/master/docs/src/components/components/bal-modal.md)
* [Implementation on Github](https://github.com/baloise/design-system/blob/master/packages/components/src/components/bal-modal)
* [Cypress commands on Github](https://github.com/baloise/design-system/blob/master/packages/testing/src/commands)

## Feedback

Help us improve this component by providing feedback, asking questions, and leaving any other comments on [GitHub](https://github.com/baloise/design-system/issues/new).


<ClientOnly>
<docs-component-script tag="balModal"></docs-component-script>
</ClientOnly>
Loading

0 comments on commit 13f882c

Please sign in to comment.