Commit Graph

4 Commits

Author SHA1 Message Date
Pawan Kumar
2e2f4419bd
chore: add tests for app theming (#34839)
/ok-to-test tags="@tag.Anvil"

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Introduced theme setting and snapshot verification for various widgets
in different modes (Canvas, Preview, Deploy).
- Added a new CSS rule to enhance the styling of input elements based on
specific conditions.

- **Refactor**
- Renamed existing snapshot verification methods to more descriptive
names across multiple widget snapshot files.
- Added methods to handle theme settings and detailed snapshot matching.

- **Tests**
- Enhanced testing functionality for widgets with updated methods for
snapshot verification across different themes.

These updates ensure more detailed and theme-specific snapshot testing
for various widget states, improving test coverage and accuracy, as well
as enhancing the layout consistency of input elements.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/10046186626>
> Commit: a6232ae795f77bd46bff4c854f46c5671a518ff6
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10046186626&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Anvil`
> Spec:
> <hr>Mon, 22 Jul 2024 18:43:52 UTC
<!-- end of auto-generated comment: Cypress test results  -->

---------

Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local>
Co-authored-by: Valera Melnikov <valera@appsmith.com>
2024-07-22 22:08:48 +03:00
vadim
01d5275170
fix: WDS TextArea inner spacing (#34901)
## Description

Fixes #34584
| Before | After |
|--------|--------|
|
![before](https://github.com/user-attachments/assets/b0d58e3b-006e-49cc-af7f-5c600326caed)
|
![after](https://github.com/user-attachments/assets/935590ea-2a3b-4912-a28c-16b47ba9d83c)
|

We had [a CSS
rule](f6d62e5cdc/app/client/packages/design-system/widgets/src/styles/src/text-input.module.css (L27-L30))
that was imitating CapSize behavior.

It worked okay with regular input but had no effect on TextArea. Fixing
it to work for TextArea did not seem possible no matter what CSS rules
or additional markup I threw at it:
<details><summary>Dev tools screenshots</summary>
<p>
<table>
<tr>
<td>
<img width="1252" alt="Screenshot 2024-07-12 at 10 32 30"
src="https://github.com/user-attachments/assets/c529f8b9-b129-4358-88e1-cee59a0797a6">
</td>
<td>
<img width="1270" alt="Screenshot 2024-07-12 at 10 32 40"
src="https://github.com/user-attachments/assets/52cc122e-cc0b-4e18-84d5-006b5ed56ef1">
</td>
</tr>
</table>
</p>
</details>

Changing the inner spacing and removing that rule achieves the desired
results: elements are neatly aligned with similar/equal paddings. See
the example with additional elements alongside TextInput and TextArea
that verifies that vertical alignment is consistent:

![after-extras](https://github.com/user-attachments/assets/8fa7e867-22a8-4790-a0fc-daf76ccd5dbc)

## Automation

/ok-to-test tags="@tag.Anvil"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/9906310028>
> Commit: 0c83d24dd5247ac962f2b73baefb734471e1c3b0
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9906310028&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Anvil`
> Spec:
> <hr>Fri, 12 Jul 2024 10:43:05 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [X] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **Style**
- Updated vertical padding for text input fields to improve spacing and
visual clarity.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-07-22 11:15:17 +03:00
Valera Melnikov
08c3ea9b94
chore: cypress snapshot types (#34722)
## Description
1. Add scripts for local e2e testing in the docker container. 
2. Add types for cypress-image-snapshot

In this PR, I also added the following PRS as they affect screenshot
tests as well. I did this to speed up the process and unblock the team.

#34528
#34546
#34676
#34729
#34638
#34639
#34511

To run E2E tests locally in docker, you need to do the following:
1. Run FE locally and prepare the tests for local launch. See the
instructions
[here](https://github.com/appsmithorg/appsmith/blob/release/contributions/ClientSetup.md).
2. Run `yarn cypress:snapshot:docker:build` — this will create a docker
container with the necessary environment.
3. Run `yarn cypress:snapshot:docker
"./cypress/e2e/Regression/ClientSide/Anvil/Widgets/*_spec.ts"
updateSnapshots=false`. Here we can use the path to a specific file, or
set `updateSnapshots=true` flag to update the screenshots.

## Automation

/ok-to-test tags="@tag.Anvil"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/9844579277>
> Commit: 75f26599b149f831051fbd631aaa059084b226dd
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9844579277&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Anvil`
> Spec:
> <hr>Mon, 08 Jul 2024 18:37:36 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Added support for image snapshot testing with the
`@types/cypress-image-snapshot` dependency.

- **Refactor**
- Updated test specifications by removing unnecessary
`triggerInputInvalidState()` calls.
- Reorganized and improved efficiency of image snapshot methods for
various devices.

- **Chores**
- Updated `Dockerfile` to configure the Cypress environment with
specific versions for dependencies.
  - Changed import paths in `e2e.js` for better module resolution. 

- **Style**
  - Fixed a comment typo in Cypress plugin configuration.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local>
Co-authored-by: unknown <vadim@appsmith.com>
2024-07-09 12:06:59 +03:00
Pawan Kumar
963ae31b11
chore: add snapshots for input type widgets (#34436)
/ok-to-test tags="@tag.Anvil"

<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/9678081244>
> Commit: d73f2d7f37c9d62ba1ca622b78d9a0ce4d0e3db8
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9678081244&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Anvil`

<!-- end of auto-generated comment: Cypress test results  -->




<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Introduced comprehensive test cases for Currency Input, Phone Input,
and General Input Widgets in the Anvil editor covering Canvas, Preview,
and Deploy modes.
- Added complex layout structures for Currency and Phone Input Widgets
in the "MainContainer" canvas widget.

- **Enhancements**
- Implemented debouncing for validation status and error message
handling in the Currency Input Widget to improve timing accuracy.
- Added `defaultValue` property to Currency Input Widget configurations.
- Corrected typos and improved clarity in widget property names and
validation logic.

- **Bug Fixes**
  - Fixed validation status typo in Phone Input Widget.
  
- **Refactor**
- Reordered static property declarations in Input Widgets for better
code organization.
  - Modified method access controls in AnvilSnapshot for external usage.
  
- **Tests**
- Added snapshot testing for Currency, Phone, and General Input Widgets
within the Anvil editor.
  
- **Chores**
- Added a new method `Createpage(pageName: string)` to streamline page
creation in tests.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local>
2024-06-27 10:51:28 +05:30