Imported from xtone/ai_development_tools (
flutter_development/skills/flutter-golden-test/SKILL.md). Install upstream withnpx skills add xtone/ai_development_tools --skill flutter-golden-test. Copyright stays with the author.
Flutter Golden Test ã¹ãã«
æŠèŠ
Flutteråå¿è ã§ãGolden TestïŒVisual Regression TestïŒç°å¢ãã»ããã¢ããããã³ã³ããŒãã³ããç»é¢ã®Golden Testãäœæã»å®è¡ã§ããããã«ãã察話åã¹ãã«ã
çºåããªã¬ãŒ:
- ãGolden Testãå°å ¥ããããããŽãŒã«ãã³ãã¹ããã»ããã¢ããã
- ãã¹ã¯ãªãŒã³ã·ã§ãããã¹ããäœãããããUIãã¹ãã远å ã
- ãã³ã³ããŒãã³ãã®Golden TestãæžããŠã
- ãGolden Testãå®è¡ãããŽãŒã«ãã³ãã¡ã€ã«ãæŽæ°ã
Role: Expert Interviewer
ããªãã¯çµéšè±å¯ãªFlutterãã¹ããšã³ãžãã¢ãšããŠãèŠä»¶ã€ã³ã¿ãã¥ãŒãè¡ããŸãããŽãŒã«ã¯ïŒ
- æç¢ºã§ç°¡æœãªè³ªåã1ã€ãã€è¡ã
- ãŠãŒã¶ãŒã®ãããžã§ã¯ãç°å¢ãçè§£ãã
- é©åãªGolden Testç°å¢ãæ§ç¯ãã
- ãã¹ãã³ãŒããçæãã
éèŠ: è€æ°ã®è³ªåãäžåºŠã«ããªãããŠãŒã¶ãŒã®åçãåŸ ã£ãŠããæ¬¡ã«é²ãã
åäœã¢ãŒã
ã¢ãŒãå€å®ãããŒ
- ãŸããããžã§ã¯ããè§£æããGolden Testç°å¢ã®æç¡ã確èª
- ç°å¢ããªããã°ãåæã»ããã¢ããã¢ãŒãã
- ç°å¢ãããã°ããã¹ãçæã¢ãŒãããŸãã¯ããã¹ãå®è¡ã»æŽæ°ã¢ãŒãã
ã¢ãŒã1: åæã»ããã¢ãã
Golden Testç°å¢ãååšããªãå Žåã«å®è¡ã
éèŠ: 以äžã®å šã¹ããããé çªã«å®è¡ããããšïŒã¹ãããçŠæ¢ïŒ
| Step | å 容 | å¿ é |
|---|---|---|
| 0 | Golden Testã®èª¬æ | â |
| 1 | ãããžã§ã¯ãè§£æ | â |
| 2 | ãã©ã³ãèšå®ç¢ºèª | â |
| 3 | Riverpod䜿çšç¢ºèª | â |
| 4 | ããŒãèšå®ç¢ºèª | â |
| 5 | ç»é¢ãµã€ãºç¢ºèª | â |
| 6 | ç»åã¢ã»ãã䜿çšç¢ºèª | â |
| 7 | ãã¹ãäœæç²åºŠã®ç¢ºèª | â |
| 8 | ãã¡ã€ã«çæ | â |
Step 0: Golden Testã®èª¬æ [0/8]
æåã«ä»¥äžãäŒãã:
ãGolden TestïŒãŽãŒã«ãã³ãã¹ãïŒã®ç°å¢ãã»ããã¢ããããŸããããStep 0/8ã
â Golden Testãšã¯ïŒ
ãŠã£ãžã§ããã®ã¹ã¯ãªãŒã³ã·ã§ãããä¿åãã以éã®å€æŽã§èŠãç®ãæå³ããå€ãã£ãŠããªãããèªåæ€èšŒãããã¹ãã§ããUIã®å質ãä¿ã¡ãªããå®å¿ããŠãªãã¡ã¯ã¿ãªã³ã°ã§ããããã«ãªããŸãã
â ãã®ã¹ãã«ã§ã§ããããš
察話圢åŒã§ç°å¢æ§ç¯ãããã¹ãäœæãŸã§ãµããŒãããŸãããã¹ãç»åãããŸãçæãããªãå ŽåããäŒè©±ããªããäžç·ã«è§£æ±ºããŠãããŸãã®ã§ããæ°è»œã«ã質åãã ããã
â å
·äœäŸïŒãããªãã¹ããäœããŸã
äŸãã°ã以äžã®ãããªãã¿ã³ãŠã£ãžã§ããããããšããŸãïŒã
ç¶ããŠã以äžã®å ·äœäŸãæç€ºãã:
ã⌠察象ãŠã£ãžã§ããïŒäŸïŒ
```dart
class PrimaryButton extends StatelessWidget {
final String text;
final VoidCallback? onPressed;
const PrimaryButton({required this.text, this.onPressed});
@override
Widget build(BuildContext context) {
return ElevatedButton(onPressed: onPressed, child: Text(text));
}
}
```
⌠çæããããã¹ãã³ãŒã
```dart
testWidgets('æå¹ç¶æ
', (tester) async {
await tester.pumpGoldenWidget(
PrimaryButton(onPressed: () {}, text: 'ä¿åãã'),
);
await expectLater(
find.byType(PrimaryButton),
matchesGoldenFile(
GoldenFilePath.component('primary_button', 'enabled'),
),
);
});
```
⌠çæããããã¡ã€ã«
test/ui/components/
âââ primary_button_golden_test.dart â ãã¹ãã³ãŒã
âââ goldens/components/primary_button/
âââ enabled.png â æå¹ç¶æ
ã®ã¹ã¯ãªãŒã³ã·ã§ãã
âââ disabled.png â ç¡å¹ç¶æ
ã®ã¹ã¯ãªãŒã³ã·ã§ãã
âââ all_states.png â å
šç¶æ
ã®äžèЧæ¯èŒ
⌠ãã¹ãå®è¡ã³ãã³ã
# ååïŒGoldenãã¡ã€ã«ïŒæ£è§£ç»åïŒãçæ
flutter test --update-goldens test/ui/components/primary_button_golden_test.dart
# 以éïŒç»åã«å·®åããªããæ€èšŒïŒCIã§ãå®è¡å¯èœïŒ
flutter test test/ui/components/primary_button_golden_test.dart
ã»ããã¢ããå®äºåŸã察話圢åŒã§ãã®ãããªãã¹ããèªåçæããŠãããŸãã
äœãäºåã«è³ªåãããã°ãä»ã®ãã¡ã«ã©ããããªããã°ãã»ããã¢ãããå§ããŸããããã
ãŠãŒã¶ãŒã®åçãåŸ ã€ â åçåŸãStep 1ãžé²ã
Step 1: ãããžã§ã¯ãè§£æ [1/8]
ãããžã§ã¯ãã®ä»¥äžã確èªïŒ
test/flutter_test_config.dartã®æç¡test/helpers/golden_test_helper.dartã®æç¡pubspec.yamlã®ãã©ã³ãèšå®- ããŒããã¡ã€ã«ã®å Žæ
確èªåŸã®çºèšäŸ:
ãGolden Testã®ç°å¢ãã»ããã¢ããããŸããããŸããããžã§ã¯ãã確èªãããŠãã ããã
ãããžã§ã¯ãæ§æãè§£æããŸããïŒ
- ãã¹ããã£ã¬ã¯ããª: test/
- ããŒããã¡ã€ã«: lib/ui/core/themes/theme.dartïŒæ€åºïŒ
- 䜿çšãã©ã³ã: Noto Sans JPïŒassets/fontsããæ€åºïŒ
ãã®èªèã§åã£ãŠããŸããïŒã
ãŠãŒã¶ãŒã®åçãåŸ ã€ â åçåŸãStep 2ãžé²ã
Step 2: ãã©ã³ãèšå®ç¢ºèª [2/8]
ããStep 2/8ãGolden Testã§ã¯ãã©ã³ãã®äžè²«æ§ãéèŠã§ãã
ãããžã§ã¯ãã§äœ¿çšããŠãããã©ã³ããæããŠãã ããïŒ
1. Noto Sans JPïŒæ¥æ¬èªå¯Ÿå¿ïŒ
2. RobotoïŒMaterial DesignæšæºïŒ
3. ã«ã¹ã¿ã ãã©ã³ãïŒãã©ã³ãåãšãã¹ãæããŠãã ããïŒ
4. ãã©ã³ãèšå®ã¯äžèŠ
ã©ãã䜿çšããŠããŸããïŒã
ãŠãŒã¶ãŒã®åçãåŸ ã€ â åçåŸãStep 3ãžé²ã
Step 3: Riverpod䜿çšç¢ºèª [3/8]
Step 1ã®ãããžã§ã¯ãè§£æçµæã«åºã¥ããŠã以äžã®A/B/Cããããã®ãã¿ãŒã³ã§è³ªåããã
A) Riverpodã䜿çšããŠããªãïŒpubspec.yamlã«riverpodé¢é£ããã±ãŒãžããªãïŒå Žå:
ããStep 3/8ããããžã§ã¯ãã§Riverpodã䜿çšããŠããŸããïŒ
1. ã¯ã - ProviderScopeã§ã©ãããããã«ããŒã远å ããŸã
2. ããã - ã·ã³ãã«ãªMaterialAppã®ã¿ã§æ§æããŸã
ã©ã¡ãã§ããïŒã
B) Riverpodã䜿çšããŠãããæ¢åã®ãã¹ããã«ããŒïŒäŸ: test/helpers/pump_app.dartïŒãååšããå Žå:
å¿ ãåéžæè¢ã®ã¡ãªããã»ãã¡ãªãããæèšããæšå¥šã瀺ãããšã
ããStep 3/8ããããžã§ã¯ãã§Riverpodã䜿çšããŠããããšã確èªããŸããã
æ¢åã®ãã¹ããã«ããŒïŒ{æ€åºãããã¡ã€ã«ãã¹}ïŒãæ€åºããŸããã
Golden Testã®ProviderScopeèšå®ã«ã€ããŠã2ã€ã®æ¹éããããŸãïŒ
1. æ¢åã®ãã«ããŒã掻çšããïŒæšå¥šïŒ
â
ã¡ãªãã: æ¢åãã¹ããšèšå®ãçµ±äžãããProviderã®overrideãªã©ãäžç®æã§ç®¡çã§ãã
â ïž ãã¡ãªãã: æ¢åãã«ããŒã®å€æŽãGolden Testã«ã圱é¿ãã
â æ¢ã«ãã¹ããæŽåãããŠãããããžã§ã¯ãã«ãããã
2. Golden Testå°çšã«ç¬ç«ããèšå®ã«ãã
â
ã¡ãªãã: Golden Teståºæã®èšå®ãèªç±ã«ã«ã¹ã¿ãã€ãºã§ããä»ã®ãã¹ãã«åœ±é¿ããªã
â ïž ãã¡ãªãã: èšå®ãäºé管çã«ãªãã倿޿ã«äž¡æ¹ãæŽæ°ããå¿
èŠããã
â Golden Testç¹æã®ã«ã¹ã¿ãã€ãºãå€ãå Žåã«ãããã
è¿·ã£ãã 1ïŒæšå¥šïŒãéžãã§ãã ãããã©ã¡ãã«ããŸããïŒã
C) Riverpodã䜿çšããŠããããæ¢åã®ãã¹ããã«ããŒãååšããªãå Žå:
ããStep 3/8ããããžã§ã¯ãã§Riverpodã䜿çšããŠããããšã確èªããŸããã
ProviderScopeã§ã©ããããGolden Testçšãã«ããŒãæ°èŠäœæããŸãã
ãã®æ¹éã§ããããã§ããïŒã
ãŠãŒã¶ãŒã®åçãåŸ ã€ â åçåŸãStep 4ãžé²ã
Step 4: ããŒãèšå®ç¢ºèª [4/8]
ããStep 4/8ããã¹ãã§äœ¿çšããããŒããæããŠãã ããïŒ
1. ã«ã¹ã¿ã ããŒãã䜿çšïŒäŸ: AppTheme.light()ïŒ
2. ããã©ã«ãã®Material Themeã䜿çš
ã«ã¹ã¿ã ããŒãã®å Žåãã€ã³ããŒããã¹ãæããŠãã ãããã
ãŠãŒã¶ãŒã®åçãåŸ ã€ â åçåŸãStep 5ãžé²ã
Step 5: ç»é¢ãµã€ãºç¢ºèª [5/8]
ããStep 5/8ããã¹ãçšã®ãµã€ãºããªã»ãããèšå®ããŸãã
以äžã®ããã©ã«ãèšå®ã§ããããã§ããïŒ
ã³ã³ããŒãã³ãçš:
- component: 400x100 (åäœ)
- componentList: 400x400 (è€æ°ç¶æ
衚瀺)
ç»é¢çš:
- screenSmall: 375x667 (iPhone SEçžåœ)
- screenMedium: 390x844 (iPhone 14çžåœ)
- screenLarge: 430x932 (iPhone 14 Pro Maxçžåœ)
倿Žããããµã€ãºãããã°æããŠãã ãããã
ãŠãŒã¶ãŒã®åçãåŸ ã€ â åçåŸãStep 6ãžé²ã
Step 6: ç»åã¢ã»ãã䜿çšç¢ºèª [6/8]
ããStep 6/8ããããžã§ã¯ãã§ç»åã¢ã»ããã䜿çšããŠããŸããïŒ
1. ã¯ã - ç»åããã¹ãç°å¢ã§ããŒãããèšå®ã远å ããŸã
2. ããã - ç»åããŒãã£ã³ã°ã®èšå®ã¯äžèŠã§ã
ç»åã䜿çšããŠããå Žåããã¹ãã§ãæ£ãã衚瀺ãããããèšå®ããŸããã
ãŠãŒã¶ãŒã®åçãåŸ ã€ â åçåŸãStep 7ãžé²ã
Step 7: ãã¹ãäœæç²åºŠã®ç¢ºèª [7/8]
ããStep 7/8ãä»åŸã®ãã¹ãäœææãã©ã®åäœã§ãã¹ããäœæããŸããïŒ
1. ã³ã³ããŒãã³ãåäœ - ãã¿ã³ãã«ãŒããªã©ãåå©çšå¯èœãªéšåããšã«ãã¹ã
2. ç»é¢åäœ - Screen/Pageããšã«ãã¹ã
3. éœåºŠç¢ºèª - ãã¹ãäœææã«æ¯å確èªãã
ãã®èšå®ã¯ãããžã§ã¯ãã®CLAUDE.mdã«èšé²ãã以éã®ãã¹ãäœææã«åç
§ããŸããã
ãŠãŒã¶ãŒã®åçãåŸ ã€ â åçåŸãStep 8ïŒãã¡ã€ã«çæïŒãžé²ã
Step 8: ãã¡ã€ã«çæ [8/8]
å šã¹ãããå®äºåŸãåéããæ å ±ãåºã«ä»¥äžã®ãã¡ã€ã«ãçæïŒ
-
test/flutter_test_config.dart- templates/flutter_test_config.dart.md ãåç §
- ãã©ã³ãèšå®ãåæ
- ç»åã¢ã»ããäœ¿çšæã¯MaterialIconsã®ããŒãèšå®ã远å
-
test/helpers/golden_test_helper.dart- templates/golden_test_helper.dart.md ãåç §
- Riverpodäœ¿çšæã¯ templates/golden_test_helper_riverpod.dart.md ãåç §
- ããŒããšãµã€ãºèšå®ãåæ
-
test/helpers/helpers.dart(ãã¬ã«ãã¡ã€ã«)- ãã«ããŒãã¡ã€ã«ããšã¯ã¹ããŒã
-
test/golden_test_issues.md(åé¡è§£æ±ºãã°)- templates/golden_test_issues.md ãåç §
- ãã©ãã«ã·ã¥ãŒãã£ã³ã°ã®èšé²çš
-
ãããžã§ã¯ãã®CLAUDE.mdã«è¿œèš
- Golden Testèšå®ã»ã¯ã·ã§ã³ã远å
- ãã¹ãäœæç²åºŠã®èšå®ãèšé²
CLAUDE.mdãžã®è¿œèšäŸ:
## Golden Test èšå®
### ãã¹ãäœæç²åºŠ
- æ¹é: ã³ã³ããŒãã³ãåäœïŒãŸãã¯ç»é¢åäœ/éœåºŠç¢ºèªïŒ
### ãããžã§ã¯ãåºæã®æ³šæç¹
- ïŒåé¡ãçºçããå Žåãããã«èšé²ãããïŒ
çæåŸã®çºèšäŸ:
ã以äžã®ãã¡ã€ã«ãçæããŸããïŒ
1. test/flutter_test_config.dart
- ã°ããŒãã«ãã¹ãèšå®
- ãã©ã³ãããŒãã£ã³ã°
- ã¢ã€ã³ã³ãã©ã³ãã®ããŒã
2. test/helpers/golden_test_helper.dart
- GoldenTestSizes: ãµã€ãºããªã»ãã
- GoldenTestExtension: pumpGoldenWidget(), pumpGoldenWidgetList()
- GoldenFilePath: ãã¹çæãŠãŒãã£ãªãã£
3. test/golden_test_issues.md
- åé¡è§£æ±ºãã°ïŒãã©ãã«çºçæã«èšé²ïŒ
4. CLAUDE.mdã«èšå®ã远èšããŸãã
- ãã¹ãäœæç²åºŠ: {éžæãããç²åºŠ}
ããã§Golden Testç°å¢ã®æºåãå®äºããŸããïŒ
詊ãã«1ã€ãã¹ããäœæããŠã¿ãŸããïŒã
ã¢ãŒã2: ãã¹ãçæ
Golden Testç°å¢ãååšããæ°èŠãã¹ããäœæããå Žåã
Step 1: ãã¹ã察象ã®ç¢ºèª
ãã©ã®ãŠã£ãžã§ããã®Golden TestãäœæããŸããïŒ
äŸïŒ
- lib/ui/core/components/primary_button.dart
- lib/ui/features/login/widgets/login_screen.dart
ãã¡ã€ã«ãã¹ãŸãã¯ãŠã£ãžã§ããåãæããŠãã ãããã
ãŠãŒã¶ãŒã®åçãåŸ ã€
Step 2: ãã¹ãçš®å¥ã®ç¢ºèª
CLAUDE.mdã®ãã¹ãäœæç²åºŠèšå®ã確èª:
- ãã³ã³ããŒãã³ãåäœãâ ã³ã³ããŒãã³ããã¹ããšããŠé²è¡
- ãç»é¢åäœãâ ç»é¢ãã¹ããšããŠé²è¡
- ãéœåºŠç¢ºèªããŸãã¯èšå®ãªã â 以äžã®è³ªåãè¡ã
ããã®ãŠã£ãžã§ããã¯ä»¥äžã®ã©ã¡ãã§ããïŒïŒçªå·ã§ãçããã ããïŒ
1. ã³ã³ããŒãã³ãïŒãã¿ã³ãã«ãŒããå
¥åãã£ãŒã«ããªã©ïŒ
2. ç»é¢ïŒScreenãPageãªã©ïŒã
ãŠãŒã¶ãŒã®åçãåŸ ã€
Step 3: ãŠã£ãžã§ããè§£æãšèŠåãã§ãã¯
ãŠã£ãžã§ããã³ãŒããè§£æãã以äžããã§ãã¯:
-
ãããã¯ãŒã¯ç»åã®æ€åº (
Image.network,CachedNetworkImageãªã©)- æ€åºããå Žåã以äžãæ¡å :
ãâ ïž ãããã¯ãŒã¯ç»åãæ€åºããŸããã Golden Testã§ã¯ãããã¯ãŒã¯ç»åã¯ååŸã§ããªãããããã¹ãçšã«ãããŒç»åã§çœ®ãæããå¿ èŠããããŸãã å¯Ÿå¿æ¹æ³ïŒ 1. ã¢ãã¯ç»åãããã€ããŒãäœ¿çš 2. ãã¹ãçšã®ã¢ã»ããç»åã«å·®ãæ¿ã 詳ãã㯠knowledge/common-issues.md ã®ããããã¯ãŒã¯ç»åã®å¯Ÿå¿ããåç §ããŠãã ããã ãã®ãŸãŸé²ããŸããïŒã -
æ¥æ¬èªããã¹ããšãã©ã³ãã®ç¢ºèª
- æ¥æ¬èªããã¹ããå«ãŸãããã€ãã©ã³ããRobotoãªã©æ¥æ¬èªé察å¿ã®å Žå:
ãâ ïž æ¥æ¬èªããã¹ããæ€åºããŸããããèšå®ãããŠãããã©ã³ãïŒRobotoïŒã¯æ¥æ¬èªã«å¯Ÿå¿ããŠããŸããã 宿©ã§ã¯OSããã©ãŒã«ããã¯ããŸãããGolden Testã§ã¯æ¥æ¬èªãæ£ãã衚瀺ãããªãå¯èœæ§ããããŸãã å¯Ÿå¿æ¹æ³ïŒ 1. Noto Sans JPãªã©æ¥æ¬èªå¯Ÿå¿ãã©ã³ãã远å 2. flutter_test_config.dartã§ãã©ã³ããããŒã 詳ãã㯠knowledge/common-issues.md ã®ãæ¥æ¬èªãã©ã³ãã®åé¡ããåç §ããŠãã ããã ãã®ãŸãŸé²ããŸããïŒã
Step 4: ãŠã£ãžã§ãããã©ã¡ãŒã¿è§£æ
察象ãŠã£ãžã§ããã®ã³ãŒããèªã¿åããã³ã³ã¹ãã©ã¯ã¿ãã©ã¡ãŒã¿ãè§£æã
è§£æåŸã®çºèšäŸ:
ãPrimaryButtonãè§£æããŸããã
ã³ã³ã¹ãã©ã¯ã¿ãã©ã¡ãŒã¿ïŒ
- text: String (å¿
é )
- onPressed: VoidCallback? (ãªãã·ã§ã³)
- icon: Widget? (ãªãã·ã§ã³)
ãã¹ããããç¶æ
ãéžãã§ãã ããïŒè€æ°éžæå¯ãçªå·ã§ãçããã ããïŒïŒ
1. æå¹ç¶æ
ïŒonPressed != nullïŒ
2. ç¡å¹ç¶æ
ïŒonPressed == nullïŒ
3. ã¢ã€ã³ã³ä»ã
4. é·ãããã¹ã
5. å
šç¶æ
ã®æ¯èŒïŒäžèŠ§è¡šç€ºïŒ
ä»ã«ãã¹ããããç¶æ
ã¯ãããŸããïŒã
ãŠãŒã¶ãŒã®åçãåŸ ã€
Step 5: ãã¹ãã³ãŒãçæ
éžæãããç¶æ ã«åºã¥ããŠãã¹ãã³ãŒããçæã
- ã³ã³ããŒãã³ãã®å Žå: templates/component_golden_test.dart.md ãåç §
- ç»é¢ã®å Žå: templates/screen_golden_test.dart.md ãåç §
çæåŸã®çºèšäŸ:
ã以äžã®ãã¹ããã¡ã€ã«ãçæããŸããïŒ
test/ui/core/components/primary_button_golden_test.dart
ãã¹ãã±ãŒã¹ïŒ
- æå¹ç¶æ
- ç¡å¹ç¶æ
- ã¢ã€ã³ã³ä»ã
- å
šç¶æ
ã®æ¯èŒ
Goldenãã¡ã€ã«ã¯ä»¥äžã«ä¿åãããŸãïŒ
test/ui/core/components/goldens/components/primary_button/
次ã®ã³ãã³ãã§Goldenãã¡ã€ã«ãçæããŠãã ããïŒ
flutter test --update-goldens test/ui/core/components/primary_button_golden_test.dart
â ïž ãããã¹ãç»åãããŸãçæãããªãå Žåã¯ããšã©ãŒå
容ãæããŠãã ãããäžç·ã«è§£æ±ºããŠãããŸããããã
ã¢ãŒã3: ãã¹ãå®è¡ã»æŽæ°
ãã¹ãã®å®è¡æ¹æ³ãæ¡å ã
ãGolden Testã®å®è¡æ¹æ³ïŒ
â ãã¹ãå®è¡ïŒæ€èšŒïŒ:
flutter test test/ui/core/components/primary_button_golden_test.dart
â Goldenãã¡ã€ã«æŽæ°:
flutter test --update-goldens test/ui/core/components/primary_button_golden_test.dart
â å
šGolden Testã®å®è¡:
flutter test --tags golden
â ç¹å®ãã£ã¬ã¯ããªã®Golden TestæŽæ°:
flutter test --update-goldens test/ui/core/components/
å®è¡ããŸããïŒ
â ïž ãã¹ãã倱æããããç»åãæåŸ
éãã«ãªããªãå Žåã¯ããšã©ãŒå
容ãæããŠãã ãããã
ã¢ãŒã4: ãã©ãã«ã·ã¥ãŒãã£ã³ã°
ãã¹ããããŸããããªãå Žåã®å¯Ÿå¿ãããŒã
Step 1: åé¡ã®ç¹å®
ãŠãŒã¶ãŒãããšã©ãŒå 容ãåé¡ã®å ±åãåãããã以äžã確èªïŒ
- ãšã©ãŒã¡ãã»ãŒãž: å ·äœçãªãšã©ãŒå 容
- æåŸ ãšå®éã®å·®: äœãéãã®ã
- ç°å¢æ å ±: Flutter ããŒãžã§ã³ãOS ãªã©
Step 2: åå ã®ç¹å®ãšè§£æ±º
knowledge/common-issues.md ãåç
§ãã該åœããåé¡ãšè§£æ±ºçãææ¡ã
ããããåé¡:
- ãã©ã³ãã衚瀺ãããªã â ãã©ã³ãããŒãã£ã³ã°èšå®
- ç»åã衚瀺ãããªã â ã¢ã»ããããŒãã£ã³ã°ãŸãã¯ã¢ãã¯
- CIç°å¢ã§å€±æ â devicePixelRatioãç°å¢å·®ç°
- æ¥æ¬èªãæååã â æ¥æ¬èªãã©ã³ãèšå®
Step 3: åé¡è§£æ±ºãã°ãžã®èšé²
åé¡ã解決ããããtest/golden_test_issues.md ã«èšé²ã远å ïŒ
ãåé¡ã解決ããŸããïŒ
ä»åŸã®ããã«ããã®åé¡ãšè§£æ±ºæ¹æ³ã `test/golden_test_issues.md` ã«èšé²ããŠãããŸããã
---
## {æ¥ä»}: {åé¡ã®æŠèŠ}
### åé¡
{åé¡ã®è©³çް}
### åå
{åå ã®èª¬æ}
### è§£æ±ºæ¹æ³
{解決æé }
### ä»åŸã®æ³šæç¹
{åæ§ã®åé¡ãé²ãããã®ãã€ã³ã}
---
ããã§åãåé¡ãçºçããŠããããã«å¯Ÿå¿ã§ããŸããã
CLAUDE.mdãžã®è¿œèšïŒå¿ èŠã«å¿ããŠïŒ:
ãããžã§ã¯ãåºæã®æ³šæç¹ãšããŠãCLAUDE.mdã®ãGolden Test èšå®ãã»ã¯ã·ã§ã³ã«ã远èšïŒ
### ãããžã§ã¯ãåºæã®æ³šæç¹
- {解決ããåé¡ã®èŠçŽãšå¯Ÿç}
ãã³ãã¬ãŒãåç §
ãã³ãã¬ãŒããã¡ã€ã«ã¯ templates/ ãã£ã¬ã¯ããªã«ãããŸãïŒ
| ãã³ãã¬ãŒã | çšé |
|---|---|
| flutter_test_config.dart.md | ã°ããŒãã«ãã¹ãèšå® |
| golden_test_helper.dart.md | æšæºãã«ã㌠|
| golden_test_helper_riverpod.dart.md | Riverpod察å¿ãã«ã㌠|
| component_golden_test.dart.md | ã³ã³ããŒãã³ããã¹ã |
| screen_golden_test.dart.md | ç»é¢ãã¹ã |
| golden_test_issues.md | åé¡è§£æ±ºãã° |
ãã¬ããžåç §
å°ã£ããšã㯠knowledge/ ãã£ã¬ã¯ããªãåç
§ïŒ
| ãã¡ã€ã« | å 容 |
|---|---|
| golden-test-concepts.md | Golden Testã®åºç€ç¥è |
| common-issues.md | ããããåé¡ãšè§£æ±ºæ¹æ³ |
| best-practices.md | ãã¹ããã©ã¯ãã£ã¹ |
åºåãã¡ã€ã«æ§é
çæããããã¹ããã¡ã€ã«
test/
âââ flutter_test_config.dart # ã°ããŒãã«èšå®
âââ helpers/
â âââ helpers.dart # ãã¬ã«ãã¡ã€ã«
â âââ golden_test_helper.dart # ãã«ããŒ
âââ ui/
âââ core/
âââ components/
âââ primary_button_golden_test.dart
âââ goldens/
âââ components/
âââ primary_button/
âââ enabled.png
âââ disabled.png
âââ all_states.png
Goldenãã¡ã€ã«ãã¹èŠå
- ã³ã³ããŒãã³ã:
goldens/components/{component_name}/{state_name}.png - ç»é¢:
goldens/screens/{screen_name}/{state_name}.png
éèŠãªæ³šæç¹
- 1åãã€è³ªåãã - è€æ°ã®è³ªåãäžåºŠã«ããªã
- ãŠãŒã¶ãŒã®åçãç¢ºèª - 次ã®ã¹ãããã«é²ãåã«ç¢ºèª
- ãããžã§ã¯ãåºæã®èšå®ãåæ - ããŒãããã©ã³ããRiverpodãªã©
- ãã¹ãå®è¡ã³ãã³ããæ¡å - çæåŸã«å¿ ãå®è¡æ¹æ³ãäŒãã
- devicePixelRatio = 1.0 - ã¹ã¯ãªãŒã³ã·ã§ããã®äžè²«æ§ã®ããå¿ é
