{"id":21759517,"url":"https://github.com/galenframework/galen-extras","last_synced_at":"2025-04-13T12:30:43.469Z","repository":{"id":78350451,"uuid":"46630012","full_name":"galenframework/galen-extras","owner":"galenframework","description":null,"archived":false,"fork":false,"pushed_at":"2016-03-09T20:59:07.000Z","size":1371,"stargazers_count":16,"open_issues_count":1,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-27T03:35:12.393Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/galenframework.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE-2.0.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-11-21T19:23:16.000Z","updated_at":"2021-07-16T06:51:11.000Z","dependencies_parsed_at":"2023-04-17T16:17:04.055Z","dependency_job_id":null,"html_url":"https://github.com/galenframework/galen-extras","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/galenframework%2Fgalen-extras","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/galenframework%2Fgalen-extras/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/galenframework%2Fgalen-extras/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/galenframework%2Fgalen-extras/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/galenframework","download_url":"https://codeload.github.com/galenframework/galen-extras/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248714259,"owners_count":21149855,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-26T11:33:18.225Z","updated_at":"2025-04-13T12:30:43.455Z","avatar_url":"https://github.com/galenframework.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Works only in galen version 2.2.0 or higher\n\nGalen Extras\n============\n\nGalen Extras is a library for extending the [Galen Specs Language](http://galenframework.com/docs/reference-galen-spec-language-guide/) with most common complex expressions, which allows you to have minimal code and maximum test coverage.\n\nHere is a small example which describes all layouts of menu items on responsive website:\n\n```\n@import galen-extras/galen-extras-rules.gspec\n\n@objects\n    menu                #menu  .middle-wrapper\n        item-*              ul li\n\n@groups\n    (menu_item, menu_items)     menu.item-*\n\n= Menu items should adapt layout  =\n    @on *\n        | amount of visible \u0026menu_items should be 4\n        | every \u0026menu_item has height ~ 64px\n        | first \u0026menu_item is inside menu 0px top left\n\n    @on desktop, tablet\n        | \u0026menu_items are aligned horizontally next to each other with 0 to 5px margin\n\n    @on mobile\n        | \u0026menu_items are rendered in 2 column table layout, with 0 to 4px vertical and 1px horizontal margin \n```\n\nInstall\n--------------\n\nJust download the folder `galen-extras` to your specs folder in your test project and import it:\n\n```\n@import galen-extras/galen-extras-rules.gspec\n\n# ...\n```\n\nYou only need to import that one file. The `galen-extras-rules.js` is imported in it already.\n\nInspiration\n---------------\n\nIf you want to see all these custom rules in action just look at `examples.gspec` file. It shows how different rules could be used effectively for testing a page on different breakpoints. \nAlso you can play with this project and run galen tests for it:\n\n```\ngalen test galen.test --htmlreport reports\n```\n\nDocumentation\n---------------\n\nIn this section you will find syntax explanation for all rules and examples.\n\n\n### Squared elements\n\nAllows to check that element has equal width and height.\n\n![](http://galenframework.github.io/galen-extras/images/sketch-squared.png)\n\n###### For multiple elements\n\nScope: Section\n\nSyntax: `%{objectPattern} should be squared`\n\n```\n    | header_icon, menu_button should be squared\n```\n\n###### For single elements\n\nScope: Object\n\nSyntax: `squared`\n\n```\n    header_icon:\n        | squared\n```\n\n\n### Almost squared elements\n\nSame as `squared` rule but it allows an error rate of 10%\n\n![](http://galenframework.github.io/galen-extras/images/sketch-squared-almost.png)\n\n###### For multiple elements\n\nScope: Section\n\nSyntax: `%{objectPattern} should be almost squared`\n\n```\n    | header_icon, menu_button should be almost squared\n```\n\n###### For single elements\n\nScope: Object\n\nSyntax: `almost squared`\n\n```\n    header_icon:\n        | almost squared\n```\n\n\n### Width/Height Ratio\n\nYou can check the exact ratio of width/height in percentage\n\n![](http://galenframework.github.io/galen-extras/images/sketch-width-ratio.png)\n\n###### Multiple elements\n\nScope: Section\n\nSyntax: `%{itemPattern} should have %{ratio}% width/height ratio`\n\n```\n    | login_button, cancel_button should have 140 % width/height ratio\n```\n\n###### Single elements\n\nScope: Object\n\nSyntax: `%{ratio}% width/height ratio`\n\n```\n    login_button:\n        | 140 % width/height ratio\n```\n\n\n### Testing amount of objects\n\nIn Galen you can check the amount of objects using just the 2 lines of code:\n\n```\n    global:\n        count any menu.item-* is 3 \n```\n\nBut it is not very human readable. By using the rule below you can express this validation in simple sentence\n\nScope: Section\n\nSyntax: `amount of %{visibilityType} %{objectPattern} should be %{amount}`\n\nwhere `visibilityType` can take `any`, `visible` or `absent` values\n\ne.g. amount of any elements:\n```\n    | amount of any menu.item-* should be 5\n```\n\ne.g. testing only visible elements\n```\n    | amount of visible menu.item-* should be 5\n```\n\nGiving a range of expected values\n```\n    | amount of visible menu.item-* should be 4 to 7\n```\n\nor\n\n```\n    | amount of visible menu.item-* should be \u003e 4\n```\n\n### Alignment of multiple elements with zero margin\n\nA very common situation when you have elements on the page aligned either vertically or horizontally. \n\n###### Horizontal\n![](http://galenframework.github.io/galen-extras/images/sketch-horizontal-align.png) \n\nScope: Section\n\nSyntax: `%{objectPattern} are aligned horizontally next to each other`\n\n```\n    | menu.item-* are aligned horizontally next to each other\n```\n\n###### Vertical\n![](http://galenframework.github.io/galen-extras/images/sketch-vertical-align.png)\n\nScope: Section\n\nSyntax: `%{objectPattern} are aligned vertically above each other`\n\n```\n    | menu.item-* are aligned vertically above each other\n```\n\n### Alignment of multiple elements with equal distance\n\nA very common situation when you have elements on the page aligned either vertically or horizontally. At the same time their margin might change depending on page width.\nThe following rules will help you when you can't know the exact margin and you just want to check that it is consistent.\n\n###### Horizontal\n![](http://galenframework.github.io/galen-extras/images/sketch-horizontal-align.png) \n\nScope: Section\n\nSyntax: `%{objectPattern} are aligned horizontally next to each other with equal distance`\n\n```\n    | menu.item-* are aligned horizontally next to each other with equal distance\n```\n\n###### Vertical\n![](http://galenframework.github.io/galen-extras/images/sketch-vertical-align.png)\n\nScope: Section\n\nSyntax: `%{objectPattern} are aligned vertically above each other with equal distance`\n\n```\n    | menu.item-* are aligned vertically above each other with equal distance\n```\n\n\n### Alignment of multiple elements with specific margin\n\nSimilar to the above statement but in this case you can declare a specific margin between elements\n\n###### Horizontal\n\nScope: Section\n\nSyntax: `%{objectPattern} are aligned horizontally next to each other with %{margin} margin`\n\n```\n    | menu.item-* are aligned horizontally next to each other with 5px margin\n    | box-* are aligned horizontally next to each other with 25 to 30px margin\n```\n\n###### Vertical\n\nScope: Section\n\nSyntax: `%{objectPattern} are aligned vertically above each other with %{margin} margin`\n\n```\n    | menu.item-* are aligned vertically above each other with 5px margin\n    | box-* are aligned vertically above each other with 25 to 30px margin\n```\n\n### Table layout\n\nAllows to check that a set of elements is displayed in simple table. You can define the amount of columns for this table layout.\n![](http://galenframework.github.io/galen-extras/images/sketch-table-layout.png)\n\n###### Table layout with zero margin between cols and rows\n\nScope: Section\n\nSyntax: `%{itemPattern} are rendered in %{columns} column table layout`\n\n```\n    | menu.item-* are rendered in 2 column table layout\n```\n\n###### Table layout with equal cols and rows margin\n\nScope: Section\n\nSyntax: `%{itemPattern} are rendered in %{columns} column table layout, with %{margin} margin`\n\n```\n    | menu.item-* are rendered in 2 column table layout, with 0 to 5px margin\n```\n\n###### Table layout with different cols and rows margin\n\nScope: Section\n\nSyntax: `%{itemPattern} are rendered in %{columns} column table layout, with %{verticalMargin} vertical and %{horizontalMargin} horizontal margins`\n\n```\n    | menu.item-* are rendered in 2 column table layout, with 0px vertical and 5px horizontal margins\n```\n\n\n### Location of sides of multiple elements inside a container\n\nThe following statement checks that a set of elements is located inside specified container and that the first and last element have a specific margin from sides between the container sides.\n\n\n##### Horizontal zero margin\n\nSyntax: `%{objectPattern} sides are horizontally inside %{containerObject}`\n\n![](http://galenframework.github.io/galen-extras/images/sketch-sides-horizontal.png)\n\n```\n    | menu.item-* sides are horizontally inside menu\n```\n\n##### Vertical zero margin\n\nSyntax: `%{objectPattern} sides are vertically inside %{containerObject}`\n\n![](http://galenframework.github.io/galen-extras/images/sketch-sides-vertical.png)\n\n```\n    | menu.item-* sides are vertically inside menu\n```\n\n##### Custom margin for both sides\n\nSyntax: `%{objectPattern} sides are inside %{containerObject} with %{margin} margin from %{sideAName} and %{sideBName}`\n\nwhere `sideAName` and `sideBName` can take the following values: `left`, `right`, `top`, `bottom`\n\n####### Left and Right\n\n![](http://galenframework.github.io/galen-extras/images/sketch-sides-horizontal.png)\n\n```\n    | menu.item-* sides are inside menu with \u003e 0px margin from left and right\n```\n\n####### Top and Bottom\n\n![](http://galenframework.github.io/galen-extras/images/sketch-sides-vertical.png)\n\n```\n    | box-* sides are inside box_container with \u003e 0px margin from top and bottom\n```\n\n### Common Conditions\n\nThe following common conditions allow you to insert your own code block and invoke only if condition succeeds.\n\n###### If all elements are visible\n\nScope: Any\n\nSyntax: `if all %{objectPattern} are visible`\n\n```\n    | if all menu.item-* are visible\n        menu.item-*:\n            height 30px\n```\n\n###### If any of elements is visible:\n\nScope: Any\n\nSyntax: `if any of %{objectPattern} is visible`\n\n```\n    | if any of menu.item-* is visible\n        menu:\n            height 50px\n```\n\n###### If none of elements are visible:\n\nScope: Any\n\nSyntax: `if none of %{objectPattern} are visible`\n\n```\n    | if none of menu.item-* are visible\n        main:\n            below header 0px\n```\n\n\n### Appearance of elements per breakpoints\n\nQuite often you have elements of the website that are hidden on small devices and are only shown on large layouts.\nYou can use the following statements to express that behaviour\n\nScope: Section\n\nSyntax: `%{objectPatterns} should be visible on %{tagsVisible} but absent on %{tagsAbsent}`\n\n```\n    | twitter_button should be visible on desktop, laptop but absent on tablet, mobile\n```\n\n\n### Component validations for multiple elements\n\nAllows to specify a component check for a set of elements\n\nScope: Section\n\nSyntax: `test all %{objectPattern} with %{componentPath}`\n\n```\n    | test all box-* with components/box.gspec\n```\n\n### Applying generic checks for multiple elements in a single line\n\nThis is usefull when you have repetitive specs for different elements and you don't want to use forEach loops. Basically if you have forEach loop for one iterated object and one spec for it, you can do in a single statement using this rule.\n\n\nScope: Section\n\nSyntax 1: `every %{objectPattern} is %{spec}`\n\nSyntax 2: `every %{objectPattern} has %{spec}`\n\n```\n    | every menu.item-* is inside menu 0px top bottom\n    | every menu.item-* has width 100px\n```\n\n### Applying two specs for multiple elements in a single line\n\nSimilar to the above statement, this one allows to have two specs separated by word `and`\n\nScope: Section\n\nSyntax 1: `every %{objectPattern} is %{spec1} and has %{spec2}`\n\nSyntax 2: `every %{objectPattern} has %{spec1} and is %{spec2}`\n\nSyntax 3: `every %{objectPattern} has %{spec1} and has %{spec2}`\n\nSyntax 4: `every %{objectPattern} is %{spec1} and is %{spec2}`\n\n```\n    | every menu.item-* is inside menu 0px top bottom and has width 100px\n```\n\n### Checking only first element from given expression\n\nOften when working with set of elements you need to check only the first one or the last\n\nSyntax 1: `first %{objectPattern} is %{spec}`\n\nSyntax 2: `first %{objectPattern} has %{spec}`\n\n```\n    | first menu.item-* is inside menu 0px top bottom\n    | first menu.item-* has width 100px\n```\n\n### Checking only last element from given expression\n\nSame as above, but this time it checks the last element\n\nSyntax 1: `last %{objectPattern} is %{spec}`\n\nSyntax 2: `last %{objectPattern} has %{spec}`\n\n```\n    | last menu.item-* is inside menu 0px top bottom\n    | last menu.item-* has width 100px\n```\n\n\n### Applying multiple checks for only first element from given expression\n\nAllows to apply multiple specs to only first element\n\nSyntax: `first %{objectPattern}:`\n\n```\n    | first menu.item-* :\n        below header 10px       \n        inside main_container 0px top left\n```\n\n\n### Applying multiple checks for only last element from given expression\n\nAllows to apply multiple specs to only last element\n\nSyntax: `last %{objectPattern}:`\n\n```\n    | last menu.item-* :\n        below header 10px       \n        inside main_container 0px top left\n```\n\n\nLicense\n--------------\nGalen Extras lib is licensed under [Apache License, Version 2.0](http://www.apache.org/licenses/LICENSE-2.0)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgalenframework%2Fgalen-extras","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgalenframework%2Fgalen-extras","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgalenframework%2Fgalen-extras/lists"}