📝 Flutter Quill Test

Test utilities for flutter_quill which include methods to simplify interacting with the editor in test cases.

📚 Table of contents

• 💾 Installation
• 🧪 Testing
• 🤝 Contributing

💾 Installation

Run the following command:

flutter pub add dev:flutter_quill_test

Also add flutter_test as a dependency:

dev_dependencies:
  flutter_quill_test: any # Use latest Version
  flutter_test:
    sdk: flutter

🧪 Testing

To aid in testing applications using the editor an extension to the flutter WidgetTester is provided which includes methods to simplify interacting with the editor in test cases.

Import the test utilities in your test file:

import 'package:flutter_quill_test/flutter_quill_test.dart';

Enter text using quillEnterText:

await tester.quillEnterText(find.byType(QuillEditor), 'test\n');

Complete Example Demo

Here’s a complete example demonstrating how to set up and use flutter_quill along with flutter_quill_test for testing purposes.

Main Application Code (lib/main.dart):

import 'package:flutter/material.dart';
import 'package:flutter_quill/flutter_quill.dart' as quill;

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Quill Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: QuillEditorScreen(),
    );
  }
}

class QuillEditorScreen extends StatefulWidget {
  @override
  _QuillEditorScreenState createState() => _QuillEditorScreenState();
}

class _QuillEditorScreenState extends State<QuillEditorScreen> {
  final quill.QuillController _controller = quill.QuillController.basic();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Quill Editor'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: quill.QuillEditor(
          controller: _controller,
          scrollController: ScrollController(),
          scrollable: true,
          focusNode: FocusNode(),
          autoFocus: true,
          readOnly: false,
          placeholder: 'Add your content here...',
          expands: false,
          padding: EdgeInsets.zero,
        ),
      ),
    );
  }
}

Test Code (test/widget_test.dart):

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:flutter_quill/flutter_quill.dart' as quill;
import 'package:flutter_quill_test/flutter_quill_test.dart';
import 'package:your_app/main.dart'; // Replace with your actual app entry point

void main() {
  testWidgets('Flutter Quill Editor Test', (WidgetTester tester) async {
    // Build our app and trigger a frame.
    await tester.pumpWidget(MyApp());

    // Find the Quill Editor widget by type
    final quillEditorFinder = find.byType(quill.QuillEditor);

    // Ensure the widget exists
    expect(quillEditorFinder, findsOneWidget);

    // Interact with the editor using the test utility
    await tester.quillEnterText(quillEditorFinder, 'Hello, World!\n');

    // Trigger a frame to apply the changes
    await tester.pumpAndSettle();

    // Verify the text entered into the editor
    final state = tester.state<quill.QuillEditorState>(quillEditorFinder);
    expect(state.controller.document.toPlainText(), 'Hello, World!\n');
  });
}

🤝 Contributing

We greatly appreciate your time and effort.

To keep the project consistent and maintainable, we have a few guidelines that we ask all contributors to follow. These guidelines help ensure that everyone can understand and work with the code easier.

See Contributing for more details.

This Markdown document provides a comprehensive guide on how to use the `flutter_quill_test` plugin, including installation steps, testing procedures, and a full demo example illustrating both the application setup and corresponding tests.