Merge pull request #14 from vitalyiegorov/maestro-e2e

test: added first maestro tests and selectors, fixed timer issues

.github/workflows/merge-request.yml

@@ -40,3 +40,36 @@ jobs:
 
       - name: Upload coverage reports to Codecov
         uses: codecov/codecov-action@v3
+
+  update:
+    name: EAS Update
+    needs: checks
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check for EXPO_TOKEN
+        run: |
+          if [ -z "${{ secrets.EXPO_TOKEN }}" ]; then
+            echo "You must provide an EXPO_TOKEN secret linked to this project's Expo account in this repo's secrets. Learn more: https://docs.expo.dev/eas-update/github-actions"
+            exit 1
+          fi
+
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+          cache: yarn
+
+      - name: Setup EAS
+        uses: expo/expo-github-action@v8
+        with:
+          eas-version: latest
+          token: ${{ secrets.EXPO_TOKEN }}
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Publish update
+        run: eas update --auto

.ts-prunerc.js

@@ -1,4 +1,4 @@
 module.exports = {
-    ignore: '(dist|build|public|report)/|index.ts|_layout.tsx|.web.tsx?',
+    ignore: '(dist|build|public|report)/|index.ts|_layout.tsx|.web.tsx?|selectors.ts',
     error: true
 };

app/index.tsx

@@ -8,7 +8,7 @@ import { isNotEmptyString } from '@rnw-community/shared';
 
 import { DifficultySelect } from '../src/@app-root';
 import { BlackButton, type DifficultyEnum, Header, PageHeader, SupportUkraineBanner, getTimerText, useAppSelector } from '../src/@generic';
-import { gameSudokuStringSelector } from '../src/game';
+import { gameSudokuStringSelector, useResumeGame } from '../src/game';
 import { historyBestTimeSelector } from '../src/history';
 
 import { StartScreenStyles as styles } from './start-screen.styles';
@@ -19,6 +19,8 @@ export default function StartScreen() {
     const oldGameString = useAppSelector(gameSudokuStringSelector);
     const [bestScore, bestTime] = useAppSelector(historyBestTimeSelector);
 
+    const handleContinue = useResumeGame();
+
     const [showDifficultySelect, setShowDifficultySelect] = useState(false);
 
     const isGameStarted = isNotEmptyString(oldGameString);
@@ -33,9 +35,6 @@ export default function StartScreen() {
         router.push(`game?difficulty=${difficulty}`);
         setShowDifficultySelect(false);
     };
-    const handleContinue = () => {
-        router.push(`game?field=${oldGameString}`);
-    };
 
     return (
         <SafeAreaView style={styles.container}>

app/pause/index.tsx

@@ -1,22 +1,21 @@
 import { Text } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
-import { BlackButton, Donation, Header, PageHeader, useAppDispatch } from '../../src/@generic';
-import { gameResumeAction } from '../../src/game/store/game.actions';
+import { BlackButton, Donation, Header, PageHeader } from '../../src/@generic';
+import { useResumeGame } from '../../src/game';
 
 import { PauseScreenStyles as styles } from './pause-screen.styles';
-export default function PauseScreen() {
-    const dispatch = useAppDispatch();
 
-    const handleResume = () => void dispatch(gameResumeAction());
+export default function PauseScreen() {
+    const handleResume = useResumeGame();
 
     return (
         <SafeAreaView style={styles.container}>
             <PageHeader title="Game paused" />
             <Header text="Game paused" />
             <Text style={styles.text} />
             <Donation type="paused" />
-            <BlackButton href="game" onPress={handleResume} text="Resume" />
+            <BlackButton onPress={handleResume} text="Resume" />
         </SafeAreaView>
     );
 }

e2e/gameplay.flow.yaml

@@ -0,0 +1,30 @@
+#file: noinspection YAMLSchemaValidation
+appId: com.vitalyiegorov.suuudokuuu
+name: Gameplay
+env:
+  # TODO: Load app with specific puzzle
+  PUZZLE: 123
+---
+
+- runFlow: ./templates/start-game.template.yaml
+# Check cell selection and deselection
+- assertNotVisible:
+    id: "CellSelectors.Active"
+- tapOn:
+    id: "CellSelectors.Root"
+    index: 12
+    retryTapIfNoChange: false
+- assertVisible:
+    id: "CellSelectors.Active"
+
+# TODO: Can we assert highlighted cells count?
+- assertVisible:
+    id: "CellSelectors.Highlighted"
+
+- tapOn:
+    id: "CellSelectors.Active"
+    retryTapIfNoChange: false
+- assertNotVisible:
+    id: "CellSelectors.Active"
+
+

e2e/templates/start-game.template.yaml

@@ -0,0 +1,19 @@
+#file: noinspection YAMLSchemaValidation
+appId: com.vitalyiegorov.suuudokuuu
+name: Start a new game
+env:
+  # TODO: Load app with specific puzzle
+  PUZZLE: 123
+
+---
+
+- launchApp
+- tapOn: "Start new"
+- tapOn: "Newbie"
+- assertVisible: "0 / 3"
+- assertVisible:
+    below: "Score"
+    text: "0"
+- assertVisible:
+    id: "CellSelectors.Root"
+

package.json

@@ -29,6 +29,7 @@
         "@react-native-async-storage/async-storage": "1.17.11",
         "@reduxjs/toolkit": "^1.9.5",
         "@rnw-community/shared": "^0.54.0",
+        "@rnw-community/wdio": "^0.54.0",
         "date-fns": "^2.30.0",
         "expo": "~48.0.18",
         "expo-constants": "~14.2.1",
@@ -64,6 +65,7 @@
         "@release-it/conventional-changelog": "^5.1.1",
         "@types/react": "~18.0.27",
         "@typescript-eslint/eslint-plugin": "^5.59.5",
+        "@wdio/globals": "^8.10.6",
         "babel-jest": "^29.5.0",
         "eslint": "^8.41.0",
         "eslint-config-prettier": "^8.8.0",

readme.md

@@ -29,6 +29,7 @@ Sudoku game to help Ukraine win the war against Russia.
 
 ### Frontend
 
+-   [ ] improve logic code coverage
 -   [ ] add donation CTA on main screen and ukraine support
 -   [ ] add animations
     -   [ ] add number flying to its stop?
@@ -56,18 +57,44 @@ Sudoku game to help Ukraine win the war against Russia.
 
 ### CI/CD
 
--   [ ] android build for main branch should be published to play console
+-   [ ] create release notes and migrate to [semantic-release](https://github.com/semantic-release/release-notes-generator#options)
+-   [ ] setup maestro e2e tests on CI pull request
+-   [x] android build for main branch should be published to play console
 -   [x] ios/android builds should be published as artifacts so team members can test them
 -   [x] setup conventional commits, automatic version management and changelog generation(ios, android also)
 -   [x] setup pull-request pipeline for linting, tests, etc
 -   [x] ios build for main branch should be published to testflight
 
+### E2E
+
+-   [ ] Create separate flows for described items
+-   [ ] Pass selectors from `typescript selector files`
+-   [ ] Cannot select value if not empty cell selected
+-   [ ] Deselect cell if value is completed
+-   [ ] Leave cell selection if value is not completed
+-   [ ] Animations:
+    -   [ ] Select cell animation
+    -   [ ] Complete row animation
+    -   [ ] Complete col animation
+    -   [ ] Complete group animation
+    -   [ ] Complete value animation
+    -   [ ] Win animation
+-   [ ] Win scenario:
+    -   [ ] Win score and time
+-   [ ] Loose scenario:
+    -   [ ] Win score and time
+-   [ ] Pause scenario:
+    -   [ ] Return to game after pause
+    -   [ ] No pause on other screens(win, loose, home)
+    -   [ ] Reset app after pause
+-   [ ] Score calculation
+-   [ ] Best game on home page
+
 ### Overall
 
--   [ ] improve logic code coverage
 -   [ ] add sentry for error reporting
 -   [ ] migrate to monorepo
--   [ ] add e2e tests(maestro or wdio?)
+-   [x] add e2e tests(maestro or wdio?)
 -   [x] add turbo
 -   [x] fix metro require cycles (store related as usual) =)
 -   [x] add unit tests for game logic, add code coverage([codecov](https://about.codecov.io)?)

src/game/components/available-values-item/available-value-item.selectors.ts

@@ -0,0 +1,4 @@
+export enum AvailableValueItemSelectors {
+    Root = 'AvailableValueItemSelectors.Root',
+    Button = 'AvailableValueItemSelectors.Button'
+}

src/game/components/available-values-item/available-values-item.tsx

@@ -9,9 +9,11 @@ import Reanimated, {
 } from 'react-native-reanimated';
 
 import { type OnEventFn, cs } from '@rnw-community/shared';
+import { setTestID } from '@rnw-community/wdio';
 
 import { Colors } from '../../../@generic';
 
+import { AvailableValueItemSelectors as selectors } from './available-value-item.selectors';
 import { AvailableValuesItemStyles as styles } from './available-values-item.styles';
 
 const ReanimatedPressable = Reanimated.createAnimatedComponent(Pressable);
@@ -51,8 +53,13 @@ export const AvailableValuesItem = ({ value, isActive, onSelect, progress, corre
     const progressStyles = [styles.progress, { width: `${progress}%` }];
 
     return (
-        <View style={styles.container}>
-            <ReanimatedPressable key={value} style={buttonStyles} {...(canPress && { onPress: handlePress })}>
+        <View style={styles.container} {...setTestID(selectors.Root)}>
+            <ReanimatedPressable
+                key={value}
+                style={buttonStyles}
+                {...(canPress && { onPress: handlePress })}
+                {...setTestID(selectors.Button)}
+            >
                 <Text style={textStyles}>{value}</Text>
             </ReanimatedPressable>
 

src/game/components/field-cell-text/field-cell-text.tsx

@@ -9,6 +9,13 @@ import { CellFontSizeConstant } from '../constants/dimensions.contant';
 
 import { FieldCellTextStyles as styles } from './field-cell-text.styles';
 
+const getText = (isActive: boolean, isEmpty: boolean, cell: CellInterface): string => {
+    if (isEmpty) {
+        return isActive ? '•' : '';
+    }
+
+    return cell.value.toString();
+};
 interface Props {
     sudoku: Sudoku;
     isActive: boolean;
@@ -21,7 +28,6 @@ interface Props {
 
 const FieldCellTextComponent = ({ sudoku, cell, isHighlighted, isActiveValue, isActive, hasAnimation, animation }: Props) => {
     const isEmpty = sudoku.isBlankCell(cell);
-    const cellText = isEmpty ? '' : cell.value.toString();
 
     const animatedStyles = useAnimatedStyle(() => ({
         color: interpolateColor(animation.value, [0, 0.5, 1], [Colors.black, Colors.cell.highlightedText, Colors.black]),
@@ -39,7 +45,7 @@ const FieldCellTextComponent = ({ sudoku, cell, isHighlighted, isActiveValue, is
         cs(hasAnimation || animation.value !== 0, animatedStyles)
     ];
 
-    return <Reanimated.Text style={textStyles}>{cellText}</Reanimated.Text>;
+    return <Reanimated.Text style={textStyles}>{getText(isActive, isEmpty, cell)}</Reanimated.Text>;
 };
 
 export const FieldCellText = memo(

src/game/components/field-cell/field-cell.selectors.ts

@@ -0,0 +1,6 @@
+export enum FieldCellSelectors {
+    Root = 'CellSelectors.Root',
+    Active = 'CellSelectors.Active',
+    ActiveValue = 'CellSelectors.ActiveValue',
+    Highlighted = 'CellSelectors.Highlighted'
+}

src/game/components/field-cell/cell.styles.ts → src/game/components/field-cell/field-cell.styles.ts

@@ -3,7 +3,7 @@ import { StyleSheet } from 'react-native';
 import { Colors } from '../../../@generic';
 import { CellSizeConstant } from '../constants/dimensions.contant';
 
-export const CellStyles = StyleSheet.create({
+export const FieldCellStyles = StyleSheet.create({
     container: {
         alignItems: 'center',
         borderColor: Colors.black,