1 00:00:00,090 --> 00:00:04,120 In this lecture, we are going to explore Cyprus for running tests. 2 00:00:04,140 --> 00:00:09,890 Cyprus makes this process as painless as possible before running Cyprus. 3 00:00:09,900 --> 00:00:12,890 Let's explore the files in your project. 4 00:00:12,900 --> 00:00:16,740 A few files have been created for helping you get started. 5 00:00:16,740 --> 00:00:20,610 Let's start with the configuration file in your editor. 6 00:00:20,610 --> 00:00:25,080 Open the Cyprus dot config dots file. 7 00:00:27,260 --> 00:00:33,250 And the configuration we're importing the define config function for code completion. 8 00:00:33,260 --> 00:00:36,110 It's completely optional to use this function. 9 00:00:36,110 --> 00:00:40,700 However, it'll be easier to configure the file with code completion. 10 00:00:40,700 --> 00:00:47,330 The last thing you want is a typo in your configuration file and this file the function is exported 11 00:00:47,330 --> 00:00:48,410 with an object. 12 00:00:48,410 --> 00:00:52,100 In this object we can add the configuration settings. 13 00:00:52,310 --> 00:00:57,800 Cypress supports components and E to E testing for this demonstration. 14 00:00:57,800 --> 00:01:01,160 We're interested solely in E to E testing. 15 00:01:01,160 --> 00:01:04,430 Therefore we can add the E to E object. 16 00:01:04,430 --> 00:01:08,900 Within this object, we're setting the base URL to our application. 17 00:01:08,900 --> 00:01:11,210 Cypress will launch a browser. 18 00:01:11,210 --> 00:01:15,620 We can instruct the browser to load our application during testing. 19 00:01:15,650 --> 00:01:20,990 This saves us from performing this action from within our tests by defaults. 20 00:01:20,990 --> 00:01:25,460 Most angular apps are served locally with Port 4200. 21 00:01:25,490 --> 00:01:28,370 We do not need to make further modifications. 22 00:01:28,370 --> 00:01:34,100 In the resource section of this lecture, I provide a link to the official documentation page for the 23 00:01:34,100 --> 00:01:35,660 configuration settings. 24 00:01:37,830 --> 00:01:43,680 I highly recommend checking out this page for a complete list of settings for our application. 25 00:01:43,680 --> 00:01:46,470 The default settings will work for most projects. 26 00:01:46,470 --> 00:01:52,140 As long as Cyprus can open our application, we can consider our configuration complete. 27 00:01:52,140 --> 00:01:56,220 Let's head back to the editor in our projects directory. 28 00:01:56,250 --> 00:01:59,280 A new folder was created called Cyprus. 29 00:01:59,310 --> 00:02:02,880 If we look inside, we will be greeted with a few files. 30 00:02:02,880 --> 00:02:07,680 First and foremost, a TypeScript configuration file will be available. 31 00:02:09,840 --> 00:02:14,670 In most cases, you will likely want to write your tests with TypeScript. 32 00:02:14,700 --> 00:02:18,270 It would be a pain to reconfigure TypeScript for Cyprus. 33 00:02:18,300 --> 00:02:20,220 Luckily we don't have to. 34 00:02:20,250 --> 00:02:26,220 The extends option will integrate an existing configuration file with the current file. 35 00:02:26,400 --> 00:02:33,870 The most important setting in this file is the compiler options dot types property similar to Jasmine 36 00:02:33,870 --> 00:02:38,820 Cypress will introduce a set of functions for performing actions in the browser. 37 00:02:38,850 --> 00:02:42,100 TypeScript will be unfamiliar with these functions. 38 00:02:42,120 --> 00:02:47,460 As a result, errors will be thrown by adding the cypress types to the array. 39 00:02:47,490 --> 00:02:49,680 We can avoid these types of errors. 40 00:02:49,710 --> 00:02:51,510 Let's explore the folders. 41 00:02:51,510 --> 00:02:54,300 Firstly, we have an E to E folder. 42 00:02:54,330 --> 00:02:56,860 This folder will contain our tests. 43 00:02:56,880 --> 00:02:59,580 We will be spending most of our time in this folder. 44 00:02:59,730 --> 00:03:02,870 Up next, we have a folder called Fixtures. 45 00:03:02,880 --> 00:03:06,090 You may want to test an application with dummy data. 46 00:03:06,120 --> 00:03:12,600 For example, you may want to create fake users rather than storing the user's registration details 47 00:03:12,600 --> 00:03:13,420 in a test. 48 00:03:13,440 --> 00:03:16,260 You can outsource user data in this file. 49 00:03:16,290 --> 00:03:19,590 Fixtures are available globally in your tests. 50 00:03:19,620 --> 00:03:27,270 Afterward, we have a folder called Support Supports R files that Cypress will load before tests run. 51 00:03:27,330 --> 00:03:30,890 A common use case is to define a set of commands. 52 00:03:30,900 --> 00:03:35,220 You can think of commands as actions you can perform in the browser. 53 00:03:35,250 --> 00:03:42,840 For example, your tests may need to log in to the application, writing this type of action in multiple 54 00:03:42,840 --> 00:03:47,220 tests as an efficient rather than repeating the same lines of code. 55 00:03:47,250 --> 00:03:52,710 You can outsource this logic into a command which can be executed from your tests. 56 00:03:52,860 --> 00:03:56,880 Now that we have an overview of the files, let's run Cyprus. 57 00:03:56,880 --> 00:04:01,240 We can run a single command for launching Cyprus in your editor. 58 00:04:01,260 --> 00:04:04,380 Open the package dot json file. 59 00:04:06,720 --> 00:04:08,670 Under the scripts object. 60 00:04:08,670 --> 00:04:11,670 A new command was created called e2e. 61 00:04:11,700 --> 00:04:14,580 There are other commands, but we won't worry about them. 62 00:04:14,610 --> 00:04:18,089 The most important command is the E to E command. 63 00:04:18,120 --> 00:04:20,880 This command will perform two actions. 64 00:04:20,880 --> 00:04:23,410 Firstly, it will launch our application. 65 00:04:23,430 --> 00:04:25,860 Secondly, it'll launch Cyprus. 66 00:04:25,890 --> 00:04:28,410 Let's give it a try in the command line. 67 00:04:28,410 --> 00:04:29,880 Run the NPM. 68 00:04:29,880 --> 00:04:31,920 Run E to E commands. 69 00:04:34,050 --> 00:04:38,820 During this process, the program may take a while to open the patients. 70 00:04:41,120 --> 00:04:45,060 After a few moments, Cyprus should launch a new program. 71 00:04:45,080 --> 00:04:50,990 The welcome screen will ask you to select a specific type of testing for our case. 72 00:04:50,990 --> 00:04:53,810 We're going to configure E to E testing. 73 00:04:53,810 --> 00:04:55,280 Select this option. 74 00:04:57,750 --> 00:04:58,020 Pop. 75 00:04:58,020 --> 00:05:00,350 Next, we can select a browser. 76 00:05:00,360 --> 00:05:05,310 In my opinion, Chrome provides the easiest experience for running tests. 77 00:05:05,310 --> 00:05:08,550 In most cases, you will select this option. 78 00:05:08,550 --> 00:05:11,580 However, feel free to use a different browser. 79 00:05:11,580 --> 00:05:13,380 I'm going to use Chrome. 80 00:05:15,530 --> 00:05:18,710 Soon after, Chrome will launch a test runner. 81 00:05:18,740 --> 00:05:23,990 On this page we are given a list of test files in our project by default. 82 00:05:24,020 --> 00:05:26,480 The package should have added an example. 83 00:05:26,480 --> 00:05:27,090 Test. 84 00:05:27,110 --> 00:05:28,460 Let's click on it. 85 00:05:30,680 --> 00:05:34,640 This will cause the test runner to open our application in a window. 86 00:05:34,670 --> 00:05:39,170 On the left, we have a list of actions being performed by Cyprus. 87 00:05:39,200 --> 00:05:41,660 The test is going to inevitably fail. 88 00:05:41,690 --> 00:05:43,120 That's perfectly fine. 89 00:05:43,130 --> 00:05:46,400 We'll explore the test file in the next lecture. 90 00:05:46,400 --> 00:05:52,790 For now, as long as the application appears in the browser, we can consider our test a success. 91 00:05:52,880 --> 00:05:53,610 Great. 92 00:05:53,630 --> 00:05:57,520 Our application is ready for testing for the rest of this section. 93 00:05:57,530 --> 00:06:01,310 You should always have Cyprus running unless I state otherwise. 94 00:06:01,310 --> 00:06:04,550 In the next lecture let's begin writing a test.