Testing with Jest

Jest Testing

Testing in this application is done by using the javascript testing Framework Jest. In order to find the written javascript tests, go to this folder path

https://github.com/compgirl123/TutifySoen490/tree/master/tutify/test

Running tests in the console:

npm test

In this folder path, you will see a subfolder called "testDb". This contains .json files of mock data that was copied from our database calls.

https://github.com/compgirl123/TutifySoen490/tree/master/tutify/test/testDb

To run a single test, use: npm test -t name-of-test

How to get Mocked data:

1. Go to https://cloud.mongodb.com/ and then go to our collections page.
2. On the left side menu, look for "Services" and then "Stitch".
3. After clicking on Stich, you can see that Tutify and Triggers_StitchApp are present. Press on Tutify.
4. After pressing on Tutify, this will transport you to another page. After you are redirected, go to the left side bar and find the option Build and 3rd party services.
5. Click on http and you will see a list of tests that will be run.
6. Click on any of the tests and examine the code to help you write a test for the database of your choice.
7. Click on Settings and make sure the HTTP Method is set to Get.
8. Copy the link in the Webhook URL and run it in a service such as Postman or Insomnia.
9. Copy the output into a json in the testDb folder.

Writing Tests:

A suggestion for writing good and organized tests would be to write a test for every component and testing both the Ui and the functionality of the test (ie: testing the headings of the page as well as the states of the variables.

Before Writing your Tests:

1. Before testing a new component, make sure to include the word export before your class name example :
   export class DocList extends React.Component

2. Name your tests with the name of the component being tested as well as adding .specafter the name and adding .js after .spec.

After this, you can start writing your tests.

Writing your Tests:

To write your tests, simply start by creating a new file name and copying one of the existing tests available at the link above. These tests contain the basic elements needed in order to set up a template for your jest tests.

Here are some important elements included in a Jest Unit Test

Configuration of an adapter for the test. Should always be included in a test: configure({ adapter: new Adapter() });

Main body wrapping that can contain many tests. This describes what a set of tests are testing and what they do. describe('The Student Dashboard Page', () => {});

Setting up the mount (the main container that will ensure the component is in). This code is included before the individual test ('it') is written (more on that later). let mount;

beforeAll(() => { mount = createMount(); });

Individual test contained in a describe test body. The "it" function gives a more detailed account of the actual test being run. The actual test is run inside of here. it('Add To Do Item to List', () => {})

Setting up wrapper to run tests on. Use both shallow and mount as some tests require one or both. const wrapper = mount(<Announcements></Announcements>); const wrapper_shallow = shallow(<Announcements></Announcements>);

Setting up the class component.
const announcement_class_wrapper = wrapper.find(AnnouncementsClass);

Setting up the state of an element. announcement_class_wrapper.setState({ aTitle: announcement.title });

Finding a TextField element on the page and using testing (expecting function) in order to see if the element on the page with the state set equals what it is expected to equal.

const announcementTitle = wrapper.find(TextField).at(0); expect(announcementTitle.props().value).toBe(announcement.title);