---
title: "Mockingbird"
video_id: MK6JHmclC-E
url: https://www.youtube.com/watch?v=MK6JHmclC-E
workflow_page: https://workflows-of-ai.com/workflow/mockingbird
language: en
captions: generated
---

0:00 This video is sponsored by Freely G. If
0:02 you need help with Drupal NAI, get in
0:03 contact with us. Today's video is mostly
0:07 uh focused on developers and testers,
0:09 but also product owners and project
0:11 managers that might be interested in one
0:15 saving money during the development
0:16 phase and to have a solid CI pipeline.
0:20 So, a a continuous integration testing
0:23 pipeline when working with the AI
0:25 module.
0:27 So, I'm going to showcase two things.
0:30 uh that are important when working on
0:32 the AI module today. One thing is how
0:34 you can mock responses.
0:37 So you might uh you might be writing a
0:40 contra module for the Drupal AI. You're
0:42 writing uh you know your perfect prompt.
0:45 You have solved the prompt. So, so
0:47 whatever you're using like OpenAI or
0:49 something is answering correct all the
0:51 time but your code is not working which
0:54 means that you're trying to develop and
0:56 you're you know sending messages to them
0:58 or sending requests to them all the time
1:01 which a cost money b takes time which is
1:04 just frustrating. So I'm going to
1:05 showcase how you can mock this up
1:07 instead very easily without having to
1:11 you know learn about Guzzle mock or
1:13 something like that and uh and
1:15 recreating a API response for one of the
1:18 providers because that's just complex.
1:21 The second part will then go into how
1:23 you can use this in testing uh uh
1:25 pipelines for kernel testing and
1:27 functional testing. So let's get
1:30 started. I have I have installed three
1:32 things here. So the AI module, the AI
1:35 API explorer to have somewhere where we
1:37 can send our prompts and the open AI
1:39 module. So I have now then in this uh
1:43 example solved my perfect prompt. It's
1:46 very simple. In this case, write me two
1:48 sentence about Leon Messi. We just shoot
1:51 it off and you see it takes time.
1:54 Uh but we get a a response back. But
1:57 then maybe our code or whatever we're
1:59 working on is breaking. So we have to
2:01 run it again and it takes some seconds
2:03 for it to run cost a fraction of a scent
2:06 which adds up. Maybe you have to you
2:08 know you're doing something very
2:10 complex. It takes 100 200 tries that you
2:13 send off requests. So how can we um how
2:18 can we solve this? So in the Drupal
2:22 module
2:24 uh sorry in the AI module there's a test
2:27 section of course and we're running a
2:28 lot of tests and one part of what we
2:31 have there is a module called AI test
2:34 and the AI testing module uh by default
2:39 it's just a parrot module so I I I will
2:42 showcase that. So what it can do is that
2:44 you send a request to the AI test
2:46 provider that is a mockup provider. it's
2:49 just going to give you an answer back
2:50 with what you sent. So to be able to
2:53 test it without running uh it in
2:56 automated tests. Uh you have to enable
3:00 it then. But the problem is you're going
3:03 to see here it's not showing up. And the
3:06 reason for this is it's actually not
3:08 going to show things in the test
3:10 directory by default. But you can enable
3:12 this by adding this settings extension
3:14 discovery scan test true. So if you just
3:17 set this in your settings.php and
3:20 reload,
3:21 all of a sudden it's going to be
3:23 visible.
3:27 So we're going to enable this now and
3:30 we're going to use uh first of all then
3:33 my prompt here to
3:37 answer uh using the echo AI provider and
3:41 that's the test provider and it has two
3:43 models doesn't really matter. is just
3:44 for showcasing how listing mod works and
3:47 you see it answers super fast. So it's
3:50 answering hello world input write me to
3:52 sens. So it's just copying this plus the
3:55 configuration we're sending.
3:58 Now when you're working with your module
4:01 when you're testing you of course want a
4:04 response that makes sense to you because
4:06 maybe you're asking for a JSON output
4:08 maybe you're asking for giving back
4:10 tools or something like that. So I'm
4:12 going to show now how you can do this.
4:14 So after you have installed this module,
4:17 there's going to be a provider setting
4:18 for this. But this is not going to be a
4:20 normal provider setting because it's
4:22 actually not using a provider in the
4:24 background. It's just mocking things. So
4:26 what you can do here now then is you can
4:28 turn on catch results.
4:31 You can also catch processing time. So
4:33 if you're working on front end issues
4:36 where actual response time might matter
4:40 or you're working with longunning task
4:43 where the processing time might lead to
4:45 timeouts and stuff like this. You can
4:47 actually replicate this by uh turning
4:50 this on. I'm going to showcase this and
4:52 I'm going to showcase how you can you
4:53 know after you have built something can
4:55 turn it off as well.
4:58 So after we have turned this off, we can
5:01 just uh let's reload, take our thing
5:04 here, and we're just going to call
5:05 OpenAI again because what we want to
5:07 mock up now is a replica of how Open AI
5:10 would answer this question. I'm just
5:13 going to click ask the AI.
5:16 We get our response back. I go back to
5:19 this tab and there's going to be under
5:22 content AI mock provider results. This
5:25 is only available as long as you have
5:27 this module uh enabled. And you see we
5:30 have a result here. So if we click on
5:32 that, you can see the request here. You
5:35 can see the response and you have the
5:37 whole raw output. So if you need, you
5:39 know, you need the system fingerprint
5:42 from OpenAI for whatever reason, it's
5:44 actually there. You can see it time it
5:46 took. So 2.7 seconds. We can also now
5:50 when we want to replay it, change it. uh
5:54 operation type and tags it store as
5:56 well. But say we want to use that now
5:58 the only thing we have to do is click
6:00 mock enabled save it and now it can
6:04 start mocking it. Oh what we should do
6:06 as well we should give it uh um
6:11 uh
6:13 name as well so we know which it is. Uh
6:17 but what you also should do when you're
6:20 happy with it just go back turn off this
6:26 uh and then it's not going to catch
6:28 these results anymore. So if we go back
6:30 to the chat generation explorer now and
6:34 choose echo AAI do the exact same
6:37 message. So it has to be the exact same
6:39 input. So it's it's finding it on that.
6:42 You're going to see it's loading exactly
6:44 2.7 seconds and it's giving back the
6:48 results exactly like OpenAI did.
6:51 However, if I write uh messes here,
6:54 you're just going to see that all of a
6:56 sudden it's using it the normal
6:59 uh uh it's using the mirroring method.
7:02 So now we have created something that
7:04 works exactly like OpenAI and we can try
7:06 it over and over without it costing
7:08 money. can also go in and edit and say
7:11 now then we we don't want any sleep time
7:13 because we're just doing backend
7:15 development. We don't care about the
7:16 actual time it takes. If I click now,
7:19 you see it's coming directly. It's super
7:21 fast. So that is how you can mock up
7:25 responses. The only important thing is,
7:28 you know, make sure you turn it off
7:29 after uh you have catch your response so
7:32 you don't end up with a lot of unnamed
7:34 responses and you don't know how to find
7:37 the one you're looking for.
7:40 Um
7:42 so let's uh jump to the next thing that
7:46 is testing.
7:47 So when it comes to testing,
7:51 one thing I have done here in my
7:53 response, I added 300 milliseconds sleep
7:55 time. So it's enough for the ejax to
7:58 actually truly load. It's uh not long
8:01 enough that it actually becomes a
8:03 problem when you start stacking tests.
8:06 Uh so what we want to do in this case is
8:10 that we want to try that to see if the
8:12 chat generation explorer actually works.
8:14 So you have a admin user that goes to
8:16 this URL, puts this into the message,
8:19 clicks ask the AI and should get back
8:22 this results if it's using the EQI GPT
8:25 tests.
8:26 Uh I have already written the test. So
8:29 first of all I have a runner here that I
8:32 can run and then I have the test. I'm
8:34 not uh going to write it live takes too
8:37 long time. I will just show what it
8:38 does. So it's using the uh function
8:40 JavaScript tests. There's a base class
8:43 in the Drupal AI. So if you're actually
8:45 using Drupal AI for this or you're
8:48 writing test for Drupal AI that's
8:50 functional JavaScript test, use this
8:52 base class. I'm going to showcase one.
8:54 Then we install all the modules. So AI
8:57 AI test file AI API explorer and the
9:00 user. If you're using the base uh class
9:03 function, add a screenshot module name
9:05 is good. I'm going to showcase why also.
9:08 So that is just for categorizing where
9:10 where screenshots go. We set it up. The
9:14 only setup we do is make sure Echo AI
9:16 GPD test is the default provider for AI.
9:19 So that means if you if I were to reload
9:22 this page, AI echoi GPT test would be
9:25 there. So in this case, I'm not going to
9:27 test clicking around there. Then we
9:30 create a user. The important thing is
9:32 that it has the uh uh permission access
9:35 AI prompt because that is the thing you
9:37 need to be able to see here. Uh then you
9:40 go to Drupal uh sorry you log in that
9:43 user you go to this uh um URL and then
9:47 you have this that take screenshot that
9:50 is part of this base class. You just
9:52 have to give it a name. You don't have
9:54 to think about extensions or folders or
9:56 stuff. Just give it a name. So this is
9:58 message one before message.
10:01 We then go to the page uh and
10:06 uh
10:07 we fill in the message. No sorry we get
10:10 the page so we can actually start
10:12 interacting with them. We fill in the
10:14 message one. So that's the name of this
10:16 one. Write me to sensor about Leonel
10:19 Messi.
10:21 We take the screenshot again after it's
10:23 filled in just to see that this is
10:25 working. It's very good for debugging,
10:26 but it's also good later when you're
10:29 running this in a CI platform to see
10:31 where something went wrong.
10:34 We click on edit submit. So that is this
10:37 button. Take another screenshot while
10:40 the Ajax is running. We're waiting on
10:42 the Ajax request to finish. Take another
10:45 screenshot. And then the text should
10:48 contain this because that is part of
10:52 Yeah, you can see here should contain
10:54 this. So if we run this now
10:57 uh this is just going to fail
11:02 uh because
11:05 this runs so a functional javascript
11:08 test sets up its own environment this
11:10 means that uh what we did here before
11:13 with a mock provider results oh sorry I
11:15 have it there this is not available on
11:18 that website so it's not working there
11:21 so how do I get that in there in a
11:23 consistent manner where it always run.
11:25 Well, under the drop down here, there is
11:27 export to test.
11:30 This is going to now export a JAML file.
11:34 And the thing I need to do now is under
11:36 tests. So, this is a uh this is a this
11:40 is a directory name space you have to
11:42 use. So, you have to do resources AI
11:44 test request and operation type chat in
11:47 this case. And then you can just uh copy
11:51 in
11:53 the actual file
11:56 the on messy prompt and you can see the
11:58 file here. So if you want to change the
12:00 wait time to 200 milliseconds you can
12:02 change it save it here and then we try
12:05 to reload this and now it should be
12:07 aware of this.
12:10 Uh yeah by the way I did a hardcoded
12:14 thing here. That's maybe not how you
12:16 should be doing it.
12:17 So uh now it ran and this uh uh
12:22 screenshots by the way then if you want
12:24 to see it on your local environment you
12:26 can use sites default files simple test
12:29 screenshots and you see there's a AI API
12:32 explorer chat messy test then you can go
12:35 in and see how it looks beforehand. So,
12:37 we're not using we're using the base
12:39 theme here, right? That's why it looks
12:41 so ugly. But you can see it has loaded
12:43 it. Second picture, it has uh filled in
12:49 the message board.
12:51 Third picture,
12:53 it's processing the Ajax.
12:57 And last picture, it got back the
12:59 result. So, we we're testing end to end.
13:02 So, this actually works. I could push
13:05 this. We already have test for the API
13:06 explorer, but now I could push this. And
13:09 the interesting thing is then at least
13:11 if you're using uh the AI module, but
13:14 this is probably true. I think as long
13:17 as you use the GitLab template,
13:20 uh if I go to any test here
13:24 and take the PHP unit, so that's the
13:27 part that runs it. We can go to browse
13:32 and under web sites. You're not going to
13:35 see the messy thing. We have another
13:37 thing here. Default file. So, it's the
13:39 exact same place. Simple tests,
13:41 screenshots,
13:43 and we take the AI API explorer chat
13:46 explorer test. You have the actual
13:48 images here. So, for every test that's
13:51 ever run, you can see exactly what's
13:54 happened with your functional test. This
13:57 is not available in kernel test of
13:58 course but you can use the same methods
14:00 for kernel test for uh replaying
14:06 data.
14:07 Um yeah so that is it. This is how you
14:11 mock and write tests using the Drupal AI
14:14 module. Thank you.