From ae17cce3168f09a36f82b78c4dc42c5959b05c3f Mon Sep 17 00:00:00 2001 From: Will Browne Date: Fri, 20 Aug 2021 15:53:54 +0200 Subject: [PATCH] Plugins: Add Hide OAuth Forward config option (#36306) * add prop * add angular conf * invert naming * undo md changes * fix wording * y u fail 4 me * refactor(datasourcesettings): rename hideForwardOAuthIdentityOption prop * refactor(datasourcesettings): rename scope.hideForwardOAuthIdentityOption * Update contribute/style-guides/e2e.md Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com> * feat(datasourcehttpsettings): add showForwardOAuthIdentityOption to angular wrappers & template Co-authored-by: Jack Westbrook Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com> --- contribute/style-guides/e2e.md | 43 ++++++++----------- contribute/style-guides/themes.md | 2 +- .../docker/grafana-plugin-ci-e2e/README.md | 12 +++++- .../DataSourceHttpSettings.tsx | 2 + .../DataSourceSettings/HttpProxySettings.tsx | 28 +++++++----- .../components/DataSourceSettings/types.ts | 2 + .../DateTimePicker/DateTimePicker.mdx | 11 +++-- public/app/core/angular_wrappers.ts | 1 + .../partials/http_settings_next.html | 8 +++- .../datasources/settings/HttpSettingsCtrl.ts | 1 + public/app/plugins/panel/annolist/README.md | 5 +-- public/app/plugins/panel/geomap/README.md | 2 +- 12 files changed, 70 insertions(+), 47 deletions(-) diff --git a/contribute/style-guides/e2e.md b/contribute/style-guides/e2e.md index 4a53e065cfd..1e4961975ce 100644 --- a/contribute/style-guides/e2e.md +++ b/contribute/style-guides/e2e.md @@ -23,20 +23,13 @@ Inspired by https://martinfowler.com/bliki/PageObject.html Let's start with a simple [JSX](https://reactjs.org/docs/introducing-jsx.html) example containing a single input field that we want to populate during our E2E test: ```jsx - + ``` We _could_ target the field with a CSS selector like `.gf-form-input.login-form-input` but that would be brittle as style changes occur frequently. Furthermore there is nothing that signals to future developers that this input is part of an E2E test. At Grafana, we use `aria-label` attributes as our preferred way of defining selectors instead of [`data-*`](https://mdn.io/docs/Web/HTML/Global_attributes/data-*) as they also aid in [accessibility](https://mdn.io/docs/Learn/Accessibility/What_is_accessibility): ```jsx - + ``` The next step is to create a `Page` representation in our E2E framework to glue the test with the real implementation using the `pageFactory` function. For that function we can supply a `url` and `selectors` like in the example below: @@ -45,7 +38,6 @@ The next step is to create a `Page` representation in our E2E framework to glue export const Login = { // Called via `Login.visit()` url: '/login', - // Called via `Login.username()` username: 'Username input field', }; @@ -67,11 +59,7 @@ Now that we have a `Page` called `Login` in our `Pages` const we can use that to ```jsx import { selectors } from '@grafana/e2e-selectors'; - +; ``` The last step in our example is to use our `Login` page as part of a test. @@ -86,9 +74,7 @@ describe('Login test', () => { e2e.pages.Login.visit(); // To prevent flaky tests, always do a `.should` on any selector that you expect to be in the DOM. // Read more here: https://docs.cypress.io/guides/core-concepts/retry-ability.html#Commands-vs-assertions - e2e.pages.Login.username() - .should('be.visible') - .type('admin'); + e2e.pages.Login.username().should('be.visible').type('admin'); }); }); ``` @@ -154,25 +140,28 @@ describe('List test', () => { e2e.pages.DataSources.visit(); // To prevent flaky tests, always do a .should on any selector that you expect to be in the DOM. // Read more here: https://docs.cypress.io/guides/core-concepts/retry-ability.html#Commands-vs-assertions - e2e.pages.DataSources.dataSources('B') - .should('be.visible') - .click(); + e2e.pages.DataSources.dataSources('B').should('be.visible').click(); }); }); ``` ## Aria-Labels vs data-testid -Our selectors are set up to work with both aria-labels and data-testid attributes. Aria-labels help assistive technologies such as screenreaders identify interactive elements of a page for our users. + +Our selectors are set up to work with both aria-labels and data-testid attributes. Aria-labels help assistive technologies such as screenreaders identify interactive elements of a page for our users. A good example of a time to use an aria-label might be if you have a button with an X to close: + ```