Skip to content

Commit 94b43f2

Browse files
teknaS47HusneShabbir
teknaS47
and
HusneShabbir
authored
chore(e2e): quickstart e2e with translations and accessibility tests (#1830)
* resolve merge conflicts * resolve sonar issues * quick-start e2e Signed-off-by: Sanket Saikia <ssaikia@redhat.com> * fix: format app-config-dev.yaml with prettier * chore: update yarn.lock * config changes Signed-off-by: Sanket Saikia <ssaikia@redhat.com> * requested changes Signed-off-by: Sanket Saikia <ssaikia@redhat.com> * requested changes Signed-off-by: Sanket Saikia <ssaikia@redhat.com> * requested changes Signed-off-by: Sanket Saikia <ssaikia@redhat.com> --------- Signed-off-by: Sanket Saikia <ssaikia@redhat.com> Co-authored-by: HusneShabbir <husneshabbir447@gmail.com>
1 parent a970cf3 commit 94b43f2

13 files changed

Lines changed: 705 additions & 50 deletions

‎workspaces/quickstart/app-config-dev.yaml‎

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
app:
2+
title: Scaffolded Backstage App
3+
baseUrl: http://localhost:3001
4+
quickstart:
5+
- title: Set up authentication
6+
titleKey: steps.setupAuthentication.title
7+
icon: Admin
8+
roles:
9+
- admin
10+
description: Set up secure login credentials to protect your account from unauthorized access.
11+
descriptionKey: steps.setupAuthentication.description
12+
cta:
13+
text: Learn more
14+
textKey: steps.setupAuthentication.ctaTitle
15+
link: https://docs.redhat.com/en/documentation/red_hat_developer_hub/latest/html/authentication_in_red_hat_developer_hub/
16+
- title: Configure RBAC
17+
titleKey: steps.configureRbac.title
18+
icon: Rbac
19+
description: Assign roles and permissions to control who can view, create, or edit resources, ensuring secure and efficient collaboration.
20+
descriptionKey: steps.configureRbac.description
21+
cta:
22+
text: Manage access
23+
textKey: steps.configureRbac.ctaTitle
24+
link: /rbac
25+
- title: Configure Git
26+
titleKey: steps.configureGit.title
27+
icon: Git
28+
description: Connect your Git providers, such as GitHub to manage code, automate workflows, and integrate with platform features.
29+
descriptionKey: steps.configureGit.description
30+
cta:
31+
text: Learn more
32+
textKey: steps.configureGit.ctaTitle
33+
link: https://docs.redhat.com/en/documentation/red_hat_developer_hub/latest/html/integrating_red_hat_developer_hub_with_github/
34+
- title: Manage plugins
35+
titleKey: steps.managePlugins.title
36+
icon: Plugins
37+
description: Browse and install extensions to add features, connect with external tools, and customize your experience.
38+
descriptionKey: steps.managePlugins.description
39+
cta:
40+
text: Explore plugins
41+
textKey: steps.managePlugins.ctaTitle
42+
link: /extensions
43+
- title: Import application
44+
titleKey: steps.importApplication.title
45+
roles:
46+
- developer
47+
icon: Import
48+
description: Import your existing code and services into the catalog to organize and access them through your developer portal.
49+
descriptionKey: steps.importApplication.description
50+
cta:
51+
text: Import
52+
textKey: steps.importApplication.ctaTitle
53+
link: /bulk-import/repositories
54+
- title: Learn about the Catalog
55+
titleKey: steps.learnAboutCatalog.title
56+
roles:
57+
- developer
58+
icon: Catalog
59+
description: Discover all software components, services, and APIs, and view their owners and documentation.
60+
descriptionKey: steps.learnAboutCatalog.description
61+
cta:
62+
text: View Catalog
63+
textKey: steps.learnAboutCatalog.ctaTitle
64+
link: /catalog
65+
- title: Explore Self-service templates
66+
titleKey: steps.exploreSelfServiceTemplates.title
67+
roles:
68+
- developer
69+
icon: SelfService
70+
description: Use our self-service templates to quickly set up new projects, services, or documentation.
71+
descriptionKey: steps.exploreSelfServiceTemplates.description
72+
cta:
73+
text: Explore templates
74+
textKey: steps.exploreSelfServiceTemplates.ctaTitle
75+
link: /create
76+
- title: Find all Learning Paths
77+
titleKey: steps.findAllLearningPaths.title
78+
roles:
79+
- developer
80+
icon: Learning
81+
description: Integrate tailored e-learning into your workflows with Learning Paths to accelerate onboarding, close skill gaps, and promote best practices.
82+
descriptionKey: steps.findAllLearningPaths.description
83+
cta:
84+
text: View Learning Paths
85+
textKey: steps.findAllLearningPaths.ctaTitle
86+
link: /learning-paths
87+
88+
organization:
89+
name: My Company
90+
91+
backend:
92+
# Used for enabling authentication, secret is shared by all backend plugins
93+
# See https://backstage.io/docs/auth/service-to-service-auth for
94+
# information on the format
95+
# auth:
96+
# keys:
97+
# - secret: ${BACKEND_SECRET}
98+
baseUrl: http://localhost:7008
99+
listen:
100+
port: 7008
101+
# Uncomment the following host directive to bind to specific interfaces
102+
# host: 127.0.0.1
103+
csp:
104+
connect-src: ["'self'", 'http:', 'https:']
105+
# Content-Security-Policy directives follow the Helmet format: https://helmetjs.github.io/#reference
106+
# Default Helmet Content-Security-Policy values can be removed by setting the key to false
107+
cors:
108+
origin: http://localhost:3001
109+
methods: [GET, HEAD, PATCH, POST, PUT, DELETE]
110+
credentials: true
111+
# This is for local development only, it is not recommended to use this in production
112+
# The production database configuration is stored in app-config.production.yaml
113+
database:
114+
client: better-sqlite3
115+
connection: ':memory:'
116+
# workingDirectory: /tmp # Use this to configure a working directory for the scaffolder, defaults to the OS temp-dir
117+
118+
integrations:
119+
github:
120+
- host: github.com
121+
# This is a Personal Access Token or PAT from GitHub. You can find out how to generate this token, and more information
122+
# about setting up the GitHub integration here: https://backstage.io/docs/integrations/github/locations#configuration
123+
token: ${GITHUB_TOKEN}
124+
### Example for how to add your GitHub Enterprise instance using the API:
125+
# - host: ghe.example.net
126+
# apiBaseUrl: https://ghe.example.net/api/v3
127+
# token: ${GHE_TOKEN}
128+
129+
proxy:
130+
### Example for how to add a proxy endpoint for the frontend.
131+
### A typical reason to do this is to handle HTTPS and CORS for internal services.
132+
# endpoints:
133+
# '/test':
134+
# target: 'https://example.com'
135+
# changeOrigin: true
136+
137+
# Reference documentation http://backstage.io/docs/features/techdocs/configuration
138+
# Note: After experimenting with basic setup, use CI/CD to generate docs
139+
# and an external cloud storage when deploying TechDocs for production use-case.
140+
# https://backstage.io/docs/features/techdocs/how-to-guides#how-to-migrate-from-techdocs-basic-to-recommended-deployment-approach
141+
techdocs:
142+
builder: 'local' # Alternatives - 'external'
143+
generator:
144+
runIn: 'docker' # Alternatives - 'local'
145+
publisher:
146+
type: 'local' # Alternatives - 'googleGcs' or 'awsS3'. Read documentation for using alternatives.
147+
148+
# auth:
149+
# # see https://backstage.io/docs/auth/ to learn about auth providers
150+
# providers:
151+
# # See https://backstage.io/docs/auth/guest/provider
152+
# guest: {}
153+
154+
auth:
155+
providers:
156+
guest:
157+
userEntityRef: user:default/john-smith
158+
ownershipEntityRefs: [group:default/smith-family]
159+
dangerouslyAllowOutsideDevelopment: false
160+
161+
scaffolder:
162+
# see https://backstage.io/docs/features/software-templates/configuration for software template options
163+
164+
catalog:
165+
import:
166+
entityFilename: catalog-info.yaml
167+
pullRequestBranchName: backstage-integration
168+
rules:
169+
- allow: [Component, System, API, Resource, Location]
170+
locations:
171+
# Local example data, file locations are relative to the backend process, typically `packages/backend`
172+
- type: file
173+
target: ../../examples/entities.yaml
174+
175+
# Local example template
176+
- type: file
177+
target: ../../examples/template/template.yaml
178+
rules:
179+
- allow: [Template]
180+
181+
# Local example organizational data
182+
- type: file
183+
target: ../../examples/org.yaml
184+
rules:
185+
- allow: [User, Group]
186+
187+
## Uncomment these lines to add more example data
188+
# - type: url
189+
# target: https://github.com/backstage/backstage/blob/master/packages/catalog-model/examples/all.yaml
190+
191+
## Uncomment these lines to add an example org
192+
# - type: url
193+
# target: https://github.com/backstage/backstage/blob/master/packages/catalog-model/examples/acme-corp.yaml
194+
# rules:
195+
# - allow: [User, Group]
196+
# Experimental: Always use the search method in UrlReaderProcessor.
197+
# New adopters are encouraged to enable it as this behavior will be the default in a future release.
198+
useUrlReadersSearch: true
199+
200+
kubernetes:
201+
# see https://backstage.io/docs/features/kubernetes/configuration for kubernetes configuration options
202+
# see https://backstage.io/docs/permissions/getting-started for more on the permission framework
203+
permission:
204+
# setting this to `false` will disable permissions
205+
enabled: true
206+
rbac:
207+
pluginsWithPermission:
208+
- catalog
209+
- extensions

‎workspaces/quickstart/app-config.yaml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ app:
5050
cta:
5151
text: Import
5252
textKey: steps.importApplication.ctaTitle
53-
link: /bulk-import
53+
link: /bulk-import/repositories
5454
- title: Learn about the Catalog
5555
titleKey: steps.learnAboutCatalog.title
5656
roles:
@@ -83,7 +83,7 @@ app:
8383
cta:
8484
text: View Learning Paths
8585
textKey: steps.findAllLearningPaths.ctaTitle
86-
link: /docs
86+
link: /learning-paths
8787

8888
organization:
8989
name: My Company

‎workspaces/quickstart/package.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@
2121
"prettier:check": "prettier --check .",
2222
"prettier:fix": "prettier --write .",
2323
"new": "backstage-cli new --scope @red-hat-developer-hub",
24-
"postinstall": "cd ../../ && yarn install"
24+
"postinstall": "cd ../../ && yarn install",
25+
"test:e2e": "playwright test"
2526
},
2627
"workspaces": {
2728
"packages": [
@@ -39,6 +40,7 @@
3940
"@backstage/e2e-test-utils": "^0.1.1",
4041
"@backstage/repo-tools": "^0.15.3",
4142
"@changesets/cli": "^2.27.1",
43+
"@playwright/test": "1.56.1",
4244
"knip": "^5.27.4",
4345
"node-gyp": "^9.0.0",
4446
"prettier": "^2.3.2",
@@ -245,5 +247,8 @@
245247
"*.{json,md}": [
246248
"prettier --write"
247249
]
250+
},
251+
"dependencies": {
252+
"playwright": "^1.56.1"
248253
}
249254
}

‎workspaces/quickstart/packages/app/e2e-tests/app.test.ts‎

Lines changed: 0 additions & 27 deletions
This file was deleted.

‎workspaces/quickstart/packages/app/e2e-tests/quick-start-admin-guest.spec.ts‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
/*
2+
* Copyright Red Hat, Inc.
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
import { expect, test, TestInfo } from '@playwright/test';
17+
import { UIhelper, switchToLocale } from './utils/helper';
18+
import { getTranslations, QuickstartMessages } from './utils/translations';
19+
import { runAccessibilityTests } from './utils/accessibility';
20+
21+
test.describe('Test Quick Start plugin', () => {
22+
let uiHelper: UIhelper;
23+
let translations: QuickstartMessages;
24+
test.beforeEach(async ({ page }) => {
25+
test.info().annotations.push({
26+
type: 'component',
27+
description: 'plugins',
28+
});
29+
uiHelper = new UIhelper(page);
30+
31+
await page.goto('/');
32+
await page.getByRole('button', { name: 'Enter' }).click();
33+
34+
// Switch to French for French projects
35+
const projectName = test.info().project.name;
36+
if (projectName === 'fr' || projectName === 'dev-config-fr') {
37+
await switchToLocale(page, 'Français');
38+
}
39+
40+
const currentLocale = await page.evaluate(
41+
() => globalThis.navigator.language.split('-')[0],
42+
);
43+
translations = getTranslations(currentLocale);
44+
});
45+
46+
test('Access Quick start as Guest or Admin', async ({
47+
page,
48+
}, testInfo: TestInfo) => {
49+
await page.waitForTimeout(1000);
50+
51+
await uiHelper.verifyText(translations.header.title);
52+
await uiHelper.verifyText(translations.header.subtitle);
53+
await uiHelper.verifyText(translations.footer.notStarted);
54+
55+
await runAccessibilityTests(
56+
page,
57+
testInfo,
58+
'quick-start-accessibility.json',
59+
{
60+
skipViolationsAssert: true,
61+
},
62+
);
63+
64+
await page.getByText(translations.steps.setupAuthentication.title).click();
65+
await uiHelper.verifyButtonURL(
66+
translations.steps.setupAuthentication.ctaTitle,
67+
'https://docs.redhat.com/en/documentation/red_hat_developer_hub/latest/html/authentication_in_red_hat_developer_hub/',
68+
{ exact: false },
69+
);
70+
await page.getByText(translations.steps.configureRbac.title).click();
71+
await uiHelper.verifyButtonURL(
72+
translations.steps.configureRbac.ctaTitle,
73+
'/rbac',
74+
);
75+
await page.getByText(translations.steps.configureGit.title).click();
76+
await uiHelper.verifyButtonURL(
77+
translations.steps.configureGit.ctaTitle,
78+
'https://docs.redhat.com/en/documentation/red_hat_developer_hub/latest/html/integrating_red_hat_developer_hub_with_github/',
79+
{ exact: false },
80+
);
81+
await page.getByText(translations.steps.managePlugins.title).click();
82+
await uiHelper.verifyButtonURL(
83+
translations.steps.managePlugins.ctaTitle,
84+
'/extensions',
85+
);
86+
await uiHelper.clickButtonByText(translations.steps.managePlugins.ctaTitle);
87+
await expect(page).toHaveURL(/extensions/);
88+
const progressPattern = new RegExp(
89+
translations.footer.progress.replace('{{progress}}', '\\d+'),
90+
);
91+
await uiHelper.verifyText(progressPattern);
92+
await uiHelper.clickButtonByText(translations.footer.hide);
93+
await expect(
94+
page.getByRole('button', { name: translations.footer.hide }),
95+
).toBeHidden();
96+
});
97+
});

0 commit comments

Comments
 (0)