विजेट परीक्षण के सिद्धांत
अलग-अलग विजेट के UI और व्यवहार को स्वतंत्र रूप से जाँचने तथा दृश्य शुद्धता सुनिश्चित करने के लिए विजेट परीक्षण लिखना सीखें।
विजेट परीक्षण के सिद्धांत, CoddyKit पर Flutter मोबाइल विकास का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Flutter मोबाइल विकास सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Flutter मोबाइल विकास पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
विजेट परीक्षण क्या है
विजेट परीक्षण में आपका स्वागत है! यह मज़बूत Flutter ऐप बनाने का एक महत्वपूर्ण हिस्सा है।
विजेट परीक्षणों से आप जाँच सकते हैं कि आपके अलग-अलग यूआई घटक (विजेट) अपेक्षा के अनुसार दिखते और व्यवहार करते हैं या नहीं। इसे अपने ऐप के प्रत्येक हिस्से को सूक्ष्मदर्शी के नीचे रखने जैसा समझें।
- केंद्रबिंदु: अलग-अलग विजेट।
- उद्देश्य: यूआई रेंडरिंग और इंटरैक्शन को अलग-अलग जाँचना।
`flutter_test` में गहराई से जाना
Flutter विजेट परीक्षण लिखने के लिए flutter_test नाम का एक विशेष पैकेज प्रदान करता है। यह नए Flutter प्रोजेक्ट में अपने-आप शामिल होता है।
विजेट परीक्षण का मुख्य आधार testWidgets फ़ंक्शन है। यह आपको अपने विजेट के साथ इंटरैक्ट करने के लिए एक WidgetTester और उन्हें चलाने का वातावरण देता है।
परीक्षण कहाँ रखे जाते हैं
Flutter की परीक्षण फ़ाइलें आमतौर पर आपके प्रोजेक्ट के test/ फ़ोल्डर में रहती हैं। उदाहरण के लिए, यदि आपके पास lib/my_widget.dart में कोई विजेट है, तो उसका परीक्षण test/my_widget_test.dart में हो सकता है।
हर परीक्षण फ़ाइल की शुरुआत package:flutter_test/flutter_test.dart को इम्पोर्ट करने से होती है और उसमें एक या अधिक testWidgets ब्लॉक परिभाषित होते हैं।
आपका परीक्षण सहायक: `WidgetTester`
WidgetTester परीक्षण के दौरान विजेट के साथ इंटरैक्ट करने का आपका मुख्य उपकरण है। यह निम्नलिखित विधियाँ प्रदान करता है:
pumpWidget(): विजेट ट्री को रेंडर करता है।find: ट्री में विजेट खोजता है।tap(): विजेट पर टैप करने का अनुकरण करता है।pump(): विजेट ट्री को फिर से बनाता है, अक्सर किसी इंटरैक्शन के बाद।
यह अनुकरण करने में सहायता करता है कि उपयोगकर्ता आपके ऐप के साथ कैसे इंटरैक्ट करेगा।
एक मूल Stateless विजेट का परीक्षण
आइए एक सरल StatelessWidget का परीक्षण करें। मान लीजिए कि कोई विजेट केवल कुछ टेक्स्ट दिखाता है।
हम अपने विजेट को दिखाने के लिए tester.pumpWidget() का उपयोग करेंगे, फिर टेक्स्ट खोजने के लिए tester.find और अंत में यह सुनिश्चित करने के लिए expect() का उपयोग करेंगे कि वह मौजूद है।
import 'package:flutter/material.dart';
class MyTextWidget extends StatelessWidget {
final String message;
const MyTextWidget({Key? key, required this.message}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Test')),
body: Center(
child: Text(message),
),
),
);
}
}
void main() {
runApp(const MyTextWidget(message: "Hello CoddyKit!"));
}कोड: `MyTextWidget` का परीक्षण
यहाँ बताया गया है कि हमारे MyTextWidget के लिए test कैसे लिखा जाता है। ध्यान दें कि rendering के लिए उचित context देने हेतु इसे MaterialApp और Scaffold में wrap किया गया है।
हम text को खोजने के लिए find.text() का उपयोग करते हैं और उसकी मौजूदगी की पुष्टि करने के लिए findsOneWidget के साथ expect() का उपयोग करते हैं।
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
// Assume MyTextWidget is defined in a separate file or above for testing
class MyTextWidget extends StatelessWidget {
final String message;
const MyTextWidget({Key? key, required this.message}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Test')),
body: Center(
child: Text(message),
),
),
);
}
}
void main() {
testWidgets('MyTextWidget displays correct message', (WidgetTester tester) async {
// Build our widget and trigger a frame.
await tester.pumpWidget(const MyTextWidget(message: 'Hello CoddyKit!'));
// Verify that our message appears.
expect(find.text('Hello CoddyKit!'), findsOneWidget);
expect(find.text('Goodbye!'), findsNothing);
});
}Widgets के साथ इंटरैक्ट करना
Widget tests उपयोगकर्ता की क्रियाओं का अनुकरण कर सकते हैं। यह StatefulWidget वाले widgets या buttons, text fields आदि वाले widgets की जाँच के लिए बेहद आवश्यक है।
tester.tap(finder):finderसे मिले widget पर tap करने का अनुकरण करता है।tester.enterText(finder, text): किसीTextFieldमें text दर्ज करता है।tester.pump(): state में बदलाव करने वाली किसी क्रिया, जैसे button tap, के बाद UI को फिर से बनाने और उन बदलावों को दिखाने के लिए आपकोpump()को call करना आवश्यक है।
एक बुनियादी Stateful Widget की जाँच
आइए एक सरल counter widget बनाते हैं। इसमें एक संख्या दिखाने वाला text और उसे बढ़ाने वाला button है। हम पहले इसकी initial state और फिर tap के बाद इसके व्यवहार की जाँच करेंगे।
import 'package:flutter/material.dart';
class CounterWidget extends StatefulWidget {
const CounterWidget({Key? key}) : super(key: key);
@override
State<CounterWidget> createState() => _CounterWidgetState();
}
class _CounterWidgetState extends State<CounterWidget> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Counter')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
key: const Key('counterText'), // Added key for easy finding
style: Theme.of(context).textTheme.headlineMedium,
),
],
),
),
floatingActionButton: FloatingActionButton(
key: const Key('incrementButton'), // Added key
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
),
);
}
}
void main() {
runApp(const CounterWidget());
}कोड: <code>CounterWidget</code> की जाँच
यह हमारे CounterWidget के लिए test है। पहले हम initial count की पुष्टि करते हैं, फिर उसकी Key का उपयोग करके increment button पर tap करने का अनुकरण करते हैं और अंत में जाँचते हैं कि count अपडेट हो गया है।
tester.tap() के बाद UI को फिर से बनाने और state में बदलाव देखने के लिए tester.pump() call करना याद रखें।
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
// Assume CounterWidget is defined in a separate file or above for testing
class CounterWidget extends StatefulWidget {
const CounterWidget({Key? key}) : super(key: key);
@override
State<CounterWidget> createState() => _CounterWidgetState();
}
class _CounterWidgetState extends State<CounterWidget> {
int _counter = 0;
void _incrementCounter() {
setState(() { _counter++; });
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Counter')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text('You have pushed the button this many times:'),
Text('$_counter', key: const Key('counterText'), style: Theme.of(context).textTheme.headlineMedium),
],
),
),
floatingActionButton: FloatingActionButton(
key: const Key('incrementButton'),
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
),
);
}
}
void main() {
testWidgets('CounterWidget increments counter on button tap', (WidgetTester tester) async {
// Build our CounterWidget.
await tester.pumpWidget(const CounterWidget());
// Verify that the counter starts at 0.
expect(find.text('0'), findsOneWidget);
expect(find.text('1'), findsNothing);
// Tap the 'increment' icon and trigger a frame.
await tester.tap(find.byKey(const Key('incrementButton')));
await tester.pump(); // Rebuild the widget after interaction
// Verify that the counter has incremented.
expect(find.text('0'), findsNothing);
expect(find.text('1'), findsOneWidget);
});
}आवश्यक Test Matchers
Tests लिखते समय, conditions की पुष्टि करने के लिए आप विभिन्न "matchers" के साथ expect() का उपयोग करेंगे। यहाँ कुछ सामान्य matchers दिए गए हैं:
findsOneWidget: finder से मेल खाने वाले ठीक एक widget की अपेक्षा करता है।findsNWidgets(N): ठीक N widgets की अपेक्षा करता है।findsNothing: finder से मेल खाने वाले किसी भी widget की अपेक्षा नहीं करता।findsWidgets: एक या अधिक widgets की अपेक्षा करता है।
इनकी सहायता से आप screen पर क्या होना चाहिए या नहीं होना चाहिए, इसकी सटीक पुष्टि कर सकते हैं।
Testing पर त्वरित जाँच
मान लीजिए कि आपके पास Text('Hello World') widget है। tester.pumpWidget() call करने के बाद screen पर यह text दिखाई दे रहा है या नहीं, इसकी पुष्टि करने के लिए आप किस find method का उपयोग करेंगे?
पुनरावलोकन: Widget Testing की बुनियादी बातें
बहुत अच्छा! आपने widget testing की मूल बातें सीख ली हैं:
- Widget tests अलग-अलग UI components की पुष्टि करते हैं।
flutter_testpackagetestWidgetsऔरWidgetTesterजैसे tools उपलब्ध कराता है।- Rendering के लिए
tester.pumpWidget(), खोजने के लिएfind, और पुष्टि करने के लिए matchers के साथexpect()का उपयोग करते हैं। tester.tap()औरtester.pump()उपयोगकर्ता की क्रियाओं का अनुकरण करते हैं और UI को अपडेट करते हैं।
अब आप testing की अधिक उन्नत तकनीकों को explore करेंगे!
एआई शिक्षक के साथ Dart सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 22
- पाठ
- 88
अक्सर पूछे जाने वाले प्रश्न
क्या “विजेट परीक्षण के सिद्धांत” पाठ निःशुल्क है?
हाँ — Flutter मोबाइल विकास अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “विजेट परीक्षण के सिद्धांत” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Flutter मोबाइल विकास पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“विजेट परीक्षण के सिद्धांत” में मैं क्या सीखूँगा?
अलग-अलग विजेट के UI और व्यवहार को स्वतंत्र रूप से जाँचने तथा दृश्य शुद्धता सुनिश्चित करने के लिए विजेट परीक्षण लिखना सीखें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Flutter मोबाइल विकास का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Flutter मोबाइल विकास शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Flutter मोबाइल विकास शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।
“विजेट परीक्षण के सिद्धांत” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Flutter मोबाइल विकास पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Flutter मोबाइल विकास पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- विजेट परीक्षण के सिद्धांत
- एकीकरण परीक्षण
- डीबगिंग उपकरण और तकनीकें
- यूनिट टेस्टिंग और मॉकिंग