From 60a097aa467512ccac3cb10dda425f433b73df12 Mon Sep 17 00:00:00 2001
From: Fuxing Loh <4266087+fuxingloh@users.noreply.github.com>
Date: Thu, 6 Jul 2023 14:24:21 +0800
Subject: [PATCH] feat(app): setting don't show > if external link (#70)
#### What this PR does / why we need it:
- Setting row if external link, don't show ">".
- Also added playwright tests
---
.github/workflows/ci.yml | 3 +--
app/app/keychain/_layout.tsx | 1 +
app/app/keychain/settings/about/design.e2e.ts | 8 ++++++++
app/app/keychain/settings/about/design.tsx | 4 ++--
app/app/keychain/settings/index.tsx | 8 +++-----
app/playwright.config.js | 12 ++----------
6 files changed, 17 insertions(+), 19 deletions(-)
create mode 100644 app/app/keychain/settings/about/design.e2e.ts
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 2854467..49d93c8 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -139,7 +139,6 @@ jobs:
strategy:
fail-fast: false
matrix:
- project: [chromium]
shardIndex: [1, 2]
shardTotal: [2]
steps:
@@ -167,7 +166,7 @@ jobs:
- name: playwright test
working-directory: app
- run: yarn playwright test --project=${{ matrix.project }} --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
+ run: yarn playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
- uses: actions/upload-artifact@0b7f8abb1508181956e8e162db84b466c27e18ce # v3.1.2
if: always()
diff --git a/app/app/keychain/_layout.tsx b/app/app/keychain/_layout.tsx
index b79eeba..ad6f807 100644
--- a/app/app/keychain/_layout.tsx
+++ b/app/app/keychain/_layout.tsx
@@ -20,6 +20,7 @@ export default function TabsLayout(): JSX.Element {
tabPress: () => haptic.selectionAsync(),
}),
options: {
+ tabBarTestID: `/keychain/${props.route}`,
title: props.title,
tabBarIcon: ({ color }) => ,
},
diff --git a/app/app/keychain/settings/about/design.e2e.ts b/app/app/keychain/settings/about/design.e2e.ts
new file mode 100644
index 0000000..b8787d2
--- /dev/null
+++ b/app/app/keychain/settings/about/design.e2e.ts
@@ -0,0 +1,8 @@
+import { expect, test } from '@playwright/test';
+
+test('should go to Settings -> Design System ', async ({ page, baseURL }) => {
+ await page.goto('/');
+ await page.getByTestId('/keychain/settings').click();
+ await page.getByTestId('/keychain/settings/about/design').click();
+ await expect(page).toHaveURL(`${baseURL}/keychain/settings/about/design`);
+});
diff --git a/app/app/keychain/settings/about/design.tsx b/app/app/keychain/settings/about/design.tsx
index e4b8426..841ff3f 100644
--- a/app/app/keychain/settings/about/design.tsx
+++ b/app/app/keychain/settings/about/design.tsx
@@ -15,7 +15,7 @@ export default function DesignSystemPage(): JSX.Element {
<>
-
+
A collection of open source rules, principles, and constraints that govern how we design and build Levain
Keychain. It is a living document that will grow and evolve as we add more features and functionality to
diff --git a/app/app/keychain/settings/index.tsx b/app/app/keychain/settings/index.tsx
index 0392a70..0924e12 100644
--- a/app/app/keychain/settings/index.tsx
+++ b/app/app/keychain/settings/index.tsx
@@ -97,7 +97,7 @@ export default function SettingPage(): JSX.Element {
props: {
to: '/keychain/settings/about/design',
icon: 'codesquareo',
- title: 'Design',
+ title: 'Design System',
},
},
{
@@ -211,14 +211,11 @@ function SettingRowLink(props: RowProps): JSX.Element {
await haptic.impactAsync();
}}
>
-
+
{props.title}
-
-
-
);
@@ -235,6 +232,7 @@ function SettingRowSelect(props: RowProps): JSX.Element {
router.push(props.to!);
await haptic.selectionAsync();
}}
+ testID={props.to}
>
diff --git a/app/playwright.config.js b/app/playwright.config.js
index d2f1ef6..d8dbd09 100644
--- a/app/playwright.config.js
+++ b/app/playwright.config.js
@@ -1,4 +1,4 @@
-import { defineConfig, devices } from '@playwright/test';
+import { defineConfig } from '@playwright/test';
export default defineConfig({
testDir: 'app',
@@ -41,15 +41,7 @@ export default defineConfig({
baseURL: 'http://localhost:8081',
// Collect trace when retrying the failed test.
trace: 'on',
- // equivalent to cypress: macbook-16
- viewport: { width: 1200, height: 1200 },
+ viewport: { width: 500, height: 900 },
video: 'on',
},
-
- projects: [
- {
- name: 'chromium',
- use: { ...devices['Desktop Chrome'] },
- },
- ],
});